Login

pages/login.vue

@@ -7,26 +7,31 @@
         </div>
         <h1 class="fadein second">Login</h1>
         <!-- Login Form -->
-        <input
-          id="login"
-          v-model="username"
-          type="text"
-          class="fadein second"
-          name="login"
-          placeholder="login"
-        />
-        <input
-          id="password"
-          v-model="password"
-          type="password"
-          class="fadein third"
-          name="login"
-          placeholder="password"
-        />
-        <button type="submit" class="fadein fourth" value="Log In">
-          Submit
-        </button>
-
+        <form @submit.prevent="onSubmit">
+          <input
+            id="email"
+            v-model="email"
+            type="text"
+            class="fadein second"
+            name="email"
+            placeholder="Email"
+          />
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            class="fadein third"
+            name="password"
+            placeholder="Password"
+          />
+          <button type="submit" class="fadein fourth" value="Log In">
+            Submit
+          </button>
+        </form>
+        <div class="fadein third">
+          New to ChatChat?
+          <nuxt-link to="/register">Create an account.</nuxt-link>
+        </div>
         <!-- Remind Passowrd -->
         <!-- <div id="formFooter">
           <a class="underlineHover" href="#">Forgot Password?</a>
@@ -44,13 +49,29 @@ export default {
   data() {
     return {
       checkLogin: true,
-      username: '',
+      email: '',
       password: '',
       error: null,
     }
   },
 
-  methods: {},
+  methods: {
+    onSubmit() {
+      this.$axios
+        .$post(
+          'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc',
+          {
+            email: this.email,
+            password: this.password,
+            returnSecureToken: true,
+          }
+        )
+        .then((result) => {
+          alert('Login Success !')
+          // window.location.href = '/'
+        })
+    },
+  },
 }
 </script>
 

pages/register/index.vue

@@ -14,7 +14,7 @@
             type="text"
             class="fadein second"
             name="email"
-            placeholder="email"
+            placeholder="Email"
           />
           <input
             id="password"
@@ -22,7 +22,7 @@
             type="password"
             class="fadein third"
             name="password"
-            placeholder="password"
+            placeholder="Password"
           />
           <input
             id="repassword"
@@ -30,7 +30,7 @@
             type="password"
             class="fadein third"
             name="repassword"
-            placeholder="rePassword"
+            placeholder="Re Password"
           />
           <button type="submit" class="fadein fourth" value="Log In">
             Submit
@@ -40,6 +40,9 @@
         <!-- <div id="formFooter">
           <a class="underlineHover" href="#">Forgot Password?</a>
         </div> -->
+        <div class="fadein third">
+          Have your account? Login <nuxt-link to="/login">here</nuxt-link>
+        </div>
       </div>
     </div>
     <div v-else>TEST</div>
@@ -48,8 +51,6 @@
 
 <script>
 export default {
-  name: 'Login',
-  layout: 'clean',
   data() {
     return {
       checkLogin: true,
@@ -80,6 +81,7 @@ export default {
             window.location.href = '/'
           })
       } else {
+        alert("repassword don't match with password")
       }
     },
   },