-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #21 from mathieuher/preview/resetPassword
Preview/reset password
- Loading branch information
Showing
11 changed files
with
234 additions
and
3 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
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
101 changes: 101 additions & 0 deletions
101
src/app/pages/reset-password/reset-password.component.html
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,101 @@ | ||
| <app-toolbar> | ||
| <ng-container ngProjectAs="left-actions"> | ||
| <app-button-icon | ||
| icon="arrow_back" | ||
| routerLink="/login" | ||
| ></app-button-icon> | ||
| </ng-container> | ||
| </app-toolbar> | ||
| <div class="retro-content"> | ||
| @if(token) { @if(passwordChanged && passwordChanged()) { | ||
| <div class="retro-placeholder-image"> | ||
| <img src="assets/icons/password.svg" /> | ||
| </div> | ||
| <div class="retro-title placeholder">Password updated</div> | ||
| <div class="retro-text placeholder"> | ||
| Password updated successfully! You're all set to get back on the | ||
| mountain and enjoy the ride. | ||
| </div> | ||
| <button class="retro-button placeholder" routerLink="/login"> | ||
| Go to login | ||
| </button> | ||
| } @else { | ||
| <div class="retro-title">Set your new password</div> | ||
| <div class="form-container"> | ||
| <div class="retro-form-line"> | ||
| <div class="label">Password</div> | ||
| <input | ||
| class="retro-input" | ||
| type="password" | ||
| [formControl]="password" | ||
| placeholder="6 to 16 char." | ||
| /> | ||
| </div> | ||
| <div class="retro-form-line"> | ||
| <div class="label">Confirm password</div> | ||
| <input | ||
| class="retro-input" | ||
| type="password" | ||
| [formControl]="passwordConfirm" | ||
| placeholder="6 to 16 char." | ||
| /> | ||
| </div> | ||
| <button | ||
| class="retro-button" | ||
| [disabled]=" | ||
| password.invalid || | ||
| passwordConfirm.invalid || | ||
| password.value !== passwordConfirm.value | ||
| " | ||
| (click)="changePassword()" | ||
| > | ||
| Save your new password | ||
| </button> | ||
| @if(password.valid && passwordConfirm.valid && password.value !== | ||
| passwordConfirm.value ) { | ||
| <div class="retro-text error">Passwords don’t match. Try again.</div> | ||
| } @if(passwordChanged && !passwordChanged()) { | ||
| <div class="retro-text error"> | ||
| Something went wrong while updating your password. Please try again. | ||
| </div> | ||
| } | ||
| </div> | ||
| } } @else { @if(mailSent()) { | ||
| <div class="retro-placeholder-image"> | ||
| <img src="assets/icons/mailSent.svg" /> | ||
| </div> | ||
| <div class="retro-title placeholder">Mail sent</div> | ||
| <div class="retro-text placeholder"> | ||
| Check your inbox for a message from us. Follow the instructions in the | ||
| email to reset your password and get back on track! | ||
| </div> | ||
| } @else { | ||
| <div class="retro-title">Reset your password</div> | ||
| <div class="retro-text"> | ||
| Forgot your password? No worries, we’ve got you covered! | ||
| </div> | ||
| <div class="retro-text"> | ||
| Simply enter your email below and click the button. You’ll receive an | ||
| email shortly with instructions to reset your password and create a new | ||
| one. | ||
| </div> | ||
| <div class="form-container"> | ||
| <div class="retro-form-line"> | ||
| <div class="label">Email</div> | ||
| <input | ||
| class="retro-input" | ||
| type="email" | ||
| [formControl]="email" | ||
| placeholder="Profile email" | ||
| /> | ||
| </div> | ||
| <button | ||
| class="retro-button" | ||
| [disabled]="email.invalid" | ||
| (click)="sendMail()" | ||
| > | ||
| Send password reset mail | ||
| </button> | ||
| </div> | ||
| } } | ||
| </div> |
13 changes: 13 additions & 0 deletions
13
src/app/pages/reset-password/reset-password.component.scss
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,13 @@ | ||
| :host { | ||
| display: flex; | ||
| flex: 1 1 auto; | ||
| flex-direction: column; | ||
| padding: 1rem; | ||
|
|
||
| .form-container { | ||
| padding: 1rem 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| } | ||
| } |
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,56 @@ | ||
| import { ChangeDetectionStrategy, Component, inject, signal, type Signal } from '@angular/core'; | ||
| import { ToolbarComponent } from '../../common/components/toolbar/toolbar.component'; | ||
| import { ButtonIconComponent } from '../../common/components/button-icon/button-icon.component'; | ||
| import { ActivatedRoute, RouterLink } from '@angular/router'; | ||
| import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms'; | ||
| import { emailValidator } from '../login/login.component'; | ||
| import { AuthService } from '../../common/services/auth.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-reset-password', | ||
| imports: [ButtonIconComponent, ReactiveFormsModule, RouterLink, ToolbarComponent], | ||
| templateUrl: './reset-password.component.html', | ||
| styleUrl: './reset-password.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class ResetPasswordComponent { | ||
| private authService = inject(AuthService); | ||
| private route = inject(ActivatedRoute); | ||
|
|
||
| protected mailSent = signal(false); | ||
| protected passwordChanged?: Signal<boolean>; | ||
| protected email = new FormControl('', [Validators.required, emailValidator]); | ||
| protected password = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(16)]); | ||
| protected passwordConfirm = new FormControl('', [ | ||
| Validators.required, | ||
| Validators.minLength(6), | ||
| Validators.maxLength(16) | ||
| ]); | ||
| protected readonly token = (this.route.snapshot.params as { token: string }).token; | ||
|
|
||
| protected sendMail(): void { | ||
| if (this.email.valid) { | ||
| this.authService.sendResetPasswordMail(this.email.value!).then(success => { | ||
| if (success) { | ||
| this.mailSent.set(true); | ||
| this.email.reset(); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| protected changePassword(): void { | ||
| if ( | ||
| this.token && | ||
| this.password.valid && | ||
| this.passwordConfirm.valid && | ||
| this.password.value === this.passwordConfirm.value | ||
| ) { | ||
| this.authService | ||
| .changePassword(this.password.value!, this.passwordConfirm.value!, this.token) | ||
| .then(result => { | ||
| this.passwordChanged = signal(result); | ||
| }); | ||
| } | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.