@@ -29,7 +29,10 @@
|
||||
<mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
|
||||
<input matInput required formControlName="username" />
|
||||
@if (userForm.controls.username.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@@ -37,10 +40,16 @@
|
||||
<mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
|
||||
<input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email" />
|
||||
@if (userForm.controls.email.hasError('email')) {
|
||||
<mat-error>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.invalid' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.invalid' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
@if (userForm.controls.email.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@@ -48,10 +57,18 @@
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="firstname" />
|
||||
@if (userForm.controls.firstname.hasError('pattern')) {
|
||||
<mat-error>{{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.First Name' | translate }}
|
||||
<strong>{{
|
||||
'labels.commons.cannot begin with a special character or number' | translate
|
||||
}}</strong></mat-error
|
||||
>
|
||||
}
|
||||
@if (userForm.controls.firstname.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@@ -59,10 +76,18 @@
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="lastname" />
|
||||
@if (userForm.controls.lastname.hasError('pattern')) {
|
||||
<mat-error>{{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Last Name' | translate }}
|
||||
<strong>{{
|
||||
'labels.commons.cannot begin with a special character or number' | translate
|
||||
}}</strong></mat-error
|
||||
>
|
||||
}
|
||||
@if (userForm.controls.lastname.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -90,16 +115,33 @@
|
||||
<mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
|
||||
<input matInput required type="password" formControlName="password" />
|
||||
@if (userForm.controls.password.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
@if (userForm.controls.password.hasError('minlength')) {
|
||||
<mat-error>{{ 'labels.commons.Password should be at least' | translate }} <strong>{{ 'labels.commons.12 characters long' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.commons.Password should be at least' | translate }}
|
||||
<strong>{{ 'labels.commons.12 characters long' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
@if (userForm.controls.password.hasError('maxlength')) {
|
||||
<mat-error>{{ 'labels.commons.Password should not be more than' | translate }} <strong>{{ 'labels.commons.50 characters long' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.commons.Password should not be more than' | translate }}
|
||||
<strong>{{ 'labels.commons.50 characters long' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
@if (userForm.controls.password.hasError('pattern') && !(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))) {
|
||||
<mat-error>{{ 'labels.commons.Password should include a' | translate }} <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }} <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong>, <strong>{{ 'labels.commons.lowercase and special character' | translate }}</strong></mat-error>
|
||||
@if (
|
||||
userForm.controls.password.hasError('pattern') &&
|
||||
!(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))
|
||||
) {
|
||||
<mat-error
|
||||
>{{ 'labels.commons.Password should include a' | translate }}
|
||||
<strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
|
||||
<strong>{{ 'labels.commons.least one uppercase' | translate }}</strong
|
||||
>, <strong>{{ 'labels.commons.lowercase and special character' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@@ -107,13 +149,23 @@
|
||||
<mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
|
||||
<input matInput required type="password" formControlName="repeatPassword" />
|
||||
@if (userForm.controls.repeatPassword.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (userForm.errors?.passwordsDoNotMatch && !userForm.controls.password.hasError('required') && !userForm.controls.repeatPassword.hasError('required')) {
|
||||
<p class="cu-error">{{ 'labels.inputs.Passwords' | translate }} <strong>{{ 'labels.commons.do not match' | translate }}</strong></p>
|
||||
@if (
|
||||
userForm.errors?.passwordsDoNotMatch &&
|
||||
!userForm.controls.password.hasError('required') &&
|
||||
!userForm.controls.repeatPassword.hasError('required')
|
||||
) {
|
||||
<p class="cu-error">
|
||||
{{ 'labels.inputs.Passwords' | translate }}
|
||||
<strong>{{ 'labels.commons.do not match' | translate }}</strong>
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,7 +185,10 @@
|
||||
}
|
||||
</mat-select>
|
||||
@if (userForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@@ -154,7 +209,10 @@
|
||||
}
|
||||
</mat-select>
|
||||
@if (userForm.controls.roles.hasError('required')) {
|
||||
<mat-error>{{ 'labels.commons.At least one role' | translate }} <strong>{{ 'labels.commons.must be selected' | translate }}</strong></mat-error>
|
||||
<mat-error
|
||||
>{{ 'labels.commons.At least one role' | translate }}
|
||||
<strong>{{ 'labels.commons.must be selected' | translate }}</strong></mat-error
|
||||
>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -176,11 +234,24 @@
|
||||
<!-- Config Wizard Template -->
|
||||
<ng-template #templateUserFormRef let-popover="popover">
|
||||
<h2>{{ 'labels.heading.Create User' | translate }}</h2>
|
||||
<p class="mw400">{{ 'labels.text.Filling Details' | translate }}: <a [href]="'users' | documentationLink" target="_blank" rel="noopener noreferrer">{{ 'labels.inputs.Users' | translate }}</a></p>
|
||||
<p class="mw400">
|
||||
{{ 'labels.text.Filling Details' | translate }}:
|
||||
<a [href]="'users' | documentationLink" target="_blank" rel="noopener noreferrer">{{
|
||||
'labels.inputs.Users' | translate
|
||||
}}</a>
|
||||
</p>
|
||||
<div class="layout-row align-end gap-2px responsive-column">
|
||||
<button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close()">{{ 'labels.buttons.Create User' | translate }}</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">{{ 'labels.buttons.Next' | translate }}</button>
|
||||
<button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
|
||||
{{ 'labels.buttons.Close' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close()">
|
||||
{{ 'labels.buttons.Create User' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@@ -44,9 +44,14 @@ $gray-900: #202124;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
border-color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Card
|
||||
@@ -92,7 +97,9 @@ $gray-900: #202124;
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
@media (width <= 600px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.cu-field {
|
||||
@@ -148,6 +155,9 @@ $gray-900: #202124;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
i {
|
||||
margin-right: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user