view for resetting password

Author: supalarry

frontend/src/assets/auth/refresh.png

@@ -5,6 +5,8 @@ import SignUp from '../views/auth/SignUp.vue';
 import SignIn from '../views/auth/SignIn.vue';
 import ForgotPassword from '../views/auth/ForgotPassword.vue';
 import AccountVerified from '../views/auth/AccountVerified.vue';
+import ResetPassword from '../views/auth/ResetPassword.vue';
+import ResetPasswordError from '../views/auth/ResetPasswordError.vue';
 
 Vue.use(VueRouter);
 
@@ -29,6 +31,16 @@ const routes = [
     name: 'ForgotPassword',
     component: ForgotPassword,
   },
+  {
+    path: '/accounts/password/reset',
+    name: 'ResetPassword',
+    component: ResetPassword,
+  },
+  {
+    path: '/accounts/password/reseterror',
+    name: 'ResetPasswordError',
+    component: ResetPasswordError,
+  },
   {
     path: '/accounts/verified',
     name: 'AccountVerified',

frontend/src/assets/auth/success.png

@@ -0,0 +1,51 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="auth-container">
+    <div class="auth-sub-container">
+      <div class="auth-sub-container-content" v-if="!passwordHasBeenReset">
+        <img src="../../assets/auth/refresh.png" class="h-12">
+        <h1 class="auth-sub-container-content-heading">Enter your new password</h1>
+      </div>
+      <div class="auth-sub-container-content" v-if="!passwordHasBeenReset">
+        <ValidationObserver v-slot="{ handleSubmit, invalid }">
+          <form @submit.prevent="handleSubmit(onSubmit)">
+            <ValidationProvider name="Password" rules="required|min:6|validPassword" v-slot="{errors}">
+              <input type="password" placeholder="New Password" v-model="formData.password" class="matcha-input mt-0">
+              <span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
+            </ValidationProvider>
+            <input type="submit" :disabled="invalid" value="Reset password" v-bind:class="{'auth-sub-container-content-submit-button': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
+          </form>
+        </ValidationObserver>
+      </div>
+      <div class="auth-sub-container-content" v-if="passwordHasBeenReset">
+        <img src="../../assets/auth/success.png" class="h-12">
+        <h1 class="auth-sub-container-content-heading">Your password has been reset</h1>
+        <router-link to="/accounts/signin" class="auth-sub-container-content-link">Sign in</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data: () => ({
+    formData: {
+      password: '',
+    },
+    passwordHasBeenReset: false,
+  }),
+  methods: {
+    passwordErrorHandler(error) {
+      if (!error || error === 'The Password field is required') {
+        return error;
+      }
+      return 'This password is too easy to guess';
+    },
+    onSubmit() {
+      this.passwordHasBeenReset = true;
+    },
+  },
+};
+
+</script>