From ce3ace2bd21fe6b0e3ed057da9f9133896bc5f88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EC=A4=80=ED=9D=A0?= <choi.jh@prime-idc.jp>
Date: Mon, 19 Sep 2022 16:33:20 +0900
Subject: [PATCH] vue2_frontend...

---
 src/components/LoginComponent.vue      |   8 +-
 src/components/RegisterComponent.vue   | 120 +++++++++++++++++++++++++
 src/components/layout/HeaderLayout.vue |  11 ++-
 src/interceptors/interceptor.js        |   4 +
 src/router/index.js                    |   8 ++
 src/store/auth.store.js                |  13 +++
 src/views/registerView.vue             |  23 +++++
 7 files changed, 185 insertions(+), 2 deletions(-)
 create mode 100644 src/components/RegisterComponent.vue
 create mode 100644 src/views/registerView.vue

diff --git a/src/components/LoginComponent.vue b/src/components/LoginComponent.vue
index c39492d..7f5627b 100644
--- a/src/components/LoginComponent.vue
+++ b/src/components/LoginComponent.vue
@@ -41,7 +41,8 @@
             }}</b-form-invalid-feedback>
           </b-input-group>
         </validation-provider>
-        <b-button type="submit" variant="primary">Login</b-button>
+        <b-button type="submit" variant="primary">Login</b-button>&nbsp;
+        <b-button variant="primary" @click="goRegister">Register</b-button>
       </b-form>
     </validation-observer>
   </div>
@@ -87,6 +88,11 @@ export default {
         console.log(e)
         alert(e.message)
       }
+    },
+    async goRegister() {
+      await this.$router.push({
+        name: 'register'
+      })
     }
   }
 }
diff --git a/src/components/RegisterComponent.vue b/src/components/RegisterComponent.vue
new file mode 100644
index 0000000..2804306
--- /dev/null
+++ b/src/components/RegisterComponent.vue
@@ -0,0 +1,120 @@
+<template>
+  <div style="width: 400px; height: 300px; text-align: center">
+    <!-- 참조: https://bootstrap-vue.org/docs/reference/validation#form-validation , npm install vee-validate@3 필요 -->
+    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <b-form @submit.stop.prevent="handleSubmit(onSubmit)" class="sm">
+        <validation-provider
+          :name="field.email.label"
+          :rules="field.email.rules"
+          v-slot="validationContext"
+        >
+          <b-input-group>
+            <label class="input-group-text">{{ field.email.label }}</label>
+            <b-form-input
+              :name="field.email.key"
+              :type="field.email.type"
+              v-model="email"
+              :state="getValidationState(validationContext)"
+              :placeholder="field.email.placeholder"
+            ></b-form-input>
+            <b-form-invalid-feedback>{{
+              validationContext.errors[0]
+            }}</b-form-invalid-feedback>
+          </b-input-group>
+        </validation-provider>
+        <validation-provider
+          :name="field.password.label"
+          :rules="field.password.rules"
+          v-slot="validationContext"
+        >
+          <b-input-group>
+            <label class="input-group-text">{{ field.password.label }}</label>
+            <b-form-input
+              :name="field.password.key"
+              :type="field.password.type"
+              v-model="password"
+              :state="getValidationState(validationContext)"
+              :placeholder="field.password.placeholder"
+            ></b-form-input>
+            <b-form-invalid-feedback>{{
+              validationContext.errors[0]
+            }}</b-form-invalid-feedback>
+          </b-input-group>
+        </validation-provider>
+        <validation-provider
+          :name="field.name.label"
+          :rules="field.name.rules"
+          v-slot="validationContext"
+        >
+          <b-input-group>
+            <label class="input-group-text">{{ field.name.label }}</label>
+            <b-form-input
+              :name="field.name.key"
+              :type="field.name.type"
+              v-model="name"
+              :state="getValidationState(validationContext)"
+              :placeholder="field.name.placeholder"
+            ></b-form-input>
+            <b-form-invalid-feedback>{{
+              validationContext.errors[0]
+            }}</b-form-invalid-feedback>
+          </b-input-group>
+        </validation-provider>
+        <b-button type="submit" variant="primary">Register</b-button>
+      </b-form>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+// 참고 : https://kdydesign.github.io/2019/04/06/vuejs-vuex-helper/
+import { createNamespacedHelpers } from 'vuex'
+const authStore = createNamespacedHelpers('AuthStore')
+export default {
+  computed: {
+    ...authStore.mapState(['field']),
+    email: {
+      get() {
+        return this.$store.state.AuthStore.email
+      },
+      set(value) {
+        this.$store.commit('AuthStore/email', value)
+      }
+    },
+    password: {
+      get() {
+        return this.$store.state.AuthStore.password
+      },
+      set(value) {
+        this.$store.commit('AuthStore/password', value)
+      }
+    },
+    name: {
+      get() {
+        return this.$store.state.AuthStore.name
+      },
+      set(value) {
+        this.$store.commit('AuthStore/name', value)
+      }
+    }
+  },
+  methods: {
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
+    async onSubmit() {
+      try {
+        //console.log(authStore)
+        const params = { email: this.email, password: this.password }
+        await this.$store.dispatch('AuthStore/register', params)
+        await this.$router.push({
+          name: this.$route.params.return_url || 'home'
+        })
+      } catch (e) {
+        console.log(e)
+        alert(e.message)
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/layout/HeaderLayout.vue b/src/components/layout/HeaderLayout.vue
index a654674..1f77f3d 100644
--- a/src/components/layout/HeaderLayout.vue
+++ b/src/components/layout/HeaderLayout.vue
@@ -37,7 +37,7 @@
             <template #button-content>
               <em>User</em>
             </template>
-            <b-dropdown-item href="/profile">Profile</b-dropdown-item>
+            <b-dropdown-item @click="profile()">Profile</b-dropdown-item>
             <b-dropdown-item @click="logout()">Sign Out</b-dropdown-item>
           </b-nav-item-dropdown>
         </template>
@@ -59,6 +59,15 @@ export default {
     ...authStore.mapGetters(['isAuthenticated'])
   },
   methods: {
+    async profile() {
+      try {
+        await this.$store
+          .dispatch('AuthStore/profile', {})
+          .then(() => this.redirect())
+      } catch (e) {
+        alert(e.message)
+      }
+    },
     async redirect() {
       if (!this.isAuthenticated && this.$router.name != 'home') {
         await this.$router.push({ name: 'home' })
diff --git a/src/interceptors/interceptor.js b/src/interceptors/interceptor.js
index 39c22c5..b4e088d 100644
--- a/src/interceptors/interceptor.js
+++ b/src/interceptors/interceptor.js
@@ -60,6 +60,10 @@ const interceptor = (instance) => {
           const { access_token } = rs.data
           tokenService.updateAccessToken(access_token)
         })
+        .catch((err) => {
+          console.log(err)
+          throw new Error('로그인을 해주세요')
+        })
       //Refresh Token도 expire되었으면 Login 처리
 
       //reload로 access_token을 재발급을 받았으면 원래 APICall 다시 호출
diff --git a/src/router/index.js b/src/router/index.js
index c5f044d..330f903 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,6 +27,14 @@ const routes = [
         /* webpackChunkName: "auth", webpackPrefetch:true */ '@/views/loginView.vue'
       )
   },
+  {
+    path: '/register',
+    name: 'register',
+    component: () =>
+      import(
+        /* webpackChunkName: "auth", webpackPrefetch:true */ '@/views/registerView.vue'
+      )
+  },
   {
     path: '/todo',
     name: 'todo',
diff --git a/src/store/auth.store.js b/src/store/auth.store.js
index a7ff14f..b7cd571 100644
--- a/src/store/auth.store.js
+++ b/src/store/auth.store.js
@@ -22,6 +22,13 @@ const state = {
       label: '로그인 암호',
       placeholder: 'password',
       rules: { required: true, min: 4, max: 20 }
+    },
+    name: {
+      key: 'name',
+      type: 'text',
+      label: '사용자 이름',
+      placeholder: 'name',
+      rules: { required: true, min: 4, max: 20 }
     }
   }
 }
@@ -81,6 +88,12 @@ const actions = {
       }
     })
   },
+  profile: async function () {
+    await api.get('/auth/profile').then((response) => {
+      const { data } = response
+      console.log(data)
+    })
+  },
   logout: function (context) {
     return context.commit('logout')
   },
diff --git a/src/views/registerView.vue b/src/views/registerView.vue
new file mode 100644
index 0000000..9812999
--- /dev/null
+++ b/src/views/registerView.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="wrapper">
+    <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
+    <RegisterComponent />
+  </div>
+</template>
+<script>
+import RegisterComponent from '@/components/RegisterComponent.vue'
+export default {
+  components: {
+    RegisterComponent
+  }
+}
+</script>
+<style scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: white;
+}
+</style>