adding latest

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/SignIn.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="sign-in">
+    <h1>Sign In</h1>
+    <v-form v-model="valid" ref="form" lazy-validation>
+      <v-text-field
+        v-model="username"
+        :rules="emailRules"
+        label="Email Address"
+        required
+      ></v-text-field>
+      <v-text-field
+        v-model="password"
+        :append-icon="passwordVisible ? 'mdi-eye' : 'mdi-eye-off'"
+        :rules="[passwordRules.required, passwordRules.min]"
+        :type="passwordVisible ? 'text' : 'password'"
+        name="password"
+        label="Password"
+        hint="At least 8 characters"
+        counter
+        @click:append="passwordVisible = !passwordVisible"
+        required
+      ></v-text-field>
+      <v-btn :disabled="!valid" @click="submit">Submit</v-btn>
+    </v-form>
+  </div>
+</template>
+
+<script>
+import { signIn } from "../utils/auth.js";
+export default {
+  name: "SignIn",
+  data() {
+    return {
+      valid: false,
+      username: "",
+      password: "",
+      passwordVisible: false
+    };
+  },
+  computed: {
+    emailRules() {
+      return [
+        v => !!v || "Email is required",
+        v => /.+@.+/.test(v) || "Email must be valid"
+      ];
+    },
+    passwordRules() {
+      return {
+        required: value => !!value || "Required.",
+        min: v => v.length >= 8 || "Min 8 characters",
+        emailMatch: () => "The email and password you entered don't match"
+      };
+    }
+  },
+  methods: {
+    submit() {
+      if (this.$refs.form.validate()) {
+        console.log(
+          `SIGN IN username: ${this.username}, password: ${this.password}`
+        );
+        signIn(this.username, this.password);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/SignUp.vue

@@ -11,7 +11,7 @@
       </v-text-field>
       <v-text-field
         v-model="password"
-        :append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
+        :append-icon="passwordVisible ? 'mdi-eye' : 'mdi-eye-off'"
         :rules="[passwordRules.required, passwordRules.min]"
         :type="passwordVisible ? 'text' : 'password'"
         name="password"
@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import { signUp } from "../utils/auth.js";
 export default {
   name: "SignUp",
   data() {
@@ -44,6 +45,13 @@ export default {
         v => !!v || "Email is required",
         v => /.+@.+/.test(v) || "E-mail must be valid."
       ];
+    },
+    passwordRules() {
+      return {
+        required: value => !!value || "Required.",
+        min: v => v.length >= 8 || "Min 8 characters",
+        emailMatch: () => "The email and password you entered don't match."
+      };
     }
   },
   methods: {
@@ -52,6 +60,7 @@ export default {
         console.log(
           `SIGN UP username: ${this.username}, password: ${this.password}, email: ${this.username}`
         );
+        signUp(this.username, this.password);
       }
     }
   }

src/views/SignUpConfirm.vue

@@ -14,13 +14,14 @@
         label="Code"
         required
       ></v-text-field>
-      <v-btn :disabled="!valid" @click="submit">Submit </v-btn>
+      <v-btn :disabled="!valid" @click="submit">Submit</v-btn>
     </v-form>
     <v-btn @click="resend">Resend Code</v-btn>
   </div>
 </template>
 
 <script>
+import { confirmSignUp, resendSignUp } from "../utils/auth.js";
 export default {
   name: "SignUpConfirm",
   data() {
@@ -48,10 +49,12 @@ export default {
     submit() {
       if (this.$refs.form.validate()) {
         console.log(`CONFIRM username: ${this.username}, code: ${this.code}`);
+        confirmSignUp(this.username, this.code)
       }
     },
     resend() {
       console.log(`RESEND username: ${this.username}`);
+      resendSignUp(this.username)
     }
   }
 };