Pushing to master to switch branches for best practice

pages/create-account.vue

@@ -13,7 +13,9 @@
           <label class="font-medium text-sm">Password</label>
           <input class="p-2 mt-2 text-sm border-solid border-gray-200 rounded-sm border" type="password" placeholder="e.g. your password"/>
         </div>
-        <button class="mt-2 w-full p-3 text-center text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-sm font-semibold">Sign up</button>
+        <nuxt-link to="/dashboard">
+          <button type="button" class="mt-2 w-full p-3 text-center text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-sm font-semibold">Sign up</button>
+        </nuxt-link>
       </form>
     </section>
     <section class="flex text-center text-gray-600 text-sm mt-auto mb-4">All rights reserved.</br>Copyright ©2020 Neutron Creative Inc.</section>

pages/index.vue

@@ -1,33 +1,38 @@
 <template>
-  <div class="flex flex-col items-center justify-center bg-gray-50 min-h-screen">
+  <div class="flex flex-col items-center justify-center bg-gray-100 min-h-screen">
     <section class="flex items-center justify-center flex-col mt-auto w-screen">
       <img src="/Icon.svg"/>
       <h1 class="font-semibold text-3xl mt-2">Sign in to your account</h1>
-      <p class="text-gray-700 text-sm">Or, <a class="text-indigo-600 hover:text-indigo-700" href="#">create your new account for free</a></p>
+      <p class="text-gray-700 text-sm">Or, <a class="text-indigo-600 hover:text-indigo-700" href="/create-account">create your new account for free</a></p>
+      <div v-if="this.error" class="flex flex-row p-2 mt-4 mb-2 bg-orange-200 text-orange-600 rounded w-11/12 max-w-sm justify-center items-center text-sm border border-orange-300 shadow-sm">
+        <img style="width: 12px;" src="/caution.svg">
+        <div class="flex flex-col ml-2">
+          {{ this.error }}
+        </div>
+      </div>
       <form class="w-11/12 max-w-sm mt-4 p-6 bg-white rounded-md shadow-md flex-col">
         <div class="flex flex-col mb-4">
           <label class="font-medium text-sm">Email Address</label>
-          <input class="p-2 mt-2 text-sm border-solid border-gray-300 rounded-sm border" type="email" placeholder="e.g. jane@gmail.com"/>
+          <input class="p-2 mt-2 text-sm border-solid border-gray-300 rounded border" type="email" placeholder="e.g. jane@gmail.com" v-model="email"/>
         </div>
         <div class="flex flex-col mb-4">
           <label class="font-medium text-sm">Password</label>
-          <input class="p-2 mt-2 text-sm border-solid border-gray-300 rounded-sm border" type="password" placeholder="e.g. your password"/>
+          <input class="p-2 mt-2 text-sm border-solid border-gray-300 rounded border" type="password" placeholder="e.g. your password" v-model="password"/>
         </div>
         <div class="mb-4 flex items-center justify-between">
           <div class="flex items-center">
             <input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
-            <label for="remember_me" class="ml-2 block text-sm leading-5 text-gray-900">
+            <label for="remember_me" class="ml-2 block text-sm leading-5 text-gray-700">
               Remember me
             </label>
           </div>
           <div class="text-sm leading-5">
-            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-700 focus:outline-none focus:underline">
               Forgot your password?
             </a>
           </div>
         </div>
-
-        <button class="mt-2 w-full p-3 text-center text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-sm font-semibold">Login</button>
+        <button type="button" @click="attempt_login" class="mt-2 w-full p-3 text-center text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded font-semibold">Login</button>
       </form>
     </section>
     <section class="flex text-center text-gray-600 text-sm mt-auto mb-4">All rights reserved.</br>Copyright ©2020 Neutron Creative Inc.</section>
@@ -38,3 +43,26 @@
   .NeutronLogo
     width: 180px
 </style>
+
+<script>
+export default {
+  name: 'Login',
+  data: () => {
+    return {
+      email: '',
+      password: '',
+      error: null
+    }
+  },
+  methods: {
+    attempt_login () {
+      if (!this.email) { this.error = 'Email address is required to login.'; return }
+      if (!this.password) { this.error = 'Password is required to login.'; return }
+      this.$router.push('/dashboard')
+    },
+    clear_errors: () => {
+      this.error = null
+    }
+  }
+}
+</script>