export default internals.PostFormComponent = Vue.component('post-form', {
template: '<div class="post-form-container">' +
- '<h1>sup.</h1>' +
- '<textarea :disabled="submitting" v-model="content" class="post-content-input" placeholder="tell us something" maxlength=255></textarea>' +
+ '<h1>hi {{authService.user.name}}</h1>' +
+ '<button v-show="!active" class="post-submit" v-on:click="activate">Post something.</button>' +
+ '<textarea v-show="active" :disabled="submitting" v-model="content" class="post-content-input" placeholder="tell us something" maxlength=255></textarea>' +
'<p v-show="message" class="post-form-error">{{message}}</p>' +
- '<button :disabled="submitting" class="post-submit" v-on:click="submit">Go.</button>' +
+ '<button v-show="active" :disabled="submitting" class="post-submit" v-on:click="submit">Go.</button>' +
'</div>',
data() {
content: '',
message: '',
submitting: false,
+ active: false,
authService: new AuthService()
};
},
methods: {
+
+ // Activates the form.
+
+ activate() {
+
+ this.active = true;
+ },
+
+ // Creates a post
+
submit() {
this.submitting = true;
this.content = '';
this.message = '';
this.submitting = false;
+ this.active = false;
}).catch((err) => {
console.error(err.stack);