@sumaris-net/ngx-components 2.6.4-alpha3 → 2.6.4-alpha5

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

@@ -0,0 +1,120 @@
+<app-modal-toolbar modalName="NewTokenModal"
+                   [title]="$title | async"
+                   [color]="'secondary'"
+                   [showSpinner]="loading"
+                   [canValidate]="!loading && valid"
+                   (cancel)="close($event)"
+                   (validate)="saveAndClose($event)"
+></app-modal-toolbar>
+
+<ion-content>
+
+  <!-- error -->
+  <ion-item *ngIf="error" lines="none" class="ion-padding">
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
+  </ion-item>
+
+  <h6 class="ion-padding">{{ 'ACCOUNT.TOKENS.CREATE.DESCRIPTION' | translate }}</h6>
+
+  <form class="form-container ion-no-padding" [formGroup]="tokenForm">
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <mat-form-field>
+            <input matInput
+                   [appAutofocus]="true"
+                   [autofocusDelay]="500"
+                   [placeholder]="'ACCOUNT.TOKENS.CREATE.NAME'|translate"
+                   formControlName="name"
+                   autocomplete="off"
+                   required
+                   [readonly]="tokenForm | formGetValue: 'token' | isNotNilOrBlank"
+            >
+            <mat-error *ngIf="form.controls.name.hasError('required') && form.controls.name.dirty" translate>ERROR.FIELD_REQUIRED</mat-error>
+            <mat-error *ngIf="form.controls.name.hasError('notAlreadyExists') && form.controls.name.dirty" translate>ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS</mat-error>
+          </mat-form-field>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <mat-chips-field
+            formControlName="scopes"
+            appearance="legacy"
+            chipColor="primary"
+            [placeholder]="'ACCOUNT.TOKENS.CREATE.SCOPES' | translate"
+            [config]="tokenConfig"
+            [mobile]="mobile"
+            [debug]="false"
+            [required]="true"
+            [readonly]="tokenForm | formGetValue: 'token' | isNotNilOrBlank"
+          ></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]="tokenForm | formGetValue: 'token' | isNotNilOrBlank"
+          ></mat-date-field>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-button
+            *ngIf="tokenForm | formGetValue: 'token' | isNilOrBlank; else showToken"
+            [title]="'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate"
+            (click)="generate($event)"
+            [disabled]="tokenForm.invalid"
+          >
+            {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate}}
+          </ion-button>
+          <ng-template #showToken>
+            <h6>{{ 'ACCOUNT.TOKENS.CREATE.COPY_HELP' | translate }}</h6>
+            <ion-text style="display: block; background-color: lightgray">{{ tokenForm | formGetValue: 'token' }}</ion-text>
+            <button
+              mat-icon-button
+              [title]="'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate"
+              (click)="copy($event)"
+            >
+              <mat-icon>content_copy</mat-icon>
+            </button>
+            <ion-text>{{ copiedLabel | translate }}</ion-text>
+          </ng-template>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+  </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,138 @@
+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} from '@angular/core';
+import {UserTokenValidatorService} from '../services/validator/user-token.validator';
+import {TranslateService} from '@ngx-translate/core';
+import {MatAutocompleteConfigHolder, MatAutocompleteFieldConfig} from '../../shared/material/autocomplete/material.autocomplete.config';
+import {IAppForm} from '../form/form.utils';
+import {AppForm} from '../form/form.class';
+import {AccountService} from '../services/account.service';
+import {isNilOrBlank, isNotNilOrBlank} from '../../shared/functions';
+import {Moment, now} from 'moment';
+import {Clipboard} from '@capacitor/clipboard';
+import {DateUtils, fromUnixMsTimestamp, fromUnixTimestamp} from '../../shared/dates';
+
+export interface INewTokenModalOptions extends IEntityEditorModalOptions<UserToken> {
+  tokenScopes: TokenScope[];
+  existingNames: string[];
+}
+
+@Component({
+  selector: 'app-new-token-modal',
+  templateUrl: './new-token.modal.html'
+})
+export class NewTokenModal extends AppEntityEditorModal<UserToken> implements OnInit, INewTokenModalOptions {
+
+  tokenForm: UntypedFormGroup;
+  tokenAppForm: IAppForm;
+  tokenConfig: MatAutocompleteFieldConfig;
+  copiedLabel: string;
+  @Input() tokenScopes: TokenScope[];
+  @Input() existingNames: string[];
+
+  constructor(
+    private injector: Injector,
+    protected translate: TranslateService,
+    protected validator: UserTokenValidatorService,
+    protected accountService: AccountService
+  ) {
+    super(injector, UserToken, {tabCount: 1});
+
+    this.tokenForm = validator.getFormGroup();
+    this.tokenAppForm = new AppForm(this.injector, this.tokenForm);
+
+  }
+
+  get valid(): boolean {
+    return super.valid && isNotNilOrBlank(this.form.value.token);
+  }
+
+  get invalid(): boolean {
+    return super.invalid || isNilOrBlank(this.form.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);
+  }
+
+  protected computeTitle(data: UserToken): Promise<string> {
+    return this.translate.instant('ACCOUNT.TOKENS.CREATE.TITLE');
+  }
+
+  protected get form(): UntypedFormGroup {
+    return this.tokenForm;
+  }
+
+  protected getFirstInvalidTabIndex(): number {
+    return 0;
+  }
+
+  protected registerForms() {
+    this.addChildForm(this.tokenAppForm);
+  }
+
+  protected 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.form.patchValue(data.asObject());
+  }
+
+  protected async getValue(): Promise<UserToken> {
+    const value = await super.getValue();
+
+    // Set flags from scopes
+    value.flags = this.getFlags(value.scopes);
+
+    return value;
+  }
+
+  async generate(event: UIEvent) {
+    event?.stopPropagation();
+
+    try {
+      const token = await this.accountService.generateToken(this.getFlags(this.form.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 Clipboard.write({string: this.form.value.token});
+    this.copiedLabel = 'ACCOUNT.TOKENS.CREATE.COPIED';
+  }
+
+  protected getFlags(scopes: TokenScope[]): number {
+    let flags = 0;
+    scopes.forEach(scope => {
+      flags += scope.flag;
+    });
+    return flags;
+  }
+
+}

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

@@ -0,0 +1,177 @@
+<mat-toolbar>
+
+  <!-- Refresh -->
+  <button mat-icon-button *ngIf="!mobile"
+          [title]="'COMMON.BTN_REFRESH'|translate"
+          (click)="onRefresh.emit()">
+    <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>
+
+  <ng-container *ngIf="selection.isEmpty(); else hasSelection">
+
+    <button mat-icon-button
+            *ngIf="canEdit && !mobile"
+            [title]="'COMMON.BTN_ADD'|translate"
+            (click)="addToken($event)">
+      <mat-icon>add</mat-icon>
+    </button>
+
+  </ng-container>
+
+  <ng-template #hasSelection>
+
+    <button mat-icon-button
+            [title]="'COMMON.BTN_DELETE' | translate"
+            (click)="deleteSelection($event)">
+      <mat-icon>delete_outline</mat-icon>
+    </button>
+
+  </ng-template>
+
+</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]="!inlineEdition">
+          <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row" [class.cdk-visually-hidden]="!inlineEdition">
+          <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>
+          <ion-label>#</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row">{{ 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="flags">-->
+<!--        <th mat-header-cell *matHeaderCellDef mat-sort-header>-->
+<!--          <ion-label>{{ i18nColumnPrefix + 'FLAGS' | translate }}</ion-label>-->
+<!--        </th>-->
+<!--        <td mat-cell *matCellDef="let row">-->
+<!--          {{ row.currentData | propertyGet : 'flags' }}-->
+<!--        </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>
+
+      <ng-container matColumnDef="updateDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-cell-date-time">
+          <ion-label>{{ i18nColumnPrefix + 'UPDATE_DATE' | translate }}</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" class="mat-cell-date-time">
+          {{ row.currentData | propertyGet : 'updateDate' | 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

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

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

@@ -0,0 +1,141 @@
+import {ChangeDetectionStrategy, Component, Inject, Injector, Input, OnInit, Optional} from '@angular/core';
+import {UntypedFormBuilder} from '@angular/forms';
+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 {INewTokenModalOptions, NewTokenModal} from './new-token.modal';
+
+
+@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;
+
+  constructor(
+    protected injector: Injector,
+    protected formBuilder: UntypedFormBuilder,
+    protected validatorService: ValidatorService,
+    @Inject(ENVIRONMENT) environment: Environment,
+    @Optional() @Inject(APP_USER_TOKEN_SCOPES) protected tokenScopes: TokenScope[]
+  ) {
+    super(
+      injector,
+      [...RESERVED_START_COLUMNS, 'name', /*'flags',*/ 'scopes', 'lastUsedDate', 'expirationDate', 'creationDate', 'updateDate', ...RESERVED_END_COLUMNS],
+      UserToken,
+      new InMemoryEntitiesService(UserToken, undefined, {
+        filterFnFactory: () => () => true
+      }),
+      validatorService
+    );
+
+    // this.readOnly = true;
+    this.inlineEdition = true;
+    this.defaultSortBy = 'creationDate';
+    this.defaultSortDirection = 'asc';
+    this.i18nColumnPrefix = 'ACCOUNT.TOKENS.TABLE.';
+    this.debug = !environment?.production;
+
+    this.autoLoad = false;
+
+    if (!tokenScopes) {
+      console.warn('No TokenScopes provided. Please provide the token APP_USER_TOKEN_SCOPES with valid TokenScope array');
+    }
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.markAsReady();
+  }
+
+  get value(): UserToken[] {
+    const values = super.value || [];
+
+
+    return values;
+  }
+
+  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) {
+    event?.stopPropagation();
+
+    const modal = await this.modalCtrl.create({
+      component: NewTokenModal,
+      componentProps: <INewTokenModalOptions>{
+        mobile: this.mobile,
+        isNew: true,
+        data: new UserToken(),
+        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();
+    }
+  }
+
+  // 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(', ');
+  }
+}

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

@@ -0,0 +1,77 @@
+<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>
+    <input matInput [appAutofocus]="true" [autofocusDelay]="500"
+           [placeholder]="usernamePlaceholder|translate"
+           formControlName="username"
+           autocomplete="off"
+           required>
+    <mat-error *ngIf="form.controls.username.hasError('required') && form.controls.username.dirty" translate>ERROR.FIELD_REQUIRED</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>
+    <input matInput [placeholder]="'USER.PASSWORD'|translate"
+           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" translate>ERROR.FIELD_REQUIRED</mat-error>
+  </mat-form-field>
+
+  <ng-container *ngIf="canWorkOffline">
+    <!-- Force offline (desktop) -->
+    <mat-form-field hidden-xs hidden-sm hidden-mobile color="medium">
+      <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" translate>AUTH.OFFLINE_MODE</ion-text>
+      </mat-checkbox>
+    </mat-form-field>
+
+    <!-- Force offline (mobile) -->
+    <mat-form-field visible-xs visible-sm visible-mobile
+                    color="medium">
+      <input matInput hidden formControlName="offline" type="text">
+      <!-- slide toggle  -->
+      <ion-text color="medium" translate>AUTH.OFFLINE_MODE</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 ? -->
+  <p *ngIf="canRegister" class="padding" style="text-align: center;">
+    <span translate>AUTH.NO_ACCOUNT_QUESTION</span>
+    <br/>
+    <a href="#" (click)="register()">
+      <span translate>AUTH.BTN_REGISTER</span>
+    </a>
+  </p>
+</form>

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

@@ -0,0 +1 @@
+