ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Implement password reset

Browse source
This commit is contained in:
Cathy Hu 2020-10-09 12:25:53 +02:00
parent 2723fa50e4
commit c531e8207e
12 changed files with 389 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
kibicara-frontend/src/app/auth/auth-routing.module.ts
View file

@ -3,6 +3,8 @@ import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { ConfirmComponent } from './confirm/confirm.component';
import { PasswordResetComponent } from './password-reset/password-reset.component';
import { SetPasswordComponent } from './password-reset/set-password/set-password.component';
const routes: Routes = [
{
@ -11,6 +13,8 @@ const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'confirm', component: ConfirmComponent },
{ path: 'reset', component: PasswordResetComponent },
{ path: 'password-reset', component: SetPasswordComponent },
],
},
];

10
kibicara-frontend/src/app/auth/auth.module.ts
View file

@ -4,9 +4,17 @@ import { ConfirmComponent } from './confirm/confirm.component';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { SharedModule } from '../shared/shared.module';
import { PasswordResetComponent } from './password-reset/password-reset.component';
import { SetPasswordComponent } from './password-reset/set-password/set-password.component';
@NgModule({
declarations: [ConfirmComponent, LoginComponent, RegisterComponent],
declarations: [
ConfirmComponent,
LoginComponent,
RegisterComponent,
PasswordResetComponent,
SetPasswordComponent,
],
imports: [AuthRoutingModule, SharedModule],
})
export class AuthModule {}

14
kibicara-frontend/src/app/auth/login/login.component.html
View file

@ -37,10 +37,16 @@
</mat-form-field>
</div>
<div class="buttons">
<button mat-raised-button color="primary" [disabled]="loading">
Log In
</button>
<a mat-button routerLink="/register">Register</a>
<div>
<button mat-raised-button color="primary" [disabled]="loading">
Log In
</button>
<a mat-button routerLink="/register">Register</a>
</div>
<div class="spacer"></div>
<div>
<a routerLink="/reset">Forgot password?</a>
</div>
</div>
</form>
</mat-card-content>

7
kibicara-frontend/src/app/auth/login/login.component.scss
View file

@ -34,9 +34,16 @@
.buttons {
margin-left: 20px;
margin-right: 30px;
display: flex;
align-items: center;
}
.login-form {
margin-top: 10%;
margin-bottom: 10%;
}
.spacer {
flex-grow: 1;
}

34
kibicara-frontend/src/app/auth/password-reset/password-reset.component.html Normal file
View file

@ -0,0 +1,34 @@
<div class="container">
<mat-card class="login-form">
<mat-card-header>
<h2>Reset password</h2>
</mat-card-header>
<mat-card-content>
<form [formGroup]="resetForm" (ngSubmit)="onSubmit()">
<div class="input-container">
<mat-form-field appearance="fill">
<mat-label>E-Mail</mat-label>
<input type="text" formControlName="email" matInput />
<mat-error
*ngIf="
resetForm.controls.email.errors &&
resetForm.controls.email.errors.required
"
>
Email is required
</mat-error>
</mat-form-field>
</div>
<div class="buttons">
<div>
<button mat-raised-button color="primary" [disabled]="loading">
Reset password
</button>
<a mat-button routerLink="/login">Login</a>
</div>
</div>
</form>
</mat-card-content>
</mat-card>
<div class="banner"></div>
</div>

44
kibicara-frontend/src/app/auth/password-reset/password-reset.component.scss Normal file
View file

@ -0,0 +1,44 @@
.input-container {
display: grid;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
margin-top: 3%;
}
.mat-card:not([class*="mat-elevation-z"]) {
box-shadow: none;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
@media (max-width: 600px) {
grid-template-columns: 1fr;
margin-left: 5%;
margin-right: 5%;
}
}
.banner {
background: url("../../../assets/hoods1.jpg");
background-size: 100%;
display: block;
width: 100%;
height: 100%;
}
.buttons {
margin-left: 20px;
margin-right: 30px;
display: flex;
align-items: center;
}
.login-form {
margin-top: 10%;
margin-bottom: 10%;
}

24
kibicara-frontend/src/app/auth/password-reset/password-reset.component.spec.ts Normal file
View file

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PasswordResetComponent } from './password-reset.component';
describe('PasswordResetComponent', () => {
let component: PasswordResetComponent;
let fixture: ComponentFixture<PasswordResetComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [PasswordResetComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PasswordResetComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

66
kibicara-frontend/src/app/auth/password-reset/password-reset.component.ts Normal file
View file

@ -0,0 +1,66 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { AdminService } from 'src/app/core/api/api/admin.service';
import { LoginService } from 'src/app/core/auth/login.service';
@Component({
selector: 'app-password-reset',
templateUrl: './password-reset.component.html',
styleUrls: ['./password-reset.component.scss'],
})
export class PasswordResetComponent implements OnInit {
resetForm: FormGroup;
returnUrl: string;
loading = false;
submitted = false;
hide = true;
constructor(
private adminService: AdminService,
private loginService: LoginService,
private router: Router,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private snackBar: MatSnackBar
) {
if (this.loginService.currentHoodAdminValue) {
this.router.navigate(['/dashboard']);
}
}
ngOnInit(): void {
this.resetForm = this.formBuilder.group({
email: ['', Validators.required],
});
this.returnUrl = this.route.snapshot.queryParams.returnUrl || '/dashboard';
}
onSubmit() {
this.submitted = true;
if (this.resetForm.invalid) {
return;
}
this.loading = true;
this.adminService
.reset({ email: this.resetForm.controls.email.value })
.pipe(first())
.subscribe(
(data) => {
this.router.navigate([this.returnUrl]);
this.snackBar.open('Reset E-Mail sent!', 'Close', {
duration: 2000,
});
},
(error) => {
this.snackBar.open('Error sending E-Mail!', 'Close', {
duration: 2000,
});
this.loading = false;
}
);
}
}

47
kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.html Normal file
View file

@ -0,0 +1,47 @@
<div class="container">
<mat-card class="login-form">
<mat-card-header>
<h2>Enter your new password</h2>
</mat-card-header>
<mat-card-content>
<form [formGroup]="resetForm" (ngSubmit)="onSubmit()">
<div class="input-container">
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input
type="password"
formControlName="password"
matInput
[type]="'password'"
/>
<mat-error
*ngIf="
resetForm.controls.password.errors &&
resetForm.controls.password.errors.required
"
>
Password is required
</mat-error>
<mat-error
*ngIf="
resetForm.controls.password.errors &&
resetForm.controls.password.errors.minlength
"
>
Password requires minimal length 8
</mat-error>
</mat-form-field>
</div>
<div class="buttons">
<div>
<button mat-raised-button color="primary" [disabled]="loading">
Save new password
</button>
<a mat-button routerLink="/login">Login</a>
</div>
</div>
</form>
</mat-card-content>
</mat-card>
<div class="banner"></div>
</div>

44
kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.scss Normal file
View file

@ -0,0 +1,44 @@
.input-container {
display: grid;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
margin-top: 3%;
}
.mat-card:not([class*="mat-elevation-z"]) {
box-shadow: none;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
@media (max-width: 600px) {
grid-template-columns: 1fr;
margin-left: 5%;
margin-right: 5%;
}
}
.banner {
background: url("../../../../assets/hoods1.jpg");
background-size: 100%;
display: block;
width: 100%;
height: 100%;
}
.buttons {
margin-left: 20px;
margin-right: 30px;
display: flex;
align-items: center;
}
.login-form {
margin-top: 10%;
margin-bottom: 10%;
}

24
kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.spec.ts Normal file
View file

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SetPasswordComponent } from './set-password.component';
describe('SetPasswordComponent', () => {
let component: SetPasswordComponent;
let fixture: ComponentFixture<SetPasswordComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [SetPasswordComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SetPasswordComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

76
kibicara-frontend/src/app/auth/password-reset/set-password/set-password.component.ts Normal file
View file

@ -0,0 +1,76 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { AdminService } from 'src/app/core/api/api/admin.service';
import { LoginService } from 'src/app/core/auth/login.service';
@Component({
selector: 'app-set-password',
templateUrl: './set-password.component.html',
styleUrls: ['./set-password.component.scss'],
})
export class SetPasswordComponent implements OnInit {
resetForm: FormGroup;
returnUrl: string;
loading = false;
submitted = false;
hide = true;
token;
constructor(
private adminService: AdminService,
private loginService: LoginService,
private router: Router,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private snackBar: MatSnackBar
) {
this.token = this.route.snapshot.queryParams.token;
if (this.loginService.currentHoodAdminValue) {
this.router.navigate(['/dashboard']);
} else if (!this.token) {
this.router.navigate(['/404']);
}
}
ngOnInit(): void {
this.resetForm = this.formBuilder.group({
password: ['', [Validators.required, Validators.minLength(8)]],
});
this.returnUrl = this.route.snapshot.queryParams.returnUrl || '/dashboard';
}
onSubmit() {
this.submitted = true;
if (this.resetForm.invalid) {
return;
}
this.loading = true;
this.adminService
.confirmReset(this.token, {
password: this.resetForm.controls.password.value,
})
.pipe(first())
.subscribe(
(data) => {
this.router.navigate([this.returnUrl]);
this.snackBar.open('Password reset successful!', 'Close', {
duration: 2000,
});
},
(error) => {
this.snackBar.open(
'Error resetting password! Try ordering another password reset email!',
'Close',
{
duration: 2000,
}
);
this.loading = false;
}
);
}
}