Add settings screen with password entry

nuxt.config.js

@@ -26,6 +26,7 @@ module.exports = {
 
   plugins: [
     '~plugins/buefy',
+    { src: '~plugins/vue-password', ssr: false },
     { src: '~plugins/vue-quill-editor', ssr: false }
   ],
 

package-lock.json

@@ -13565,6 +13565,15 @@
         "object-assign": "4.1.1"
       }
     },
+    "vue-password": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vue-password/-/vue-password-1.1.2.tgz",
+      "integrity": "sha512-IVouoqvgXnXxFaAu9ej0K0uRr8z7yVvtJhbtiaGpE5+5O18zlvH/wHSIDAEHt2l8RKoFivzYPj/HiQJeMH0xCQ==",
+      "requires": {
+        "vue": "2.5.13",
+        "zxcvbn": "4.4.2"
+      }
+    },
     "vue-quill-editor": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.5.tgz",
@@ -14208,6 +14217,11 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
       "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
+    "zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha1-KOwXzwl0PtyrBW3dixsGJizHPDA="
     }
   }
 }

package.json

@@ -49,6 +49,7 @@
     "sass-loader": "^6.0.7",
     "serve-favicon": "^2.4.5",
     "sweet-modal-vue": "^2.0.0",
+    "vue-password": "^1.1.2",
     "vue-quill-editor": "^3.0.5",
     "winston": "^2.4.0",
     "ws": "^4.1.0",

pages/index.vue

@@ -4,7 +4,6 @@
       <div class='header-material'>
         <button id='follow-button' @click='followModalActive = !followModalActive' class='button'>Follow</button>
         <img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
-        <img class='settings-button' src='/settings.svg' alt='Settings button'>
         <h1>{{name}}</h1>
         <h2>{{bio}}</h2>
       </div>
@@ -76,8 +75,29 @@
           <li>Anything (e.g., a great restaurant)</li>
         </ul>
       </b-tab-item>
-      <!-- <b-tab-item label="Private"></b-tab-item> -->
-      <!-- <b-tab-item label="…"></b-tab-item> -->
+
+      <!-- Settings tab -->
+      <b-tab-item label="Settings">
+        <form>
+          <label for='password'>Password</label>
+          <div class='control'>
+            <no-ssr>
+              <vue-password v-model='password' classes='input'>
+                <template slot="password-toggle" 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>
+      </b-tab-item>
+
+      <b-tab-item label="…"></b-tab-item>
     </b-tabs>
 
     <!-- Follow modal -->
@@ -116,6 +136,8 @@ export default {
     name () { return this.$store.state.name },
     bio () { return this.$store.state.bio },
 
+    passwordFieldType () { return this.$data.showPassword ? "text" : "password"},
+
     filteredMockSearchData () {
       return this.mockSearchData.filter( (option) => {
         return option
@@ -143,6 +165,8 @@ export default {
       searchTerm: '',
       selectedMockSearchResult: null,
 
+      password: '',
+
       followModalActive: false,
 
       editorContent: '',
@@ -171,6 +195,15 @@ export default {
 
 <style>
 
+/* Put a min-width on the Show/Hide password toggle button in the Settings
+   tab so that it doesn’t jump around due to the differing amount of space
+   taken up by the different labels. */
+button.button.VuePassword__Toggle {
+  min-width: 80px;
+}
+
+/* Older styles: being refactored */
+
 #follow-button {
   position: absolute;
   top: 1vmax;

plugins/vue-password.js

+import Vue from 'vue'
+import VuePassword from 'vue-password'
+
+Vue.component('vue-password', VuePassword)