Display password modal on initial setup

components/indieHeader.vue

@@ -17,7 +17,6 @@ export default {
     bio () { return this.$store.state.bio },
     signedIn () { return this.$store.state.signedIn },
     configured () { return this.$store.state.configured }
-
   },
   methods: {
     followButtonPress () {

components/settings.vue

 <template>
-  <form @submit.prevent='submit'>
-    <label for='password'>Password</label>
-    <div class='control'>
-      <no-ssr>
-        <vue-password v-model='password' classes='input'>
-          <template slot="password-toggle" slot-scope="props">
-            <button class="button VuePassword__Toggle"
-                    type="button"
-                    v-on:click = "props.toggle"
-                    v-text="props.type === 'password' ? 'Show' : 'Hide'"
-            >
-            </button>
-          </template>
-        </vue-password>
-      </no-ssr>
-    </div>
-  </form>
+  <div>
+    <form @submit.prevent='submit'>
+
+      <b-field label='Name'>
+        <b-input v-model='name'></b-input>
+      </b-field>
+
+      <b-field label='Bio'>
+        <b-input v-model='bio'></b-input>
+      </b-field>
+    </form>
+
+    <b-modal :active.sync='modalIsActive' scroll='keep'>
+      <!-- <div class='modal-background'></div> -->
+      <div class='modal-card' style='width: auto'>
+        <header class='modal-card-head'>
+          <p class='modal-card-title'>Get started!</p>
+        </header>
+        <section class='modal-card-body'>
+          <b-field label='Password'>
+            <div id='password-field' class='control'>
+              <no-ssr>
+                <vue-password v-model='password' classes='input'>
+                  <template slot="password-toggle" slot-scope="props">
+                    <button class="button VuePassword__Toggle"
+                            type="button"
+                            v-on:click = "props.toggle"
+                            v-text="props.type === 'password' ? 'Show' : 'Hide'"
+                    >
+                    </button>
+                  </template>
+                </vue-password>
+              </no-ssr>
+            </div>
+          </b-field>
+        </section>
+        <footer class="modal-card-foot">
+          <button class='button is-fullwidth is-primary'>Set password</button>
+        </footer>
+      </div>
+    </b-modal>
+  </div>
 </template>
 
 <script>
   export default {
+    computed: {
+      name: {
+        get () {
+          return this.$store.state.name
+        },
+        set (value) {
+          this.$store.commit('name', value)
+        }
+      },
+      bio: {
+        get () {
+          return this.$store.state.bio
+        },
+        set (value) {
+          this.$store.commit('bio', value)
+        }
+      },
+      configured: {
+        get () {
+          return this.$store.state.configured
+        },
+        set (value) {
+          this.$store.commit('configured', value)
+        }
+      }
+    },
     data () {
       return {
-        password: ''
+        password: '',
+        modalIsActive: !this.configured
       }
     },
     methods: {
@@ -41,4 +93,29 @@
   button.button.VuePassword__Toggle {
     min-width: 80px;
   }
+
+  div.control {
+    /* margin-top: 1em; */
+    margin-bottom: 1em;
+  }
+
+  div.card-content {
+    padding-top: 1em;
+  }
+
+  div.VuePassword__Message {
+    min-height: 2rem;
+  }
+
+  .VuePassword__Meter {
+    margin-top: .5rem;
+  }
+
+  .VuePassword__Message {
+    padding-top: .5rem;
+  }
+
+  #password-field {
+    margin-bottom: 0;
+  }
 </style>

store/index.js

@@ -3,20 +3,22 @@
 const siteConfiguration = require('../assets/data.json')
 
 // Mock: sign-in state
-siteConfiguration.signedIn = true
-siteConfiguration.configured = true
+siteConfiguration.signedIn = false
+siteConfiguration.configured = false
 
 export const state = () => (siteConfiguration)
 
-// export const mutations = {
-//   name (state, text) {
-//     state.name = text
-//   },
-
-//   bio (state, text) {
-//     state.bio = text
-//   }
-// }
+export const mutations = {
+  name (state, text) {
+    state.name = text
+  },
+  bio (state, text) {
+    state.bio = text
+  },
+  configured (state, value) {
+    state.configured = value
+  }
+}
 
 // export const actions = {
 //   async nuxtServerInit ({ commit }, { app }) {