WIP Items module.

client/src/pages/Auth/ForgetPassword.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="reset-password">
+    <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>
+
+    <el-button type="primary">{{ $t('reset_password') }}</el-button>
+
+    <div class="form-note">
+      <router-link :to="{name: 'login'}">{{ $t('return_to_login') }}</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  name: 'forget-password',
+  data() {
+    return {
+      form: {
+        crediential: '',
+      },
+    };
+  },
+  methods: {
+    ...mapActions(['login']),
+
+    /**
+     * Handle the submitting the reset password form.
+     */
+    onSubmit() {
+      const form = {};
+
+      this.sendResetPassword({ form }).then(() => {
+        // console.log(response);
+      }).catch(() => {
+        // console.log(error);
+      });
+    },
+  },
+};
+</script>

client/src/pages/Auth/Login.vue

@@ -10,12 +10,23 @@
       </el-form-item>
 
       <el-button type="primary">{{ $t('login') }}</el-button>
-      <el-link>{{ $t('forget_your_password') }}</el-link>
     </el-form>
+
+    <div class="form-note">
+      <div class="forget-password">
+        <router-link :to="{name: 'forgetPassword'}">{{ $t('forget_password') }}</router-link>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapActions } from 'vuex';
+
+const STATE = {
+  USER_NOT_ACTIVE: 1,
+};
+
 export default {
   name: 'login',
   data() {
@@ -27,6 +38,25 @@ export default {
     };
   },
   methods: {
+    ...mapActions(['login']),
+
+    /**
+     * Handle the submitting the login form.
+     */
+    onSubmit() {
+      const form = {};
+
+      this.login({ form }).then(() => {
+
+      }).catch((error) => {
+        const { response } = error;
+        const { data } = response;
+
+        if (data.error.type === 'USER_NOT_ACTIVE') {
+          this.current_state = STATE.USER_NOT_ACTIVE;
+        }
+      });
+    },
   },
 };
 </script>

client/src/pages/Auth/ResetPassword.vue

@@ -1,4 +1,79 @@
+
 <template>
+  <div class="reset-password" id="reset-password">
+    <el-form ref="form" class="form-container">
+      <el-form-item :label="$t('password')" prop="title">
+        <el-input v-model="form.password" :maxlength="100" name="password" required />
+      </el-form-item>
 
+      <el-form-item :label="$t('confirm_password')">
+        <el-input v-model="form.confirm_password" name="confirm_password" />
+      </el-form-item>
 
-</template>
+      <el-button @click.prevent="onSubmit" type="primary">
+        {{ $t('reset_the_password') }}
+      </el-button>
+      <el-link>{{ $t('forget_your_password') }}</el-link>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+const STATE = {
+  SUCCESS: 1,
+  TOKEN_INVALID: 2,
+};
+
+export default {
+  name: 'reset-password',
+  data() {
+    return {
+      form: {
+        password: '',
+        confirm_password: '',
+      },
+    };
+  },
+  props: {
+    token: {
+      required: true,
+      type: String,
+    },
+  },
+  computed: {
+
+    isSuccess() {
+      return this.current_state === STATE.SUCCESS;
+    },
+    isTokenInvalid() {
+      return this.current_state === STATE.TOKEN_INVALID;
+    },
+  },
+  methods: {
+    ...mapActions(['newPassword']),
+
+    /**
+     * Handle the submitting the reset password form.
+     */
+    onSubmit() {
+      const form = {
+        ...this.form,
+        token: this.token,
+      };
+
+      this.newPassword({ form }).then(() => {
+        this.$router.push({ name: 'login' });
+      }).catch((error) => {
+        const { response } = error;
+        const { data } = response;
+
+        if (data.error.type === 'token.invalid') {
+          this.current_status = STATE.TOKEN_INVALID;
+        }
+      });
+    },
+  },
+};
+</script>