@sumaris-net/ngx-components 18.12.0 → 18.12.1

package/src/app/core/account/password/change-password.form.html

@@ -1,62 +0,0 @@
-<form [formGroup]="form" class="form-container">
-  <!-- Username -->
-  @let formControl = form | formGetControl: 'username';
-  <mat-form-field>
-    <mat-label>{{ usernamePlaceholder | translate }}</mat-label>
-    <input matInput formControlName="username" readonly />
-
-    <!-- error -->
-    <mat-error *ngIf="formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey">
-      @switch (errorKey) {
-        @case ('required') {
-          <span translate>ERROR.FIELD_REQUIRED</span>
-        }
-        @case ('email') {
-          <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>
-        }
-      }
-    </mat-error>
-  </mat-form-field>
-
-  <!-- Password -->
-  <mat-form-field>
-    <mat-label>{{ 'REGISTER.STEP_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="form.controls.password.hasError('required') && form.controls.password.touched">
-      {{ 'ERROR.FIELD_REQUIRED' | translate }}
-    </mat-error>
-    <mat-error *ngIf="form.controls.password.hasError('minlength') && form.controls.password.touched">
-      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: form.controls.password.errors.minlength }}</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="form.controls.confirmPassword.hasError('required') && form.controls.confirmPassword.touched">
-      {{ 'ERROR.FIELD_REQUIRED' | translate }}
-    </mat-error>
-    <mat-error *ngIf="form.controls.confirmPassword.hasError('equals') && form.controls.confirmPassword.touched">
-      <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>
-    </mat-error>
-  </mat-form-field>
-</form>

package/src/app/core/account/password/change-password.form.ts

@@ -1,58 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
-import { AppForm } from '../../form/form.class';
-import { SharedValidators } from '../../../shared/validator/validators';
-import { AuthData } from '../../services/account.service';
-
-@Component({
-  selector: 'app-change-password-form',
-  templateUrl: 'change-password.form.html',
-  styleUrls: ['./change-password.form.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChangePasswordForm extends AppForm<AuthData> implements OnInit {
-  protected showPwd = false;
-  protected showConfirmPwd = false;
-
-  @Input() usernamePlaceholder: string;
-  @Input() emailValidator = false;
-
-  @Input() set username(value: string) {
-    this.form.get('username').setValue(value);
-  }
-
-  get username(): string {
-    return this.form.get('username').value;
-  }
-
-  constructor(
-    injector: Injector,
-    formBuilder: UntypedFormBuilder,
-    private cd: ChangeDetectorRef
-  ) {
-    super(
-      injector,
-      formBuilder.group({
-        username: new UntypedFormControl(null, Validators.required),
-        password: new UntypedFormControl(null, Validators.compose([Validators.required, Validators.minLength(8)])),
-        confirmPassword: new UntypedFormControl(null, Validators.compose([Validators.required, SharedValidators.equals('password')])),
-      })
-    );
-  }
-
-  ngOnInit() {
-    super.ngOnInit();
-
-    // Add/remove email validator
-    const usernNameControl = this.form.get('username');
-    if (this.emailValidator && !usernNameControl.hasValidator(Validators.email)) {
-      usernNameControl.addValidators(Validators.email);
-    } else if (!this.emailValidator && usernNameControl.hasValidator(Validators.email)) {
-      usernNameControl.removeValidators(Validators.email);
-    }
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-}

package/src/app/core/account/password/change-password.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '../../../shared/shared.module';
-import { TranslateModule } from '@ngx-translate/core';
-import { ChangePasswordForm } from './change-password.form';
-import { AppChangePasswordPage } from './change-password.page';
-
-@NgModule({
-  imports: [SharedModule, RouterModule, TranslateModule.forChild()],
-
-  declarations: [ChangePasswordForm, AppChangePasswordPage],
-  exports: [TranslateModule, ChangePasswordForm, AppChangePasswordPage],
-})
-export class AppChangePasswordModule {}

package/src/app/core/account/password/change-password.page.html

@@ -1,41 +0,0 @@
-<app-toolbar
-  [title]="'AUTH.RESET_PASSWORD.TITLE' | translate"
-  color="primary"
-  [canGoBack]="isLogin"
-  defaultBackHref="/account"
-></app-toolbar>
-<ion-content class="bg-image-cover center ion-padding" [ngStyle]="contentStyle">
-  <ion-card class="ion-margin-top">
-    <ion-card-content>
-      <!-- error -->
-      <ion-item
-        *ngIf="form.errorSubject | async; let error"
-        color="light"
-        lines="none"
-        class="ion-margin-bottom"
-        @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>
-
-      <app-change-password-form
-        #form
-        [usernamePlaceholder]="usernamePlaceholder"
-        [emailValidator]="emailValidator"
-        (onSubmit)="doSubmit()"
-        [debug]="debug"
-      ></app-change-password-form>
-    </ion-card-content>
-
-    @if (loadingSubject | push) {
-      <ion-spinner></ion-spinner>
-    } @else {
-      <ion-footer>
-        <ion-button expand="full" color="tertiary" (click)="doSubmit()" [disabled]="sending">
-          <ion-label>{{ 'COMMON.BTN_VALIDATE' | translate }}</ion-label>
-        </ion-button>
-      </ion-footer>
-    }
-  </ion-card>
-</ion-content>

package/src/app/core/account/password/change-password.page.scss

@@ -1,49 +0,0 @@
-@import 'ionic.globals';
-
-.center {
-  text-align: center;
-  display: inline-block;
-}
-
-ion-content {
-  @extend .center;
-
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-  display: inline-block;
-  padding: 15px;
-}
-
-ion-card {
-  @extend .center;
-  padding: var(--ion-padding);
-  background-color: var(--ion-card-background-color);
-  min-width: 480px;
-  max-width: 500px;
-  z-index: 9;
-
-  button {
-    margin-top: 16px;
-  }
-
-}
-
-ion-text {
-  @extend .center;
-}
-
-// Extra small device: Phones (<575px)
-@media screen and (max-width: $screen-xs-max) {
-  ion-content {
-    ion-card {
-      min-width: 160px;
-      width: auto;
-
-      ion-footer ion-button {
-        margin-top: 8px;
-      }
-    }
-  }
-}

package/src/app/core/account/password/change-password.page.ts

@@ -1,158 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { AccountService, AuthData } from '../../services/account.service';
-import { ChangePasswordForm } from './change-password.form';
-import { ActivatedRoute } from '@angular/router';
-import { getRandomImageWithCredit } from '../../home/home';
-import { ConfigService } from '../../services/config.service';
-import { NavController, ToastController } from '@ionic/angular';
-import { Configuration } from '../../services/model/config.model';
-import { isNotEmptyArray, isNotNilOrBlank, nullIfNilOrBlank } from '../../../shared/functions';
-import { CORE_CONFIG_OPTIONS } from '../../services/config/core.config';
-import { AppFormContainer } from '../../form/form-container.class';
-import { environment } from '../../../../environments/environment';
-import { AuthTokenType } from '../../services/network.types';
-import { ShowToastOptions, Toasts } from '../../../shared/toast/toasts';
-import { TranslateService } from '@ngx-translate/core';
-import { slideUpDownAnimation } from '../../../shared/material/material.animations';
-import { filter } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-change-password-page',
-  templateUrl: './change-password.page.html',
-  styleUrls: ['./change-password.page.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [slideUpDownAnimation],
-})
-export class AppChangePasswordPage extends AppFormContainer implements OnInit, OnDestroy {
-  protected token: string;
-  protected username: string;
-  protected contentStyle = {};
-  protected sending = false;
-  protected isLogin = false;
-
-  protected usernamePlaceholder: string;
-  protected emailValidator = false;
-
-  @ViewChild('form', { static: true }) private form: ChangePasswordForm;
-
-  constructor(
-    protected configService: ConfigService,
-    protected accountService: AccountService,
-    protected toastController: ToastController,
-    protected translate: TranslateService,
-    protected navController: NavController,
-    protected activatedRoute: ActivatedRoute,
-    protected cd: ChangeDetectorRef
-  ) {
-    super();
-    this.debug = !environment.production;
-
-    // Get username  + token (from the route)
-    this.username =
-      nullIfNilOrBlank(this.activatedRoute.snapshot.params['email']) || nullIfNilOrBlank(this.activatedRoute.snapshot.params['username']);
-    if (isNotNilOrBlank(this.username)) {
-      this.token =
-        nullIfNilOrBlank(this.activatedRoute.snapshot.params['token']) || nullIfNilOrBlank(this.activatedRoute.snapshot.queryParams['token']);
-    }
-    console.debug(`[password] username: ${this.username}, token: ${this.token}`);
-  }
-
-  async ngOnInit() {
-    super.ngOnInit();
-
-    // Wait account service to be ready
-    await this.accountService.ready();
-
-    this.isLogin = this.accountService.isLogin();
-    if (this.isLogin) {
-      this.username = this.username || this.accountService.account.email;
-      this.markForCheck();
-    }
-    this.form.username = this.username;
-
-    this.addForms([this.form]);
-
-    this.registerSubscription(this.configService.config.subscribe((config) => this.onConfigReady(config)));
-
-    // Reset error when form changes
-    this.registerSubscription(this.form.form.valueChanges.pipe(filter(() => !this.sending)).subscribe(() => (this.form.error = null)));
-  }
-
-  ngOnDestroy() {
-    super.ngOnDestroy();
-  }
-
-  async onConfigReady(config: Configuration) {
-    console.debug('[password] Config loaded', config);
-    if (isNotEmptyArray(config?.backgroundImages)) {
-      const { image } = getRandomImageWithCredit(config.backgroundImages);
-      this.contentStyle = { '--ion-background-color': 'transparent', 'background-image': `url(${image})` };
-    } else {
-      const primaryColor = config.getProperty(CORE_CONFIG_OPTIONS.COLOR_PRIMARY) || 'var(--ion-color-primary)';
-      this.contentStyle = { '--ion-background-color': primaryColor + ' !important' };
-    }
-
-    const tokenType = config.getProperty(CORE_CONFIG_OPTIONS.AUTH_TOKEN_TYPE) as AuthTokenType;
-    if (tokenType === 'token') {
-      this.usernamePlaceholder = 'USER.EMAIL';
-      this.emailValidator = true;
-    } else {
-      this.usernamePlaceholder = 'USER.USERNAME';
-      this.emailValidator = false;
-    }
-
-    this.markAsLoaded();
-    this.enable();
-  }
-
-  async doSubmit(event?: Event) {
-    if (event?.defaultPrevented) return;
-
-    if (this.form.disabled || this.sending) return; // Skip
-
-    this.sending = true;
-    const { username, password } = this.form.value;
-
-    this.form.error = null;
-    this.form.disable();
-
-    try {
-      const authData: AuthData = { username, password };
-
-      // Token exists : send confirmation
-      if (isNotNilOrBlank(this.token)) {
-        // Update pubkey, using the token
-        const done = await this.accountService.resetPubkey(authData, this.token);
-        if (done) {
-          await this.navController.navigateRoot('/');
-
-          await this.showToast({ message: 'AUTH.CONFIRM.PASSWORD_CHANGED', type: 'info' });
-        }
-      } else {
-        // Update pubkey on the current account
-        const done = await this.accountService.updatePubkey(authData);
-
-        if (done) {
-          await this.navController.navigateRoot('/account');
-
-          await this.showToast({ message: 'AUTH.CONFIRM.PASSWORD_CHANGED', type: 'info' });
-        }
-      }
-    } catch (err) {
-      console.error('[password] Error while changing password', err);
-      this.form.error = (err && err.message) || err;
-      this.form.enable();
-    } finally {
-      this.sending = false;
-      this.markForCheck();
-    }
-  }
-
-  protected async showToast(opts: ShowToastOptions) {
-    await Toasts.show(this.toastController, this.translate, opts);
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-}

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

@@ -1,160 +0,0 @@
-<mat-toolbar>
-  <!-- Refresh -->
-  <button mat-icon-button *ngIf="!mobile" [title]="'COMMON.BTN_REFRESH' | translate" (click)="emitRefresh()">
-    <mat-icon>refresh</mat-icon>
-  </button>
-
-  <ion-item *ngIf="!mobile && error; let error" lines="none">
-    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-    <ion-label color="danger" [innerHTML]="error | translate"></ion-label>
-  </ion-item>
-
-  <div class="toolbar-spacer"></div>
-
-  @if (selection | isEmptySelection) {
-    <button
-      mat-icon-button
-      *ngIf="canEdit && !mobile"
-      [title]="'COMMON.BTN_ADD' | translate"
-      (click)="addToken($event)"
-    >
-      <mat-icon>add</mat-icon>
-    </button>
-  } @else {
-    <button mat-icon-button [title]="'COMMON.BTN_DELETE' | translate" (click)="deleteSelection($event)">
-      <mat-icon>delete_outline</mat-icon>
-    </button>
-  }
-</mat-toolbar>
-
-<ion-content class="ion-no-padding">
-  <ion-refresher slot="fixed" *ngIf="mobile" (ionRefresh)="doRefresh($event)">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-
-  <!-- table -->
-  <div class="table-container">
-    <table
-      #table
-      mat-table
-      matSort
-      matSortDisableClear
-      [dataSource]="dataSource"
-      [matSortActive]="defaultSortBy"
-      [matSortDirection]="defaultSortDirection"
-      [trackBy]="trackByFn"
-    >
-      <ng-container matColumnDef="select" [sticky]="useSticky">
-        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="!canEdit">
-          <mat-checkbox
-            (change)="$event ? masterToggle() : null"
-            [checked]="this | isAllSelected"
-            [indeterminate]="this | isNotAllSelected"
-          ></mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let row" [class.cdk-visually-hidden]="!canEdit">
-          <mat-checkbox
-            (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null"
-            [checked]="selection | isSelected: row"
-          ></mat-checkbox>
-        </td>
-      </ng-container>
-
-      <!-- Id Column -->
-      <ng-container matColumnDef="id" [sticky]="useSticky">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header class="cdk-visually-hidden">
-          <ion-label>#</ion-label>
-        </th>
-        <td mat-cell *matCellDef="let row" class="cdk-visually-hidden">{{ row.currentData.id }}</td>
-      </ng-container>
-
-      <!-- name column -->
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <ion-label>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>
-        </th>
-        <td mat-cell *matCellDef="let row">
-          {{ (row.currentData | propertyGet: 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="scopes">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>
-        </th>
-        <td mat-cell *matCellDef="let row">
-          {{ display(row.currentData | propertyGet: 'scopes') }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="creationDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-cell-date-time">
-          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>
-        </th>
-        <td mat-cell *matCellDef="let row" class="mat-cell-date-time">
-          {{ row.currentData | propertyGet: 'creationDate' | dateFormat: { time: true } }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="expirationDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-cell-date-time">
-          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>
-        </th>
-        <td mat-cell *matCellDef="let row" class="mat-cell-date-time">
-          {{ row.currentData | propertyGet: 'expirationDate' | dateFormat: { time: true } }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="lastUsedDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-cell-date-time">
-          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>
-        </th>
-        <td mat-cell *matCellDef="let row" class="mat-cell-date-time">
-          {{ row.currentData | propertyGet: 'lastUsedDate' | dateFormat: { time: true } }}
-        </td>
-      </ng-container>
-
-      <!-- Actions buttons column -->
-      <app-actions-column
-        [stickyEnd]="useSticky"
-        (optionsClick)="openSelectColumnsModal($event)"
-        (cancelOrDeleteClick)="cancelOrDelete($event.event, $event.row)"
-        (confirmAndAddClick)="confirmAndAdd($event.event, $event.row)"
-        (backward)="confirmAndBackward($event.event, $event.row)"
-        (forward)="confirmAndForward($event.event, $event.row)"
-        [canCancel]="false"
-      ></app-actions-column>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr
-        mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        [class.mat-row-selected]="row.editing"
-        [class.mat-row-error]="row.validator?.invalid"
-        [class.mat-row-dirty]="row.validator?.dirty"
-        (click)="clickRow($event, row)"
-        (keydown.escape)="escapeEditingRow($event)"
-        [cdkTrapFocus]="row.validator?.invalid"
-      ></tr>
-    </table>
-
-    <ng-container *ngIf="loadingSubject | async; else noResult">
-      <ion-item>
-        <ion-skeleton-text animated></ion-skeleton-text>
-      </ion-item>
-    </ng-container>
-
-    <ng-template #noResult>
-      <ion-item *ngIf="totalRowCount === 0">
-        <ion-text color="danger" class="text-italic" translate>COMMON.NO_RESULT</ion-text>
-      </ion-item>
-    </ng-template>
-  </div>
-</ion-content>
-
-<ion-fab slot="fixed" vertical="bottom" horizontal="end" *ngIf="mobile">
-  <ion-fab-button color="tertiary" (click)="addToken($event)">
-    <ion-icon name="add"></ion-icon>
-  </ion-fab-button>
-</ion-fab>

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

@@ -1,7 +0,0 @@
-.mat-cell-date-time {
-  width: 180px;
-}
-
-.mat-column-id {
-  width: 90px;
-}