Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-19 08:45:27 +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'> placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}' #userNameInput='ngModel'>
<clr-control-error>{{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}</clr-control-error> <clr-control-error>{{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}</clr-control-error>
</clr-input-container> </clr-input-container>
<clr-input-container> <div class="clr-form-control">
<input clrInput class="password" type="password" required [(ngModel)]="signInCredential.password" name="login_password" id="login_password" <div class="clr-control-container" [class.clr-error] ="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}' #passwordInput="ngModel"> <div class="clr-input-wrapper">
<clr-control-error>{{ 'TOOLTIP.SIGN_IN_PWD' | translate }}</clr-control-error> <input class="clr-input pwd-input" [type]="showPwd?'text':'password'" required [(ngModel)]="signInCredential.password" name="login_password" id="login_password"
</clr-input-container> 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"> <div class="display-flex">
<clr-checkbox-wrapper> <clr-checkbox-wrapper>
<input clrCheckbox type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)" [checked]="rememberMe"> <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

@ -74,3 +74,11 @@
align-items: center; align-items: center;
justify-content: space-between; 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 { export class SignInComponent implements AfterViewChecked, OnInit {
showPwd: boolean = false;
redirectUrl: string = ""; redirectUrl: string = "";
appConfig: AppConfig = new AppConfig(); appConfig: AppConfig = new AppConfig();
// Remeber me indicator // 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> <clr-input-container>
<label [class.required]="!account.oidc_user_meta">{{'PROFILE.FULL_NAME' | translate}}</label> <label [class.required]="!account.oidc_user_meta">{{'PROFILE.FULL_NAME' | translate}}</label>
<input clrInput type="text" name="account_settings_full_name" #fullNameInput="ngModel" <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" id="account_settings_full_name" size="30"
(input)='handleValidation("account_settings_full_name", false)' (input)='handleValidation("account_settings_full_name", false)'
(blur)='handleValidation("account_settings_full_name", true)'> (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> <h3 class="modal-title">{{'RESET_PWD.TITLE' | translate}}</h3>
<inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert> <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
<div class="modal-body body-format"> <div class="modal-body body-format">
<form #resetPwdForm="ngForm" clrForm> <form #resetPwdForm="ngForm" class="clr-form clr-form-horizontal">
<clr-input-container> <div class="clr-form-control">
<label>{{'CHANGE_PWD.NEW_PWD' | translate}}</label> <label for="newPassword" class="clr-control-label required">{{'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}$" <div class="clr-control-container" [class.clr-error] ="!getValidationState('newPassword')">
name="newPassword" [(ngModel)]="password" #newPassInput="ngModel" size="25" (input)='handleValidation("newPassword", false)' <div class="clr-input-wrapper">
(blur)='handleValidation("newPassword", true)'> <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}$"
<clr-control-error *ngIf="!getValidationState('newPassword')"> name="newPassword" [(ngModel)]="password" #newPassInput="ngModel" size="25" (input)='handleValidation("newPassword", false)'
{{'TOOLTIP.PASSWORD' | translate}} (blur)='handleValidation("newPassword", true)'>
</clr-control-error> <clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
</clr-input-container> <clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
<clr-input-container> <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<label>{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label> </div>
<input clrInput type="password" id="reNewPassword" placeholder='{{"PLACEHOLDER.CONFIRM_PWD" | translate}}' required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" <clr-control-error *ngIf="!getValidationState('newPassword')">
name="reNewPassword" [(ngModel)]="confirmPwd" #reNewPassInput size="25" (input)='handleValidation("reNewPassword", false)' {{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
(blur)='handleValidation("reNewPassword", true)'> </clr-control-error>
<clr-control-error *ngIf="!getValidationState('reNewPassword')"> </div>
{{'TOOLTIP.CONFIRM_PWD' | translate}} </div>
</clr-control-error> <div class="clr-form-control">
</clr-input-container> <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> </form>
</div> </div>
<div class="modal-footer"> <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 { .form .form-block, form .form-block {
margin: .5rem 0 2rem 0; 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'] styleUrls: ['./change-password.component.scss', '../../../../common.scss']
}) })
export class ChangePasswordComponent { export class ChangePasswordComponent {
showNewPwd: boolean = false;
showConfirmPwd: boolean = false;
opened: boolean = false; opened: boolean = false;
onGoing: boolean = false; onGoing: boolean = false;
password: string = ""; password: string = "";
@ -62,6 +64,8 @@ export class ChangePasswordComponent {
} }
public open(userId: number): void { public open(userId: number): void {
this.showConfirmPwd = false;
this.showNewPwd = false;
this.onGoing = false; this.onGoing = false;
this.validationState = { this.validationState = {
"newPassword": true, "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> <h3 class="modal-title">{{'CHANGE_PWD.TITLE' | translate}}</h3>
<div class="modal-body body-format"> <div class="modal-body body-format">
<inline-alert (confirmEvt)="confirmCancel($event)"></inline-alert> <inline-alert (confirmEvt)="confirmCancel($event)"></inline-alert>
<form #changepwdForm="ngForm" clrForm> <form #changepwdForm="ngForm" class="clr-form clr-form-horizontal">
<clr-input-container> <div class="clr-form-control">
<label class="required">{{'CHANGE_PWD.CURRENT_PWD' | translate}}</label> <label for="oldPassword" class="clr-control-label required">{{'CHANGE_PWD.CURRENT_PWD' | translate}}</label>
<input clrInput type="password" id="oldPassword" required name="oldPassword" [(ngModel)]="oldPwd" #oldPassInput="ngModel" <div class="clr-control-container" [class.clr-error] ="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
size="40"> <div class="clr-input-wrapper">
<clr-control-error *ngIf="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)"> <input class="clr-input pwd-input" [type]="showOldPwd?'text':'password'" id="oldPassword" required name="oldPassword" [(ngModel)]="oldPwd" #oldPassInput="ngModel"
{{'TOOLTIP.CURRENT_PWD' | translate}} size="40">
</clr-control-error> <clr-icon *ngIf="!showOldPwd" shape="eye" class="pw-eye" (click)="showOldPwd =!showOldPwd"></clr-icon>
</clr-input-container> <clr-icon *ngIf="showOldPwd" shape="eye-hide" class="pw-eye" (click)="showOldPwd =!showOldPwd"></clr-icon>
<clr-input-container> <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<label class="required">{{'CHANGE_PWD.NEW_PWD' | translate}}</label> </div>
<input clrInput type="password" id="newPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="newPassword" <clr-control-error *ngIf="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
[(ngModel)]="newPwd" #newPassInput="ngModel" size="40" (input)='handleValidation("newPassword", false)' (blur)='handleValidation("newPassword", true)'> <span id="oldPassword-error">{{'TOOLTIP.CURRENT_PWD' | translate}}</span>
<clr-control-helper>{{'CHANGE_PWD.PASS_TIPS' | translate}}</clr-control-helper> </clr-control-error>
<clr-control-error *ngIf="!getValidationState('newPassword')"> </div>
{{'TOOLTIP.PASSWORD' | translate}} </div>
</clr-control-error> <div class="clr-form-control">
</clr-input-container> <label for="newPassword" class="clr-control-label required">{{'CHANGE_PWD.NEW_PWD' | translate}}</label>
<clr-input-container> <div class="clr-control-container" [class.clr-error] ="!getValidationState('newPassword')">
<label class="required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label> <div class="clr-input-wrapper">
<input clrInput type="password" id="reNewPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="reNewPassword" <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)]="reNewPwd" #reNewPassInput="ngModel" size="40" (input)='handleValidation("reNewPassword", false)' [(ngModel)]="newPwd" #newPassInput="ngModel" size="40" (input)='handleValidation("newPassword", false)' (blur)='handleValidation("newPassword", true)'>
(blur)='handleValidation("reNewPassword", true)'> <clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
<clr-control-error *ngIf='!getValidationState("reNewPassword")'> <clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
{{'TOOLTIP.CONFIRM_PWD' | translate}} <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
</clr-control-error> </div>
</clr-input-container> <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> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

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

@ -9,3 +9,14 @@
.password-body { .password-body {
min-height: 130px; 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(); await fixture.whenStable();
const newPasswordInputError: any = fixture.nativeElement.querySelector("#newPassword-error"); const newPasswordInputError: any = fixture.nativeElement.querySelector("#newPassword-error");
expect(newPasswordInputError.innerText) expect(newPasswordInputError.innerText)
.toEqual(' TOOLTIP.PASSWORD '); .toEqual('TOOLTIP.PASSWORD');
}); });
it('should verify new Password valid', async () => { it('should verify new Password valid', async () => {
await fixture.whenStable(); await fixture.whenStable();
@ -94,7 +94,7 @@ describe('PasswordSettingComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
const reNewPasswordInputError: any = fixture.nativeElement.querySelector("#reNewPassword-error"); const reNewPasswordInputError: any = fixture.nativeElement.querySelector("#reNewPassword-error");
expect(reNewPasswordInputError.innerText) expect(reNewPasswordInputError.innerText)
.toEqual(' TOOLTIP.CONFIRM_PWD '); .toEqual('TOOLTIP.CONFIRM_PWD');
}); });
it('should verify comfirm Password valid', async () => { it('should verify comfirm Password valid', async () => {
await fixture.whenStable(); 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'] styleUrls: ['./password-setting.component.scss', '../../common.scss']
}) })
export class PasswordSettingComponent implements AfterViewChecked { export class PasswordSettingComponent implements AfterViewChecked {
showOldPwd: boolean = false;
showNewPwd: boolean = false;
showReNewPwd: boolean =false;
opened: boolean = false; opened: boolean = false;
oldPwd: string = ""; oldPwd: string = "";
newPwd: 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}} {{'TOOLTIP.FULL_NAME' | translate}}
</clr-control-error> </clr-control-error>
</clr-input-container> </clr-input-container>
<clr-input-container> <div class="clr-form-control">
<label class="required">{{'PROFILE.PASSWORD' | translate}}</label> <label for="newPassword" class="clr-control-label 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-control-container" [class.clr-error] ="getValidationState('newPassword')">
[(ngModel)]="newUser.password" #newPassInput="ngModel" size="30" (input)='handleValidation("newPassword", false)' <div class="clr-input-wrapper">
(blur)='handleValidation("newPassword", true)'> <input class="clr-input pwd-input" [type]="showNewPwd?'text':'password'" id="newPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="newPassword"
<clr-control-helper *ngIf="isSelfRegistration">{{'CHANGE_PWD.PASS_TIPS' | translate}}</clr-control-helper> [(ngModel)]="newUser.password" #newPassInput="ngModel" size="30" (input)='handleValidation("newPassword", false)'
<clr-control-error *ngIf='getValidationState("newPassword")'> (blur)='handleValidation("newPassword", true)'>
{{'TOOLTIP.PASSWORD' | translate}} <clr-icon *ngIf="!showNewPwd" shape="eye" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
</clr-control-error> <clr-icon *ngIf="showNewPwd" shape="eye-hide" class="pw-eye" (click)="showNewPwd =!showNewPwd"></clr-icon>
</clr-input-container> <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-input-container> </div>
<label class="required">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label> <clr-control-helper *ngIf="isSelfRegistration">{{'CHANGE_PWD.PASS_TIPS' | translate}}</clr-control-helper>
<input clrInput type="password" id="confirmPassword" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" name="confirmPassword" <clr-control-error *ngIf='getValidationState("newPassword")'>
[(ngModel)]="confirmedPwd" #confirmPassInput="ngModel" size="30" (input)='handleValidation("confirmPassword", false)' {{'TOOLTIP.PASSWORD' | translate}}
(blur)='handleValidation("confirmPassword", true)'> </clr-control-error>
<clr-control-error *ngIf='getValidationState("confirmPassword")'> </div>
{{'TOOLTIP.CONFIRM_PWD' | translate}} </div>
</clr-control-error> <div class="clr-form-control">
</clr-input-container> <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> <clr-input-container>
<label>{{'PROFILE.COMMENT' | translate}}</label> <label>{{'PROFILE.COMMENT' | translate}}</label>
<input clrInput type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="30" id="comment" size="30" <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; margin-right: 0px !important;
top: 2px; 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 { export class NewUserFormComponent implements AfterViewChecked, OnInit {
showNewPwd: boolean = false;
showConfirmPwd: boolean = false;
@Input() isSelfRegistration = false; @Input() isSelfRegistration = false;
// Notify the form value changes // Notify the form value changes
@ -58,6 +60,8 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
this.resetState(); this.resetState();
} }
resetState(): void { resetState(): void {
this.showConfirmPwd = false;
this.showNewPwd = false;
this.mailAlreadyChecked = {}; this.mailAlreadyChecked = {};
this.userNameAlreadyChecked = {}; this.userNameAlreadyChecked = {};
this.emailTooltip = 'TOOLTIP.EMAIL'; 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> <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-control-container" [class.clr-error]="(newToken.dirty || newToken.touched) && newToken.invalid">
<div class="clr-input-wrapper"> <div class="clr-input-wrapper">
<input class="clr-input" <input class="clr-input pwd-input"
type="password" id="new-token" [type]="showNewPwd?'text':'password'" id="new-token"
name="newToken" name="newToken"
autocomplete="off" autocomplete="off"
#newToken = "ngModel" #newToken = "ngModel"
[(ngModel)]="newSecret" [(ngModel)]="newSecret"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
placeholder="{{'SYSTEM_ROBOT.PLACEHOLDER'| translate}}"> 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> </div>
<clr-control-error *ngIf="(newToken.dirty || newToken.touched) && newToken.invalid"> <clr-control-error *ngIf="(newToken.dirty || newToken.touched) && newToken.invalid">
{{'SYSTEM_ROBOT.SECRET' | translate}} {{'SYSTEM_ROBOT.SECRET' | translate}}
@ -37,14 +40,17 @@
<label for="confirm-token" class="clr-control-label">{{"SYSTEM_ROBOT.CONFIRM_SECRET" | translate}}</label> <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-control-container" [class.clr-error]="notSame() || (confirmToken.dirty || confirmToken.touched) && confirmToken.invalid">
<div class="clr-input-wrapper"> <div class="clr-input-wrapper">
<input class="clr-input" <input class="clr-input pwd-input"
type="password" id="confirm-token" [type]="showConfirmPwd?'text':'password'" id="confirm-token"
name="confirmToken" name="confirmToken"
autocomplete="off" autocomplete="off"
#confirmToken = "ngModel" #confirmToken = "ngModel"
[(ngModel)]="confirmSecret" [(ngModel)]="confirmSecret"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
placeholder="{{'SYSTEM_ROBOT.SECRET_AGAIN'| translate}}"> 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> </div>
<clr-control-error *ngIf="notSame() || ((confirmToken.dirty || confirmToken.touched) && confirmToken.invalid)"> <clr-control-error *ngIf="notSame() || ((confirmToken.dirty || confirmToken.touched) && confirmToken.invalid)">
<span *ngIf="!notSame()">{{'SYSTEM_ROBOT.SECRET' | translate}}</span> <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 { .clr-form {
padding-left: 0; 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'] styleUrls: ['./view-token.component.scss']
}) })
export class ViewTokenComponent implements OnInit { export class ViewTokenComponent implements OnInit {
showNewPwd: boolean = false;
showConfirmPwd: boolean = false;
tokenModalOpened: boolean = false; tokenModalOpened: boolean = false;
robot: Robot; robot: Robot;
newSecret: string; newSecret: string;
@ -46,6 +48,8 @@ export class ViewTokenComponent implements OnInit {
this.tokenModalOpened = false; this.tokenModalOpened = false;
} }
open() { open() {
this.showNewPwd = false;
this.showConfirmPwd = false;
this.tokenModalOpened = true; this.tokenModalOpened = true;
this.inlineAlertComponent.close(); this.inlineAlertComponent.close();
this.copyToken = false; this.copyToken = false;