Merge branch '#3' into 'development'

#3 Add Login View and LoginForm Component

See merge request !4

src/App.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 
 import NavigationBar from '@/components/NavigationBar.vue';
 import NavigationDrawer from '@/components/NavigationDrawer.vue';
@@ -26,6 +26,12 @@ export default {
     NavigationDrawer,
   },
 
+  computed: {
+    ...mapGetters([
+      'isLogin',
+    ]),
+  },
+
   methods: {
     ...mapActions([
       'toggleNavDrawer',

src/components/LoginForm.vue

+<template>
+  <v-row
+    align="center"
+    justify="center"
+  >
+    <v-col
+      cols="12"
+      sm="6"
+      md="4"
+      lg="4"
+      xl="3"
+    >
+      <v-card>
+        <v-card-title>트레이너 로그인</v-card-title>
+        <v-card-text>
+          <v-form>
+            <v-container>
+              <v-row>
+                <v-text-field
+                  v-model="email"
+                  label="이메일"
+                ></v-text-field>
+              </v-row>
+              <v-row>
+                <v-text-field
+                  v-model="password"
+                  label="비밀번호"
+                  type="password"
+                ></v-text-field>
+              </v-row>
+            </v-container>
+          </v-form>
+          <v-alert
+            v-if="error.isError"
+            dense
+            text
+            type="error"
+          >
+            {{ error.message }}
+          </v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            @click="doLogin"
+            color="primary"
+            outlined
+          >로그인</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+import APISetting from '@/settings/api';
+
+
+export default {
+  name: 'LoginForm',
+
+  data: () => ({
+    email: '',
+    password: '',
+    error: {
+      isError: false,
+      message: '',
+    },
+  }),
+
+  methods: {
+    doLogin() {
+      const reqPayload = {
+        email: this.email,
+        password: this.password,
+      };
+      fetch(APISetting.endpoints.auth.login.trainer, APISetting.settings.post(reqPayload))
+        .then((res) => {
+          if ([200, 201, 400, 404].includes(res.status)) {
+            return Promise.all([res.json(), res]);
+          }
+          // If response status is not equal to 200 or 404, go to catch.
+          throw new Error('알 수 없는 응답입니다.');
+        })
+        .then((values) => {
+          const [json, res] = values;
+          if (res.status === 200 || res.status === 201) {
+            const { user } = json;
+            this.setLogin(user);
+            this.$router.push('/main');
+          } else {
+            throw new Error(json.message);
+          }
+        })
+        .catch((e) => {
+          this.error.message = e.message;
+          this.error.isError = true;
+        });
+    },
+    ...mapActions([
+      'setLogin',
+    ]),
+  },
+};
+</script>

src/router/index.js

 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from '../views/Home.vue';
+
+import Store from '@/store/index';
+import APISetting from '@/settings/api';
+import Login from '@/views/Login.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: Home,
+    name: 'login',
+    component: Login,
+  },
+  {
+    path: '/main',
+    name: 'main',
+    component: () => import('@/views/Main.vue'),
   },
 ];
 
@@ -18,4 +26,16 @@ const router = new VueRouter({
   routes,
 });
 
+router.beforeEach(async (to, from, next) => {
+  const res = await fetch(APISetting.endpoints.auth.check, APISetting.settings.get);
+  if (res.status === 200) {
+    const json = await res.json();
+    Store.commit('setLogin', json.user);
+  } else {
+    Store.commit('setLogout');
+  }
+
+  next();
+});
+
 export default router;

src/settings/api.js

+const host = 'http://localhost:3000';
+
+export default {
+  endpoints: {
+    auth: {
+      check: `${host}/auth`,
+      login: {
+        trainer: `${host}/auth/login/trainer`,
+        trainee: `${host}/auth/login/trainer`,
+      },
+      logout: `${host}/auth/logout`,
+    },
+  },
+  settings: {
+    get: {
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      method: 'get',
+      mode: 'cors',
+    },
+    post: data => ({
+      body: JSON.stringify(data),
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      method: 'post',
+      mode: 'cors',
+    }),
+  },
+};

src/store/index.js

@@ -6,16 +6,32 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     isNavDrawerVisible: true,
+    loginUser: null,
+  },
+  computed: {
+    isLogin: state => (state.loginUser !== null),
   },
   mutations: {
     toggleNavDrawer(state) {
       state.isNavDrawerVisible = !state.isNavDrawerVisible;
     },
+    setLogin(state, user) {
+      state.loginUser = user;
+    },
+    setLogout(state) {
+      state.loginUser = null;
+    },
   },
   actions: {
     toggleNavDrawer(context) {
       context.commit('toggleNavDrawer');
     },
+    setLogin(context, user) {
+      context.commit('setLogin', user);
+    },
+    setLogout(context) {
+      context.commit('setLogout');
+    },
   },
   modules: {
   },

src/views/Login.vue

+<template>
+  <div class="home">
+    <login-form></login-form>
+  </div>
+</template>
+
+<script>
+import LoginForm from '@/components/LoginForm.vue';
+
+export default {
+  name: 'home',
+
+  components: {
+    LoginForm,
+  },
+};
+</script>

src/views/Home.vue → src/views/Main.vue

 <template>
-  <div class="home">
+  <div class="main">
 
   </div>
 </template>
 
 <script>
 export default {
-  name: 'home',
+  name: 'main',
   components: {},
 };
 </script>