From d320d59daa8522b3880d5478c81d72aa123b4015 Mon Sep 17 00:00:00 2001
From: minseokkang <aaaa727@khu.ac.kr>
Date: Wed, 16 Nov 2022 15:11:26 +0900
Subject: [PATCH] feat: [FE] Login Logic Implement.

---
 src/vite-frontend/src/App.vue                 |  2 +-
 .../src/components/TheFooter.vue              |  2 +-
 .../src/components/TheHeader.vue              |  4 +-
 src/vite-frontend/src/views/TheArticle.vue    |  2 +-
 src/vite-frontend/src/views/TheHome.vue       |  2 +-
 src/vite-frontend/src/views/TheLogin.vue      | 56 ++++++++++++++-----
 src/vite-frontend/src/views/TheRegister.vue   |  5 +-
 src/vite-frontend/src/views/TheSetting.vue    |  2 +-
 src/vite-frontend/tsconfig.json               |  1 -
 9 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/vite-frontend/src/App.vue b/src/vite-frontend/src/App.vue
index 2003d29..6fb89a1 100644
--- a/src/vite-frontend/src/App.vue
+++ b/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";
 
diff --git a/src/vite-frontend/src/components/TheFooter.vue b/src/vite-frontend/src/components/TheFooter.vue
index 6cdeb1e..c89be51 100644
--- a/src/vite-frontend/src/components/TheFooter.vue
+++ b/src/vite-frontend/src/components/TheFooter.vue
@@ -9,7 +9,7 @@
   </footer>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheFooter"
 }
diff --git a/src/vite-frontend/src/components/TheHeader.vue b/src/vite-frontend/src/components/TheHeader.vue
index a48be68..419ab09 100644
--- a/src/vite-frontend/src/components/TheHeader.vue
+++ b/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"
 }
diff --git a/src/vite-frontend/src/views/TheArticle.vue b/src/vite-frontend/src/views/TheArticle.vue
index 0b4183e..c9aec7b 100644
--- a/src/vite-frontend/src/views/TheArticle.vue
+++ b/src/vite-frontend/src/views/TheArticle.vue
@@ -35,7 +35,7 @@
 
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheArticle"
 }
diff --git a/src/vite-frontend/src/views/TheHome.vue b/src/vite-frontend/src/views/TheHome.vue
index a17f74b..9468051 100644
--- a/src/vite-frontend/src/views/TheHome.vue
+++ b/src/vite-frontend/src/views/TheHome.vue
@@ -85,7 +85,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheHome"
 }
diff --git a/src/vite-frontend/src/views/TheLogin.vue b/src/vite-frontend/src/views/TheLogin.vue
index c6b9dc3..b422c64 100644
--- a/src/vite-frontend/src/views/TheLogin.vue
+++ b/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>
 
diff --git a/src/vite-frontend/src/views/TheRegister.vue b/src/vite-frontend/src/views/TheRegister.vue
index b0be224..6ca537c 100644
--- a/src/vite-frontend/src/views/TheRegister.vue
+++ b/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
       })
diff --git a/src/vite-frontend/src/views/TheSetting.vue b/src/vite-frontend/src/views/TheSetting.vue
index 599ff59..0f7fafb 100644
--- a/src/vite-frontend/src/views/TheSetting.vue
+++ b/src/vite-frontend/src/views/TheSetting.vue
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "TheSetting"
 }
diff --git a/src/vite-frontend/tsconfig.json b/src/vite-frontend/tsconfig.json
index 5e7323a..9df98a1 100644
--- a/src/vite-frontend/tsconfig.json
+++ b/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" }]