Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-22 10:15:35 +01:00
Code Issues Projects Releases Wiki Activity

Fix UI issues found in round-2 testing day (#15093)

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Will Sun 2021-06-09 12:50:33 +08:00 committed by GitHub
parent 254c4a3497
commit e774976811
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 74 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="false">
<h3 class="modal-title">{{'PROFILE.TITLE' | translate}}</h3>
<div class="modal-body body-format">
<inline-alert (confirmEvt)="confirmYes($event)" (closeEvt)="confirmNo($event)"></inline-alert>
<inline-alert #accountSettingInlineAlert (confirmEvt)="confirmYes($event)" (closeEvt)="confirmNo($event)"></inline-alert>
<form #accountSettingsFrom="ngForm" class="clr-form clr-form-horizontal">
<div class="clr-form-control">
<label for="account_settings_username" aria-haspopup="true"
@ -75,7 +75,7 @@
class="btn btn-outline btn-padding-less" *ngIf="showGenerateCli">
{{'PROFILE.ADMIN_CLI_SECRET_BUTTON' | translate}}
</button>
<button (click)="showSecretDetail=true" id="reset-cli-btn" class="btn btn-outline btn-padding-less"
<button (click)="openSecretDetail()" id="reset-cli-btn" class="btn btn-outline btn-padding-less"
*ngIf="showGenerateCli">
{{'PROFILE.ADMIN_CLI_SECRET_RESET_BUTTON' | translate}}
</button>
@ -102,20 +102,36 @@
<h3 class="modal-title">{{'PROFILE.ADMIN_CLI_SECRET_RESET_BUTTON' | translate}}</h3>
<div class="modal-body upload-secret">
<inline-alert #resetSecretInlineAlert class="modal-title"></inline-alert>
<form #resetSecretFrom="ngForm" class="clr-form reset-cli-form clr-form-horizontal">
<clr-input-container>
<label>{{'PROFILE.NEW_SECRET' | translate}}</label>
<input clrInput type="password" maxlength="30" size="30" required pattern="^(?=.*\d)(?=.*[a-zA-Z]).{8,}$"
name="input_secret" [(ngModel)]="resetForms.input_secret" id="input-secret">
<clr-control-error>
{{'TOOLTIP.NEW_SECRET' | translate}}
</clr-control-error>
</clr-input-container>
<clr-input-container>
<label>{{'PROFILE.CONFIRM_SECRET' | translate}}</label>
<input clrInput type="password" maxlength="30" size="30"
[(ngModel)]="resetForms.confirm_secret" name="confirm_secret" id="confirm-secret">
</clr-input-container>
<div class="clr-form-control">
<label for="input-secret" class="clr-control-label">{{"SYSTEM_ROBOT.CONFIRM_SECRET" | translate}}</label>
<div class="clr-control-container" [class.clr-error]="(inputSecret.dirty || inputSecret.touched) && inputSecret.invalid">
<div class="clr-input-wrapper">
<input [type]="showInputSecret?'text':'password'" id="new-token" #inputSecret="ngModel" class="clr-input pwd-input" type="password" maxlength="30" size="30" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
name="input_secret" [(ngModel)]="resetForms.input_secret" id="input-secret">
<clr-icon *ngIf="!showInputSecret" shape="eye" class="pw-eye" (click)="showInputSecret =!showInputSecret"></clr-icon>
<clr-icon *ngIf="showInputSecret" shape="eye-hide" class="pw-eye" (click)="showInputSecret =!showInputSecret"></clr-icon>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
</div>
<clr-control-error *ngIf="(inputSecret.dirty || inputSecret.touched) && inputSecret.invalid">
{{'TOOLTIP.NEW_SECRET' | translate}}
</clr-control-error>
</div>
</div>
<div class="clr-form-control">
<label for="confirm-secret" class="clr-control-label">{{'PROFILE.CONFIRM_SECRET' | translate}}</label>
<div class="clr-control-container">
<div class="clr-input-wrapper">
<input [type]="showConfirmSecret?'text':'password'" class="clr-input pwd-input" type="password" maxlength="30" size="30"
[(ngModel)]="resetForms.confirm_secret" name="confirm_secret" id="confirm-secret">
<clr-icon *ngIf="!showConfirmSecret" shape="eye" class="pw-eye" (click)="showConfirmSecret =!showConfirmSecret"></clr-icon>
<clr-icon *ngIf="showConfirmSecret" shape="eye-hide" class="pw-eye" (click)="showConfirmSecret =!showConfirmSecret"></clr-icon>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">

10
src/portal/src/app/base/account-settings/account-settings-modal.component.scss
View File

@ -47,5 +47,13 @@ clr-modal {
display: flex;
}
:host::ng-deep.upload-secret {
width: 23rem;
width: 24.5rem;
}
.pwd-input {
padding-right: 26px;
}
.pw-eye {
margin-left: -20px;
margin-right: 8px;
cursor: pointer;
}

12
src/portal/src/app/base/account-settings/account-settings-modal.component.ts
View File

@ -58,9 +58,11 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
accountFormRef: NgForm;
@ViewChild("accountSettingsFrom", {static: true}) accountForm: NgForm;
@ViewChild("resetSecretFrom", {static: true}) resetSecretFrom: NgForm;
@ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;
@ViewChild("accountSettingInlineAlert") inlineAlert: InlineAlertComponent;
@ViewChild("resetSecretInlineAlert") resetSecretInlineAlert: InlineAlertComponent;
@ViewChild("copyInput") copyInput: CopyInputComponent;
showInputSecret: boolean = false;
showConfirmSecret: boolean = false;
constructor(
private session: SessionService,
private msgHandler: MessageHandlerService,
@ -364,7 +366,7 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
this.closeReset();
this.inlineAlert.showInlineSuccess({message: 'PROFILE.GENERATE_SUCCESS'});
}, error => {
this.inlineAlert.showInlineError({message: 'PROFILE.GENERATE_ERROR'});
this.resetSecretInlineAlert.showInlineError({message: 'PROFILE.GENERATE_ERROR'});
});
}
disableChangeCliSecret() {
@ -375,4 +377,8 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
this.showGenerateCliFn();
this.resetSecretFrom.resetForm(new ResetSecret());
}
openSecretDetail() {
this.showSecretDetail = true;
this.resetSecretInlineAlert.close();
}
}

4
src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html
View File

@ -83,7 +83,7 @@
</clr-tooltip>
</label>
<clr-checkbox-wrapper>
<input type="checkbox" clrCheckbox name="repoReadOnly" id="repoReadOnly"
<input type="checkbox" [disabled]="!systemSettings.read_only.editable" clrCheckbox name="repoReadOnly" id="repoReadOnly"
[ngModel]="systemSettings.read_only.value" (ngModelChange)="setRepoReadOnlyValue($event)" />
</clr-checkbox-wrapper>
</clr-checkbox-container>
@ -175,7 +175,7 @@
<input type="checkbox" clrCheckbox name="webhookNotificationEnabled" id="webhookNotificationEnabled"
[ngModel]="systemSettings.notification_enable.value"
(ngModelChange)="setWebhookNotificationEnabledValue($event)"
[ngModel]="systemSettings.notification_enable.value" />
[disabled]="!systemSettings.notification_enable.editable" />
</clr-checkbox-wrapper>
</clr-checkbox-container>
</section>

10
src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.html
View File

@ -128,14 +128,7 @@
</div>
<!--destination registry-->
<div *ngIf="isPushMode" class="clr-form-control">
<label class="clr-control-label required">{{'REPLICATION.DEST_REGISTRY' | translate}}
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
<clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
<span>{{'TOOLTIP.DESTINATION_NAMESPACE' | translate}}</span>
</clr-tooltip-content>
</clr-tooltip>
</label>
<label class="clr-control-label required">{{'REPLICATION.DEST_REGISTRY' | translate}}</label>
<div class="form-select clr-control-container">
<div class="clr-select-wrapper">
<select class="clr-select select-width" id="dest_registry" (change)="targetChange($event)" formControlName="dest_registry"
@ -192,6 +185,7 @@
<div>{{'REPLICATION.FLATTEN_LEVEL_TIP_1' | translate}}</div>
<div>{{'REPLICATION.FLATTEN_LEVEL_TIP_2' | translate}}</div>
<div>{{'REPLICATION.FLATTEN_LEVEL_TIP_3' | translate}}</div>
<div>{{'REPLICATION.NOTE' | translate}}</div>
</clr-tooltip-content>
</clr-tooltip>
</div>

2
src/portal/src/app/base/project/project-detail/project-detail.component.html
View File

@ -7,7 +7,7 @@
<clr-icon *ngIf="isProxyCacheProject" shape="cloud-traffic" size="30"></clr-icon>
<clr-icon *ngIf="!isProxyCacheProject" shape="organization" size="30"></clr-icon>
<span class="ml-05">{{currentProject.name}}</span>
<div class="divider filter-divider"></div>
<div class="divider filter-divider" *ngIf="isMember"></div>
<span class="role-label" *ngIf="isMember">{{roleName | translate}}</span>
</h1>
<div class="clr-row mt-0 line-height-10" *ngIf="isProxyCacheProject">

4
src/portal/src/app/shared/components/global-message/message.component.ts
View File

@ -70,6 +70,10 @@ export class MessageComponent implements OnInit, OnDestroy {
// Make the message alert bar dismiss after several intervals.
// Only for this case
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.timer = setTimeout(() => this.onClose(), dismissInterval);
// Hack the Clarity Alert style with native dom

3
src/portal/src/i18n/lang/de-de-lang.json
View File

@ -642,7 +642,8 @@
"FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "Notes: The Chartmuseum Charts only support the repository structure with 2 path components: `a/chart`"
},
"DESTINATION": {
"NEW_ENDPOINT": "Neuer Endpunkt",

3
src/portal/src/i18n/lang/en-us-lang.json
View File

@ -642,7 +642,8 @@
"FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "Notes: The Chartmuseum Charts only support the repository structure with 2 path components: `a/chart`"
},
"DESTINATION": {
"NEW_ENDPOINT": "New Endpoint",

3
src/portal/src/i18n/lang/es-es-lang.json
View File

@ -643,7 +643,8 @@
"FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "Notes: The Chartmuseum Charts only support the repository structure with 2 path components: `a/chart`"
},
"DESTINATION": {
"NEW_ENDPOINT": "Nuevo Endpoint",

3
src/portal/src/i18n/lang/fr-fr-lang.json
View File

@ -632,7 +632,8 @@
"FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "Notes: The Chartmuseum Charts only support the repository structure with 2 path components: `a/chart`"
},
"DESTINATION": {
"NEW_ENDPOINT": "Nouveau Point Final",

3
src/portal/src/i18n/lang/pt-br-lang.json
View File

@ -642,7 +642,8 @@
"FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "Notes: The Chartmuseum Charts only support the repository structure with 2 path components: `a/chart`"
},
"DESTINATION": {
"NEW_ENDPOINT": "Novo Endpoint",

3
src/portal/src/i18n/lang/tr-tr-lang.json
View File

@ -642,7 +642,8 @@
"FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "Notes: The Chartmuseum Charts only support the repository structure with 2 path components: `a/chart`"
},
"DESTINATION": {
"NEW_ENDPOINT": "Yeni Uç Nokta",

3
src/portal/src/i18n/lang/zh-cn-lang.json
View File

@ -644,7 +644,8 @@
"FLATTEN_LEVEL_TIP_NO": "'无替换': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'替换1级'(默认项): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'替换2级': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'替换3级': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'替换3级': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "注意: Chartmuseum Charts 仅支持2层的仓库结构：如 `a/chart`"
},
"DESTINATION": {
"NEW_ENDPOINT": "新建目标",

3
src/portal/src/i18n/lang/zh-tw-lang.json
View File

@ -639,7 +639,8 @@
"FLATTEN_LEVEL_TIP_NO": "'No Flatting': 'a/b/c/d/img' -> 'ns/a/b/c/d/img",
"FLATTEN_LEVEL_TIP_1": "'Flatten 1 Level'(Default): 'a/b/c/d/img' -> 'ns/b/c/d/img'",
"FLATTEN_LEVEL_TIP_2": "'Flatten 2 Levels': 'a/b/c/d/img' -> 'ns/c/d/img'",
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'"
"FLATTEN_LEVEL_TIP_3": "'Flatten 3 Levels': 'a/b/c/d/img' -> 'ns/d/img'",
"NOTE": "Notes: The Chartmuseum Charts only support the repository structure with 2 path components: `a/chart`"
},
"DESTINATION":{
"NEW_ENDPOINT": "新建目標",