206 lines
9.6 KiB
HTML
206 lines
9.6 KiB
HTML
<div class="container">
|
|
<mat-card>
|
|
<form [formGroup]="userForm" (ngSubmit)="submit()">
|
|
<mat-card-content>
|
|
<div class="layout-row-wrap layout-lt-md-column gap-2percent">
|
|
<!-- Username -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
|
|
<input matInput required formControlName="username" />
|
|
<mat-error *ngIf="userForm.controls.username.hasError('required')">
|
|
{{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<!-- Email -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
|
|
<input matInput required formControlName="email" />
|
|
<mat-error *ngIf="userForm.controls.email.hasError('email')">
|
|
{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.invalid' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error *ngIf="userForm.controls.email.hasError('required')">
|
|
{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<!-- First Name -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
|
<input matInput formControlName="firstName" required />
|
|
</mat-form-field>
|
|
|
|
<!-- Last Name -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
|
<input matInput formControlName="lastName" required />
|
|
</mat-form-field>
|
|
|
|
<!-- Preferred Language -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
|
|
<mat-select formControlName="preferredLanguage" required>
|
|
<mat-option *ngFor="let lang of languageCodes" [value]="lang.code">
|
|
{{ 'languages.' + lang.key | translate }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<!-- Gender -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
|
|
<mat-select formControlName="gender" required>
|
|
<mat-option value="GENDER_MALE">{{ 'labels.catalogs.male' | translate }}</mat-option>
|
|
<mat-option value="GENDER_FEMALE">{{ 'labels.catalogs.female' | translate }}</mat-option>
|
|
<mat-option value="GENDER_OTHER">{{ 'labels.catalogs.other' | translate }}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<!-- Country code and phone -->
|
|
<div class="flex items-center gap-2">
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Code' | translate }}</mat-label>
|
|
<mat-select formControlName="countryCode" required>
|
|
<mat-option *ngFor="let country of countryCodes" [value]="country.code">
|
|
{{ 'countries.' + country.key | translate }} ({{ country.code }})
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
|
|
<input matInput formControlName="phoneNumber" required maxlength="12" minlength="4" />
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<mat-form-field class="flex-20">
|
|
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
|
<mat-select required formControlName="officeId">
|
|
<mat-option *ngFor="let office of officesData" [value]="office.id">
|
|
{{ office.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="userForm.controls.officeId.hasError('required')">
|
|
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-20">
|
|
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
|
|
<mat-select formControlName="staffId">
|
|
<mat-option *ngFor="let staff of staffData" [value]="staff.id">
|
|
{{ staff.displayName }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<!-- Password -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
|
|
<input matInput type="password" formControlName="password" required />
|
|
<mat-error *ngIf="userForm.get('password')?.hasError('required')">
|
|
{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error *ngIf="userForm.get('password')?.hasError('minlength')">
|
|
{{ 'labels.commons.Password should be at least' | translate }}
|
|
<strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error *ngIf="userForm.get('password')?.hasError('maxlength')">
|
|
{{ 'labels.commons.Password should not be more than' | translate }}
|
|
<strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
|
|
</mat-error>
|
|
<mat-error
|
|
*ngIf="
|
|
userForm.get('password')?.hasError('pattern') &&
|
|
!userForm.get('password')?.hasError('minlength') &&
|
|
!userForm.get('password')?.hasError('maxlength')
|
|
"
|
|
>
|
|
{{ '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>
|
|
|
|
<!-- Repeat password -->
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
|
|
<input matInput type="password" formControlName="repeatPassword" required />
|
|
<mat-error *ngIf="userForm.get('repeatPassword')?.hasError('required')">
|
|
{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<!-- Passwords do not match -->
|
|
<p
|
|
class="flex-98 reset-password-error"
|
|
*ngIf="
|
|
userForm.errors?.passwordsDoNotMatch &&
|
|
!userForm.get('password')?.hasError('required') &&
|
|
!userForm.get('repeatPassword')?.hasError('required')
|
|
"
|
|
>
|
|
{{ 'labels.inputs.Passwords' | translate }}
|
|
<strong>{{ 'labels.commons.do not match' | translate }}</strong>
|
|
</p>
|
|
|
|
<!-- Roles -->
|
|
<mat-form-field class="flex-20">
|
|
<mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
|
|
<mat-select formControlName="roles" required multiple>
|
|
<mat-option *ngFor="let role of rolesData" [value]="role.id">
|
|
{{ role.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="userForm.controls.roles.hasError('required')">
|
|
{{ 'labels.commons.At least one role' | translate }}
|
|
<strong>{{ 'labels.commons.must be selected' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</mat-card-content>
|
|
|
|
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
|
<button type="button" mat-raised-button [routerLink]="['../']">
|
|
{{ 'labels.buttons.Cancel' | translate }}
|
|
</button>
|
|
<button mat-raised-button color="primary" [disabled]="userForm.invalid">
|
|
{{ 'labels.buttons.Submit' | translate }}
|
|
</button>
|
|
</mat-card-actions>
|
|
</form>
|
|
</mat-card>
|
|
</div>
|
|
|
|
<ng-template #templateUserFormRef let-popover="popover">
|
|
<h2>{{ 'labels.heading.Create User' | translate }}</h2>
|
|
<p class="mw400">
|
|
{{ 'labels.text.Filling Details' | translate }}:
|
|
<a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141740/Users" target="_blank">{{
|
|
'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>
|
|
</div>
|
|
</ng-template>
|