Initial commit.

client/src/pages/Auth/Auth.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="auth-page">
+    <div class="auth-page__logo">
+
+    </div>
+
+    <div class="auth-page__card">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'auth-warpper',
+  beforeRouteEnter(to, from, next) {
+    document.body.classList.add('page-auth');
+    next();
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.classList.remove('page-auth');
+    next();
+  },
+};
+</script>
+
+<style>
+body.page-auth{
+  background: red;
+}
+
+.auth-page{
+  width: 600px;
+
+  &__logo{
+
+  }
+
+  &__card{
+    background: #fff;
+    padding: 10px;
+  }
+}
+</style>

client/src/pages/Auth/Login.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="login">
+    <el-form ref="form" class="form-container">
+      <el-form-item :label="$t('username_password')" prop="title">
+        <el-input v-model="form.crediential" :maxlength="100" name="name"  required />
+      </el-form-item>
+
+      <el-form-item :label="$t('password')">
+        <el-input v-model="form.password" name="password" />
+      </el-form-item>
+
+      <el-button type="primary">{{ $t('login') }}</el-button>
+      <el-link>{{ $t('forget_your_password') }}</el-link>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'login',
+  data() {
+    return {
+      form: {
+        username: '',
+        password: '',
+      },
+    };
+  },
+  methods: {
+  },
+};
+</script>

client/src/pages/Auth/ResetPassword.vue

@@ -0,0 +1,4 @@
+<template>
+
+
+</template>