[CODEBREW] Added password reset function

Author: strobsi

src/components/LoginForm.vue

@@ -1,40 +1,43 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-      <form
-      >
-      <input type="email" v-model="email" placeholder="Email Adresse">
-      <br>
-      <input type="password" v-model="password" placeholder="Passwort">
-      <br>
-      <input type="button" value="LOG IN" @click="login">
-      </form>
+    <form>
+      <input type="email" v-model="email" placeholder="Email Adresse" />
+      <br />
+      <input type="password" v-model="password" placeholder="Passwort" />
+      <br />
+      <input type="button" value="LOG IN" @click="login" />
+      <input type="button" value="RESET PASSWORD" @click="resetPassword" />
+    </form>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'LoginForm',
+  name: "LoginForm",
   props: {
-    msg: String
+    msg: String,
   },
 
   data() {
     return {
       email: "",
-      password: ""
-    }
+      password: "",
+    };
   },
 
   methods: {
     login() {
       this.$emit("login", {
         email: this.email,
-        password: this.password
-      })
+        password: this.password,
+      });
+    },
+    resetPassword() {
+      this.$emit("resetPassword", this.email);
     },
   },
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/store/index.js

@@ -39,6 +39,17 @@ export default new Vuex.Store({
       fb.auth.signOut();
       commit("setUser", {});
     },
+    async resetPassword({ commit }, email) {
+      return fb.auth
+        .sendPasswordResetEmail(email)
+        .then((res) => {
+          commit("setUser", {});
+          return res;
+        })
+        .catch((err) => {
+          return err;
+        });
+    },
     async uploadProfilePicture({ commit }, payload) {
       var storageRef = fb.storage.ref();
       var pictureRef = storageRef.child(

src/views/Index.vue

@@ -1,7 +1,12 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="@/assets/logo.png" />
-    <LoginForm @login="login" v-if="!user.uid" msg="Bitte einloggen" />
+    <LoginForm
+      @login="login"
+      @resetPassword="resetPassword"
+      v-if="!user.uid"
+      msg="Bitte einloggen"
+    />
   </div>
 </template>
 
@@ -28,6 +33,12 @@ export default {
         this.$router.push("/dashboard");
       });
     },
+    resetPassword(email) {
+      console.log("Email reset: " + email);
+      this.$store.dispatch("resetPassword", email).then(() => {
+        alert("Password Reset sent out to: " + email);
+      });
+    },
   },
 };
 </script>