Upgrading to Angular 20:
Replaced checked in package-lock.json by regenerated one. Ran ng update @angular/core@20 @angular/cli@20 Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11 Ran npm install ngx-mat-select-search@^8.0.2. Ran ng update @angular/material@20. Updated all eslint and typescript to the latest versions. Removed @angular-devkit/schematics. Updated fontawesome. Updated rxjs and tslib. Moved required node version from 16 to 20. Updated jest-preset-angular. Set preserveWhitespaces to false. Corrected two type declarations in two typescript files to make ng serve run without errors. Removed unused angular-devkit/schematics from view-user.component.ts . Updated list of supported browsers. Upgraded prettier. Ran prettier . --write the first time. Ran prettier . --write the second time. Ran ng generate @angular/core:inject with defaults, excepted a handful of files. Fixed remaining eslint problems. Added dist directory to ignores in eslint.config.js. Let prettier fix formatting, almost everything is just line breaks. Made htmlhint ignore @if and @for Angular constructs. Updated node version in Github workflow to 22.12.0 (build.yml). Updated .env.ts. Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd. Merged changes from dev into angular20 branch.
This commit is contained in:
Felix van Hove
@@ -6,49 +6,63 @@
|
||||
<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>
|
||||
@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-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
|
||||
<input matInput [required]="userForm.controls.sendPasswordToEmail.value" 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>
|
||||
@if (userForm.controls.email.hasError('email')) {
|
||||
<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-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="firstname" />
|
||||
<mat-error *ngIf="userForm.controls.firstname.hasError('pattern')">
|
||||
{{ 'labels.inputs.First Name' | translate }}
|
||||
<strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="userForm.controls.firstname.hasError('required')">
|
||||
{{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
@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>
|
||||
}
|
||||
@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-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="lastname" />
|
||||
<mat-error *ngIf="userForm.controls.lastname.hasError('pattern')">
|
||||
{{ 'labels.inputs.Last Name' | translate }}
|
||||
<strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="userForm.controls.lastname.hasError('required')">
|
||||
{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
@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>
|
||||
}
|
||||
@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-form-field>
|
||||
|
||||
<div class="password-never-expires-wrapper flex-48">
|
||||
@@ -63,88 +77,110 @@
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48" *ngIf="!userForm.controls.sendPasswordToEmail.value">
|
||||
<mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
|
||||
<input matInput required type="password" formControlName="password" />
|
||||
<mat-error *ngIf="userForm.controls.password.hasError('required')">
|
||||
{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<mat-error *ngIf="userForm.controls.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.controls.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="
|
||||
@if (!userForm.controls.sendPasswordToEmail.value) {
|
||||
<mat-form-field class="flex-48">
|
||||
<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>
|
||||
}
|
||||
@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>
|
||||
}
|
||||
@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>
|
||||
}
|
||||
@if (
|
||||
userForm.controls.password.hasError('pattern') &&
|
||||
!(userForm.controls.password.hasError('minlength') || userForm.controls.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>
|
||||
) {
|
||||
<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>
|
||||
}
|
||||
|
||||
<mat-form-field class="flex-48" *ngIf="!userForm.controls.sendPasswordToEmail.value">
|
||||
<mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
|
||||
<input matInput required type="password" formControlName="repeatPassword" />
|
||||
<mat-error *ngIf="userForm.controls.repeatPassword.hasError('required')">
|
||||
{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
@if (!userForm.controls.sendPasswordToEmail.value) {
|
||||
<mat-form-field class="flex-48">
|
||||
<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-form-field>
|
||||
}
|
||||
|
||||
<p
|
||||
class="flex-98 reset-password-error"
|
||||
*ngIf="
|
||||
userForm.errors?.passwordsDoNotMatch &&
|
||||
!userForm.controls.password.hasError('required') &&
|
||||
!userForm.controls.repeatPassword.hasError('required')
|
||||
"
|
||||
>
|
||||
{{ '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="flex-98 reset-password-error">
|
||||
{{ 'labels.inputs.Passwords' | translate }}
|
||||
<strong>{{ 'labels.commons.do not match' | translate }}</strong>
|
||||
</p>
|
||||
}
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<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>
|
||||
@for (office of officesData; track office) {
|
||||
<mat-option [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>
|
||||
@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-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<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>
|
||||
@for (staff of staffData; track staff) {
|
||||
<mat-option [value]="staff.id">
|
||||
{{ staff.displayName }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
|
||||
<mat-select required formControlName="roles" multiple>
|
||||
<mat-option *ngFor="let role of rolesData" [value]="role.id">
|
||||
{{ role.name }}
|
||||
</mat-option>
|
||||
@for (role of rolesData; track role) {
|
||||
<mat-option [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>
|
||||
@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-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
|
||||
import {
|
||||
UntypedFormGroup,
|
||||
UntypedFormBuilder,
|
||||
@@ -35,6 +35,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
]
|
||||
})
|
||||
export class CreateUserComponent implements OnInit, AfterViewInit {
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
private usersService = inject(UsersService);
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private popoverService = inject(PopoverService);
|
||||
private configurationWizardService = inject(ConfigurationWizardService);
|
||||
private dialog = inject(MatDialog);
|
||||
private passwordsUtility = inject(PasswordsUtility);
|
||||
|
||||
/** User form. */
|
||||
userForm: UntypedFormGroup;
|
||||
/** Offices data. */
|
||||
@@ -58,16 +67,7 @@ export class CreateUserComponent implements OnInit, AfterViewInit {
|
||||
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
|
||||
* @param {PopoverService} popoverService PopoverService.
|
||||
*/
|
||||
constructor(
|
||||
private formBuilder: UntypedFormBuilder,
|
||||
private usersService: UsersService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private popoverService: PopoverService,
|
||||
private configurationWizardService: ConfigurationWizardService,
|
||||
private dialog: MatDialog,
|
||||
private passwordsUtility: PasswordsUtility
|
||||
) {
|
||||
constructor() {
|
||||
this.route.data.subscribe((data: { usersTemplate: any }) => {
|
||||
this.officesData = data.usersTemplate.allowedOffices;
|
||||
this.rolesData = data.usersTemplate.availableRoles;
|
||||
@@ -104,13 +104,15 @@ export class CreateUserComponent implements OnInit, AfterViewInit {
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern('(^[A-z]).*')]
|
||||
Validators.pattern('(^[A-z]).*')
|
||||
]
|
||||
],
|
||||
lastname: [
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern('(^[A-z]).*')]
|
||||
Validators.pattern('(^[A-z]).*')
|
||||
]
|
||||
],
|
||||
sendPasswordToEmail: [true],
|
||||
passwordNeverExpires: [false],
|
||||
@@ -158,7 +160,8 @@ export class CreateUserComponent implements OnInit, AfterViewInit {
|
||||
'repeatPassword',
|
||||
new UntypedFormControl('', [
|
||||
Validators.required,
|
||||
this.passwordsUtility.confirmPassword('password')])
|
||||
this.passwordsUtility.confirmPassword('password')
|
||||
])
|
||||
);
|
||||
this.userForm.get('email').setValidators([Validators.email]);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user