Files
we_bstly-web/src/app/pages/account/security/security.component.html
T
2025-11-08 19:24:11 +01:00

111 lines
3.8 KiB
HTML

<form [formGroup]="passwordForm" (ngSubmit)="changePassword()" #passwordFormDirective="ngForm">
<mat-card>
<mat-card-content>
<h2>{{'password.change' | i18n}}</h2>
<mat-form-field>
<mat-label>{{'password.current' | i18n}}</mat-label>
<input matInput type="password" formControlName="oldPassword" [(ngModel)]="model.old">
@for (error of passwordForm.get('oldPassword').errors | keyvalue; track error) {
<mat-error>
{{error.key}}
</mat-error>
}
@if (success) {
<mat-hint>
{{'password.changed' | i18n}}
</mat-hint>
}
</mat-form-field>
<mat-form-field>
<mat-label>{{'password' | i18n}}</mat-label>
<input matInput type="password" formControlName="password" [(ngModel)]="model.password">
@for (error of passwordForm.get('password').errors | keyvalue; track error) {
<mat-error>
{{error.key}}
</mat-error>
}
</mat-form-field>
<mat-form-field>
<mat-label>{{'password.confirm' | i18n}}</mat-label>
<input matInput type="password" formControlName="password2" [(ngModel)]="model.password2">
<mat-error>
{{'password.not-match' | i18n}}
</mat-error>
</mat-form-field>
</mat-card-content>
<mat-card-actions>
@if (working) {
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
@if (!working) {
<button type="submit" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
{{'password.change' | i18n}}
</button>
}
</mat-card-actions>
</mat-card>
</form>
<form [formGroup]="statusForm" (ngSubmit)="changeStatus()" #statusFormDirective="ngForm">
<mat-card>
<mat-card-content>
<h2>{{'security.status' | i18n}}</h2>
<p> {{'security.status.hint' | i18n}}</p>
<mat-form-field>
<mat-label>{{'security.status' | i18n}}</mat-label>
<mat-select [(ngModel)]="model.status" formControlName="status">
@for (status of statuses; track status) {
<mat-option [value]="status">
{{'security.status.' + status | i18n}}
</mat-option>
}
</mat-select>
@if (successStatus) {
<mat-hint>
{{'security.status.success' | i18n}}
</mat-hint>
}
</mat-form-field>
<mat-label>{{'security.status.' + model.status + '.hint' | i18n}}</mat-label>
</mat-card-content>
<mat-card-actions>
@if (working) {
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
@if (!working) {
<button type="submit" mat-raised-button color="primary" [disabled]="statusForm.invalid">
{{'security.status.change' | i18n}}
</button>
}
</mat-card-actions>
<mat-card-footer>
<a href="https://wiki.bstly.de/services/webstly#status" class="help-button"
matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent">
<mat-icon>contact_support</mat-icon>
</a>
</mat-card-footer>
</mat-card>
</form>
<mat-card>
<mat-card-content>
<h2>{{'security.2fa' | i18n}}</h2>
<p>{{'security.2fa.info' | i18n}}</p>
</mat-card-content>
<mat-card-actions>
@if (!totp) {
<a (click)="createTotp()" mat-raised-button color="accent">{{'security.2fa.totp.create' |
i18n}}</a>
}
@if (totp) {
<a (click)="removeTotp()" mat-raised-button color="warn">{{'security.2fa.totp.remove' |
i18n}}</a>
}
</mat-card-actions>
<mat-card-footer>
<a href="https://wiki.bstly.de/services/webstly#2fa" class="help-button" matTooltip="{{'help-button' | i18n}}"
matTooltipPosition="above" target="_blank" mat-fab color="accent">
<mat-icon>contact_support</mat-icon>
</a>
</mat-card-footer>
</mat-card>