forked from GarnBarn/garnbarn-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ Gb-77 ] Add register page and login with email and password (#5)
* Add the base login and register page * add style to input block * Add method to handler login and register * add package sha1 to check compromised password * Fix wrong from label * Fix bug if compromised password the account still created * fix: Correct the function call syntax * fix: Check the password and confirm password match * fix: Update the wording for username to be name-surname --------- Co-authored-by: Siratee K <sirateek@gmail.com>
- Loading branch information
Showing
6 changed files
with
217 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| declare module 'sha1'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| <template> | ||
| <div class="registerBox"> | ||
| <md-card class="registerCard"> | ||
| <md-card-media-actions> | ||
| <md-card-media> | ||
| <img src="@/assets/images/garnbarn-logo.png" class="garnbarnLogo" /> | ||
| </md-card-media> | ||
|
|
||
| <md-card-actions> | ||
| <h3>Register to GarnBarn</h3> | ||
| <div> | ||
| <form @submit.prevent="register"> | ||
| <div class="user"> | ||
| <label for="username">Name - Surname:</label> | ||
| <input id="username" v-model="username" type="text" /> | ||
| </div> | ||
| <div class="user"> | ||
| <label for="username">Email:</label> | ||
| <input id="username" v-model="email" type="text" /> | ||
| </div> | ||
| <div class="pass"> | ||
| <label for="password">Password:</label> | ||
| <input id="password" v-model="password" type="password" /> | ||
| </div> | ||
| <div class="con-pass"> | ||
| <label for="confirmPassword">Confirm Password:</label> | ||
| <input id="confirmPassword" v-model="confirmPassword" type="password" /> | ||
| </div> | ||
| <div> | ||
| <button type="submit">Register</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </md-card-actions> | ||
| </md-card-media-actions> | ||
| </md-card> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import firebase from "firebase"; | ||
| import { Vue, Component } from 'vue-property-decorator'; | ||
| import sha1 from 'sha1'; | ||
| @Component | ||
| export default class Register extends Vue { | ||
| username = ''; | ||
| password = ''; | ||
| confirmPassword = ''; | ||
| email = '' | ||
| checkCompromisedPassword(): boolean { | ||
| const hashedPassword: string = sha1(this.password); | ||
| // todo send api | ||
| return true | ||
| } | ||
| register(): void { | ||
| if (!this.checkCompromisedPassword()) { | ||
| alert('Your passoword is compromised') | ||
| return | ||
| } | ||
| if (this.password !== this.confirmPassword) { | ||
| alert('Password and Confirm Password missmatched') | ||
| return | ||
| } | ||
| firebase | ||
| .auth() | ||
| .createUserWithEmailAndPassword(this.email, this.password) | ||
| .then((res) => { | ||
| res.user! | ||
| .updateProfile({ | ||
| displayName: this.username | ||
| }) | ||
| .then(() => { | ||
| this.$router.push('/signin') | ||
| }); | ||
| }) | ||
| .catch((error) => { | ||
| alert(error.message); | ||
| }); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .registerBox { | ||
| padding-top: 5%; | ||
| padding-top: 5%; | ||
| } | ||
| .registerCard { | ||
| 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); | ||
| } | ||
| .garnbarnLogo { | ||
| width: 150px; | ||
| height: auto; | ||
| } | ||
| hr.rounded { | ||
| margin-top: 5%; | ||
| margin-bottom: 5%; | ||
| margin-left: 10%; | ||
| margin-right: 10%; | ||
| border-top: 2px solid #bbb; | ||
| border-radius: 5px; | ||
| } | ||
| .ruser, | ||
| .pass, | ||
| .con-pass { | ||
| margin: 0.25rem; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters