@sumaris-net/ngx-components 18.12.0 → 18.12.1

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

@@ -1,160 +0,0 @@
-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

@@ -1,108 +0,0 @@
-<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

@@ -1,165 +0,0 @@
-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

@@ -1,50 +0,0 @@
-<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

@@ -1,78 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,59 +0,0 @@
-<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>