Many stuphs

src/pages/Index.vue

@@ -1,9 +1,13 @@
 <template>
-  <q-page class="flex flex-center flex-">
+  <q-page class="flex flex-center">
     <div class="text-center">
-      <img alt="Quasar logo" src="~assets/gyoza.jpg">
+      <img alt="Quasar logo" src="~assets/gyoza.jpg" style="max-width:80vw">
       <br/>
-      <q-btn label="Go" color="primary" to="/dashboard"></q-btn>
+      <q-input label="Username" v-model="username" class="q-mt-md" autofocus @keydown.enter="login"></q-input>
+      <br/>
+      <q-input label="Password" type="password" v-model="password" @keydown.enter="login"></q-input>
+      <br/>
+      <q-btn label="Login" color="primary" @click="login" ></q-btn>
     </div>
   </q-page>
 </template>
@@ -13,6 +17,37 @@
 
 <script>
 export default {
-  name: 'PageIndex'
+  name: 'PageIndex',
+  data () {
+    return {
+      username: '',
+      password: ''
+    }
+  },
+  created () {
+    if (!window.crypto || !window.crypto.subtle) {
+      throw new Error('Web Crypto API is not supported in this browser. Use Chrome 79+.')
+    }
+    // use the helper boot file which exposes $helpers
+    let creds = this.$helpers.getStoredCredentials()
+    console.log('credits', creds)
+    if (creds) {
+      this.$router.push('/dashboard')
+    }
+  },
+  methods: {
+    async login () {
+      let logged = await this.$helpers.verifyCredentials(this.username + ':' + this.password)
+      console.log('logged', logged)
+      if (logged) {
+        this.$router.push('/dashboard')
+      } else {
+        this.$q.notify({
+          type: 'negative',
+          message: 'Invalid username or password'
+        })
+      }
+    }
+  }
 }
 </script>