Add Comments (#4)

[rbdr/dasein] / app / components / post_form.js

diff --git a/app/components/post_form.js b/app/components/post_form.js
index cee17b0785e8bceea716e7e79139acfe3d1694d6..1f45f0c53f4b222cfb3427e4a89c0db7f5c36f27 100644 (file)
--- a/app/components/post_form.js
+++ b/app/components/post_form.js
@@ -8,10 +8,11 @@ internals.kPostsRoute = '/api/posts';
 
 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() {
@@ -20,11 +21,22 @@ export default internals.PostFormComponent = Vue.component('post-form', {
       content: '',
       message: '',
       submitting: false,
+      active: false,
       authService: new AuthService()
     };
   },
 
   methods: {
+
+    // Activates the form.
+
+    activate() {
+
+      this.active = true;
+    },
+
+    // Creates a post
+
     submit() {
 
       this.submitting = true;
@@ -44,6 +56,7 @@ export default internals.PostFormComponent = Vue.component('post-form', {
         this.content = '';
         this.message = '';
         this.submitting = false;
+        this.active = false;
       }).catch((err) => {
 
         console.error(err.stack);