add authentication

dashboard/package.json

@@ -14,6 +14,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@vuetify/vuex-cognito-module": "^0.4.0",
     "axios": "0.18.0",
     "js-base64": "2.4.9",
     "toml": "2.3.3",
@@ -24,7 +25,8 @@
     "vue-router": "3.0.2",
     "vue-socket.io": "3.0.4",
     "vue-tour": "^1.1.0",
-    "vuetify": "^1.3.12"
+    "vuetify": "^1.3.12",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "7.2.6",

dashboard/src/components/auth/BaseBtn.vue

@@ -0,0 +1,24 @@
+<template>
+  <VBtn
+    class="white--text"
+    color="indigo"
+    depressed
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </VBtn>
+</template>
+
+<script>
+  export default {
+    inheritAttrs: false
+  }
+</script>
+
+<style lang="scss" scoped>
+  .v-btn {
+    border-radius: 4px;
+    text-transform: none;
+  }
+</style>

dashboard/src/components/auth/BaseCard.vue

@@ -0,0 +1,15 @@
+<template>
+  <VCard
+    class="elevation-4"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+  .v-card {
+    border-radius: 6px;
+  }
+</style>

dashboard/src/components/auth/BaseHeading.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="mb-4"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <h1
+      class="headline"
+      v-text="text"
+    />
+    <div
+      class="subheading"
+      v-text="sub"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    inheritAttrs: false,
+
+    props: {
+      sub: {
+        type: String,
+        default: undefined
+      },
+      text: {
+        type: String,
+        default: undefined
+      }
+    }
+  }
+</script>

dashboard/src/components/auth/BaseText.vue

@@ -0,0 +1,38 @@
+<template>
+  <Component
+    :is="component"
+    :target="$attrs.href ? '_blank' : undefined"
+    class="indigo--text subheading font-weight-bold"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+    <VIcon
+      v-if="$attrs.href"
+      color="indigo lighten-1"
+      small
+    >
+      mdi-open-in-new
+    </VIcon>
+  </Component>
+</template>
+
+<script>
+  export default {
+    inheritAttrs: false,
+
+    computed: {
+      component () {
+        return this.$attrs.to
+          ? 'router-link'
+          : this.$attrs.href ? 'a' : 'span'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+a {
+  text-decoration: none;
+}
+</style>

dashboard/src/components/auth/Email.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <BaseHeading
+      class="text-xs-center"
+      text="Sign in"
+      sub="to continue to Auto AI"
+    />
+
+    <VTextField
+      v-model="internalValue"
+      autofocus
+      label="Email or phone"
+      name="email"
+    />
+
+    <BaseText>Forgot email?</BaseText>
+
+    <div class="my-5">
+      <div class="subheading">
+        Want to learn more about Auto AI?
+      </div>
+      <BaseText href="https://hub.autoai.org">
+        Learn more
+      </BaseText>
+    </div>
+
+    <VLayout align-center>
+      <VFlex xs8>
+        <BaseText to="/auth/signup">
+          Create account
+        </BaseText>
+      </VFlex>
+      <VFlex text-xs-right>
+        <BaseBtn
+          :disabled="!internalValue"
+          class="ma-0"
+          @click="$emit('next')"
+        >
+          Next
+        </BaseBtn>
+      </VFlex>
+    </VLayout>
+  </div>
+</template>
+
+<script>
+  // Utilities
+  import {
+    mapMutations
+  } from 'vuex'
+
+  export default {
+    name: 'Email',
+
+    computed: {
+      internalValue: {
+        get () {
+          return this.$store.state.email
+        },
+        set (val) {
+          this.setEmail(val)
+        }
+      }
+    },
+
+    methods: {
+      ...mapMutations(['setEmail'])
+    }
+  }
+</script>

dashboard/src/components/auth/Footer.vue

@@ -0,0 +1,24 @@
+<template>
+  <VLayout
+    caption
+    mt-4
+  >
+    <VFlex>
+      English (United States)
+    </VFlex>
+    <VSpacer />
+    <VFlex shrink>
+      <VLayout justify-space-between>
+        <strong class="mx-2">
+          Help
+        </strong>
+        <strong class="mx-2">
+          Privacy
+        </strong>
+        <strong class="mx-2">
+          Terms
+        </strong>
+      </VLayout>
+    </VFlex>
+  </VLayout>
+</template>

dashboard/src/components/auth/Password.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div class="text-xs-center">
+      <VChip
+        class="mb-3"
+        outline
+        @click="$emit('prev')"
+      >
+        <VIcon
+          color="primary"
+          left
+        >
+          mdi-account-circle
+        </VIcon>
+        <span
+          class="body-2"
+          v-text="email"
+        />
+        <VIcon
+          color="black"
+          right
+        >
+          mdi-chevron-down
+        </VIcon>
+      </VChip>
+    </div>
+
+    <VTextField
+      v-model="internalValue"
+      :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
+      :type="show ? 'text' : 'password'"
+      class="mb-3"
+      label="Password"
+      name="password"
+      @click:append="show = !show"
+    />
+
+    <div class="text-xs-left">
+      <VLayout
+        align-center
+        justify-space-between
+      >
+        <BaseText>
+          Forgot password?
+        </BaseText>
+
+        <VBtn
+          :disabled="!internalValue"
+          :loading="isLoading"
+          class="text-capitalize ma-0"
+          color="indigo darken-1"
+          depressed
+          @click="submit"
+        >
+          Next
+        </VBtn>
+      </VLayout>
+    </div>
+  </div>
+</template>
+
+<script>
+  // Utilities
+  import {
+    mapActions,
+    mapMutations,
+    mapState
+  } from 'vuex'
+
+  export default {
+    data: () => ({
+      show: false
+    }),
+
+    computed: {
+      ...mapState([
+        'email',
+        'password',
+        'isLoading'
+      ]),
+      internalValue: {
+        get () {
+          return this.$store.state.password
+        },
+        set (val) {
+          this.setPassword(val)
+        }
+      }
+    },
+
+    methods: {
+      ...mapActions('cognito', ['signInUser']),
+      ...mapMutations([
+        'setEmail',
+        'setPassword',
+        'setIsLoading',
+        'setSnackbar'
+      ]),
+      submit () {
+        this.hasError = false
+        this.setIsLoading(true)
+        this.signInUser({
+          username: this.email,
+          password: this.password
+        })
+          .then(() => {
+            this.setSnackbar({
+              type: 'success',
+              msg: `Successfully signed in user ${this.email}`
+            })
+
+            this.setEmail('')
+            this.$router.replace('/home')
+          })
+          .catch(res => {
+            this.setSnackbar({
+              type: 'error',
+              msg: res
+            })
+          })
+          .finally(() => {
+            this.setIsLoading(false)
+            this.setPassword('')
+          })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+.v-chip__content {
+  cursor: pointer !important;
+}
+</style>