Implement password reset

src/pages/AccountPage.vue

@@ -1,21 +1,22 @@
 <template>
 <Navbar />
 <h1>Account Settings</h1>
-<p>Your Email: {{ displayEmail }}</p>
-
+<p v-if="this.user">Your Email: {{ this.user.email }}</p>
 <div>
-    <p>Enter your current password to edit account settings</p>
+    <h3>Enter your current password to edit account settings</h3>
     <input type="password" v-model="currentPassword" placeholder="Enter existing password">
+    <h3>Send a password reset email</h3>
+    <input @click="resetPasswordEmail" type="submit" name="" value="Send Password reset email">
 
-    <h1>Change email</h1>
+    <h3>Change email</h3>
     <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
     <input @click="updateUserEmail" type="submit" name="" value="Update Email">
 
-    <h1>Change password</h1>
+    <h3>Change password</h3>
     <input type="password" v-model="newPassword" placeholder="Enter new password">
     <input @click="updateUserPassword" type="submit" name="" value="Update Password">
 
-    <h1>Delete account</h1>
+    <h3>Delete account</h3>
     <input @click="deleteUserAccount" type="submit" name="" value="Delete Account">
 </div>
 
@@ -28,9 +29,8 @@
 import Navbar from '../components/Navbar.vue'
 import app from '../api/firebase'
 import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions"
-import { getAuth, updateEmail, updatePassword, deleteUser, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";
+import { getAuth, updateEmail, updatePassword, deleteUser, reauthenticateWithCredential, EmailAuthProvider, sendPasswordResetEmail } from "firebase/auth";
 const auth = getAuth();
-const user = auth.currentUser;
 
 export default {
     name: "AccountPage",
@@ -41,7 +41,7 @@ export default {
 
     data() {
         return {
-            displayEmail: "",
+            user: null,
             newEmail: "",
             newPassword: "",
             currentPassword: "",
@@ -55,10 +55,7 @@ export default {
     },
 
     created() {
-        const user = auth.currentUser
-        this.displayEmail = user.email
-
-
+        this.user = auth.currentUser
         const functions = getFunctions(app)
         let host = window.location.hostname
         if (host === '127.0.0.1' || host === 'localhost') {
@@ -104,8 +101,8 @@ export default {
             }
             this.authenticateUser(this.currentPassword).then(() => {
                 if (!this.reAuthSuccessful) return
-                updateEmail(user, this.newEmail).then(() => {
-                    this.displayEmail = this.newEmail
+                updateEmail(this.user, this.newEmail).then(() => {
+                    // might need to reset user here
                     this.resetCredentials()
                     this.FirebaseSuccessMsg = "Email updated"
                     this.displayFirebaseSuccessMsg = true
@@ -125,7 +122,7 @@ export default {
             }
             this.authenticateUser(this.currentPassword).then(() => {
                 if (!this.reAuthSuccessful) return
-                updatePassword(user, this.newPassword).then(() => {
+                updatePassword(this.user, this.newPassword).then(() => {
                     this.resetCredentials()
                     this.FirebaseSuccessMsg = "Password updated"
                     this.displayFirebaseSuccessMsg = true
@@ -145,7 +142,7 @@ export default {
             }
             this.authenticateUser(this.currentPassword).then(() => {
                 if (!this.reAuthSuccessful) return
-                deleteUser(user).then(() => {
+                deleteUser(this.user).then(() => {
                     this.resetCredentials()
                     this.FirebaseSuccessMsg = "Account deleted"
                     this.displayFirebaseSuccessMsg = true
@@ -156,6 +153,17 @@ export default {
                     this.displayFirebaseError = true
                 })
             })
+        },
+
+        resetPasswordEmail() {
+            sendPasswordResetEmail(auth, this.user.email).then(() => {
+                this.FirebaseSuccessMsg = "Reset password email sent"
+                this.displayFirebaseSuccessMsg = true
+            })
+            .catch((error) => {
+                this.FirebaseError = error.message
+                this.displayFirebaseError = true
+            })
         }
     }
 }

src/pages/LoginPage.vue

@@ -3,22 +3,36 @@
 <div id="background">
   <div class="loginbox">
     <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="avatar">
-    <h1>Login</h1>
-    <p>Email Address</p>
-    <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
-    <p>Password</p>
-    <input type="password" v-model="password" placeholder="Enter password">
-    <input @click="login" type="submit" name="" value="Login">
-    <a><router-link to="/signup">Don't have an account?</router-link></a>
+    <div v-if="!forgotPassword">
+      <h1>Login</h1>
+      <p>Email Address</p>
+      <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
+      <p>Password</p>
+      <input type="password" v-model="password" placeholder="Enter password">
+      <input @click="login" type="submit" name="" value="Login">
+      <a><router-link to="/signup">Don't have an account?</router-link></a>
+      <a @click="forgotPassword = !forgotPassword; this.email = ''">Forgot password?</a>
+    </div>
+
+    <div v-else>
+      <h1>Forgot Password</h1>
+      <p>Email Address</p>
+      <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
+      <input @click="resetPasswordEmail" type="submit" name="" value="Send Reset Email">
+      <a @click="forgotPassword = !forgotPassword; this.email = ''">Go back</a>
+    </div>
   </div>
+
   <p v-if="displayFirebaseError">{{ FirebaseError }}</p>
+  <p v-if="displayFirebaseSuccessMsg">{{ FirebaseSuccessMsg }}</p>
 </div>
 </template>
 
 <script>
 import app from '../api/firebase';
-import {getAuth, signInWithEmailAndPassword} from "firebase/auth"
+import { getAuth, signInWithEmailAndPassword, sendPasswordResetEmail } from "firebase/auth"
 import Navbar from '../components/Navbar.vue'
+const auth = getAuth()
 
 export default {
   name: "LoginPage",
@@ -28,7 +42,10 @@ export default {
       email: "",
       password: "",
       displayFirebaseError: false,
-      FirebaseError: ""
+      FirebaseError: "",
+      displayFirebaseSuccessMsg: false,
+      FirebaseSuccessMsg: "",
+      forgotPassword: false
     }
   },
 
@@ -49,6 +66,18 @@ export default {
         this.FirebaseError = error.message
         this.displayFirebaseError = true
       })
+    },
+
+    resetPasswordEmail() {
+      sendPasswordResetEmail(auth, this.email).then(() => {
+        this.FirebaseSuccessMsg = "Reset password email sent"
+        this.displayFirebaseSuccessMsg = true
+        this.email = ""
+      })
+      .catch((error) => {
+        this.FirebaseError = error.message
+        this.displayFirebaseError = true
+      })
     }
   }
 }
@@ -105,7 +134,6 @@ h1 {
   height: 40px;
   color: #fff;
   font-size: 16px;
-
 }
 
 .loginbox input[type="submit"]:hover {
@@ -120,6 +148,7 @@ h1 {
   font-size: 12px;
   line-height: 20px;
   color: darkgray;
+  display: flex
 }
 
 .loginbox a:hover {

src/pages/SignUpPage.vue

@@ -8,6 +8,7 @@
     <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
     <p>Password</p>
     <input type="password" v-model="password" placeholder="Enter password">
+    <a>Passwords must have 6 or more characters</a>
     <input @click="signup" type="submit" name="" value="Sign Up">
     <a><router-link to="/login">Already have an account?</router-link></a>
   </div>