skeleton for reset password routes contacting backend

Author: supalarry

frontend/src/assets/css/tailwind.css

@@ -117,7 +117,7 @@
 
     .auth-sub-container-error {
         @apply bg-red-500;
-        @apply py-4;
+        @apply p-4;
         @apply flex;
         @apply justify-center;
         @apply text-center;
@@ -166,6 +166,10 @@
         @apply mt-4;
     }
 
+    .auth-sub-container-content-submit-button:active, .auth-sub-container-content-submit-button:focus {
+        outline: none;
+    }
+
     .auth-sub-container-content-button {
         @apply bg-purple-matcha;
         @apply w-full;

frontend/src/views/auth/ForgotPassword.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="auth-container">
+    <div class="auth-sub-container-error mb-4" v-if="error.happened">
+      <h1 class="auth-sub-container-error-message">{{error.message}}</h1>
+    </div>
     <div class="auth-sub-container">
       <div class="auth-sub-container-content" v-if="!forgotPasswordEmailSent">
         <img src="../../assets/auth/lock.png" class="h-12">
@@ -40,10 +43,32 @@ export default {
       email: '',
     },
     forgotPasswordEmailSent: false,
+    error: {
+      happened: false,
+      message: '',
+    },
   }),
   methods: {
-    onSubmit() {
-      this.forgotPasswordEmailSent = true;
+    async onSubmit() {
+      try {
+        this.clearError();
+        const passwordForgotResponse = await this.$http.post('/auth/password/forgot', this.formData);
+        if (passwordForgotResponse.status !== 200) {
+          this.displayError('Something went wrong on our end. We are sorry. Please, try again later.');
+          return;
+        }
+        this.forgotPasswordEmailSent = true;
+      } catch (error) {
+        this.displayError('Something went wrong on our end. We are sorry. Please, try again later.');
+      }
+    },
+    clearError() {
+      this.error.message = '';
+      this.error.happened = false;
+    },
+    displayError(message) {
+      this.error.message = message;
+      this.error.happened = true;
     },
   },
 };

frontend/src/views/auth/ResetPassword.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="auth-container">
+    <div class="auth-sub-container-error mb-4" v-if="error.happened">
+      <h1 class="auth-sub-container-error-message">{{error.message}}</h1>
+    </div>
     <div class="auth-sub-container">
       <div class="auth-sub-container-content" v-if="!passwordHasBeenReset">
         <img src="../../assets/auth/refresh.png" class="h-12">
@@ -29,11 +32,18 @@
 <script>
 
 export default {
+  async beforeMount() {
+    await this.checkToken();
+  },
   data: () => ({
     formData: {
       password: '',
     },
     passwordHasBeenReset: false,
+    error: {
+      happened: false,
+      message: '',
+    },
   }),
   methods: {
     passwordErrorHandler(error) {
@@ -42,9 +52,26 @@ export default {
       }
       return 'This password is too easy to guess';
     },
-    onSubmit() {
+    async onSubmit() {
+      const resetPasswordResponse = await this.$http.post('/auth/password/reset', this.formData);
+      if (resetPasswordResponse.status !== 200) {
+        this.error.message = resetPasswordResponse.data.error.message;
+        this.error.happened = true;
+        return;
+      }
       this.passwordHasBeenReset = true;
     },
+    async checkToken() {
+      const { token } = this.$route.query;
+      if (!token) {
+        await this.$router.push('/accounts/password/reseterror');
+        return;
+      }
+      const tokenCheck = await this.$http.post('/auth/password/check_token', { token });
+      if (tokenCheck.status !== 200) {
+        await this.$router.push('/accounts/password/reseterror');
+      }
+    },
   },
 };