feat: [FE] Login Logic Implement.

src/vite-frontend/src/App.vue

@@ -4,7 +4,7 @@
   <TheFooter></TheFooter>
 </template>
 
-<script>
+<script lang="ts">
 import TheHeader from '@/components/TheHeader.vue'
 import TheFooter from "@/components/TheFooter.vue";
 

src/vite-frontend/src/components/TheFooter.vue

@@ -9,7 +9,7 @@
   </footer>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheFooter"
 }

src/vite-frontend/src/components/TheHeader.vue

@@ -23,7 +23,7 @@
           <router-link to="/article" class="nav-link" active-class="active">New Article</router-link>
         </li>
         <li class="nav-item">
-            <router-link to="/setting" class="nav-link" active-class="active"><i class="ion-gear-a"></i>Settings</router-link>
+            <router-link to="/settings" class="nav-link" active-class="active"><i class="ion-gear-a"></i>Settings</router-link>
         </li>
         <li class="nav-item">
           <router-link to="/login" class="nav-link" active-class="active">Sign in</router-link>
@@ -38,7 +38,7 @@
 
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheHeader"
 }

src/vite-frontend/src/views/TheArticle.vue

@@ -35,7 +35,7 @@
 
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheArticle"
 }

src/vite-frontend/src/views/TheHome.vue

@@ -85,7 +85,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheHome"
 }

src/vite-frontend/src/views/TheLogin.vue

@@ -5,27 +5,24 @@
       <div class="row">
 
         <div class="col-md-6 offset-md-3 col-xs-12">
-          <h1 class="text-xs-center">Sign up</h1>
+          <h1 class="text-xs-center">Sign in</h1>
           <p class="text-xs-center">
-            <a href="">Have an account?</a>
+            <router-link to="/register">Need an account?</router-link>
           </p>
 
-          <ul class="error-messages">
-            <li>That email is already taken</li>
+          <ul class="error-messages" v-if="loginValidation">
+            <li align="left">email or password is invalid</li>
           </ul>
 
           <form>
             <fieldset class="form-group">
-              <input class="form-control form-control-lg" type="text" placeholder="Your Name">
+              <input class="form-control form-control-lg" type="email" placeholder="Email" v-model="user.email">
             </fieldset>
             <fieldset class="form-group">
-              <input class="form-control form-control-lg" type="text" placeholder="Email">
+              <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
             </fieldset>
-            <fieldset class="form-group">
-              <input class="form-control form-control-lg" type="password" placeholder="Password">
-            </fieldset>
-            <button class="btn btn-lg btn-primary pull-xs-right">
-              Sign up
+            <button @click = "signin" class="btn btn-lg btn-primary pull-xs-right">
+              Sign in
             </button>
           </form>
         </div>
@@ -35,9 +32,42 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import {reactive, ref} from "vue";
+import axios from "axios";
+import router from "@/router";
+
 export default {
-  name: "TheLogin"
+  name: "TheLogin",
+
+  setup() {
+    const user = reactive({
+      email: "",
+      password: "",
+    })
+
+    let loginValidation = ref(false);
+
+    const signin = () => {
+      axios.post('http://localhost:8080/api/users/login',{
+        user
+      })
+          .then(response => {
+            window.localStorage.setItem("token",response.data.user.token);
+            router.push("/");
+          })
+          .catch(error =>{
+            console.log(error);
+            const code = error.response.data.errors.code;
+            if(code == "EMAIL_NULL_OR_INVALID"){
+              loginValidation.value = true;
+            }
+          })
+    }
+    return {user, loginValidation, signin};
+  }
+
+
 }
 </script>
 

src/vite-frontend/src/views/TheRegister.vue

@@ -7,7 +7,7 @@
         <div class="col-md-6 offset-md-3 col-xs-12">
           <h1 class="text-xs-center">Sign up</h1>
           <p class="text-xs-center">
-            <a href="">Have an account?</a>
+            <router-link to="/login">Have an account?</router-link>
           </p>
 
           <ul class="error-messages" v-if="emailDuplicate">
@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 
 import axios from "axios";
 import router from "@/router";
@@ -77,7 +77,6 @@ export default {
     };
 
     const signup = () => {
-      console.log(user)
       axios.post('http://localhost:8080/api/users',{
         user
       })

src/vite-frontend/src/views/TheSetting.vue

@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheSetting"
 }

src/vite-frontend/tsconfig.json

@@ -18,7 +18,6 @@
         "src/*"
       ]
     },
-    "allowJs": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]