@sumaris-net/ngx-components 18.10.29 → 18.12.0

package/src/app/core/account/account.page.ts

@@ -0,0 +1,389 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Inject, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { combineLatest, Subscription } from 'rxjs';
+import { AccountService } from '../services/account.service';
+import { Account } from '../services/model/account.model';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { AccountValidatorService } from '../services/validator/account.validator';
+import { AppForm } from '../form/form.class';
+import { AppFormUtils, CanLeave } from '../form/form.utils';
+import { FormFieldDefinition } from '../../shared/form/field.model';
+import { LAT_LONG_PATTERNS } from '../../shared/material/latlong/latlong.utils';
+import { StatusIds } from '../services/model/model.enum';
+import { APP_LOCALES, LocaleConfig, LocalSettings } from '../services/model/settings.model';
+import { NetworkService } from '../services/network.service';
+import { filter, map } from 'rxjs/operators';
+import { MatTabGroup } from '@angular/material/tabs';
+import { ConfigService } from '../services/config.service';
+import { CORE_CONFIG_OPTIONS } from '../services/config/core.config';
+import { AppPropertiesTable, PropertyEntity } from '../form/properties/properties.table';
+import { PropertyMap } from '../../shared/types';
+import { isNotEmptyArray, isNotNil } from '../../shared/functions';
+import { UserTokenTable } from './token.table';
+import { NavController } from '@ionic/angular';
+import { environment } from '../../../environments/environment';
+import { Configuration } from '../services/model/config.model';
+
+import { AuthTokenType } from '../services/network.types';
+
+@Component({
+  selector: 'app-account-page',
+  templateUrl: 'account.page.html',
+  styleUrls: ['./account.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccountPage extends AppForm<Account> implements OnInit, OnDestroy, CanLeave {
+  @ViewChild('tabGroup', { static: true }) tabGroup: MatTabGroup;
+  @ViewChild('propertiesTable', { static: true }) propertiesTable: AppPropertiesTable;
+  @ViewChild('tokensTable', { static: true }) tokensTable: UserTokenTable;
+
+  protected selectedTabIndex = 0;
+  protected isLogin: boolean;
+  protected changesSubscription: Subscription;
+  protected networkSubscription: Subscription;
+  protected email = {
+    confirmed: false,
+    notConfirmed: false,
+    sending: false,
+    error: undefined,
+  };
+  protected additionalFields: FormFieldDefinition[];
+  protected optionDefinitions: FormFieldDefinition[];
+
+  get settingsForm(): UntypedFormGroup {
+    return this.form.get('settings') as UntypedFormGroup;
+  }
+
+  // settingsContentForm: UntypedFormGroup;
+  protected locales: LocaleConfig[];
+  protected latLongFormats = LAT_LONG_PATTERNS;
+  protected saving = false;
+  protected submitted = false;
+  protected accountReadOnly = false;
+  protected readonly mobile: boolean;
+
+  get valid(): boolean {
+    return super.valid && (this.propertiesTable?.valid || true);
+  }
+
+  get invalid(): boolean {
+    return super.invalid && (this.propertiesTable ? this.propertiesTable.invalid : false);
+  }
+
+  get dirty(): boolean {
+    return super.dirty || this.propertiesTable?.dirty || false;
+  }
+
+  protected showLatLonFormat = true;
+  protected canChangePassword = false;
+  protected showSecurityDetails = false;
+  protected showTechnicalDetails = true;
+  protected showApiTokens = false;
+
+  constructor(
+    injector: Injector,
+    public formBuilder: UntypedFormBuilder,
+    public accountService: AccountService,
+    public network: NetworkService,
+    protected navController: NavController,
+    protected validatorService: AccountValidatorService,
+    protected configService: ConfigService,
+    protected cd: ChangeDetectorRef,
+    @Inject(APP_LOCALES) locales: LocaleConfig[]
+  ) {
+    super(injector, validatorService.getFormGroup(accountService.account, { withSettings: true }));
+
+    this.locales = locales;
+    this.mobile = this.settings.mobile;
+    this.debug = !environment.production;
+
+    // By default, disable the form
+    this.disable();
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Get user options
+    this.optionDefinitions = (this.accountService.optionDefs || []).filter(
+      (definition) => !definition.disabled && (!definition.minProfile || this.accountService.hasMinProfile(definition.minProfile))
+    );
+
+    // Observed some events
+    this.registerSubscription(this.accountService.onLogin.pipe(filter(() => !this.saving)).subscribe((account) => this.onLogin(account)));
+    this.registerSubscription(this.accountService.onLogout.subscribe(() => this.onLogout()));
+    this.registerSubscription(
+      this.onCancel.subscribe(() => {
+        this.setValue(this.accountService.account);
+        this.markAsPristine();
+      })
+    );
+
+    this.registerSubscription(
+      this.accountService.$additionalFields.subscribe((additionalFields) => {
+        this.additionalFields = additionalFields.slice(); // Copy
+        if (this.accountService.isLogin()) {
+          this.onLogin(this.accountService.account);
+        } else {
+          this.markAsLoaded();
+        }
+      })
+    );
+
+    this.registerSubscription(this.configService.config.subscribe((config) => this.onConfigLoaded(config)));
+
+    // Realign tab, after a delay because the tab can be disabled when component is created
+    setTimeout(() => this.tabGroup.realignInkBar(), 500);
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.stopListenChanges();
+    this.networkSubscription?.unsubscribe();
+  }
+
+  onLogin(account: Account) {
+    console.debug('[account] Logged account: ', account);
+    this.isLogin = true;
+
+    this.setValue(account);
+
+    this.email.confirmed = account && account.email && account.statusId !== StatusIds.TEMPORARY;
+    this.email.notConfirmed = account && account.email && (!account.statusId || account.statusId === StatusIds.TEMPORARY);
+
+    this.networkSubscription?.unsubscribe();
+    this.networkSubscription = combineLatest([
+      this.configService.config,
+      this.network.onNetworkStatusChanges.pipe(map((connectionType) => connectionType !== 'none')),
+    ]).subscribe(([config, online]) => {
+      this.onConfigLoaded(config);
+
+      if (online) {
+        this.enable();
+        this.markAsPristine();
+        this.startListenChanges();
+      } else {
+        this.disable();
+        this.markAsPristine();
+        this.stopListenChanges();
+      }
+      this.markAsLoaded();
+    });
+
+    this.markForCheck();
+  }
+
+  onLogout() {
+    this.isLogin = false;
+    this.email.confirmed = false;
+    this.email.notConfirmed = false;
+    this.email.sending = false;
+    this.email.error = undefined;
+    this.form.reset();
+    this.disable();
+
+    this.networkSubscription?.unsubscribe();
+
+    this.stopListenChanges();
+
+    // Back to home
+    this.navController.navigateRoot('/');
+  }
+
+  async setValue(data: Account, opts?: { emitEvent?: boolean; onlySelf?: boolean }): Promise<void> {
+    super.setValue(data, opts);
+
+    // Set options
+    const { properties } = data?.settings?.asLocalSettings({ definitions: this.optionDefinitions }) || {};
+    const propertiesEntities: PropertyEntity[] = this.optionDefinitions
+      .map((definition) => {
+        const value = properties?.[definition.key];
+        return isNotNil(value) ? PropertyEntity.fromObject({ definition, value }) : null;
+      })
+      .filter(isNotNil);
+
+    if (this.propertiesTable) {
+      await this.propertiesTable.ready();
+      this.propertiesTable.value = propertiesEntities;
+    }
+
+    if (this.tokensTable) {
+      await this.tokensTable.ready();
+      this.tokensTable.value = data.tokens;
+    }
+  }
+
+  async refresh(_?: Event) {
+    this.disable();
+    this.markAsLoading();
+
+    return this.accountService.reload();
+  }
+
+  startListenChanges() {
+    if (this.changesSubscription) return; // already started
+    this.changesSubscription = this.accountService.listenChanges();
+  }
+
+  stopListenChanges() {
+    if (!this.changesSubscription) return;
+    this.changesSubscription.unsubscribe();
+    this.changesSubscription = undefined;
+  }
+
+  async sendConfirmationEmail(event: MouseEvent) {
+    const json = this.form.value;
+    json.email = this.form.controls['email'].value;
+    if (!json.email || !this.email.notConfirmed) {
+      event.preventDefault();
+      return false;
+    }
+
+    this.email.sending = true;
+    console.debug('[account] Sending confirmation email...');
+    try {
+      await this.accountService.sendConfirmationEmail(json.email, (json.settings && json.settings.locale) || this.translate.currentLang);
+      console.debug('[account] Confirmation email sent.');
+      this.email.sending = false;
+    } catch (err) {
+      this.email.sending = false;
+      this.email.error = (err && err.message) || err;
+    }
+  }
+
+  async save(event?: Event): Promise<boolean> {
+    if (this.saving) return false;
+
+    if (!this.form.valid) {
+      await AppFormUtils.waitWhilePending(this.form);
+
+      if (this.form.invalid) {
+        AppFormUtils.logFormErrors(this.form);
+        this.form.markAllAsTouched();
+        return false;
+      }
+    }
+
+    this.submitted = true;
+    this.saving = true;
+    this.error = undefined;
+
+    const newAccount = Account.fromObject({
+      ...this.accountService.account.asObject(),
+      ...this.form.value,
+    });
+
+    if (isNotEmptyArray(this.optionDefinitions) && this.propertiesTable) {
+      // Merge properties
+      await this.propertiesTable.save();
+      const propertyEntities = this.propertiesTable.value || [];
+      const properties: PropertyMap = propertyEntities.reduce((res, item) => {
+        res[item.id] = item.value;
+        return res;
+      }, {});
+      const newProperties = { ...newAccount.settings.content['properties'], ...properties };
+      newAccount.settings.merge(<LocalSettings>{ properties: newProperties }, ['properties']);
+    } else if (newAccount.settings.content['properties']) {
+      // Clean properties
+      delete newAccount.settings.content['properties'];
+    }
+
+    if (this.tokensTable) {
+      await this.tokensTable.save();
+      newAccount.tokens = this.tokensTable.value;
+    }
+
+    console.debug('[account] Saving account...', newAccount);
+    try {
+      this.disable();
+
+      await this.accountService.save(newAccount);
+
+      // Reload
+      setTimeout(() => this.onLogin(this.accountService.account), 100);
+
+      this.markAsPristine();
+      return true;
+    } catch (err) {
+      console.error(err);
+      this.error = (err && err.message) || err;
+      return false;
+    } finally {
+      this.saving = false;
+      this.enable();
+    }
+  }
+
+  enable(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    super.enable(opts);
+
+    // Some fields are always disable
+    this.form.controls.email.disable();
+    this.form.controls.mainProfile.disable();
+    this.form.controls.pubkey.disable();
+
+    // Disable account fields if readonly by configuration
+    const disabled = this.accountReadOnly;
+    if (disabled) {
+      this.form.controls.lastName.disable();
+      this.form.controls.firstName.disable();
+    }
+
+    // Always disable some additional fields
+    this.additionalFields.forEach((field) => {
+      const control = this.form.controls[field.key];
+      if (!control) return; // Skip
+
+      const fieldDisabled = disabled || (field.extra?.account && field.extra.account.disabled) || false;
+      if (fieldDisabled && control.enabled) {
+        control.disable();
+      }
+      const required = (field.extra?.account && field.extra.account.required) || false;
+      if (!field.required && required) {
+        control.setValidators(control.validator ? Validators.compose([control.validator, Validators.required]) : Validators.required);
+      }
+    });
+    this.markForCheck();
+  }
+
+  async cancel() {
+    await super.cancel();
+  }
+
+  async close(_?: Event) {
+    if (this.saving) return;
+
+    // Back to home
+    return this.navController.navigateRoot('/'); // back to home
+  }
+
+  @HostListener('window:beforeunload', ['$event'])
+  handleRefresh(event: BeforeUnloadEvent): void {
+    // Avoid to quit web browser page, without saving
+    if (!this.mobile && this.dirty) {
+      event.preventDefault(); // Avoid to quit without saving
+    }
+  }
+
+  protected onConfigLoaded(config: Configuration) {
+    console.debug('[account] Config loaded: ', config);
+    this.accountReadOnly = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.ACCOUNT_READONLY);
+    this.showLatLonFormat =
+      config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.ACCOUNT_LAT_LONG_FORMAT_ENABLE) &&
+      // For compatibility with deprecated key
+      config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.DEFAULT_LAT_LONG_FORMAT_ENABLED);
+
+    const authTokenType = config.getProperty(CORE_CONFIG_OPTIONS.AUTH_TOKEN_TYPE) as AuthTokenType;
+    this.canChangePassword = authTokenType === 'token';
+    this.showSecurityDetails = this.canChangePassword;
+    this.showApiTokens = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.AUTH_API_TOKEN_ENABLED);
+    this.markForCheck();
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+  protected openChangePasswordPage() {
+    this.navController.navigateForward('account/password');
+  }
+}

package/src/app/core/account/new-token.form.html

@@ -0,0 +1,90 @@
+<form class="form-container" [formGroup]="form">
+  <ion-grid class="ion-no-padding">
+    <ion-row>
+      <ion-col>
+        <mat-form-field>
+          <mat-label>{{ 'ACCOUNT.TOKENS.CREATE.NAME' | translate }}</mat-label>
+          <input
+            matInput
+            [appAutofocus]="true"
+            [autofocusDelay]="500"
+            formControlName="name"
+            autocomplete="off"
+            required
+            [readonly]="form | formGetValue: 'token' | isNotNilOrBlank"
+          />
+          <mat-error *ngIf="form.controls.name.hasError('required') && form.controls.name.touched" translate>
+            ERROR.FIELD_REQUIRED
+          </mat-error>
+          <mat-error *ngIf="form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched" translate>
+            ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS
+          </mat-error>
+        </mat-form-field>
+      </ion-col>
+    </ion-row>
+    @if (showScopes) {
+      <ion-row>
+        <ion-col>
+          <mat-chips-field
+            formControlName="scopes"
+            appearance="fill"
+            chipColor="primary"
+            [placeholder]="'ACCOUNT.TOKENS.CREATE.SCOPES' | translate"
+            [config]="tokenConfig"
+            [mobile]="mobile"
+            [debug]="false"
+            [required]="true"
+            [readonly]="form | formGetValue: 'token' | isNotNilOrBlank"
+          >
+            <mat-error *ngIf="form.controls.name.hasError('notEmptyArray') && form.controls.name.touched" translate>
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-chips-field>
+        </ion-col>
+      </ion-row>
+    }
+    <ion-row>
+      <ion-col>
+        <mat-date-field
+          formControlName="expirationDate"
+          [placeholder]="'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate"
+          [mobile]="mobile"
+          [required]="true"
+          [readonly]="form | formGetValue: 'token' | isNotNilOrBlank"
+        ></mat-date-field>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <ion-button
+          *ngIf="form | formGetValue: 'token' | isNilOrBlank; else showToken"
+          [title]="'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate"
+          (click)="generate($event)"
+          [disabled]="form.invalid"
+        >
+          {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate }}
+        </ion-button>
+        <ng-template #showToken>
+          <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>
+          <mat-form-field subscriptSizing="dynamic">
+            <textarea
+              matInput
+              formControlName="token"
+              readonly
+              style="height: auto; background-color: lightgray"
+              rows="8"
+            ></textarea>
+            <button
+              matSuffix
+              mat-icon-button
+              [title]="'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate"
+              (click)="copy($event)"
+            >
+              <mat-icon>content_copy</mat-icon>
+            </button>
+          </mat-form-field>
+        </ng-template>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</form>

package/src/app/core/account/new-token.form.ts

@@ -0,0 +1,99 @@
+import { TokenScope, UserToken } from '../services/model/token.model';
+import { ChangeDetectorRef, Component, Injector, Input, OnInit } from '@angular/core';
+import { UserTokenValidatorService } from '../services/validator/user-token.validator';
+import { MatAutocompleteFieldConfig } from '../../shared/material/autocomplete/material.autocomplete.config';
+import { AppForm } from '../form/form.class';
+import { AccountService } from '../services/account.service';
+import { PlatformService } from '../services/platform.service';
+import { isNilOrBlank, isNotNilOrBlank } from '../../shared/functions';
+
+@Component({
+  selector: 'app-new-token-form',
+  templateUrl: './new-token.form.html',
+})
+export class NewTokenForm extends AppForm<UserToken> implements OnInit {
+  protected tokenConfig: MatAutocompleteFieldConfig;
+  @Input() showScopes: boolean;
+  @Input() tokenScopes: TokenScope[];
+  @Input() existingNames: string[];
+  @Input() mobile: boolean;
+
+  private readonly platform: PlatformService;
+
+  constructor(
+    injector: Injector,
+    protected validator: UserTokenValidatorService,
+    protected accountService: AccountService,
+    protected cd: ChangeDetectorRef
+  ) {
+    super(injector, validator.getFormGroup());
+    this.platform = injector.get(PlatformService);
+  }
+
+  get valid(): boolean {
+    return super.valid && isNotNilOrBlank(this.value?.token);
+  }
+
+  get invalid(): boolean {
+    return super.invalid || isNilOrBlank(this.value?.token);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.tokenConfig = {
+      items: this.tokenScopes.slice().map((value) => {
+        value.name = this.translate.instant(value.name);
+        return value;
+      }),
+      attributes: ['name'],
+    };
+
+    this.validator.updateFormGroup(this.form, this.existingNames);
+  }
+
+  async generate(event: UIEvent) {
+    event?.stopPropagation();
+
+    try {
+      const token = await this.accountService.generateToken(this.getFlags(this.value.scopes));
+      if (!token) {
+        this.setError('No token generated !');
+      }
+
+      this.form.patchValue({ token });
+
+      this.markForCheck();
+    } catch (e) {
+      this.setError(e);
+    }
+  }
+
+  async copy(event: UIEvent) {
+    event?.stopPropagation();
+    await this.platform.copyToClipboard(this.value.token, {
+      message: 'ACCOUNT.TOKENS.CREATE.COPIED',
+    });
+  }
+
+  async getValue(): Promise<UserToken> {
+    const value = await super.getValue();
+
+    // Set flags from scopes
+    value.flags = this.getFlags(value.scopes);
+
+    return value;
+  }
+
+  protected getFlags(scopes: TokenScope[]): number {
+    let flags = 0;
+    scopes.forEach((scope) => {
+      flags += scope.flag;
+    });
+    return flags;
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}

package/src/app/core/account/new-token.modal.html

@@ -0,0 +1,52 @@
+<app-modal-toolbar
+  modalName="NewTokenModal"
+  [title]="titleSubject | async"
+  [color]="'secondary'"
+  [showSpinner]="loading"
+  [canValidate]="!loading && valid"
+  (cancel)="close($event)"
+  (validate)="saveAndClose($event)"
+></app-modal-toolbar>
+
+<ion-content class="ion-padding">
+  <!-- error -->
+  <ion-item *ngIf="error" 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>
+
+  <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>
+
+  <app-new-token-form
+    [showScopes]="showScopes"
+    [tokenScopes]="tokenScopes"
+    [existingNames]="existingNames"
+    [mobile]="mobile"
+  ></app-new-token-form>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <ion-toolbar>
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col>
+        <ng-content></ng-content>
+      </ion-col>
+
+      <ion-col size="auto">
+        <ion-button fill="clear" color="dark" (click)="close($event)">
+          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+        </ion-button>
+
+        <ion-button
+          [fill]="invalid ? 'clear' : 'solid'"
+          [disabled]="disabled || loading || invalid"
+          (click)="saveAndClose($event)"
+          (keyup.enter)="saveAndClose($event)"
+          color="tertiary"
+        >
+          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

package/src/app/core/account/new-token.modal.ts

@@ -0,0 +1,68 @@
+import { AppEntityEditorModal, IEntityEditorModalOptions } from '../form/entity/entity-editor-modal.class';
+import { TokenScope, UserToken } from '../services/model/token.model';
+import { UntypedFormGroup } from '@angular/forms';
+import { Component, Injector, Input, OnInit, ViewChild } from '@angular/core';
+import { AccountService } from '../services/account.service';
+import { now } from 'moment';
+import { fromUnixMsTimestamp } from '../../shared/dates';
+import { NewTokenForm } from './new-token.form';
+
+export interface INewTokenOptions extends IEntityEditorModalOptions<UserToken> {
+  showScopes: boolean;
+  tokenScopes: TokenScope[];
+  existingNames: string[];
+}
+
+@Component({
+  selector: 'app-new-token-modal',
+  templateUrl: './new-token.modal.html',
+})
+export class NewTokenModal extends AppEntityEditorModal<UserToken> implements OnInit, INewTokenOptions {
+  @Input() showScopes: boolean;
+  @Input() tokenScopes: TokenScope[];
+  @Input() existingNames: string[];
+  @ViewChild(NewTokenForm, { static: true }) newTokenForm: NewTokenForm;
+
+  constructor(
+    injector: Injector,
+    protected accountService: AccountService
+  ) {
+    super(injector, UserToken, { tabCount: 1 });
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.enable();
+  }
+
+  protected computeTitle(data: UserToken): Promise<string> {
+    return this.translate.instant('ACCOUNT.TOKENS.CREATE.TITLE');
+  }
+
+  protected get form(): UntypedFormGroup {
+    return this.newTokenForm.form;
+  }
+
+  protected getFirstInvalidTabIndex(): number {
+    return 0;
+  }
+
+  protected registerForms() {
+    this.addForm(null, this.newTokenForm);
+  }
+
+  setValue(data: UserToken): Promise<void> | void {
+    // Affect pubkey from current account
+    data.pubkey = this.accountService.account.pubkey;
+
+    // Default expiration date
+    data.expirationDate = fromUnixMsTimestamp(now()).add(1, 'month');
+
+    this.newTokenForm.setValue(data);
+  }
+
+  protected async getValue(): Promise<UserToken> {
+    return this.newTokenForm.getValue();
+  }
+}