|
|
@ -15,12 +15,12 @@ |
|
|
limitations under the License. |
|
|
limitations under the License. |
|
|
|
|
|
|
|
|
--> |
|
|
--> |
|
|
<div class="profile-container" fxLayout="column" fxLayoutGap="8px"> |
|
|
<div class="profile-container flex flex-col gap-2"> |
|
|
<mat-card appearance="outlined" class="profile-card" fxLayout="column"> |
|
|
<mat-card appearance="outlined" class="profile-card flex flex-col"> |
|
|
<mat-card-title style="margin-bottom: 8px;"> |
|
|
<mat-card-title style="margin-bottom: 8px;"> |
|
|
<span class="mat-headline-5 card-title" translate>profile.jwt-token</span> |
|
|
<span class="mat-headline-5 card-title" translate>profile.jwt-token</span> |
|
|
</mat-card-title> |
|
|
</mat-card-title> |
|
|
<div fxLayout="row" fxLayoutAlign="space-between center"> |
|
|
<div class="flex flex-row items-center justify-between"> |
|
|
<div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div> |
|
|
<div class="token-text">{{ 'profile.token-valid-till' | translate }} <span class="date">{{ jwtTokenExpiration | date: 'yyyy-MM-dd HH:mm:ss' }}</span></div> |
|
|
<button mat-raised-button |
|
|
<button mat-raised-button |
|
|
color="primary" |
|
|
color="primary" |
|
|
@ -30,16 +30,16 @@ |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</mat-card> |
|
|
</mat-card> |
|
|
<mat-card appearance="outlined" class="profile-card" fxLayout="column"> |
|
|
<mat-card appearance="outlined" class="profile-card flex flex-col"> |
|
|
<div class="change-password" tb-toast toastTarget="changePassword"> |
|
|
<div class="change-password" tb-toast toastTarget="changePassword"> |
|
|
<form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword(changePasswordForm)"> |
|
|
<form #changePasswordForm="ngForm" [formGroup]="changePassword" (ngSubmit)="onChangePassword(changePasswordForm)"> |
|
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="25px" fxLayoutGap.xs="0"> |
|
|
<div class="flex flex-row gap-6.25 xs:flex-col xs:gap-0"> |
|
|
<div fxFlex="290px" fxFlex.sm="250px" fxFlex.xs="100"> |
|
|
<div class="min-w-72.5 max-w-72.5 flex-1 basis-72.5 xs:min-w-0 xs:max-w-full xs:basis-full sm:min-w-62.5 sm:max-w-62.5 sm:basis-62.5"> |
|
|
<h3 class="card-title" translate>profile.change-password</h3> |
|
|
<h3 class="card-title" translate>profile.change-password</h3> |
|
|
<mat-form-field class="mat-block same-color" appearance="fill" color="primary"> |
|
|
<mat-form-field class="mat-block same-color" appearance="fill" color="primary"> |
|
|
<mat-label translate>profile.current-password</mat-label> |
|
|
<mat-label translate>profile.current-password</mat-label> |
|
|
<input matInput type="password" name="current-password" formControlName="currentPassword" autocomplete="current-password"/> |
|
|
<input matInput type="password" name="current-password" formControlName="currentPassword" autocomplete="current-password"/> |
|
|
<tb-toggle-password [fxShow]="changePassword.get('currentPassword').dirty || changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password> |
|
|
<tb-toggle-password [class.!hidden]="!changePassword.get('currentPassword').dirty && !changePassword.get('currentPassword').touched" matSuffix></tb-toggle-password> |
|
|
<mat-error *ngIf="changePassword.get('currentPassword').hasError('differencePassword')"> |
|
|
<mat-error *ngIf="changePassword.get('currentPassword').hasError('differencePassword')"> |
|
|
{{ 'security.password-requirement.incorrect-password-try-again' | translate }} |
|
|
{{ 'security.password-requirement.incorrect-password-try-again' | translate }} |
|
|
</mat-error> |
|
|
</mat-error> |
|
|
@ -47,7 +47,7 @@ |
|
|
<mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic"> |
|
|
<mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary" subscriptSizing="dynamic"> |
|
|
<mat-label translate>login.new-password</mat-label> |
|
|
<mat-label translate>login.new-password</mat-label> |
|
|
<input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/> |
|
|
<input matInput type="password" name="new-password" formControlName="newPassword" autocomplete="new-password" required/> |
|
|
<tb-toggle-password [fxShow]="changePassword.get('newPassword').dirty || changePassword.get('newPassword').touched" matSuffix></tb-toggle-password> |
|
|
<tb-toggle-password [class.!hidden]="!changePassword.get('newPassword').dirty && !changePassword.get('newPassword').touched" matSuffix></tb-toggle-password> |
|
|
<mat-hint></mat-hint> |
|
|
<mat-hint></mat-hint> |
|
|
<mat-error *ngIf="changePassword.get('newPassword').errors |
|
|
<mat-error *ngIf="changePassword.get('newPassword').errors |
|
|
&& !changePassword.get('newPassword').hasError('alreadyUsed') |
|
|
&& !changePassword.get('newPassword').hasError('alreadyUsed') |
|
|
@ -65,20 +65,20 @@ |
|
|
{{ 'security.password-requirement.password-should-not-contain-spaces' | translate }} |
|
|
{{ 'security.password-requirement.password-should-not-contain-spaces' | translate }} |
|
|
</mat-error> |
|
|
</mat-error> |
|
|
</mat-form-field> |
|
|
</mat-form-field> |
|
|
<div fxFlex fxHide fxShow.xs fxLayoutAlign="start center"> |
|
|
<div class="flex flex-1 items-center justify-start gt-xs:!hidden"> |
|
|
<ng-container *ngTemplateOutlet="passwordRequirements"></ng-container> |
|
|
<ng-container *ngTemplateOutlet="passwordRequirements"></ng-container> |
|
|
</div> |
|
|
</div> |
|
|
<mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary"> |
|
|
<mat-form-field class="mat-block same-color" hideRequiredMarker appearance="fill" color="primary"> |
|
|
<mat-label translate>login.new-password-again</mat-label> |
|
|
<mat-label translate>login.new-password-again</mat-label> |
|
|
<input matInput type="password" name="new-password" formControlName="newPassword2" autocomplete="new-password" required/> |
|
|
<input matInput type="password" name="new-password" formControlName="newPassword2" autocomplete="new-password" required/> |
|
|
<tb-toggle-password [fxShow]="changePassword.get('newPassword2').dirty || changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password> |
|
|
<tb-toggle-password [class.!hidden]="!changePassword.get('newPassword2').dirty && !changePassword.get('newPassword2').touched" matSuffix></tb-toggle-password> |
|
|
<mat-error *ngIf="changePassword.get('newPassword2').hasError('differencePassword')"> |
|
|
<mat-error *ngIf="changePassword.get('newPassword2').hasError('differencePassword')"> |
|
|
{{ 'security.password-requirement.new-passwords-not-match' | translate }} |
|
|
{{ 'security.password-requirement.new-passwords-not-match' | translate }} |
|
|
</mat-error> |
|
|
</mat-error> |
|
|
</mat-form-field> |
|
|
</mat-form-field> |
|
|
</div> |
|
|
</div> |
|
|
<mat-divider [vertical]="true"></mat-divider> |
|
|
<mat-divider [vertical]="true"></mat-divider> |
|
|
<div fxFlex fxHide.xs fxLayoutAlign="start start"> |
|
|
<div class="flex flex-1 items-start justify-start xs:!hidden"> |
|
|
<ng-container *ngTemplateOutlet="passwordRequirements"></ng-container> |
|
|
<ng-container *ngTemplateOutlet="passwordRequirements"></ng-container> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -125,7 +125,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</ng-template> |
|
|
</ng-template> |
|
|
<div fxLayout="row" fxLayoutGap="8px" style="margin-top: 18px;" [fxShow]="changePassword.dirty || changePassword.touched"> |
|
|
<div class="flex flex-row gap-2" style="margin-top: 18px;" [class.!hidden]="!changePassword.dirty && !changePassword.touched"> |
|
|
<button mat-button color="primary" |
|
|
<button mat-button color="primary" |
|
|
type="button" |
|
|
type="button" |
|
|
(click)="discardChanges(changePasswordForm, $event)" |
|
|
(click)="discardChanges(changePasswordForm, $event)" |
|
|
@ -153,7 +153,7 @@ |
|
|
<ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider"> |
|
|
<ng-container *ngFor="let provider of allowTwoFactorProviders; let $last = last; trackBy: trackByProvider"> |
|
|
<div class="provider"> |
|
|
<div class="provider"> |
|
|
<h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4> |
|
|
<h4 class="provider-title">{{ providersData.get(provider).name | translate }}</h4> |
|
|
<div fxLayout="row" fxLayoutAlign="space-between start"> |
|
|
<div class="flex flex-row items-start justify-between"> |
|
|
<div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo"> |
|
|
<div class="mat-body-2 description" *ngIf="!twoFactorAuth.get(provider).value; else providerInfo"> |
|
|
{{ providersData.get(provider).description | translate }} |
|
|
{{ providersData.get(provider).description | translate }} |
|
|
</div> |
|
|
</div> |
|
|
|
Igor Kulikov
2 years ago