@sumaris-net/ngx-components 18.11.0 → 18.12.0

package/src/app/core/account/token.table.ts

@@ -0,0 +1,160 @@
+import { ChangeDetectionStrategy, Component, Inject, Injector, Input, OnInit, Optional } from '@angular/core';
+import { ValidatorService } from '@e-is/ngx-material-table';
+import { UserTokenValidatorService } from '../services/validator/user-token.validator';
+import { TokenScope, UserToken } from '../services/model/token.model';
+import { AppInMemoryTable } from '../table/memory-table.class';
+import { RESERVED_END_COLUMNS, RESERVED_START_COLUMNS } from '../table/table.model';
+import { InMemoryEntitiesService } from '../../shared/services/memory-entity-service.class';
+import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
+import { APP_USER_TOKEN_SCOPES } from '../services/account.service';
+import { INewTokenOptions, NewTokenModal } from './new-token.modal';
+import { ConfigService } from '../services/config.service';
+import { Configuration } from '../services/model/config.model';
+import { CORE_CONFIG_OPTIONS } from '../services/config/core.config';
+import { isNotEmptyArray, isNotNilOrBlank } from '../../shared/functions';
+
+@Component({
+  selector: 'app-user-token-table',
+  templateUrl: 'token.table.html',
+  styleUrls: ['token.table.scss'],
+  providers: [{ provide: ValidatorService, useClass: UserTokenValidatorService }],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserTokenTable extends AppInMemoryTable<UserToken> implements OnInit {
+  @Input() useSticky = false;
+
+  protected showScopes = false;
+  protected defaultScope: string;
+  protected tokenScopes: TokenScope[];
+
+  constructor(
+    injector: Injector,
+    validatorService: ValidatorService,
+    protected configService: ConfigService,
+    @Inject(ENVIRONMENT) environment: Environment,
+    @Optional() @Inject(APP_USER_TOKEN_SCOPES) tokenScopes: TokenScope[]
+  ) {
+    super(
+      injector,
+      [...RESERVED_START_COLUMNS, 'name', 'scopes', 'lastUsedDate', 'expirationDate', 'creationDate', ...RESERVED_END_COLUMNS],
+      UserToken,
+      new InMemoryEntitiesService(UserToken, undefined, {
+        filterFnFactory: () => () => true,
+        equals: UserToken.equals,
+      }),
+      validatorService
+    );
+
+    this.tokenScopes = tokenScopes ?? [];
+    this.inlineEdition = false;
+    this.allowRowDetail = false;
+    this.defaultSortBy = 'creationDate';
+    this.defaultSortDirection = 'asc';
+    this.i18nColumnPrefix = 'ACCOUNT.TOKENS.TABLE.';
+    this.debug = !environment?.production;
+
+    if (!tokenScopes) {
+      console.warn('No TokenScopes provided. Please provide the token APP_USER_TOKEN_SCOPES with valid TokenScope array');
+    }
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.registerSubscription(this.configService.config.subscribe((config) => this.onConfigLoaded(config)));
+
+    this.markAsReady();
+  }
+
+  get value(): UserToken[] {
+    return super.value || [];
+  }
+
+  set value(data: UserToken[]) {
+    super.value = data;
+  }
+
+  setValue(value: UserToken[], opts?: { emitEvent?: boolean }) {
+    // Set scopes from flags
+    value?.forEach((userToken) => {
+      const scopes: TokenScope[] = [];
+      if (userToken.flags) {
+        this.tokenScopes.forEach((scope) => {
+          // eslint-disable-next-line no-bitwise
+          if (userToken.flags & scope.flag) {
+            scopes.push(scope);
+          }
+        });
+      }
+      userToken.scopes = scopes;
+    });
+
+    super.setValue(value, opts);
+  }
+
+  async addToken(event: UIEvent) {
+    if (event?.defaultPrevented) return; // Avoid multiple call
+
+    event?.preventDefault();
+    event?.stopPropagation();
+    const newToken = new UserToken();
+    if (isNotNilOrBlank(this.defaultScope) && isNotEmptyArray(this.tokenScopes)) {
+      const scope = this.tokenScopes.find((scope) => scope.id === this.defaultScope);
+      if (!scope) {
+        console.warn("[token-table] Cannot found the default scope '${this.defaultScope}' in values of APP_USER_TOKEN_SCOPES!");
+      }
+      newToken.scopes = scope ? [scope] : [];
+    }
+
+    const modal = await this.modalCtrl.create({
+      component: NewTokenModal,
+      componentProps: <INewTokenOptions>{
+        mobile: this.mobile,
+        isNew: true,
+        data: newToken,
+        showScopes: this.showScopes,
+        tokenScopes: this.tokenScopes || [],
+        existingNames: this.value?.map((v) => v.name),
+      },
+      backdropDismiss: false,
+    });
+
+    await modal.present();
+    const { data } = await modal.onDidDismiss();
+
+    if (data?.name) {
+      // Add this token in the list
+      const row = await this.addRowToTable(undefined, { editing: false });
+      row.validator.patchValue(data);
+
+      this.markAsDirty({ emitEvent: false });
+      this.markForCheck();
+    }
+  }
+
+  // async revocate(event: UIEvent) {
+  //   if (this.selection.isEmpty()) return;
+  //
+  //   const confirmed = await Alerts.askConfirmation(this.i18nColumnPrefix + 'CONFIRM.REVOCATE', this.alertCtrl, this.translate);
+  //   if (!confirmed) return;
+  //
+  //   const now = moment();
+  //   this.selection.selected.forEach(row => {
+  //     row.validator.patchValue({revocationDate: now}, {emitEvent:true});
+  //     // row.validator.updateValueAndValidity();
+  //   });
+  //
+  //   this.markForCheck();
+  //   // this.markAsDirty();
+  // }
+
+  display(scopes: TokenScope[]) {
+    return scopes?.map((value) => this.translate.instant(value.name)).join(', ');
+  }
+
+  protected onConfigLoaded(config: Configuration) {
+    this.showScopes = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.AUTH_API_TOKEN_SCOPE_ENABLED);
+    this.setShowColumn('scopes', this.showScopes);
+    this.defaultScope = config.getProperty(CORE_CONFIG_OPTIONS.DEFAULT_AUTH_API_TOKEN_SCOPE);
+  }
+}

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

@@ -0,0 +1,108 @@
+<form
+  [formGroup]="form"
+  novalidate
+  (ngSubmit)="doSubmit($event)"
+  class="form-container ion-padding"
+  (keyup.enter)="doSubmit($event)"
+>
+  <!-- error -->
+  <ion-item lines="none" *ngIf="error && !loading" @slideUpDownAnimation>
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
+  </ion-item>
+
+  <!-- Username -->
+  <mat-form-field>
+    <mat-label>{{ usernamePlaceholder | translate }}</mat-label>
+    <input
+      matInput
+      [appAutofocus]="true"
+      [autofocusDelay]="500"
+      formControlName="username"
+      autocomplete="off"
+      required
+    />
+    <mat-error *ngIf="form.controls.username.hasError('required') && form.controls.username.dirty">
+      {{ 'ERROR.FIELD_REQUIRED' | translate }}
+    </mat-error>
+    <mat-error *ngIf="form.controls.username.hasError('email') && form.controls.username.dirty">
+      <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>
+    </mat-error>
+  </mat-form-field>
+
+  <!-- Password -->
+  <mat-form-field>
+    <mat-label>{{ 'USER.PASSWORD' | translate }}</mat-label>
+    <input
+      matInput
+      formControlName="password"
+      autocomplete="section-red new-password"
+      [type]="showPwd ? 'text' : 'password'"
+      (keyup.enter)="doSubmit($event)"
+      required
+    />
+
+    <!-- Show pwd button -->
+    <button matSuffix type="button" mat-icon-button (click)="showPwd = !showPwd" tabindex="-1">
+      <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>
+    </button>
+    <mat-error *ngIf="form.controls.password.hasError('required') && form.controls.password.touched">
+      {{ 'ERROR.FIELD_REQUIRED' | translate }}
+    </mat-error>
+  </mat-form-field>
+
+  <ng-container *ngIf="canWorkOffline">
+    <!-- Force offline (desktop) -->
+    <mat-form-field hidden-xs hidden-sm hidden-mobile [color]="'medium' | matColor">
+      <input matInput hidden formControlName="offline" type="text" />
+
+      <!-- check box  -->
+      <mat-checkbox
+        [disabled]="network.offline"
+        (change)="form.controls.offline.setValue($event.checked)"
+        [checked]="form.controls.offline.value"
+      >
+        <ion-text color="medium">{{ 'AUTH.OFFLINE_MODE' | translate }}</ion-text>
+      </mat-checkbox>
+    </mat-form-field>
+
+    <!-- Force offline (mobile) -->
+    <mat-form-field visible-xs visible-sm visible-mobile [color]="'medium' | matColor">
+      <input matInput hidden formControlName="offline" type="text" />
+      <!-- slide toggle  -->
+      <ion-text color="medium">{{ 'AUTH.OFFLINE_MODE' | translate }}</ion-text>
+      <mat-slide-toggle
+        matSuffix
+        [disabled]="network.offline"
+        (change)="form.controls.offline.setValue($event.checked)"
+        [checked]="form.controls.offline.value"
+      ></mat-slide-toggle>
+    </mat-form-field>
+  </ng-container>
+
+  <!-- Not register yet ? -->
+  @if (canRegister) {
+    <ion-text class="ion-text-center">
+      <p>
+        <span>{{ 'AUTH.NO_ACCOUNT_QUESTION' | translate }}</span>
+        <br />
+        <a href="#" (click)="register()">
+          <span>{{ 'AUTH.BTN_REGISTER' | translate }}</span>
+        </a>
+      </p>
+    </ion-text>
+  }
+
+  <!-- Reset password -->
+  @if (canResetPassword) {
+    <ion-text class="ion-text-center">
+      <p>
+        <span>{{ 'AUTH.RESET_PASSWORD_QUESTION' | translate }}</span>
+        <br />
+        <a href="#" (click)="resetPassword()">
+          <span>{{ 'AUTH.BTN_RESET_PASSWORD' | translate }}</span>
+        </a>
+      </p>
+    </ion-text>
+  }
+</form>

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

@@ -0,0 +1,165 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Injector, OnInit, Optional, Output } from '@angular/core';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { ModalController } from '@ionic/angular';
+import { RegisterModal } from '../register/register.modal';
+import { AuthData } from '../services/account.service';
+import { NetworkService } from '../services/network.service';
+import { AuthTokenType } from '../services/network.types';
+import { LocalSettingsService } from '../services/local-settings.service';
+import { slideUpDownAnimation } from '../../shared/material/material.animations';
+import { AppForm } from '../form/form.class';
+import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
+import { CORE_CONFIG_OPTIONS } from '../services/config/core.config';
+import { ConfigService } from '../services/config.service';
+import { AppFormUtils } from '../form/form.utils';
+import { AppResetPasswordModal } from './reset-password.modal';
+
+@Component({
+  selector: 'app-auth-form',
+  templateUrl: 'auth.form.html',
+  styleUrls: ['./auth.form.scss'],
+  animations: [slideUpDownAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppAuthForm extends AppForm<AuthData> implements OnInit {
+  protected readonly mobile: boolean;
+  protected canWorkOffline = false;
+  protected showPwd = false;
+  protected canRegister: boolean;
+  protected canResetPassword: boolean;
+  protected usernamePlaceholder: string;
+
+  @Output() onCancel = new EventEmitter<any>();
+  @Output() onSubmit = new EventEmitter<AuthData>();
+
+  disable(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    super.disable(opts);
+    this.showPwd = false; // Hide pwd when disable (e.g. when submitted)
+  }
+
+  constructor(
+    injector: Injector,
+    formBuilder: UntypedFormBuilder,
+    settings: LocalSettingsService,
+    private configService: ConfigService,
+    private modalCtrl: ModalController,
+    public network: NetworkService,
+    private cd: ChangeDetectorRef,
+    @Optional() @Inject(ENVIRONMENT) protected environment: Environment
+  ) {
+    super(
+      injector,
+      formBuilder.group({
+        username: [null, Validators.required],
+        password: [null, Validators.required],
+        offline: [network.offline],
+      })
+    );
+
+    this.mobile = settings.mobile;
+    this.canWorkOffline = this.settings.hasOfflineFeature();
+    this._enabled = true;
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Load config, to set username's label and validator
+    this.registerSubscription(
+      this.configService.config.subscribe((config) => {
+        // Set the username placeholder, with email or username
+        const tokenType = config.getProperty(CORE_CONFIG_OPTIONS.AUTH_TOKEN_TYPE) as AuthTokenType;
+        if (tokenType === 'token') {
+          this.usernamePlaceholder = 'USER.EMAIL';
+          this.form.get('username').setValidators(Validators.compose([Validators.required, Validators.email]));
+        } else {
+          this.usernamePlaceholder = 'USER.USERNAME';
+          this.form.get('username').setValidators(Validators.required);
+        }
+
+        // Enable/disable registration link
+        this.canRegister = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
+
+        // Enable/Disable reset password link
+        this.canResetPassword = tokenType == 'token' && config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.AUTH_RESET_PASSWORD_ENABLE);
+
+        this.markForCheck();
+      })
+    );
+
+    // For DEV only
+    if (this.environment && this.environment.production === false && this.environment.defaultAuthValues) {
+      // Set the default user, for testing.
+      // Override using environment, if any
+      this.form.patchValue(this.environment.defaultAuthValues);
+    }
+  }
+
+  async cancel() {
+    this.onCancel.emit();
+  }
+
+  async doSubmit(event?: Event) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (this.loading) return;
+
+    if (!this.form.valid) {
+      await AppFormUtils.waitWhilePending(this.form);
+      if (this.form.invalid) {
+        AppFormUtils.logFormErrors(this.form);
+        return; // Skip if invalid
+      }
+    }
+
+    this.markAsLoading();
+    const data = this.form.value;
+    this.showPwd = false; // Hide password
+    this.error = null; // Reset error
+
+    setTimeout(() =>
+      this.onSubmit.emit({
+        username: data.username,
+        password: data.password,
+        offline: data.offline,
+      })
+    );
+  }
+
+  register() {
+    this.onCancel.emit();
+    setTimeout(async () => {
+      const modal = await this.modalCtrl.create({
+        component: RegisterModal,
+        backdropDismiss: false,
+      });
+      return modal.present();
+    }, 200);
+  }
+
+  resetPassword() {
+    this.onCancel.emit();
+    const data = this.form.value;
+
+    setTimeout(async () => {
+      const modal = await this.modalCtrl.create({
+        component: AppResetPasswordModal,
+        componentProps: {
+          username: data.username || null,
+          usernamePlaceholder: this.usernamePlaceholder,
+        },
+        backdropDismiss: false,
+      });
+      return modal.present();
+    }, 200);
+  }
+
+  /* -- protected functions -- */
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}

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

@@ -0,0 +1,50 @@
+<ion-header>
+  <ion-toolbar color="accent">
+    <ion-buttons slot="start">
+      <ion-button (click)="cancel()" visible-xs visible-sm visible-mobile>
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title>
+      {{ 'AUTH.TITLE' | translate }}
+    </ion-title>
+
+    <ion-buttons slot="end">
+      <ion-spinner *ngIf="loading"></ion-spinner>
+
+      <ion-button (click)="doSubmit()" *ngIf="!loading" visible-xs visible-sm visible-mobile>
+        <ion-icon slot="icon-only" name="checkmark"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <app-auth-form #form (onSubmit)="doSubmit()" (onCancel)="cancel()"></app-auth-form>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <ion-toolbar>
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col></ion-col>
+
+      <!-- buttons -->
+      <ion-col size="auto">
+        <ion-button fill="clear" color="dark" (click)="cancel()">
+          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+        </ion-button>
+
+        <ion-button
+          [fill]="form.invalid ? 'clear' : 'solid'"
+          [disabled]="loading || form.invalid"
+          (click)="doSubmit()"
+          (keyup.enter)="doSubmit()"
+          color="tertiary"
+        >
+          <ion-label translate>AUTH.BTN_LOGIN</ion-label>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

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

@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { AccountService } from '../services/account.service';
+import { firstNotNilPromise } from '../../shared/observables';
+import { AppAuthForm } from './auth.form';
+
+@Component({
+  templateUrl: 'auth.modal.html',
+  styleUrls: ['./auth.modal.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppAuthModal implements OnInit {
+  get loading() {
+    return this.form?.loading;
+  }
+
+  @ViewChild('form', { static: true }) private form: AppAuthForm;
+
+  constructor(
+    private accountService: AccountService,
+    private viewCtrl: ModalController,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    this.form.markAsReady({ emitEvent: false });
+    this.form.markAsLoaded();
+  }
+
+  cancel() {
+    this.viewCtrl.dismiss();
+  }
+
+  async doSubmit(): Promise<any> {
+    if (this.form.disabled) return;
+    if (!this.form.valid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+    this.markAsLoading();
+
+    try {
+      const data = this.form.value;
+
+      // Disable the form
+      this.form.disable();
+
+      const account = await this.accountService.login(data);
+      return this.viewCtrl.dismiss(account);
+    } catch (err) {
+      this.form.error = (err && err.message) || err;
+      this.markAsLoaded();
+
+      // Enable the form
+      this.form.enable();
+
+      // Reset form error on next changes
+      firstNotNilPromise(this.form.form.valueChanges).then(() => {
+        this.form.error = null;
+        this.markForCheck();
+      });
+
+      return;
+    }
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+  protected markAsLoading(opts?: { emitEvent?: boolean }) {
+    this.form.markAsLoading(opts);
+  }
+
+  protected markAsLoaded(opts?: { emitEvent?: boolean }) {
+    this.form.markAsLoaded(opts);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { AppAuthForm } from './auth.form';
+import { AppAuthModal } from './auth.modal';
+import { SharedModule } from '../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppRegisterModule } from '../register/register.module';
+import { AppResetPasswordModal } from './reset-password.modal';
+import { AppUsernameFormModule } from '../form/username/username.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    TranslateModule.forChild(),
+
+    // App modules
+    AppRegisterModule,
+    AppUsernameFormModule,
+  ],
+
+  declarations: [
+    // Components
+    AppAuthForm,
+    AppAuthModal,
+    AppResetPasswordModal,
+  ],
+  exports: [
+    TranslateModule,
+
+    // Components
+    AppAuthForm,
+    AppAuthModal,
+    AppResetPasswordModal,
+  ],
+})
+export class AppAuthModule {}

package/src/app/core/auth/reset-password.modal.html

@@ -0,0 +1,59 @@
+<ion-header>
+  <ion-toolbar color="secondary">
+    <ion-buttons slot="start">
+      <ion-button (click)="cancel()" class="visible-xs visible-sm visible-mobile">
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title>{{ 'AUTH.RESET_PASSWORD.TITLE' | translate }}</ion-title>
+
+    <ion-buttons slot="end">
+      @if (sending) {
+        <ion-spinner></ion-spinner>
+      } @else {
+        <ion-button (click)="doSubmit()" class="visible-xs visible-sm visible-mobile">
+          <ion-icon slot="icon-only" name="checkmark"></ion-icon>
+        </ion-button>
+      }
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <!-- error -->
+  <ion-item *ngIf="form.errorSubject | async; let error" lines="none" @slideUpDownAnimation>
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
+  </ion-item>
+
+  <ion-text>
+    <p [innerHTML]="'AUTH.RESET_PASSWORD.HELP' | translate"></p>
+  </ion-text>
+
+  <app-username-form
+    #form
+    [usernamePlaceHolder]="usernamePlaceholder"
+    [emailValidator]="emailValidator"
+    (onSubmit)="doSubmit()"
+    (onCancel)="cancel()"
+  ></app-username-form>
+</ion-content>
+
+<ion-footer class="hidden-xs hidden-sm hidden-mobile">
+  <!-- buttons -->
+  <ion-toolbar>
+    <ion-row>
+      <ion-col>
+        <ion-button fill="clear" color="dark" (click)="cancel()">
+          <ion-label>{{ 'COMMON.BTN_CANCEL' | translate }}</ion-label>
+        </ion-button>
+      </ion-col>
+      <ion-col size="auto">
+        <ion-button (click)="doSubmit()" fill="solid" [disabled]="sending" color="tertiary">
+          <span translate>AUTH.RESET_PASSWORD.BTN_SEND</span>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>