Started implementing user settings -> security -> password management
This commit is contained in:
80
src/app/chat/user-settings/security/password/password.html
Normal file
80
src/app/chat/user-settings/security/password/password.html
Normal 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>
|
||||
Reference in New Issue
Block a user