bastian/idp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pw reset

Browse Source
This commit is contained in:
Bastian Wagner
2024-09-08 17:16:07 +02:00
parent 0d61556133
commit 23a7216de9
16 changed files with 263 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
idp_client/src/app/app.routes.ts
View File

@@ -3,10 +3,12 @@ import { LoginComponent } from './auth/login/login.component';
import { RegisterComponent } from './auth/register/register.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SessionKeyGuard } from './core/guards/session-key.guard';
import { ResetPwComponent } from './auth/reset-pw/reset-pw.component';
export const routes: Routes = [
{ path: 'login', component: LoginComponent, canActivate: [SessionKeyGuard] },
{ path: 'register', component: RegisterComponent },
{ path: 'pw-reset', component: ResetPwComponent },
{ path: 'dashboard', component: DashboardComponent, canActivate: [SessionKeyGuard] },
{ path: '', component: LoginComponent, canActivate: [SessionKeyGuard] },
];

7
idp_client/src/app/auth/login/login.component.html
View File

@@ -12,10 +12,13 @@
<input type="password" formControlName="password" class="login__input" placeholder="Password">
</div>
<button class="button login__submit" (click)="login()" [disabled]="loginForm.invalid || isLoading">
<span class="button__text">Log In Now</span>
<span class="button__text">Einloggen</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
<div class="login-register" (click)="toRegister()" >Register...</div>
<div class="flex-row">
<div class="login-register" style="color: black;" (click)="toResetPw()" >Pw vergessen...</div>
<div class="login-register" (click)="toRegister()" >Registrieren...</div>
</div>
</form>
</div>
<div class="screen__background">

4
idp_client/src/app/auth/login/login.component.ts
View File

@@ -106,4 +106,8 @@ export class LoginComponent {
toRegister() {
this.router.navigate(['/register'], { queryParams: this.route.snapshot.queryParams });
}
toResetPw() {
this.router.navigateByUrl('/pw-reset')
}
}

51
idp_client/src/app/auth/reset-pw/reset-pw.component.html Normal file
View File

@@ -0,0 +1,51 @@
<div class="container">
<div class="screen">
<div class="screen__content">
@if (resetCode == null) {
<form class="login" [formGroup]="resetPw" >
<div>
Gib deine Emailadresse ein um einen Link zum zurücksetzen des Passworts per Mail zu bekommen.
</div>
<div class="login__field">
<i class="login__icon fas fa-user user"></i>
<input formControlName="username" type="text" class="login__input" placeholder="User name / Email">
</div>
<button class="button login__submit" (click)="resetPassword()" [disabled]="resetPw.invalid || isLoading">
<span class="button__text">Passwort zurücksetzen</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
<div class="login-register" (click)="toLogin()" >Login...</div>
</form>
} @else {
<form class="login" [formGroup]="setNewPwForm" >
<div>
Das neue Passwort muss mindestens 4 Zeichen lang sein.
</div>
<div class="login__field">
<i class="login__icon fas fa-user user"></i>
<input formControlName="password" type="password" class="login__input" placeholder="Passwort">
</div>
<div class="login__field">
<i class="login__icon fas fa-user user"></i>
<input formControlName="repeatPassword" type="password" class="login__input" placeholder="Passwort wiederholen">
</div>
<button class="button login__submit" (click)="setNewPassword()" [disabled]="setNewPwForm.invalid || isLoading">
<span class="button__text">Passwort zurücksetzen</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
<div class="login-register" (click)="toLogin()" >Login...</div>
</form>
}
</div>
<div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span>
</div>
</div>
</div>

23
idp_client/src/app/auth/reset-pw/reset-pw.component.spec.ts Normal file
View File

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

76
idp_client/src/app/auth/reset-pw/reset-pw.component.ts Normal file
View File

@@ -0,0 +1,76 @@
import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { HotToastService } from '@ngxpert/hot-toast';
@Component({
selector: 'app-reset-pw',
standalone: true,
imports: [FormsModule, ReactiveFormsModule],
templateUrl: './reset-pw.component.html',
styleUrl: '../auth.scss'
})
export class ResetPwComponent {
private router = inject(Router);
private http = inject(HttpClient);
private route = inject(ActivatedRoute);
private toast = inject(HotToastService);
isLoading = false;
resetCode;
resetPw = new FormGroup({
username: new FormControl('', [Validators.required, Validators.email])
})
setNewPwForm = new FormGroup({
password: new FormControl(null, [Validators.required, Validators.minLength(4), Validators.maxLength(100)]),
repeatPassword: new FormControl(null, [Validators.required, Validators.minLength(4), Validators.maxLength(100)]),
code: new FormControl(null)
})
ngOnInit(): void {
this.resetCode = this.route.snapshot.queryParams["resetcode"];
this.setNewPwForm.patchValue({code: this.resetCode});
}
resetPassword() {
this.http.post('api/auth/reset', this.resetPw.value).subscribe({
next: res => {
console.log(res);
}
})
}
setNewPassword() {
const val = this.setNewPwForm.value;
if (val.password != val.repeatPassword) {
this.toast.error('Die Passwörter stimmen nicht überein');
return;
}
this.http.post('api/auth/reset', this.setNewPwForm.value)
.pipe(
this.toast.observe({
loading: 'Setze neues Passwort',
success: 'Passwort gespeichert',
error: 'Passwort konnte nicht gespeichert werden!'
})
)
.subscribe({
next: res => {
console.log(res);
},
complete: () => {
this.router.navigateByUrl('/login');
}
})
}
toLogin() {
this.router.navigateByUrl("/login");
}
}

2
idp_client/src/app/core/guards/session-key.guard.ts
View File

@@ -57,6 +57,8 @@ export class SessionKeyGuard {
},
error: (error) => {
console.error(error);
window.localStorage.removeItem("auth_session_key")
this.router.navigateByUrl('/login');
}
});
})