mirror of https://github.com/goharbor/harbor.git
329 lines
15 KiB
HTML
329 lines
15 KiB
HTML
<clr-wizard
|
|
#wizard
|
|
[(clrWizardOpen)]="addRobotOpened"
|
|
(clrWizardOnCancel)="cancel()">
|
|
<clr-wizard-title>
|
|
<h3 *ngIf="!isEditMode" class="modal-title">
|
|
{{ 'SYSTEM_ROBOT.CREATE_ROBOT' | translate }}
|
|
</h3>
|
|
<h3 *ngIf="isEditMode" class="modal-title">
|
|
{{ 'SYSTEM_ROBOT.EDIT_ROBOT' | translate }}
|
|
</h3>
|
|
<p *ngIf="!isEditMode" class="mt-0">
|
|
{{ 'SYSTEM_ROBOT.CREATE_ROBOT_SUMMARY' | translate }}
|
|
</p>
|
|
<p *ngIf="isEditMode" class="mt-0">
|
|
{{ 'SYSTEM_ROBOT.EDIT_ROBOT_SUMMARY' | translate }}
|
|
</p></clr-wizard-title
|
|
>
|
|
<clr-wizard-button [type]="'cancel'">{{
|
|
'BUTTON.CANCEL' | translate
|
|
}}</clr-wizard-button>
|
|
<clr-wizard-button [type]="'previous'">{{
|
|
'ROBOT_ACCOUNT.BACK' | translate
|
|
}}</clr-wizard-button>
|
|
<clr-wizard-button [type]="'next'">{{
|
|
'ROBOT_ACCOUNT.NEXT' | translate
|
|
}}</clr-wizard-button>
|
|
<clr-wizard-button [clrLoading]="saveBtnState" [type]="'finish'">{{
|
|
'ROBOT_ACCOUNT.FINISH' | translate
|
|
}}</clr-wizard-button>
|
|
<clr-wizard-page
|
|
[clrWizardPageNextDisabled]="
|
|
!robotForm.valid || checkNameOnGoing || isNameExisting
|
|
">
|
|
<ng-template clrPageTitle>{{
|
|
'ROBOT_ACCOUNT.BASIC_INFO' | translate
|
|
}}</ng-template>
|
|
<form #robotForm="ngForm" class="clr-form clr-form-horizontal">
|
|
<section class="form-block">
|
|
<div class="clr-form-control">
|
|
<label for="name" class="clr-control-label required"
|
|
>{{ 'P2P_PROVIDER.NAME' | translate }}
|
|
<clr-tooltip *ngIf="!isEditMode">
|
|
<clr-icon
|
|
clrTooltipTrigger
|
|
shape="info-circle"
|
|
size="24"></clr-icon>
|
|
<clr-tooltip-content
|
|
clrPosition="top-right"
|
|
clrSize="lg"
|
|
*clrIfOpen>
|
|
<span>{{
|
|
'SYSTEM_ROBOT.FINAL_SYSTEM_NAME_TIP'
|
|
| translate
|
|
}}</span>
|
|
</clr-tooltip-content>
|
|
</clr-tooltip>
|
|
</label>
|
|
<div
|
|
class="clr-control-container"
|
|
[class.clr-error]="
|
|
((name.dirty || name.touched) && name.invalid) ||
|
|
isNameExisting
|
|
">
|
|
<div class="clr-input-wrapper">
|
|
<input
|
|
class="clr-input input-width"
|
|
[disabled]="loading || isEditMode"
|
|
type="text"
|
|
id="name"
|
|
[(ngModel)]="systemRobot.name"
|
|
required
|
|
pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
|
|
maxLengthExt="255"
|
|
autocomplete="off"
|
|
size="30"
|
|
name="name"
|
|
#name="ngModel"
|
|
(keyup)="inputName()" />
|
|
<clr-icon
|
|
class="clr-validate-icon"
|
|
shape="exclamation-circle"></clr-icon>
|
|
<span
|
|
class="spinner spinner-inline"
|
|
[hidden]="!checkNameOnGoing"></span>
|
|
</div>
|
|
<clr-control-error
|
|
*ngIf="
|
|
((name.dirty || name.touched) &&
|
|
name.invalid) ||
|
|
isNameExisting
|
|
">
|
|
<span
|
|
*ngIf="
|
|
!(
|
|
(name.dirty || name.touched) &&
|
|
name.invalid
|
|
) && isNameExisting
|
|
"
|
|
>{{
|
|
'ROBOT_ACCOUNT.ACCOUNT_EXISTING' | translate
|
|
}}</span
|
|
>
|
|
<span
|
|
*ngIf="
|
|
(name.dirty || name.touched) && name.invalid
|
|
"
|
|
>{{
|
|
'SYSTEM_ROBOT.NAME_TOOLTIP' | translate
|
|
}}</span
|
|
>
|
|
</clr-control-error>
|
|
</div>
|
|
</div>
|
|
<clr-textarea-container class="mt-2">
|
|
<label>{{ 'DISTRIBUTION.DESCRIPTION' | translate }}</label>
|
|
<textarea
|
|
class="input-width"
|
|
clrTextarea
|
|
type="text"
|
|
id="description"
|
|
name="description"
|
|
[(ngModel)]="systemRobot.description"></textarea>
|
|
</clr-textarea-container>
|
|
<div class="clr-form-control mt-2">
|
|
<label class="clr-control-label required"
|
|
>{{ 'SYSTEM_ROBOT.EXPIRATION_TIME' | translate }}
|
|
<clr-tooltip>
|
|
<clr-icon
|
|
clrTooltipTrigger
|
|
shape="info-circle"
|
|
size="24"></clr-icon>
|
|
<clr-tooltip-content
|
|
clrPosition="top-right"
|
|
clrSize="lg"
|
|
*clrIfOpen>
|
|
<span>{{
|
|
'SYSTEM_ROBOT.EXPIRATION_TIME_EXPLAIN'
|
|
| translate
|
|
}}</span>
|
|
</clr-tooltip-content>
|
|
</clr-tooltip>
|
|
</label>
|
|
<div
|
|
class="clr-control-container input-width"
|
|
[class.clr-error]="
|
|
((expiration.dirty || expiration.touched) &&
|
|
expiration.invalid) ||
|
|
isExpirationInvalid()
|
|
">
|
|
<div class="flex">
|
|
<div class="clr-select-wrapper">
|
|
<select
|
|
[ngModelOptions]="{ standalone: true }"
|
|
(change)="changeExpirationType()"
|
|
[(ngModel)]="expirationType"
|
|
id="expiration-type"
|
|
class="clr-select">
|
|
<option *ngIf="!isEditMode" value="default">
|
|
{{ systemExpirationDays }}
|
|
{{
|
|
'SYSTEM_ROBOT.EXPIRATION_DEFAULT'
|
|
| translate
|
|
}}
|
|
</option>
|
|
<option value="days">
|
|
{{
|
|
'SYSTEM_ROBOT.EXPIRATION_DAYS'
|
|
| translate
|
|
}}
|
|
</option>
|
|
<option value="never">
|
|
{{
|
|
'SYSTEM_ROBOT.EXPIRATION_NEVER'
|
|
| translate
|
|
}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="clr-input-wrapper">
|
|
<input
|
|
(input)="inputExpiration()"
|
|
[disabled]="loadingSystemConfig"
|
|
class="clr-input expiration-width"
|
|
name="expiration"
|
|
type="text"
|
|
#expiration="ngModel"
|
|
autocomplete="off"
|
|
[(ngModel)]="systemRobot.duration"
|
|
required
|
|
pattern="^[\-1-9]{1}[0-9]*$"
|
|
id="robotTokenExpiration"
|
|
size="20" />
|
|
<clr-icon
|
|
class="clr-validate-icon"
|
|
shape="exclamation-circle"></clr-icon>
|
|
<span
|
|
class="spinner spinner-inline"
|
|
[hidden]="!loadingSystemConfig"></span>
|
|
<clr-control-error
|
|
*ngIf="
|
|
((expiration.dirty ||
|
|
expiration.touched) &&
|
|
expiration.invalid) ||
|
|
isExpirationInvalid()
|
|
">
|
|
{{
|
|
'SYSTEM_ROBOT.EXPIRATION_REQUIRED'
|
|
| translate
|
|
}}
|
|
</clr-control-error>
|
|
</div>
|
|
</div>
|
|
<clr-control-helper
|
|
*ngIf="
|
|
(isEditMode &&
|
|
systemRobot?.duration > 0 &&
|
|
!(
|
|
(expiration.dirty ||
|
|
expiration.touched) &&
|
|
expiration.invalid
|
|
)) ||
|
|
isExpirationInvalid()
|
|
">
|
|
<span
|
|
[ngClass]="{
|
|
showWarning: shouldShowWarning()
|
|
}">
|
|
<clr-icon
|
|
*ngIf="shouldShowWarning()"
|
|
class="alert-icon"
|
|
shape="exclamation-triangle"></clr-icon
|
|
><span>{{
|
|
'SYSTEM_ROBOT.EXPIRES_AT' | translate
|
|
}}</span
|
|
>:
|
|
<span>{{
|
|
calculateExpiresAt()
|
|
| harborDatetime : 'short'
|
|
}}</span>
|
|
</span>
|
|
</clr-control-helper>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</clr-wizard-page>
|
|
<clr-wizard-page class="pb-0">
|
|
<ng-template clrPageTitle>{{
|
|
'ROBOT_ACCOUNT.SELECT_SYSTEM_PERMISSIONS' | translate
|
|
}}</ng-template>
|
|
<form class="clr-form clr-form-horizontal">
|
|
<section class="form-block">
|
|
<robot-permissions-panel
|
|
[mode]="PermissionSelectPanelModes.NORMAL"
|
|
[(permissionsModel)]="permissionForSystem.access"
|
|
[candidatePermissions]="robotMetadata?.system">
|
|
</robot-permissions-panel>
|
|
</section>
|
|
</form>
|
|
</clr-wizard-page>
|
|
|
|
<clr-wizard-page
|
|
class="pb-0"
|
|
(clrWizardPageOnLoad)="clrWizardPageOnLoad()"
|
|
(clrWizardPageOnCommit)="save()"
|
|
[clrWizardPagePreventDefaultNext]="true"
|
|
[clrWizardPageNextDisabled]="disabled()">
|
|
<ng-template clrPageTitle>{{
|
|
'ROBOT_ACCOUNT.SELECT_PROJECT_PERMISSIONS' | translate
|
|
}}</ng-template>
|
|
<inline-alert class="modal-title"></inline-alert>
|
|
<form class="clr-form clr-form-horizontal pb-0 pt-0">
|
|
<section class="form-block">
|
|
<div class="clr-form-control mt-1">
|
|
<label class="clr-control-label">{{
|
|
'SYSTEM_ROBOT.COVER_ALL' | translate
|
|
}}</label>
|
|
<div class="clr-control-container">
|
|
<clr-checkbox-wrapper>
|
|
<input
|
|
clrCheckbox
|
|
id="coverAll"
|
|
name="coverAll"
|
|
type="checkbox"
|
|
[(ngModel)]="coverAll" />
|
|
<label>
|
|
<clr-tooltip>
|
|
<clr-icon
|
|
class="opacity-07"
|
|
clrTooltipTrigger
|
|
shape="info-circle"
|
|
size="24"></clr-icon>
|
|
<clr-tooltip-content
|
|
clrPosition="bottom-right"
|
|
clrSize="lg"
|
|
*clrIfOpen>
|
|
<span>{{
|
|
'SYSTEM_ROBOT.COVER_ALL_EXPLAIN'
|
|
| translate
|
|
}}</span>
|
|
</clr-tooltip-content>
|
|
</clr-tooltip>
|
|
</label>
|
|
</clr-checkbox-wrapper>
|
|
</div>
|
|
</div>
|
|
<div class="clr-form-control mt-0" *ngIf="coverAll">
|
|
<robot-permissions-panel
|
|
[mode]="PermissionSelectPanelModes.NORMAL"
|
|
[(permissionsModel)]="permissionForCoverAll.access"
|
|
[candidatePermissions]="robotMetadata?.project">
|
|
</robot-permissions-panel>
|
|
</div>
|
|
<div
|
|
class="clr-form-control mt-1"
|
|
*ngIf="showPage3 && !coverAll">
|
|
<app-list-all-projects
|
|
[initDataForEdit]="
|
|
isEditMode ? systemRobot.permissions : null
|
|
"
|
|
[robotMetadata]="robotMetadata"
|
|
class="all-projects"></app-list-all-projects>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</clr-wizard-page>
|
|
</clr-wizard>
|