Merge pull request #36 from codewizardshq/forgot-password

Forgot Password + Reset Password

Author: usrbinsam

CodeChallenge/api/users.py

@@ -172,7 +172,7 @@ def forgot_password():
                            "reset request has been issued for your account. If you "
                            "did not make this request, you can ignore this email. "
                            "To reset your password, use this link within 24 hours. "
-                           f"\n\n{current_app.config['EXTERNAL_URL']}/reset-password?token={token}"
+                           f"\n\n{current_app.config['EXTERNAL_URL']}/reset-password/{token}"
                            f"\n\nAccount Username: {user.username}",
                       recipients=[user.parent_email])
 
@@ -191,7 +191,7 @@ def forgot_password():
 
 
 @bp.route("/reset-password", methods=["POST"])
-@limiter.limit("3 per hour", key_func=get_remote_address)
+@limiter.limit("10 per hour", key_func=get_remote_address)
 def reset_password():
     data = request.get_json()
     password = data.get("password")

CodeChallenge/config.py

@@ -20,7 +20,7 @@ class DefaultConfig:
     CODE_CHALLENGE_START = ""
     RATELIMIT_HEADERS_ENABLED = True
 
-    MAIL_SERVER = "localhost"
+    MAIL_SERVER = "smtp.mailgun.org"
     MAIL_PORT = 587
     MAIL_USE_TLS = True
     MAIL_USERNAME = ""
@@ -72,6 +72,7 @@ class ProductionConfig(DefaultConfig):
 
 
 class DevelopmentConfig(ProductionConfig):
+    EXTERNAL_URL = "http://localhost:8080"
     SQLALCHEMY_DATABASE_URI = "mysql://cc-user:password@localhost" \
                               "/code_challenge_local"
     JWT_COOKIE_SECURE = False

src/api/auth.js

@@ -74,6 +74,14 @@ function currentUser() {
   return { ...state };
 }
 
+async function forgotPassword(email) {
+  return await request(routes.userapi_forgot_password, { data: { email } }, false);
+}
+
+async function resetPassword(token, password) {
+  return await request(routes.userapi_reset_password, { data: { token, password } }, false)
+}
+
 export default {
   logout,
   login,
@@ -82,5 +90,7 @@ export default {
   createAccount,
   currentUser,
   onAuthStateChange,
-  offAuthStateChange
+  offAuthStateChange,
+  forgotPassword,
+  resetPassword
 };

src/api/request.js

@@ -26,6 +26,7 @@ export default async function request(route, options = {}, tryRefresh = true) {
     // return original error
     return Promise.reject({
       status: err.response.status,
+      headers: err.response.headers,
       message:
         !!err.response.data && !!err.response.data.reason
           ? err.response.data.reason

src/api/routes.js

@@ -12,10 +12,12 @@ export default {
   userapi_logout: route("/api/v1/users/token/remove", "POST"),
   userapi_hello: route("/api/v1/users/hello", "GET"),
   userapi_refresh: route("/api/v1/users/token/refresh", "POST"),
+  userapi_forgot_password: route("/api/v1/users/forgot", "POST"),
+  userapi_reset_password: route("/api/v1/users/reset-password", "POST"),
   questionsapi_rank_reset: route("/api/v1/questions/reset", "DELETE"),
   questionsapi_answer_next_question: route("/api/v1/questions/answer", "POST"),
   questionsapi_get_rank: route("/api/v1/questions/rank", "GET"),
-  questions_api_next_question: route("/api/v1/questions/next", "GET")
+  questions_api_next_question: route("/api/v1/questions/next", "GET"),
 };
 
 // export default {

src/plugins/router.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import { auth } from "@/api";
+import {auth} from "@/api";
 import store from "@/store";
 
 Vue.use(VueRouter);
@@ -20,7 +20,13 @@ const routes = [
     }
   },
   {
-    path: "/reset-password",
+    path: "/forgot-password",
+    name: "forgot-password",
+    component: () => import("@/views/ForgotPassword"),
+    meta: { anon: true }
+  },
+  {
+    path: "/reset-password/:token",
     name: "reset-password",
     component: () => import("@/views/ResetPassword")
   },

src/views/ForgotPassword.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-row align="center" justify="center">
+    <v-col cols="12" sm="8" md="4">
+      <v-card flat class="mt-12">
+        <v-toolbar color="secondary" dark flat>
+          <v-toolbar-title>Forgot password form</v-toolbar-title>
+        </v-toolbar>
+        <v-form @submit.prevent="validate" ref="form">
+          <v-card-text>
+            <p>
+              Did you forget your password? Enter your parent's e-mail address
+              below. They entered this when they created your account.
+            </p>
+            <v-text-field
+              v-bind="fields.username"
+              v-model="fields.username.value"
+              :disabled="isSubmitting"
+            />
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer/>
+            <v-btn color="secondary" type="submit" dark :disabled="isSubmitting"
+            >Send Reset Password Request
+            </v-btn
+            >
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-col>
+
+    <v-dialog
+      v-model="multiple"
+      max-width="290"
+    >
+      <v-card>
+        <v-card-title class="headline">Multiple Accounts</v-card-title>
+        <v-card-text>
+          That email address is associated with multiple accounts.
+          Password reset emails have been sent for each account.
+          Double check the email body for the username so that you reset the intended account's password!
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer/>
+          <v-btn text color="green" @click="multiple = false">OK</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+  </v-row>
+</template>
+
+<script>
+  import {auth} from "@/api";
+
+  export default {
+    name: "forgot-password",
+    methods: {
+      async submit() {
+        try {
+          let res = await auth.forgotPassword(this.fields.username.value);
+          this.multiple = res.multiple;
+          this.$store.dispatch(
+            "Snackbar/showInfo",
+            "A password reset link was sent to your email."
+          );
+        } catch (e) {
+          if (e.status === 400) {
+            this.$store.dispatch(
+              "Snackbar/showError",
+              "No accounts associated with that email address."
+            );
+            return;
+          }
+          if (e.status === 429) {
+            let totalSeconds = parseInt(e.headers["retry-after"]);
+            let hours = Math.floor(totalSeconds / 3600);
+            totalSeconds %= 3600;
+            let minutes = Math.floor(totalSeconds / 60);
+            let seconds = totalSeconds % 60;
+
+            this.$store.dispatch(
+              "Snackbar/showError",
+              `Reset attempts exceeded. Try again in ${hours} hours ${minutes} minutes ${seconds} seconds.`
+            );
+            return;
+          }
+          this.$store.dispatch(
+            "Snackbar/showError",
+            "Request failed, try again."
+          );
+
+          console.error(e);
+        }
+      },
+      validate() {
+        if (this.$refs.form.validate()) {
+          this.submit();
+        }
+      }
+    },
+    data() {
+      return {
+        isSubmitting: false,
+        multiple: false,
+        fields: {
+          username: {
+            label: "Parents E-mail",
+            type: "email",
+            rules: [v => !!v || "Please provide a valid e-mail address"]
+          }
+        }
+      };
+    }
+  };
+</script>

src/views/Login.vue

@@ -21,7 +21,7 @@
           </v-card-text>
 
           <v-card-text>
-            <router-link :to="{ name: 'reset-password' }"
+            <router-link :to="{ name: 'forgot-password' }"
               >Forgot your password?</router-link
             >
           </v-card-text>
@@ -43,8 +43,9 @@
 </template>
 
 <script>
-import { auth } from "@/api";
-export default {
+  import {auth} from "@/api";
+
+  export default {
   name: "login",
   methods: {
     async submit() {

src/views/ResetPassword.vue

@@ -3,25 +3,30 @@
     <v-col cols="12" sm="8" md="4">
       <v-card flat class="mt-12">
         <v-toolbar color="secondary" dark flat>
-          <v-toolbar-title>Reset password form</v-toolbar-title>
+          <v-toolbar-title>Password reset form</v-toolbar-title>
         </v-toolbar>
         <v-form @submit.prevent="validate" ref="form">
           <v-card-text>
             <p>
-              Did you forget your password? Enter your parent's e-mail address
-              below. They entered this when they created your account.
+              Create a new password.
             </p>
+
+            <v-text-field
+              v-bind="fields.password"
+              v-model="fields.password.value"
+              :disabled="isSubmitting"
+            />
             <v-text-field
-              v-bind="fields.username"
-              v-model="fields.username.value"
+              v-bind="fields.passwordConfirm"
+              v-model="fields.passwordConfirm.value"
               :disabled="isSubmitting"
             />
           </v-card-text>
 
           <v-card-actions>
             <v-spacer />
             <v-btn color="secondary" type="submit" dark :disabled="isSubmitting"
-              >Send Reset Password Request</v-btn
+            >Reset Password</v-btn
             >
           </v-card-actions>
         </v-form>
@@ -31,32 +36,66 @@
 </template>
 
 <script>
-export default {
-  name: "reset-password",
-  methods: {
-    async submit() {
-      this.$store.dispatch(
-        "Snackbar/showError",
-        "This feature not yet implemented"
-      );
-    },
-    validate() {
-      if (this.$refs.form.validate()) {
-        this.submit();
+  import {auth} from "@/api";
+
+  export default {
+    name: "reset-password",
+    created() {
+      if (! this.$route.params.token) {
+        this.$store.dispatch(
+          "Snackbar/showError",
+          "Missing token from URL. Password cannot be reset."
+        );
+        this.$router.push({ name: "forgot-password" });
       }
-    }
-  },
-  data() {
-    return {
-      isSubmitting: false,
-      fields: {
-        username: {
-          label: "Parents E-mail",
-          type: "email",
-          rules: [v => !!v || "Please provide a valid e-mail address"]
+    },
+    methods: {
+      async submit() {
+        try {
+          await auth.resetPassword(this.$route.params.token, this.fields.password.value);
+          this.$store.dispatch(
+            "Snackbar/showInfo",
+            "Password reset successfully. You may now login."
+          );
+          this.$router.push({ name: "login" })
+        } catch (e) {
+          console.error(e);
+          this.$store.dispatch(
+            "Snackbar/showError",
+            "Request failed"
+          );
+        }
+      },
+      validate() {
+        if (this.$refs.form.validate()) {
+          this.submit();
         }
       }
-    };
-  }
-};
+    },
+    data() {
+      return {
+        isSubmitting: false,
+        fields: {
+          password: {
+            label: "Password",
+            type: "password",
+            autocomplete: "new-password",
+            value: "",
+            rules: [
+              v => !!v || "Don't forget to give a password",
+              v => v.length >= 8 || "Password must be at least 8 characters"
+            ]
+          },
+          passwordConfirm: {
+            label: "Confirm Password",
+            type: "password",
+            value: "",
+            rules: [
+              v => v == this.fields.password.value || "Passwords do not match"
+            ]
+          },
+        }
+      };
+    }
+  };
 </script>