@sumaris-net/ngx-components 18.12.0 → 18.12.2

package/src/app/core/register/register.form.html

@@ -1,143 +0,0 @@
-<mat-horizontal-stepper linear #stepper="matHorizontalStepper">
-  <!-- Step 1: Username -->
-  <mat-step [stepControl]="forms[0]" *ngIf="forms[0].controls; let controls">
-    <form [formGroup]="forms[0]" class="form-container ion-padding" (keyup.enter)="slideNext($event)">
-      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>
-
-      <!-- Email -->
-      <mat-form-field>
-        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
-        <input
-          matInput
-          [appAutofocus]="true"
-          [autofocusDelay]="500"
-          formControlName="email"
-          autocomplete="off"
-          required
-        />
-        <mat-error *ngIf="controls.email.hasError('required') && controls.email.touched" translate>
-          ERROR.FIELD_REQUIRED
-        </mat-error>
-        <mat-error
-          *ngIf="controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched"
-        >
-          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>
-        </mat-error>
-        <mat-error *ngIf="controls.email.hasError('availability') && controls.email.touched" translate>
-          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED
-        </mat-error>
-      </mat-form-field>
-
-      <!-- Confirm Email -->
-      <mat-form-field>
-        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>
-        <input matInput autocomplete="off" matFormFieldControl formControlName="confirmEmail" />
-        <mat-error *ngIf="controls.confirmEmail.hasError('required') && controls.confirmEmail.touched" translate>
-          ERROR.FIELD_REQUIRED
-        </mat-error>
-        <mat-error *ngIf="controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched">
-          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>
-        </mat-error>
-      </mat-form-field>
-    </form>
-  </mat-step>
-
-  <!-- Step 2: Password -->
-  <mat-step [stepControl]="forms[1]" *ngIf="forms[1].controls; let controls">
-    <form [formGroup]="forms[1]" class="form-container ion-padding" (keyup.enter)="slideNext($event)">
-      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>
-
-      <!-- Password -->
-      <mat-form-field>
-        <mat-label>{{ 'USER.PASSWORD' | translate }}</mat-label>
-        <input
-          matInput
-          formControlName="password"
-          autocomplete="section-red new-password"
-          [type]="showPwd ? 'text' : 'password'"
-          required
-        />
-        <button matSuffix mat-icon-button type="button" (click)="showPwd = !showPwd" tabindex="-1">
-          <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>
-        </button>
-        <mat-error *ngIf="controls.password.hasError('required') && controls.password.touched" translate>
-          ERROR.FIELD_REQUIRED
-        </mat-error>
-        <mat-error *ngIf="controls.password.hasError('minlength') && controls.password.touched">
-          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 8 } }}</span>
-        </mat-error>
-      </mat-form-field>
-
-      <!-- Confirm password -->
-      <mat-form-field>
-        <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>
-        <input
-          matInput
-          formControlName="confirmPassword"
-          autocomplete="section-red new-password"
-          [type]="showConfirmPwd ? 'text' : 'password'"
-          required
-        />
-        <button mat-icon-button matSuffix (click)="showConfirmPwd = !showConfirmPwd" tabindex="-1">
-          <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>
-        </button>
-        <mat-error *ngIf="controls.confirmPassword.hasError('required') && controls.confirmPassword.touched" translate>
-          ERROR.FIELD_REQUIRED
-        </mat-error>
-        <mat-error *ngIf="controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched">
-          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>
-        </mat-error>
-      </mat-form-field>
-    </form>
-  </mat-step>
-
-  <!-- Step 3: user details -->
-  <mat-step [stepControl]="forms[2]" *ngIf="forms[2].controls; let controls">
-    <form
-      [formGroup]="forms[2]"
-      (ngSubmit)="doSubmit($event)"
-      class="form-container ion-padding"
-      (keyup.enter)="doSubmit()"
-    >
-      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>
-
-      <!-- error -->
-      <ion-item *ngIf="error && !sending" lines="none">
-        <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-        <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
-      </ion-item>
-
-      <!-- Last name -->
-      <mat-form-field>
-        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>
-        <input matInput formControlName="lastName" autocomplete="section-blue family-name" required />
-        <mat-error *ngIf="controls.lastName.hasError('required') && controls.lastName.dirty" translate>
-          ERROR.FIELD_REQUIRED
-        </mat-error>
-        <mat-error *ngIf="controls.lastName.hasError('minlength') && controls.lastName.dirty">
-          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>
-        </mat-error>
-      </mat-form-field>
-
-      <!-- First name -->
-      <mat-form-field>
-        <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>
-        <input matInput formControlName="firstName" autocomplete="section-blue given-name" required />
-        <mat-error *ngIf="controls.firstName.hasError('required') && controls.firstName.dirty" translate>
-          ERROR.FIELD_REQUIRED
-        </mat-error>
-        <mat-error *ngIf="controls.firstName.hasError('minlength') && controls.firstName.dirty">
-          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>
-        </mat-error>
-      </mat-form-field>
-
-      <!-- Additional fields -->
-      <app-form-field
-        *ngFor="let field of additionalFields"
-        [definition]="field"
-        [formControlName]="field.key"
-        [required]="true"
-      ></app-form-field>
-    </form>
-  </mat-step>
-</mat-horizontal-stepper>

package/src/app/core/register/register.form.scss

@@ -1,10 +0,0 @@
-form ion-toolbar.toolbar-buttons {
-  .toolbar-content {
-    text-align: right;
-  }
-
-  .toolbar-background {
-    border: 0;
-    background: inherit !important;
-  }
-}

package/src/app/core/register/register.form.ts

@@ -1,218 +0,0 @@
-import { Component, EventEmitter, Inject, OnInit, Output, ViewChild } from '@angular/core';
-import {
-  AbstractControl,
-  AsyncValidatorFn,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-  ValidationErrors,
-  ValidatorFn,
-  Validators,
-} from '@angular/forms';
-import { AccountService, RegisterData } from '../services/account.service';
-import { Account } from '../services/model/account.model';
-import { referentialToString } from '../services/model/referential.model';
-import { MatStepper } from '@angular/material/stepper';
-import { delay, Observable, of, Subscription } from 'rxjs';
-import { AccountValidatorService } from '../services/validator/account.validator';
-import { FormFieldDefinition } from '../../shared/form/field.model';
-import { mergeMap } from 'rxjs/operators';
-import { LocalSettingsService } from '../services/local-settings.service';
-import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
-import { MatAutocompleteConfigHolder } from '../../shared/material/autocomplete/material.autocomplete.config';
-
-@Component({
-  selector: 'app-register-form',
-  templateUrl: 'register.form.html',
-  styleUrls: ['./register.form.scss'],
-})
-export class RegisterForm implements OnInit {
-  protected debug = false;
-
-  autocompleteHelper: MatAutocompleteConfigHolder;
-  additionalFields: FormFieldDefinition[];
-  form: UntypedFormGroup;
-  forms: UntypedFormGroup[];
-  subscriptions: Subscription[] = [];
-  error: string;
-  sending = false;
-
-  showPwd = false;
-  showConfirmPwd = false;
-
-  @ViewChild('stepper', { static: true }) private stepper: MatStepper;
-
-  @Output()
-  onCancel = new EventEmitter<any>();
-
-  @Output()
-  onSubmit = new EventEmitter<RegisterData>();
-
-  constructor(
-    private accountService: AccountService,
-    private accountValidatorService: AccountValidatorService,
-    public formBuilder: UntypedFormBuilder,
-    @Inject(ENVIRONMENT) protected environment: Environment,
-    protected settings?: LocalSettingsService
-  ) {
-    this.forms = [];
-    // Email form
-    this.forms.push(
-      formBuilder.group({
-        email: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.email]), this.emailAvailability(this.accountService)),
-        confirmEmail: new UntypedFormControl(null, Validators.compose([Validators.required, this.equalsValidator('email')])),
-      })
-    );
-
-    // Password form
-    this.forms.push(
-      formBuilder.group({
-        password: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(8)])),
-        confirmPassword: new UntypedFormControl(null, Validators.compose([Validators.required, this.equalsValidator('password')])),
-      })
-    );
-
-    // Detail form
-    const formDetailDef = {
-      lastName: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(2)])),
-      firstName: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(2)])),
-    };
-
-    // Prepare autocomplete settings
-    this.autocompleteHelper = new MatAutocompleteConfigHolder(
-      settings && {
-        getUserAttributes: (a, b) => settings.getFieldDisplayAttributes(a, b),
-      }
-    );
-
-    // Add additional fields to details form
-    this.additionalFields = this.accountService.additionalFields
-      // Keep only required fields
-      .filter((field) => field.extra && field.extra.registration && field.extra.registration.required);
-    this.additionalFields.forEach((field) => {
-      //if (this.debug) console.debug("[register-form] Add additional field {" + field.name + "} to form", field);
-      formDetailDef[field.key] = new UntypedFormControl(null, this.accountValidatorService.getValidators(field));
-
-      if (field.type === 'entity') {
-        field.autocomplete = this.autocompleteHelper.add(field.key, field.autocomplete);
-      }
-    });
-
-    this.forms.push(formBuilder.group(formDetailDef));
-
-    this.form = formBuilder.group({
-      emailStep: this.forms[0],
-      passwordStep: this.forms[1],
-      detailsStep: this.forms[2],
-    });
-  }
-
-  ngOnInit() {
-    // For DEV only ------------------------
-    if (!this.environment.production) {
-      this.form.setValue({
-        emailStep: {
-          email: 'contact@e-is.pro',
-          confirmEmail: 'contact@e-is.pro',
-        },
-        passwordStep: {
-          password: 'contactera',
-          confirmPassword: 'contactera',
-        },
-        detailsStep: {
-          lastName: 'Lavenier 2',
-          firstName: 'Benoit',
-          department: null,
-        },
-      });
-    }
-  }
-
-  get value(): RegisterData {
-    const result: RegisterData = {
-      username: this.form.value.emailStep.email,
-      password: this.form.value.passwordStep.password,
-      account: new Account(),
-    };
-    result.account.fromObject(this.form.value.detailsStep);
-    result.account.email = result.username;
-
-    return result;
-  }
-
-  get valid(): boolean {
-    return this.form.valid;
-  }
-
-  isEnd(): boolean {
-    return this.stepper.selectedIndex === 2;
-  }
-
-  isBeginning(): boolean {
-    return this.stepper.selectedIndex === 0;
-  }
-
-  slidePrev() {
-    return this.stepper.previous();
-  }
-
-  slideNext(event?: Event) {
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    return this.stepper.next();
-  }
-
-  equalsValidator(otherControlName: string): ValidatorFn {
-    return function (c: AbstractControl): ValidationErrors | null {
-      if (c.parent && c.value !== c.parent.value[otherControlName]) {
-        return {
-          equals: true,
-        };
-      }
-      return null;
-    };
-  }
-
-  emailAvailability(accountService: AccountService): AsyncValidatorFn {
-    return function (control: AbstractControl): Observable<ValidationErrors | null> {
-      return of(null).pipe(
-        delay(500),
-        mergeMap(() =>
-          accountService
-            .checkEmailAvailable(control.value)
-            .then((res) => null)
-            .catch((err) => {
-              console.error(err);
-              return { availability: true };
-            })
-        )
-      );
-    };
-  }
-
-  cancel() {
-    this.onCancel.emit();
-  }
-
-  doSubmit(event?: any) {
-    if (this.form.invalid) return;
-    this.sending = true;
-    this.onSubmit.emit(this.value);
-  }
-
-  referentialToString = referentialToString;
-
-  markAsTouched() {
-    this.form.markAsTouched();
-  }
-
-  disable() {
-    this.form.disable();
-  }
-
-  enable() {
-    this.form.enable();
-  }
-}

package/src/app/core/register/register.modal.html

@@ -1,66 +0,0 @@
-<ion-header>
-  <ion-toolbar color="secondary">
-    <ion-buttons slot="start">
-      <ion-button *ngIf="form.isBeginning()" (click)="cancel()" visible-xs visible-sm visible-mobile>
-        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
-      </ion-button>
-      <ion-button *ngIf="!form.isBeginning()" (click)="form.slidePrev()" visible-xs visible-sm visible-mobile>
-        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-
-    <ion-title translate>REGISTER.TITLE</ion-title>
-
-    <ion-buttons slot="end">
-      <ion-spinner *ngIf="sending"></ion-spinner>
-
-      <ion-button *ngIf="!form.isEnd()" (click)="form.slideNext()" visible-xs visible-sm visible-mobile>
-        <ion-label translate>COMMON.BTN_NEXT</ion-label>
-        <ion-icon slot="end" name="arrow-forward"></ion-icon>
-      </ion-button>
-
-      <ion-button *ngIf="form.isEnd() && !sending" (click)="doSubmit()" visible-xs visible-sm visible-mobile>
-        <ion-icon slot="icon-only" name="send"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <app-register-form #form (onSubmit)="doSubmit()" (onCancel)="cancel()"></app-register-form>
-</ion-content>
-
-<ion-footer hidden-xs hidden-sm hidden-mobile>
-  <!-- buttons -->
-  <ion-toolbar>
-    <ion-row>
-      <ion-col></ion-col>
-      <ion-col size="auto">
-        <ion-button *ngIf="form.isBeginning()" fill="clear" color="dark" (click)="cancel()">
-          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-        </ion-button>
-
-        <ion-button
-          *ngIf="!form.isBeginning()"
-          fill="clear"
-          color="dark"
-          (click)="form.slidePrev()"
-          [disabled]="sending"
-        >
-          <ion-icon slot="start" name="arrow-back"></ion-icon>
-          <ion-label translate>COMMON.BTN_BACK</ion-label>
-        </ion-button>
-
-        <ion-button *ngIf="!form.isEnd()" (click)="form.slideNext()" fill="solid" color="tertiary">
-          <ion-label translate>COMMON.BTN_NEXT</ion-label>
-          <ion-icon slot="end" name="arrow-forward"></ion-icon>
-        </ion-button>
-
-        <ion-button *ngIf="form.isEnd()" (click)="doSubmit()" fill="solid" [disabled]="sending" color="tertiary">
-          <span translate>COMMON.BTN_SEND</span>
-          <ion-icon slot="end" name="send"></ion-icon>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-toolbar>
-</ion-footer>

package/src/app/core/register/register.modal.ts

@@ -1,50 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { ModalController } from '@ionic/angular';
-import { AccountService } from '../services/account.service';
-import { RegisterForm } from './register.form';
-
-@Component({
-  selector: 'app-register-modal',
-  templateUrl: 'register.modal.html',
-})
-export class RegisterModal {
-  sending = false;
-
-  @ViewChild('form', { static: true }) private form: RegisterForm;
-
-  constructor(
-    private accountService: AccountService,
-    public viewCtrl: ModalController
-  ) {}
-
-  cancel() {
-    console.debug('[register] cancelled');
-    this.viewCtrl.dismiss();
-  }
-
-  async doSubmit(event?: any) {
-    if (this.form.form.disabled || this.sending) return; // Skip
-    if (!this.form.valid || !this.form.isEnd()) {
-      this.form.markAsTouched();
-      return;
-    }
-
-    this.sending = true;
-    const data = this.form.value;
-
-    this.form.disable();
-
-    try {
-      console.debug('[register] Sending registration to server...', data);
-      const res = await this.accountService.register(data);
-
-      console.debug('[register] Account registered!');
-      await this.viewCtrl.dismiss();
-    } catch (err) {
-      this.form.error = (err && err.message) || err;
-      this.form.enable();
-    } finally {
-      this.sending = false;
-    }
-  }
-}

package/src/app/core/register/register.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { RegisterConfirmPage } from './register-confirm.page';
-import { RegisterForm } from './register.form';
-import { RegisterModal } from './register.modal';
-import { SharedModule } from '../../shared/shared.module';
-import { TranslateModule } from '@ngx-translate/core';
-
-@NgModule({
-  imports: [SharedModule, RouterModule, TranslateModule.forChild()],
-
-  declarations: [RegisterForm, RegisterModal, RegisterConfirmPage],
-  exports: [TranslateModule, RegisterForm, RegisterModal, RegisterConfirmPage],
-})
-export class AppRegisterModule {}