Started implementing user settings -> security -> password management

This commit is contained in:
2026-04-18 15:24:37 +02:00
parent 8afd4a81b0
commit 4eaaacac2c
20 changed files with 575 additions and 7 deletions

View File

@@ -0,0 +1,80 @@
<div class="option">
<ng-template [(tuiDialog)]="changePasswordDialogOpen"
[tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePasswordDialog.'+ (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate}">
<form [formGroup]="changePasswordForm" style="display: flex; flex-direction: column; gap: 10px">
@if (serviceManager.currentSession()!.userData.passwordSet) {
<tui-textfield iconStart="@tui.key">
<label
tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.currentPassword"|translate }}</label>
<input formControlName="currentPassword" tuiInput type="password">
</tui-textfield>
@if (changePasswordForm.controls['currentPassword'].dirty) {
@if (changePasswordForm.controls['currentPassword'].hasError("required")) {
<tui-error
[error]="'chat.userSettingsDialog.security.changePasswordDialog.errors.currentPasswordRequired'|translate"></tui-error>
}
@if (changePasswordForm.controls['currentPassword'].hasError("incorrect")) {
<tui-error
[error]="'chat.userSettingsDialog.security.changePasswordDialog.errors.incorrectPassword'|translate"></tui-error>
}
}
}
@if (!changePasswordRemoveMode()) {
<tui-textfield iconStart="@tui.badge-plus">
<label tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPassword"|translate }}</label>
<input formControlName="newPassword" tuiInput type="password">
</tui-textfield>
<tui-textfield iconStart="@tui.badge-plus">
<label
tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPasswordRepeat"|translate }}</label>
<input formControlName="newPasswordRepeat" tuiInput type="password">
</tui-textfield>
}
</form>
<footer>
<button tuiButton iconStart="@tui.check" [loading]="changePasswordPending()"
[disabled]="changePasswordForm.invalid || changePasswordPending()"
(click)="changePassword(changePasswordForm.controls['currentPassword'].value, changePasswordForm.controls['newPassword'].value)">
{{ ('chat.userSettingsDialog.security.changePasswordDialog.' + (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
</button>
</footer>
</ng-template>
<header>
<tui-icon icon="@tui.key"/>
<span>{{ "chat.userSettingsDialog.security.password"|translate }}</span>
@if (serviceManager.currentSession()!.userData.passwordSet) {
<div tuiBadge appearance="positive"
iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
</div>
} @else {
<div tuiBadge appearance="negative"
iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
</div>
}
</header>
<main>
<button tuiButton appearance="outline" (click)="openChangePasswordDialog(false)"
[iconStart]="serviceManager.currentSession()!.userData.passwordSet ? '@tui.pencil' : '@tui.plus'">
@if (serviceManager.currentSession()!.userData.passwordSet) {
{{ "chat.userSettingsDialog.security.changePassword"|translate }}
} @else {
{{ "chat.userSettingsDialog.security.setPassword"|translate }}
}
</button>
@if (serviceManager.currentSession()!.userData.passwordSet) {
<button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x"
style="color: var(--tui-text-negative)" (click)="openChangePasswordDialog(true)">
{{ "chat.userSettingsDialog.security.removePassword"|translate }}
</button>
}
</main>
</div>