[Gb-78] Forgot password page (#6)

* add style to input block

* Add base ui for forgot password page

* Add method to handler login and register

* Add package sha1 to check compromised password

* implement forget password

* Add redirect after reset password

* reabase master

* Add the base login and register page

* Add method to handler login and register

* Add package sha1 to check compromised password

* rebase

* reverse login

* add missing return

src/router/index.ts

@@ -11,6 +11,7 @@ import Account from "@/views/Account/Account.vue";
 import LinkAccount from "@/views/Account/LinkAccount.vue";
 import PageNotFound from "@/views/PageNotFound.vue";
 import Register from "@/views/Register.vue"
+import forgetPassword from "@/views/ForgetPassword.vue"
 
 Vue.use(VueRouter);
 
@@ -30,6 +31,11 @@ const routes: Array<RouteConfig> = [
     name: "Register",
     component: Register,
   },
+  {
+    path: "/forgot-password",
+    name: "forgetPassword",
+    component: forgetPassword,
+  },
   {
     path: "/home",
     name: "HomePage",

src/views/ForgetPassword.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="forgotPasswordBox">
+        <md-card class="forgotPasswordCard">
+            <md-card-media-actions>
+                <md-card-media>
+                    <img src="@/assets/images/garnbarn-logo.png" class="garnbarnLogo" />
+                </md-card-media>
+
+                <md-card-actions>
+                    <h3>Forgot Password</h3>
+                    <div>
+                        <form @submit.prevent="submitForm">
+                            <div class="input-block">
+                                <label for="email">Email:</label>
+                                <input id="email" v-model="email" type="email" />
+                            </div>
+                            <div>
+                                <button type="submit">Submit</button>
+                            </div>
+                        </form>
+                    </div>
+                </md-card-actions>
+            </md-card-media-actions>
+        </md-card>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import firebase from "firebase";
+
+@Component
+export default class ForgotPassword extends Vue {
+    email = '';
+
+    submitForm(): void {
+        firebase
+            .auth()
+            .sendPasswordResetEmail(this.email)
+            .then(() => {
+                alert('Check your registered email to reset the password!')
+                this.$router.push('/signin')
+            }).catch((error) => {
+                alert(error)
+            })
+    }
+}
+</script>
+
+<style scoped>
+.forgotPasswordBox {
+    padding-top: 5%;
+    padding-top: 5%;
+}
+
+.forgotPasswordCard {
+    padding: 10px;
+    padding-top: 15px;
+    border-radius: 20px;
+    background-color: #f9f9f9;
+    display: inline-block;
+    vertical-align: top;
+    overflow: auto;
+    border: 1px solid rgba(#000, 0.12);
+}
+
+.input-block {
+    margin: 0.5rem;
+}
+
+.md-alignment-right {
+    justify-content: center !important;
+}
+</style>
+

src/views/Register.vue

@@ -40,6 +40,8 @@
 <script lang="ts">
 import firebase from "firebase";
 import { Vue, Component } from 'vue-property-decorator';
+import GarnBarnApiConfig from "@/GarnBarnApiConfig.json";
+import axios from 'axios';
 import sha1 from 'sha1';
 
 @Component
@@ -49,18 +51,32 @@ export default class Register extends Vue {
     confirmPassword = '';
     email = ''
 
-    checkCompromisedPassword(): boolean {
+    async checkCompromisedPassword(): Promise<boolean | undefined> {
         const hashedPassword: string = sha1(this.password);
-        // todo send api 
+        try {
+            const response = await axios.post(`${GarnBarnApiConfig.apiPrefix}/api/v1/account/compromised`, { hashedPassword });
+            if (response.status == 200) {
+                return false;
+            }
+        } catch (error: any) {
+            if (error.response.status == 302) {
+                return true;
+            }
+            return undefined
+        }
         return true
     }
 
-    register(): void {
-        if (!this.checkCompromisedPassword()) {
+    async register(): Promise<void> {
+        const checkingPasssowrd = await this.checkCompromisedPassword()
+        if (checkingPasssowrd) {
             alert('Your passoword is compromised')
             return
         }
-
+        else if (checkingPasssowrd == undefined) {
+            alert('An error occurred while checking the password.');
+            return
+        }
         if (this.password !== this.confirmPassword) {
             alert('Password and Confirm Password missmatched')
             return
@@ -115,6 +131,12 @@ hr.rounded {
     border-radius: 5px;
 }
 
+.ruser,
+.pass,
+.con-pass {
+    margin: 0.25rem;
+}
+
 .ruser,
 .pass,
 .con-pass {

src/views/SignIn.vue

@@ -24,7 +24,7 @@
                 <div>Don't have an account?<router-link to="/register">Register</router-link></div>
               </div>
               <div class="forget-password">
-                <router-link to="/forgot">Forgot your password?</router-link>
+                <router-link to="/forgot-password">Forgot your password?</router-link>
               </div>
               <div>
                 <button type="submit">Login</button>