232: forgot and reset password

Author: supalarry

docker-compose.yml

@@ -11,7 +11,7 @@ services:
       MYSQL_ROOT_PASSWORD: root
       MYSQL_DATABASE: pymatcha
     env_file:
-      - .env
+      - .env.docker
     volumes:
       - mysql:/var/lib/mysql
     networks:
@@ -40,7 +40,7 @@ services:
       context: .
       dockerfile: backend.Dockerfile
     env_file:
-      - .env
+      - .env.docker
     entrypoint: celery worker --workdir . -A PyMatcha.celery -B --loglevel=info
     volumes:
       - backend:/backend
@@ -61,7 +61,7 @@ services:
       context: .
       dockerfile: backend.Dockerfile
     env_file:
-      - .env
+      - .env.docker
     ports:
       - "8080:5000"
     volumes:

frontend/src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';
 import http from './plugins/http';
+import errorMessenger from './plugins/errorMessenger';
 import App from './App.vue';
 import router from './router';
 import store from './store';
@@ -14,6 +15,7 @@ extend('validPassword', validPassword);
 Vue.config.productionTip = false;
 
 Vue.use(http);
+Vue.use(errorMessenger);
 
 new Vue({
   router,

frontend/src/plugins/errorMessenger.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+
+export default {
+  install() {
+    Vue.prototype.$errorMessenger = (error) => {
+      if (error.response && error.response.status === 404) {
+        return 'Something went wrong on our end. We will fix it soon. Please, try again later';
+      }
+      return error.response.data.error.message;
+    };
+  },
+};

frontend/src/plugins/http.js

@@ -11,7 +11,7 @@ function createAxiosInstance(baseURL) {
   });
 }
 
-const axiosInstance = createAxiosInstance('http://localhost:8080');
+const axiosInstance = createAxiosInstance(process.env.VUE_APP_BACKEND_BASE_URL);
 
 export default {
   install() {

frontend/src/views/auth/ForgotPassword.vue

@@ -52,16 +52,15 @@ export default {
     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;
-        }
+        await this.sendResetPasswordLink();
         this.forgotPasswordEmailSent = true;
       } catch (error) {
-        this.displayError('Something went wrong on our end. We are sorry. Please, try again later.');
+        this.displayError(this.$errorMessenger(error));
       }
     },
+    async sendResetPasswordLink() {
+      await this.$http.post('/auth/password/forgot', this.formData);
+    },
     clearError() {
       this.error.message = '';
       this.error.happened = false;

frontend/src/views/auth/ResetPassword.vue

@@ -4,7 +4,7 @@
     <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" v-if="!error.happened">
       <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>
@@ -32,7 +32,7 @@
 <script>
 
 export default {
-  async beforeMount() {
+  async created() {
     await this.checkToken();
   },
   data: () => ({
@@ -53,25 +53,39 @@ export default {
       return 'This password is too easy to guess';
     },
     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;
+      try {
+        this.clearError();
+        await this.resetPassword();
+        this.passwordHasBeenReset = true;
+      } catch (error) {
+        this.displayError(this.$errorMessenger(error));
       }
-      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) {
+      try {
+        const { token } = this.$route.query;
+        if (!token) {
+          await this.$router.push('/accounts/password/reseterror');
+          return;
+        }
+        await this.$http.post('/auth/password/check_token', { token });
+      } catch (error) {
         await this.$router.push('/accounts/password/reseterror');
       }
     },
+    async resetPassword() {
+      const { password } = this.formData;
+      const { token } = this.$route.query;
+      await this.$http.post('/auth/password/reset', { password, token });
+    },
+    clearError() {
+      this.error.message = '';
+      this.error.happened = false;
+    },
+    displayError(message) {
+      this.error.message = message;
+      this.error.happened = true;
+    },
   },
 };