Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-26 04:05:40 +01:00
Code Issues Projects Releases Wiki Activity

Add switch button to password input (#14484)

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Will Sun 2021-03-24 09:25:52 +08:00 committed by GitHub
parent 3e0ba27ec4
commit b74c4b0cfe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 201 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/portal/src/app/account/sign-in/sign-in.component.html
View File

@ -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"
placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}' #passwordInput="ngModel">
<clr-control-error>{{ 'TOOLTIP.SIGN_IN_PWD' | translate }}</clr-control-error>
</clr-input-container>
<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-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">

8
src/portal/src/app/account/sign-in/sign-in.component.scss
View File

@ -73,4 +73,12 @@
display: flex;
align-items: center;
justify-content: space-between;
}
.pw-eye {
margin-left: -20px;
margin-right: 8px;
cursor: pointer;
}
.pwd-input {
padding-right: 26px;
}

1
src/portal/src/app/account/sign-in/sign-in.component.ts
View File

@ -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

2
src/portal/src/app/base/account-settings/account-settings-modal.component.html
View File

@ -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)'>

52
src/portal/src/app/base/left-side-nav/user/change-password/change-password.component.html
View File

@ -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}$"
name="newPassword" [(ngModel)]="password" #newPassInput="ngModel" size="25" (input)='handleValidation("newPassword", false)'
(blur)='handleValidation("newPassword", true)'>
<clr-control-error *ngIf="!getValidationState('newPassword')">
{{'TOOLTIP.PASSWORD' | 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}$"
name="reNewPassword" [(ngModel)]="confirmPwd" #reNewPassInput size="25" (input)='handleValidation("reNewPassword", false)'
(blur)='handleValidation("reNewPassword", true)'>
<clr-control-error *ngIf="!getValidationState('reNewPassword')">
{{'TOOLTIP.CONFIRM_PWD' | translate}}
</clr-control-error>
</clr-input-container>
<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.SIGN_IN_PWD' | translate }}
</clr-control-error>
</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>
</div>
</div>
</form>
</div>
<div class="modal-footer">

8
src/portal/src/app/base/left-side-nav/user/change-password/change-password.component.scss
View File

@ -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;
}

4
src/portal/src/app/base/left-side-nav/user/change-password/change-password.component.ts
View File

@ -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,

74
src/portal/src/app/base/password-setting/password-setting.component.html
View File

@ -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"
size="40">
<clr-control-error *ngIf="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
{{'TOOLTIP.CURRENT_PWD' | translate}}
</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"
[(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-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="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-control-error>
</clr-input-container>
<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)">
<span id="oldPassword-error">{{'TOOLTIP.CURRENT_PWD' | translate}}</span>
</clr-control-error>
</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-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')">
<span id="newPassword-error">{{'TOOLTIP.PASSWORD' | translate}}</span>
</clr-control-error>
</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-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>
</div>
</div>
</form>
</div>
<div class="modal-footer">

13
src/portal/src/app/base/password-setting/password-setting.component.scss
View File

@ -8,4 +8,15 @@
.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;
}

4
src/portal/src/app/base/password-setting/password-setting.component.spec.ts
View File

@ -68,7 +68,7 @@ describe('PasswordSettingComponent', () => {
await fixture.whenStable();
const newPasswordInputError: any = fixture.nativeElement.querySelector("#newPassword-error");
expect(newPasswordInputError.innerText)
.toEqual(' TOOLTIP.PASSWORD ');
.toEqual('TOOLTIP.PASSWORD');
});
it('should verify new Password valid', async () => {
await fixture.whenStable();
@ -94,7 +94,7 @@ describe('PasswordSettingComponent', () => {
await fixture.whenStable();
const reNewPasswordInputError: any = fixture.nativeElement.querySelector("#reNewPassword-error");
expect(reNewPasswordInputError.innerText)
.toEqual(' TOOLTIP.CONFIRM_PWD ');
.toEqual('TOOLTIP.CONFIRM_PWD');
});
it('should verify comfirm Password valid', async () => {
await fixture.whenStable();

3
src/portal/src/app/base/password-setting/password-setting.component.ts
View File

@ -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 = "";

52
src/portal/src/app/shared/components/new-user-form/new-user-form.component.html
View File

@ -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"
[(ngModel)]="newUser.password" #newPassInput="ngModel" size="30" (input)='handleValidation("newPassword", false)'
(blur)='handleValidation("newPassword", true)'>
<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"
[(ngModel)]="confirmedPwd" #confirmPassInput="ngModel" size="30" (input)='handleValidation("confirmPassword", false)'
(blur)='handleValidation("confirmPassword", true)'>
<clr-control-error *ngIf='getValidationState("confirmPassword")'>
{{'TOOLTIP.CONFIRM_PWD' | translate}}
</clr-control-error>
</clr-input-container>
<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>
</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>
</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"

10
src/portal/src/app/shared/components/new-user-form/new-user-form.component.scss
View File

@ -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;
}

4
src/portal/src/app/shared/components/new-user-form/new-user-form.component.ts
View File

@ -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';

14
src/portal/src/app/shared/components/view-token/view-token.component.html
View File

@ -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>

8
src/portal/src/app/shared/components/view-token/view-token.component.scss
View File

@ -50,3 +50,11 @@
.clr-form {
padding-left: 0;
}
.pw-eye {
margin-left: -20px;
margin-right: 8px;
cursor: pointer;
}
.pwd-input {
padding-right: 26px;
}

4
src/portal/src/app/shared/components/view-token/view-token.component.ts
View File

@ -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;