mirror of
https://github.com/goharbor/harbor.git
synced 2024-09-14 15:07:46 +02:00
Change the validation way of project name
This commit is contained in:
Steven Zou
parent
5744b83989
commit
cf65c39cef
@ -5,19 +5,22 @@
|
||||
<form #projectForm="ngForm">
|
||||
<section class="form-block">
|
||||
<div class="form-group" style="padding-left: 135px;">
|
||||
<label for="create_project_name" class="col-md-3 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
|
||||
<label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
|
||||
<input type="text" id="create_project_name" [(ngModel)]="project.name" name="name" size="38" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
|
||||
<span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.required && (projectName.dirty || projectName.touched)">
|
||||
{{'PROJECT.NAME_IS_REQUIRED' | translate}}
|
||||
</span>
|
||||
<span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.minlength && (projectName.dirty || projectName.touched)">
|
||||
{{'PROJECT.NAME_MINIMUM_LENGTH' | translate}}
|
||||
</span>
|
||||
<span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.targetExists && (projectName.dirty || projectName.touched)">
|
||||
{{'PROJECT.NAME_ALREADY_EXISTS' | translate}}
|
||||
<label for="create_project_name" class="col-md-3 form-group-label-override required">{{'PROJECT.NAME' | translate}}</label>
|
||||
<label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
|
||||
<input type="text" id="create_project_name" [(ngModel)]="project.name"
|
||||
name="create_project_name" size="36"
|
||||
required
|
||||
pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
|
||||
minlength="2"
|
||||
#projectName="ngModel"
|
||||
(input)='handleValidation(false)'
|
||||
(blur)='handleValidation(true)'
|
||||
>
|
||||
<span class="tooltip-content">
|
||||
{{ nameTooltipText | translate }}
|
||||
</span>
|
||||
</label>
|
||||
<span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
|
||||
</div>
|
||||
<div class="form-group" style="padding-left: 135px;">
|
||||
<label class="col-md-4 form-group-label-override">{{'PROJECT.ACCESS_LEVEL' | translate}}</label>
|
||||
@ -36,6 +39,6 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
|
||||
<button type="button" class="btn btn-primary" [disabled]="projectForm.form.invalid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
|
||||
<button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
@ -45,6 +45,10 @@ export class CreateProjectComponent implements AfterViewChecked {
|
||||
staticBackdrop: boolean = true;
|
||||
closable: boolean = false;
|
||||
|
||||
isNameValid: boolean = true;
|
||||
nameTooltipText: string = 'PROJECT.NAME_TOOLTIP';
|
||||
checkOnGoing: boolean = false;
|
||||
|
||||
@Output() create = new EventEmitter<boolean>();
|
||||
@ViewChild(InlineAlertComponent)
|
||||
inlineAlert: InlineAlertComponent;
|
||||
@ -129,5 +133,39 @@ export class CreateProjectComponent implements AfterViewChecked {
|
||||
this.inlineAlert.close();
|
||||
this.projectForm.reset();
|
||||
}
|
||||
|
||||
public get isValid(): boolean {
|
||||
return this.currentForm && this.currentForm.valid && this.isNameValid;
|
||||
}
|
||||
|
||||
//Handle the form validation
|
||||
handleValidation(flag: boolean): void {
|
||||
if (flag) {
|
||||
//validate
|
||||
let cont = this.currentForm.controls["create_project_name"];
|
||||
if (cont) {
|
||||
this.isNameValid = cont.valid;
|
||||
if (this.isNameValid && this.hasChanged) {
|
||||
//Check exiting from backend
|
||||
this.checkOnGoing = true;
|
||||
this.projectService
|
||||
.checkProjectExists(cont.value).toPromise()
|
||||
.then(() => {
|
||||
//Project existing
|
||||
this.isNameValid = false;
|
||||
this.nameTooltipText = 'PROJECT.NAME_ALREADY_EXISTS';
|
||||
this.checkOnGoing = false;
|
||||
})
|
||||
.catch(error => {
|
||||
this.checkOnGoing = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
//reset
|
||||
this.isNameValid = true;
|
||||
this.nameTooltipText = 'PROJECT.NAME_TOOLTIP';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -136,6 +136,7 @@
|
||||
"PUBLIC_PROJECTS": "Public Projects",
|
||||
"PROJECT": "Project",
|
||||
"NEW_PROJECT": "New Project",
|
||||
"NAME_TOOLTIP": "Project name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
|
||||
"NAME_IS_REQUIRED": "Project name is required.",
|
||||
"NAME_MINIMUM_LENGTH": "Project name is too short, it should be greater than 2 characters.",
|
||||
"NAME_ALREADY_EXISTS": "Project name already exists.",
|
||||
|
||||
@ -136,6 +136,7 @@
|
||||
"PUBLIC_PROJECTS": "Proyectos Públicos",
|
||||
"PROJECT": "Proyecto",
|
||||
"NEW_PROJECT": "Nuevo proyecto",
|
||||
"NAME_TOOLTIP": "Project name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
|
||||
"NAME_IS_REQUIRED": "El nombre del proyecto es obligatorio.",
|
||||
"NAME_MINIMUM_LENGTH": "El nombre del proyecto es demasiado corto, debe ser mayor de 2 caracteres.",
|
||||
"NAME_ALREADY_EXISTS": "Ya existe un proyecto con ese nombre.",
|
||||
|
||||
@ -136,7 +136,8 @@
|
||||
"PUBLIC_PROJECTS": "公开项目",
|
||||
"PROJECT": "项目",
|
||||
"NEW_PROJECT": "新建项目",
|
||||
"NAME_IS_REQUIRED": "项目名称为必填项",
|
||||
"NAME_TOOLTIP": "项目名称由小写字符、数字和._-组成且至少2个字符并以字符或者数字开头。",
|
||||
"NAME_IS_REQUIRED": "项目名称为必填项。",
|
||||
"NAME_MINIMUM_LENGTH": "项目名称长度过短，至少多于2个字符。",
|
||||
"NAME_ALREADY_EXISTS": "项目名称已存在。",
|
||||
"NAME_IS_ILLEGAL": "项目名称非法。",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user