mirror of
https://github.com/goharbor/harbor.git
synced 2024-11-19 08:45:27 +01:00
Add switch button to password input (#14484)
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Will Sun
GitHub
parent
3e0ba27ec4
commit
b74c4b0cfe
@ -17,11 +17,20 @@
|
||||
placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}' #userNameInput='ngModel'>
|
||||
<clr-control-error>{{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}</clr-control-error>
|
||||
</clr-input-container>
|
||||
<clr-input-container>
|
||||
<input clrInput class="password" type="password" required [(ngModel)]="signInCredential.password" name="login_password" id="login_password"
|
||||
<div class="clr-form-control">
|
||||
<div class="clr-control-container" [class.clr-error] ="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showPwd?'text':'password'" required [(ngModel)]="signInCredential.password" name="login_password" id="login_password"
|
||||
placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}' #passwordInput="ngModel">
|
||||
<clr-control-error>{{ 'TOOLTIP.SIGN_IN_PWD' | translate }}</clr-control-error>
|
||||
</clr-input-container>
|
||||
<clr-icon *ngIf="!showPwd" shape="eye" class="pw-eye" (click)="showPwd =!showPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showPwd" shape="eye-hide" class="pw-eye" (click)="showPwd =!showPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
|
||||
{{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
|
||||
</clr-control-error>
|
||||
</div>
|
||||
</div>
|
||||
<div class="display-flex">
|
||||
<clr-checkbox-wrapper>
|
||||
<input clrCheckbox type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)" [checked]="rememberMe">
|
||||
|
||||
@ -74,3 +74,11 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pw-eye {
|
||||
margin-left: -20px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pwd-input {
|
||||
padding-right: 26px;
|
||||
}
|
||||
@ -43,6 +43,7 @@ const expireDays = 10;
|
||||
})
|
||||
|
||||
export class SignInComponent implements AfterViewChecked, OnInit {
|
||||
showPwd: boolean = false;
|
||||
redirectUrl: string = "";
|
||||
appConfig: AppConfig = new AppConfig();
|
||||
// Remeber me indicator
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
<clr-input-container>
|
||||
<label [class.required]="!account.oidc_user_meta">{{'PROFILE.FULL_NAME' | translate}}</label>
|
||||
<input clrInput type="text" name="account_settings_full_name" #fullNameInput="ngModel"
|
||||
[(ngModel)]="account.realname" [required]="!account.oidc_user_meta" maxLengthExt="20"
|
||||
[(ngModel)]="account.realname" [required]="!account.oidc_user_meta" maxLengthExt="30"
|
||||
id="account_settings_full_name" size="30"
|
||||
(input)='handleValidation("account_settings_full_name", false)'
|
||||
(blur)='handleValidation("account_settings_full_name", true)'>
|
||||
|
||||
@ -2,25 +2,39 @@
|
||||
<h3 class="modal-title">{{'RESET_PWD.TITLE' | translate}}</h3>
|
||||
<inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
|
||||
<div class="modal-body body-format">
|
||||
<form #resetPwdForm="ngForm" clrForm>
|
||||
<clr-input-container>
|
||||
<label>{{'CHANGE_PWD.NEW_PWD' | translate}}</label>
|
||||
<input clrInput type="password" id="newPassword" placeholder='{{"PLACEHOLDER.NEW_PWD" | translate}}' required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
|
||||
<form #resetPwdForm="ngForm" class="clr-form clr-form-horizontal">
|
||||
<div class="clr-form-control">
|
||||
<label for="newPassword" class="clr-control-label required">{{'CHANGE_PWD.NEW_PWD' | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error] ="!getValidationState('newPassword')">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showNewPwd?'text':'password'" id="newPassword" placeholder='{{"PLACEHOLDER.NEW_PWD" | translate}}' required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
|
||||
name="newPassword" [(ngModel)]="password" #newPassInput="ngModel" size="25" (input)='handleValidation("newPassword", false)'
|
||||
(blur)='handleValidation("newPassword", true)'>
|
||||
<clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="!getValidationState('newPassword')">
|
||||
{{'TOOLTIP.PASSWORD' | translate}}
|
||||
{{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
<clr-input-container>
|
||||
<label>{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
|
||||
<input clrInput type="password" id="reNewPassword" placeholder='{{"PLACEHOLDER.CONFIRM_PWD" | translate}}' required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-form-control">
|
||||
<label for="reNewPassword" class="clr-control-label required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error] ="!getValidationState('reNewPassword')">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showConfirmPwd?'text':'password'" id="reNewPassword" placeholder='{{"PLACEHOLDER.CONFIRM_PWD" | translate}}' required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
|
||||
name="reNewPassword" [(ngModel)]="confirmPwd" #reNewPassInput size="25" (input)='handleValidation("reNewPassword", false)'
|
||||
(blur)='handleValidation("reNewPassword", true)'>
|
||||
<clr-icon *ngIf="!showConfirmPwd" shape="eye" class="pw-eye" (click)="showConfirmPwd =!showConfirmPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showConfirmPwd" shape="eye-hide" class="pw-eye" (click)="showConfirmPwd =!showConfirmPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="!getValidationState('reNewPassword')">
|
||||
{{'TOOLTIP.CONFIRM_PWD' | translate}}
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
.form .form-block, form .form-block {
|
||||
margin: .5rem 0 2rem 0;
|
||||
}
|
||||
.pw-eye {
|
||||
margin-left: -20px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pwd-input {
|
||||
padding-right: 26px;
|
||||
}
|
||||
@ -24,6 +24,8 @@ import { InlineAlertComponent } from "../../../../shared/components/inline-alert
|
||||
styleUrls: ['./change-password.component.scss', '../../../../common.scss']
|
||||
})
|
||||
export class ChangePasswordComponent {
|
||||
showNewPwd: boolean = false;
|
||||
showConfirmPwd: boolean = false;
|
||||
opened: boolean = false;
|
||||
onGoing: boolean = false;
|
||||
password: string = "";
|
||||
@ -62,6 +64,8 @@ export class ChangePasswordComponent {
|
||||
}
|
||||
|
||||
public open(userId: number): void {
|
||||
this.showConfirmPwd = false;
|
||||
this.showNewPwd = false;
|
||||
this.onGoing = false;
|
||||
this.validationState = {
|
||||
"newPassword": true,
|
||||
|
||||
@ -2,33 +2,53 @@
|
||||
<h3 class="modal-title">{{'CHANGE_PWD.TITLE' | translate}}</h3>
|
||||
<div class="modal-body body-format">
|
||||
<inline-alert (confirmEvt)="confirmCancel($event)"></inline-alert>
|
||||
<form #changepwdForm="ngForm" clrForm>
|
||||
<clr-input-container>
|
||||
<label class="required">{{'CHANGE_PWD.CURRENT_PWD' | translate}}</label>
|
||||
<input clrInput type="password" id="oldPassword" required name="oldPassword" [(ngModel)]="oldPwd" #oldPassInput="ngModel"
|
||||
<form #changepwdForm="ngForm" class="clr-form clr-form-horizontal">
|
||||
<div class="clr-form-control">
|
||||
<label for="oldPassword" class="clr-control-label required">{{'CHANGE_PWD.CURRENT_PWD' | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error] ="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showOldPwd?'text':'password'" id="oldPassword" required name="oldPassword" [(ngModel)]="oldPwd" #oldPassInput="ngModel"
|
||||
size="40">
|
||||
<clr-icon *ngIf="!showOldPwd" shape="eye" class="pw-eye" (click)="showOldPwd =!showOldPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showOldPwd" shape="eye-hide" class="pw-eye" (click)="showOldPwd =!showOldPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
|
||||
{{'TOOLTIP.CURRENT_PWD' | translate}}
|
||||
<span id="oldPassword-error">{{'TOOLTIP.CURRENT_PWD' | translate}}</span>
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
<clr-input-container>
|
||||
<label class="required">{{'CHANGE_PWD.NEW_PWD' | translate}}</label>
|
||||
<input clrInput type="password" id="newPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="newPassword"
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-form-control">
|
||||
<label for="newPassword" class="clr-control-label required">{{'CHANGE_PWD.NEW_PWD' | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error] ="!getValidationState('newPassword')">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showNewPwd?'text':'password'" id="newPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="newPassword"
|
||||
[(ngModel)]="newPwd" #newPassInput="ngModel" size="40" (input)='handleValidation("newPassword", false)' (blur)='handleValidation("newPassword", true)'>
|
||||
<clr-control-helper>{{'CHANGE_PWD.PASS_TIPS' | translate}}</clr-control-helper>
|
||||
<clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="!getValidationState('newPassword')">
|
||||
{{'TOOLTIP.PASSWORD' | translate}}
|
||||
<span id="newPassword-error">{{'TOOLTIP.PASSWORD' | translate}}</span>
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
<clr-input-container>
|
||||
<label class="required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
|
||||
<input clrInput type="password" id="reNewPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="reNewPassword"
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-form-control">
|
||||
<label for="reNewPassword" class="clr-control-label required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error] ="!getValidationState('reNewPassword')">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showReNewPwd?'text':'password'" id="reNewPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="reNewPassword"
|
||||
[(ngModel)]="reNewPwd" #reNewPassInput="ngModel" size="40" (input)='handleValidation("reNewPassword", false)'
|
||||
(blur)='handleValidation("reNewPassword", true)'>
|
||||
<clr-control-error *ngIf='!getValidationState("reNewPassword")'>
|
||||
{{'TOOLTIP.CONFIRM_PWD' | translate}}
|
||||
<clr-icon *ngIf="!showReNewPwd" shape="eye" class="pw-eye" (click)="showReNewPwd =!showReNewPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showReNewPwd" shape="eye-hide" class="pw-eye" (click)="showReNewPwd =!showReNewPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="!getValidationState('reNewPassword')">
|
||||
<span id="reNewPassword-error">{{'TOOLTIP.CONFIRM_PWD' | translate}}</span>
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@ -9,3 +9,14 @@
|
||||
.password-body {
|
||||
min-height: 130px;
|
||||
}
|
||||
.pw-eye {
|
||||
margin-left: -24px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pwd-input {
|
||||
padding-right: 26px;
|
||||
}
|
||||
.clr-control-label {
|
||||
width: 8.6rem !important;
|
||||
}
|
||||
|
||||
@ -25,6 +25,9 @@ import { InlineAlertComponent } from "../../shared/components/inline-alert/inlin
|
||||
styleUrls: ['./password-setting.component.scss', '../../common.scss']
|
||||
})
|
||||
export class PasswordSettingComponent implements AfterViewChecked {
|
||||
showOldPwd: boolean = false;
|
||||
showNewPwd: boolean = false;
|
||||
showReNewPwd: boolean =false;
|
||||
opened: boolean = false;
|
||||
oldPwd: string = "";
|
||||
newPwd: string = "";
|
||||
|
||||
@ -38,25 +38,39 @@
|
||||
{{'TOOLTIP.FULL_NAME' | translate}}
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
<clr-input-container>
|
||||
<label class="required">{{'PROFILE.PASSWORD' | translate}}</label>
|
||||
<input clrInput type="password" id="newPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="newPassword"
|
||||
<div class="clr-form-control">
|
||||
<label for="newPassword" class="clr-control-label required">{{'PROFILE.PASSWORD' | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error] ="getValidationState('newPassword')">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showNewPwd?'text':'password'" id="newPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="newPassword"
|
||||
[(ngModel)]="newUser.password" #newPassInput="ngModel" size="30" (input)='handleValidation("newPassword", false)'
|
||||
(blur)='handleValidation("newPassword", true)'>
|
||||
<clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-helper *ngIf="isSelfRegistration">{{'CHANGE_PWD.PASS_TIPS' | translate}}</clr-control-helper>
|
||||
<clr-control-error *ngIf='getValidationState("newPassword")'>
|
||||
{{'TOOLTIP.PASSWORD' | translate}}
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
<clr-input-container>
|
||||
<label class="required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
|
||||
<input clrInput type="password" id="confirmPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="confirmPassword"
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-form-control">
|
||||
<label for="confirmPassword" class="clr-control-label required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error] ="getValidationState('confirmPassword')">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input pwd-input" [type]="showConfirmPwd?'text':'password'" id="confirmPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="confirmPassword"
|
||||
[(ngModel)]="confirmedPwd" #confirmPassInput="ngModel" size="30" (input)='handleValidation("confirmPassword", false)'
|
||||
(blur)='handleValidation("confirmPassword", true)'>
|
||||
<clr-icon *ngIf="!showConfirmPwd" shape="eye" class="pw-eye" (click)="showConfirmPwd =!showConfirmPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showConfirmPwd" shape="eye-hide" class="pw-eye" (click)="showConfirmPwd =!showConfirmPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf='getValidationState("confirmPassword")'>
|
||||
{{'TOOLTIP.CONFIRM_PWD' | translate}}
|
||||
</clr-control-error>
|
||||
</clr-input-container>
|
||||
</div>
|
||||
</div>
|
||||
<clr-input-container>
|
||||
<label>{{'PROFILE.COMMENT' | translate}}</label>
|
||||
<input clrInput type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="30" id="comment" size="30"
|
||||
|
||||
@ -8,4 +8,12 @@
|
||||
margin-right: 0px !important;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.pw-eye {
|
||||
margin-left: -24px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pwd-input {
|
||||
padding-right: 26px;
|
||||
width: 228px;
|
||||
}
|
||||
|
||||
@ -34,6 +34,8 @@ import { SessionService } from '../../services/session.service';
|
||||
})
|
||||
|
||||
export class NewUserFormComponent implements AfterViewChecked, OnInit {
|
||||
showNewPwd: boolean = false;
|
||||
showConfirmPwd: boolean = false;
|
||||
|
||||
@Input() isSelfRegistration = false;
|
||||
// Notify the form value changes
|
||||
@ -58,6 +60,8 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
|
||||
this.resetState();
|
||||
}
|
||||
resetState(): void {
|
||||
this.showConfirmPwd = false;
|
||||
this.showNewPwd = false;
|
||||
this.mailAlreadyChecked = {};
|
||||
this.userNameAlreadyChecked = {};
|
||||
this.emailTooltip = 'TOOLTIP.EMAIL';
|
||||
|
||||
@ -19,14 +19,17 @@
|
||||
<label for="new-token" class="clr-control-label">{{"SYSTEM_ROBOT.NEW_TOKEN" | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error]="(newToken.dirty || newToken.touched) && newToken.invalid">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input"
|
||||
type="password" id="new-token"
|
||||
<input class="clr-input pwd-input"
|
||||
[type]="showNewPwd?'text':'password'" id="new-token"
|
||||
name="newToken"
|
||||
autocomplete="off"
|
||||
#newToken = "ngModel"
|
||||
[(ngModel)]="newSecret"
|
||||
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
|
||||
placeholder="{{'SYSTEM_ROBOT.PLACEHOLDER'| translate}}">
|
||||
<clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="(newToken.dirty || newToken.touched) && newToken.invalid">
|
||||
{{'SYSTEM_ROBOT.SECRET' | translate}}
|
||||
@ -37,14 +40,17 @@
|
||||
<label for="confirm-token" class="clr-control-label">{{"SYSTEM_ROBOT.CONFIRM_SECRET" | translate}}</label>
|
||||
<div class="clr-control-container" [class.clr-error]="notSame() || (confirmToken.dirty || confirmToken.touched) && confirmToken.invalid">
|
||||
<div class="clr-input-wrapper">
|
||||
<input class="clr-input"
|
||||
type="password" id="confirm-token"
|
||||
<input class="clr-input pwd-input"
|
||||
[type]="showConfirmPwd?'text':'password'" id="confirm-token"
|
||||
name="confirmToken"
|
||||
autocomplete="off"
|
||||
#confirmToken = "ngModel"
|
||||
[(ngModel)]="confirmSecret"
|
||||
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
|
||||
placeholder="{{'SYSTEM_ROBOT.SECRET_AGAIN'| translate}}">
|
||||
<clr-icon *ngIf="!showConfirmPwd" shape="eye" class="pw-eye" (click)="showConfirmPwd =!showConfirmPwd"></clr-icon>
|
||||
<clr-icon *ngIf="showConfirmPwd" shape="eye-hide" class="pw-eye" (click)="showConfirmPwd =!showConfirmPwd"></clr-icon>
|
||||
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
|
||||
</div>
|
||||
<clr-control-error *ngIf="notSame() || ((confirmToken.dirty || confirmToken.touched) && confirmToken.invalid)">
|
||||
<span *ngIf="!notSame()">{{'SYSTEM_ROBOT.SECRET' | translate}}</span>
|
||||
|
||||
@ -50,3 +50,11 @@
|
||||
.clr-form {
|
||||
padding-left: 0;
|
||||
}
|
||||
.pw-eye {
|
||||
margin-left: -20px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pwd-input {
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
@ -18,6 +18,8 @@ import { errorHandler } from "../../units/shared.utils";
|
||||
styleUrls: ['./view-token.component.scss']
|
||||
})
|
||||
export class ViewTokenComponent implements OnInit {
|
||||
showNewPwd: boolean = false;
|
||||
showConfirmPwd: boolean = false;
|
||||
tokenModalOpened: boolean = false;
|
||||
robot: Robot;
|
||||
newSecret: string;
|
||||
@ -46,6 +48,8 @@ export class ViewTokenComponent implements OnInit {
|
||||
this.tokenModalOpened = false;
|
||||
}
|
||||
open() {
|
||||
this.showNewPwd = false;
|
||||
this.showConfirmPwd = false;
|
||||
this.tokenModalOpened = true;
|
||||
this.inlineAlertComponent.close();
|
||||
this.copyToken = false;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user