diff --git a/app/src/app/account/password/password.component.html b/app/src/app/account/password/password.component.html index 0625c163..4ec99bf0 100644 --- a/app/src/app/account/password/password.component.html +++ b/app/src/app/account/password/password.component.html @@ -1,5 +1,38 @@ -

password works!

+

Change your password

- +
+ + Enter your old password + + +
+ + + Enter your new password + + +
+ + + Repeat your new password + + + +   + + +

+ @if (invalidPassword()) { + Password is invalid + } +

+ +
\ No newline at end of file diff --git a/app/src/app/account/password/password.component.scss b/app/src/app/account/password/password.component.scss index e69de29b..8286984b 100644 --- a/app/src/app/account/password/password.component.scss +++ b/app/src/app/account/password/password.component.scss @@ -0,0 +1,3 @@ +.full-width { + width: 100%; +} \ No newline at end of file diff --git a/app/src/app/account/password/password.component.ts b/app/src/app/account/password/password.component.ts index 8f777be7..b7573e58 100644 --- a/app/src/app/account/password/password.component.ts +++ b/app/src/app/account/password/password.component.ts @@ -1,16 +1,31 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { IdentityService } from '../../identity.service'; import { MatButtonModule } from '@angular/material/button'; +import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatIconModule } from '@angular/material/icon'; +import { Router, RouterLink } from '@angular/router'; @Component({ selector: 'app-password', standalone: true, - imports: [MatButtonModule], + imports: [FormsModule, MatProgressSpinnerModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule], templateUrl: './password.component.html', styleUrl: './password.component.scss' }) export class PasswordComponent { - constructor(private identityService: IdentityService) {} + + passwordInputPrevious = new FormControl('', Validators.required); + passwordInput = new FormControl('', Validators.required); + passwordInputRepeat = new FormControl('', Validators.required); + + unlocking = signal(false); + + invalidPassword = signal(false); + + constructor(private identityService: IdentityService, private router: Router) { } async changePassword(oldPassword: string, newPassword: string, confirmPassword: string) { if (newPassword != confirmPassword) { @@ -26,4 +41,29 @@ export class PasswordComponent { console.log('Password changed'); } + + async onSubmit() { + this.unlocking.set(true); + + if (this.passwordInput.value !== this.passwordInputRepeat.value) { + this.invalidPassword.set(true); + this.unlocking.set(false); + console.error('Passwords do not match'); + throw new Error('Passwords do not match'); + } + + try { + await this.changePassword(this.passwordInputPrevious.value!, this.passwordInput.value!, this.passwordInputRepeat.value!); + } catch (error) { + console.error(error); + this.invalidPassword.set(true); + this.unlocking.set(false); + return; + } + + this.invalidPassword.set(false); + this.unlocking.set(false); + + this.router.navigate(['/account', 'did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o']); + } } diff --git a/app/src/app/account/unlock/unlock.component.html b/app/src/app/account/unlock/unlock.component.html index e6664b56..859c616a 100644 --- a/app/src/app/account/unlock/unlock.component.html +++ b/app/src/app/account/unlock/unlock.component.html @@ -5,7 +5,7 @@

Unlock your account

Enter your password - +