@sumaris-net/ngx-components 18.10.29 → 18.12.0

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

@@ -0,0 +1,145 @@
+<ion-header>
+  <ion-toolbar color="light">
+    <ion-title>
+      {{ 'ABOUT.TITLE' | translate }}
+    </ion-title>
+
+    <ion-buttons slot="end">
+      <ion-button (click)="close()" visible-xs visible-sm visible-mobile>
+        {{ 'COMMON.BTN_CLOSE' | translate }}
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-list lines="none">
+    <!-- Peer info -->
+    @if (config$ | async; as config) {
+      <ion-item>
+        <span slot="start">&nbsp;</span>
+        <ion-label class="ion-text-wrap">
+          <h2>
+            <b>{{ config.label | capitalize }}</b>
+            @if (config.name) {
+              -
+              <span [innerHTML]="config.name"></span>
+            }
+          </h2>
+
+          @if (config.description) {
+            <p>
+              <markdown [data]="config.description" emoji></markdown>
+            </p>
+          }
+        </ion-label>
+      </ion-item>
+    }
+
+    <!-- Version info -->
+    <ion-item>
+      <span slot="start">&nbsp;</span>
+      <ion-label class="ion-text-wrap">
+        <h2>
+          <small *ngIf="name">{{ 'ABOUT.POWERED_BY' | translate }}</small>
+          {{ name }}
+          <span *ngIf="version" [innerHTML]="'ABOUT.VERSION' | translate: { version: version }"></span>
+        </h2>
+        <p [innerHTML]="'ABOUT.LICENSE' | translate"></p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Help -->
+    <ion-item *ngIf="forumUrl || helpUrl">
+      <mat-icon slot="start">help_outline</mat-icon>
+      <ion-label>
+        <p>
+          {{ 'ABOUT.HELP' | translate }}
+        </p>
+        <p>
+          <ion-button fill="solid" color="accent" href="{{ helpUrl }}" target="help" size="default">
+            <mat-icon slot="start">description</mat-icon>
+            <ion-text translate>ABOUT.USER_MANUAL</ion-text>
+          </ion-button>
+          <ion-button fill="solid" color="secondary" href="{{ forumUrl }}" target="forum" size="default">
+            <ion-icon slot="start" name="chatbubbles"></ion-icon>
+            <ion-text translate>ABOUT.FORUM</ion-text>
+          </ion-button>
+        </p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Report issue -->
+    <ion-item *ngIf="reportIssueUrl">
+      <ion-icon slot="start" name="bug" color="dark"></ion-icon>
+      <ion-label>
+        <p>
+          {{ 'ABOUT.REPORT_ISSUE' | translate }}
+        </p>
+        <p>
+          <a color="primary" href="{{ reportIssueUrl }}" target="_system" translate>ABOUT.BTN_REPORT_ISSUE</a>
+        </p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Source code -->
+    <ion-item *ngIf="sourceUrl">
+      <ion-icon slot="start" name="code" color="dark"></ion-icon>
+      <ion-label>
+        <p>
+          {{ 'ABOUT.SOURCE_CODE' | translate }}
+        </p>
+        <p>
+          <a color="primary" href="{{ sourceUrl }}" target="_system">{{ sourceUrl }}</a>
+        </p>
+      </ion-label>
+    </ion-item>
+
+    <!-- Developers -->
+    <ion-item *ngIf="developers | isNotEmptyArray">
+      <ion-icon slot="start" name="people" color="dark"></ion-icon>
+      <ion-label>
+        <p>
+          {{ 'ABOUT.DEVELOPED_BY' | translate }}
+        </p>
+        <ion-list lines="none">
+          <ion-item *ngFor="let item of developers" class="ion-no-padding">
+            <ion-label>
+              <p>
+                <a color="primary" href="{{ item.siteUrl }}" target="_system">{{ item.name || item.label }}</a>
+              </p>
+            </ion-label>
+            <ion-img slot="end" [src]="item.logo" />
+          </ion-item>
+        </ion-list>
+      </ion-label>
+    </ion-item>
+
+    <!-- Partners -->
+    <ion-item class="item-partners" *ngIf="partners | isNotEmptyArray">
+      <ion-icon slot="start" name="megaphone" color="dark"></ion-icon>
+      <ion-text>
+        <p>{{ 'ABOUT.PARTNERS' | translate }}</p>
+        <p>
+          <a *ngFor="let item of partners" href="{{ item.siteUrl }}" class="partners" target="_system">
+            <img *ngIf="item.logo; else partnerName" [src]="item.logo" [alt]="item.label" />
+            <ng-template #partnerName>
+              <ion-text>{{ item.label }}</ion-text>
+            </ng-template>
+          </a>
+        </p>
+      </ion-text>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <ion-toolbar>
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col></ion-col>
+      <ion-col size="auto">
+        <ion-button fill="solid" color="tertiary" (click)="close()">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

package/src/app/core/about/about.modal.scss

@@ -0,0 +1,22 @@
+.item-partners {
+  ion-text {
+    height: auto;
+
+    p:last-child {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      justify-content: space-between;
+
+      a {
+        padding: 2px;
+
+        img {
+          text-align: center;
+          display: inline-block;
+          max-height: 40px !important;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+import { Component, Inject, InjectionToken, OnDestroy, Optional } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { ENVIRONMENT } from '../../../environments/environment.class';
+import { capitalizeFirstLetter } from '../../shared/functions';
+import { Department } from '../services/model/department.model';
+import { TranslateService } from '@ngx-translate/core';
+import { ConfigService } from '../services/config.service';
+import { Configuration } from '../services/model/config.model';
+import { Observable, Subscription } from 'rxjs';
+import { CORE_CONFIG_OPTIONS } from '../services/config/core.config';
+
+export const APP_ABOUT_DEVELOPERS = new InjectionToken<Partial<Department>[]>('aboutDevelopers');
+export const APP_ABOUT_PARTNERS = new InjectionToken<Partial<Department>[]>('aboutPartners');
+
+@Component({
+  selector: 'app-about-modal',
+  templateUrl: './about.modal.html',
+  styleUrls: ['./about.modal.scss'],
+})
+export class AboutModal implements OnDestroy {
+  readonly name: string;
+  readonly version: string;
+  readonly sourceUrl: string;
+  readonly config$: Observable<Configuration>;
+  reportIssueUrl: string;
+  forumUrl: string;
+  helpUrl: string;
+
+  private readonly _subscription = new Subscription();
+
+  constructor(
+    protected translate: TranslateService,
+    protected modalController: ModalController,
+    protected configService: ConfigService,
+    @Optional() @Inject(ENVIRONMENT) protected environment,
+    @Optional() @Inject(APP_ABOUT_DEVELOPERS) public developers: Partial<Department>[],
+    @Optional() @Inject(APP_ABOUT_PARTNERS) public partners: Partial<Department>[]
+  ) {
+    this.name = translate.instant('APP_NAME');
+    if (this.name === 'APP_NAME') {
+      // Not translated: use name from the environnement
+      this.name = (environment && environment.name && capitalizeFirstLetter(environment.name)) || undefined;
+    }
+    this.version = environment && environment.version;
+    this.sourceUrl = environment && environment.sourceUrl;
+    this.reportIssueUrl = environment && environment.reportIssueUrl;
+    this.forumUrl = environment && environment.forumUrl;
+    this.helpUrl = environment && environment.helpUrl;
+    this.config$ = configService.config;
+
+    this._subscription.add(this.config$.subscribe((config) => this.setConfig(config)));
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  async close() {
+    await this.modalController.dismiss();
+  }
+
+  /* -- protected functions -- */
+
+  protected setConfig(config?: Configuration) {
+    this.forumUrl = config?.getProperty(CORE_CONFIG_OPTIONS.FORUM_URL) || this.environment.forumUrl;
+    this.helpUrl = config?.getProperty(CORE_CONFIG_OPTIONS.HELP_URL) || this.environment.helpUrl;
+    this.reportIssueUrl = config?.getProperty(CORE_CONFIG_OPTIONS.REPORT_ISSUE_URL) || this.environment.reportIssueUrl;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { IonicModule } from '@ionic/angular';
+import { AboutModal } from './about.modal';
+import { TranslateModule } from '@ngx-translate/core';
+import { MarkdownModule } from 'ngx-markdown';
+
+@NgModule({
+  imports: [SharedModule, IonicModule, TranslateModule.forChild(), MarkdownModule],
+
+  declarations: [AboutModal],
+  exports: [TranslateModule, AboutModal],
+})
+export class AppAboutModalModule {}

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

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { AccountPage } from './account.page';
+import { SharedModule } from '../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { AppFormButtonsBarModule } from '../form/buttons/form-buttons-bar.module';
+import { AppPropertiesFormModule } from '../form/properties/properties.module';
+import { AppTableModule } from '../table/table.module';
+import { UserTokenTable } from './token.table';
+import { NewTokenModal } from './new-token.modal';
+import { AppChangePasswordModule } from './password/change-password.module';
+import { NewTokenForm } from './new-token.form';
+import { AppInstallUpgradeCardModule } from '../install/install-upgrade-card.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule.forChild(),
+
+    // App modules
+    AppFormButtonsBarModule,
+    AppPropertiesFormModule,
+    AppTableModule,
+
+    // Sub modules
+    AppChangePasswordModule,
+    AppInstallUpgradeCardModule,
+  ],
+  declarations: [AccountPage, UserTokenTable, NewTokenForm, NewTokenModal],
+  exports: [
+    TranslateModule,
+    // Components
+    AccountPage,
+    UserTokenTable,
+    NewTokenForm,
+    NewTokenModal,
+
+    // Sub modules
+    AppChangePasswordModule,
+  ],
+})
+export class AppAccountModule {}

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

@@ -0,0 +1,329 @@
+<app-toolbar
+  [title]="'ACCOUNT.TITLE' | translate"
+  color="primary"
+  [hasValidate]="dirty && !saving"
+  [hasClose]="!dirty && !saving"
+  (onValidate)="save()"
+  (onClose)="close($event)"
+>
+  <ion-buttons slot="end">
+    @if (loading || saving) {
+      <!-- loader -->
+      <ion-spinner></ion-spinner>
+    } @else if (network.online) {
+      <!-- refresh button (if online) -->
+      <ion-button [matTooltip]="'COMMON.BTN_REFRESH' | translate" (click)="refresh($event)">
+        <mat-icon slot="icon-only">refresh</mat-icon>
+      </ion-button>
+    }
+  </ion-buttons>
+</app-toolbar>
+
+<ion-content>
+  <!-- Install (and upgrade) card -->
+  <app-install-upgrade-card [isLogin]="isLogin" [showInstallButton]="true"></app-install-upgrade-card>
+
+  <!-- error -->
+  @if (mobile && errorSubject | async; as error) {
+    <ion-item 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>
+  }
+
+  <form [formGroup]="form" novalidate class="form-container">
+    <mat-tab-group
+      #tabGroup
+      [(selectedIndex)]="selectedTabIndex"
+      class="mat-mdc-tab-disabled-hidden"
+      [mat-stretch-tabs]="mobile"
+      dynamicHeight
+    >
+      <!-- TAB: user details -->
+      <mat-tab [label]="'ACCOUNT.USER_DETAILS.TITLE' | translate" class="ion-padding">
+        <ng-template mat-tab-label>
+          <mat-icon>
+            <ion-icon matPrefix slot="start" name="person-circle"></ion-icon>
+          </mat-icon>
+          <ion-label>{{ 'ACCOUNT.USER_DETAILS.TITLE' | translate }}</ion-label>
+          <ion-icon slot="end" name="alert-circle" color="danger" *ngIf="submitted && form.invalid"></ion-icon>
+        </ng-template>
+        <ion-grid class="ion-no-padding">
+          <ion-row>
+            <!-- left  margin -->
+            <ion-col size="0" size-lg="1" size-xl="2">&nbsp;</ion-col>
+
+            <ion-col class="ion-padding">
+              <ion-list-header><p [innerHTML]="'ACCOUNT.USER_DETAILS.DESCRIPTION' | translate"></p></ion-list-header>
+
+              <ion-list [inset]="mobile">
+                <!-- Email -->
+                <ion-item lines="none">
+                  <mat-form-field>
+                    <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
+                    <input matInput formControlName="email" autocomplete="section-red email" />
+                    <mat-error *ngIf="form.controls.email.hasError('required') && form.controls.email.dirty" translate>
+                      ERROR.FIELD_REQUIRED
+                    </mat-error>
+                    <mat-error *ngIf="form.controls.email.hasError('email') && form.controls.email.dirty">
+                      <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>
+                    </mat-error>
+                  </mat-form-field>
+                </ion-item>
+
+                @if (email?.notConfirmed) {
+                  <ion-item lines="none">
+                    <ion-grid class="ion-no-padding ion-padding-bottom">
+                      <ion-row>
+                        <ion-col color="danger">
+                          <ion-icon slot="start" color="danger" name="alert-circle"></ion-icon>
+                          <ion-text [innerHTML]="'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL' | translate"></ion-text>
+                        </ion-col>
+                      </ion-row>
+
+                      <ion-row style="height: 51px">
+                        <ion-col style="text-align: right">
+                          <ion-text>
+                            <small [innerHTML]="'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION' | translate"></small>
+                          </ion-text>
+                        </ion-col>
+                        <ion-col size="auto">
+                          @if (!email.sending) {
+                            <ion-button fill="solid" color="secondary" (click)="sendConfirmationEmail($event)">
+                              {{ 'ACCOUNT.BTN_RESEND' | translate }}
+                            </ion-button>
+                          } @else {
+                            <ion-spinner class="ion-no-padding"></ion-spinner>
+                          }
+                        </ion-col>
+                      </ion-row>
+
+                      <ion-row *ngIf="email.error && !email.sending">
+                        <ion-col>
+                          <span *ngIf="email.error && !email.sending" [innerHTML]="email.error | translate"></span>
+                        </ion-col>
+                      </ion-row>
+                    </ion-grid>
+                  </ion-item>
+                }
+                <!-- Last name -->
+                <ion-item lines="none">
+                  <mat-form-field>
+                    <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>
+                    <input
+                      matInput
+                      [appAutofocus]="true"
+                      [autofocusDelay]="500"
+                      formControlName="lastName"
+                      autocomplete="section-blue family-name"
+                      required
+                    />
+                    <mat-error
+                      *ngIf="form.controls.lastName.hasError('required') && form.controls.lastName.dirty"
+                      translate
+                    >
+                      ERROR.FIELD_REQUIRED
+                    </mat-error>
+                    <mat-error *ngIf="form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty">
+                      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>
+                    </mat-error>
+                  </mat-form-field>
+                </ion-item>
+
+                <!-- First name -->
+                <ion-item lines="none">
+                  <mat-form-field>
+                    <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>
+                    <input matInput formControlName="firstName" autocomplete="section-blue given-name" required />
+                    <mat-error
+                      *ngIf="form.controls.firstName.hasError('required') && form.controls.firstName.dirty"
+                      translate
+                    >
+                      ERROR.FIELD_REQUIRED
+                    </mat-error>
+                    <mat-error *ngIf="form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty">
+                      <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>
+                    </mat-error>
+                  </mat-form-field>
+                </ion-item>
+
+                <!-- Additional fields -->
+                @for (definition of additionalFields; track definition.key) {
+                  <ion-item lines="none">
+                    <app-form-field
+                      [definition]="definition"
+                      [formControlName]="definition.key"
+                      [required]="
+                        (definition.extra && definition.extra.account && definition.extra.account.required) || false
+                      "
+                    ></app-form-field>
+                  </ion-item>
+                }
+              </ion-list>
+
+              <!-- Security -->
+              @if (showSecurityDetails) {
+                <ion-list-header><h3 translate>ACCOUNT.SECURITY.TITLE</h3></ion-list-header>
+
+                <ion-list [inset]="mobile">
+                  <ion-item
+                    [button]="mobile"
+                    routerDirection="forward"
+                    lines="none"
+                    (click)="openChangePasswordPage()"
+                    [disabled]="disabled"
+                  >
+                    @if (!mobile) {
+                      <ion-icon slot="start" name="keypad"></ion-icon>
+                      <ion-label>{{ 'ACCOUNT.SECURITY.PASSWORD' | translate }}</ion-label>
+                    }
+                    <ion-text color="tertiary">{{ 'ACCOUNT.SECURITY.BTN_CHANGE_PASSWORD' | translate }}</ion-text>
+                    @if (!mobile) {
+                      <ion-icon slot="end" color="tertiary" name="chevron-forward"></ion-icon>
+                    }
+                  </ion-item>
+                </ion-list>
+              }
+
+              <!-- Technical details -->
+              @if (showTechnicalDetails) {
+                <ion-list-header><h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3></ion-list-header>
+
+                <ion-list [inset]="mobile">
+                  <!-- profile -->
+                  <ion-item lines="none">
+                    <mat-form-field>
+                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PROFILE' | translate }}</mat-label>
+                      <input matInput hidden readonly="true" formControlName="mainProfile" required />
+                      <span>{{ 'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate }}</span>
+                      <mat-error
+                        *ngIf="form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty"
+                        translate
+                      >
+                        ERROR.FIELD_REQUIRED
+                      </mat-error>
+                    </mat-form-field>
+                  </ion-item>
+
+                  <!-- pubkey -->
+                  <ion-item lines="none">
+                    <mat-form-field>
+                      <mat-label>{{ 'ACCOUNT.USER_DETAILS.PUBKEY' | translate }}</mat-label>
+                      <input matInput readonly="true" formControlName="pubkey" required />
+                      <mat-error
+                        *ngIf="form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty"
+                        translate
+                      >
+                        ERROR.FIELD_REQUIRED
+                      </mat-error>
+                      <mat-error *ngIf="form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty">
+                        <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>
+                      </mat-error>
+                    </mat-form-field>
+                  </ion-item>
+                </ion-list>
+              }
+            </ion-col>
+
+            <!-- right margin -->
+            <ion-col size="0" size-lg="1" size-xl="2">&nbsp;</ion-col>
+          </ion-row>
+        </ion-grid>
+      </mat-tab>
+
+      <!-- TAB: settings -->
+      <mat-tab [label]="'ACCOUNT.SETTINGS.TITLE' | translate" formGroupName="settings">
+        <ng-template mat-tab-label>
+          <mat-icon>
+            <ion-icon matPrefix slot="start" name="settings"></ion-icon>
+          </mat-icon>
+          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>
+        </ng-template>
+
+        <div class="ion-padding">
+          <p [innerHTML]="'ACCOUNT.SETTINGS.DESCRIPTION' | translate"></p>
+
+          <mat-form-field>
+            <mat-label>{{ 'ACCOUNT.SETTINGS.LOCALE' | translate }}</mat-label>
+            <mat-select formControlName="locale" required>
+              <mat-option *ngFor="let item of locales" [value]="item.key">
+                {{ item.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error
+              *ngIf="settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty"
+              translate
+            >
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+
+          <!-- lat/long format-->
+          @if (showLatLonFormat) {
+            @let control = settingsForm | formGetControl: 'latLongFormat';
+            <mat-form-field>
+              <mat-label>{{ 'ACCOUNT.SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>
+              <mat-select [formControl]="control" required>
+                @for (item of latLongFormats; track item) {
+                  <mat-option [value]="item">
+                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (control.dirty && control.hasError('required')) {
+                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
+              }
+            </mat-form-field>
+          }
+        </div>
+
+        <!-- Options table -->
+        <div class="options-table" [class.cdk-visually-hidden]="optionDefinitions | isEmptyArray">
+          <app-properties-table
+            #propertiesTable
+            i18nColumnPrefix="ACCOUNT.SETTINGS.OPTIONS."
+            [definitions]="optionDefinitions"
+            [disabled]="disabled"
+            [canEdit]="true"
+            [debug]="debug"
+            (onDirty)="$event ? markAsDirty() : undefined"
+          ></app-properties-table>
+        </div>
+      </mat-tab>
+
+      <!-- TAB: tokens -->
+      <mat-tab [label]="'ACCOUNT.TOKENS.TITLE' | translate" formGroupName="tokens" [disabled]="!showApiTokens">
+        <ng-template mat-tab-label>
+          <mat-icon>
+            <ion-icon matPrefix slot="start" name="ticket"></ion-icon>
+          </mat-icon>
+          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>
+        </ng-template>
+
+        <div class="ion-padding">
+          <p [innerHTML]="'ACCOUNT.TOKENS.DESCRIPTION' | translate"></p>
+        </div>
+        <!-- Tokens table -->
+        <div class="tokens-table">
+          <app-user-token-table
+            #tokensTable
+            [disabled]="disabled"
+            [canEdit]="true"
+            [debug]="debug"
+            (onDirty)="$event ? markAsDirty() : undefined"
+          ></app-user-token-table>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </form>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <app-form-buttons-bar (onCancel)="cancel()" (onSave)="save()" [disabled]="!form.dirty || !valid || saving">
+    <!-- error -->
+    <ion-item *ngIf="error && !mobile" 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>
+  </app-form-buttons-bar>
+</ion-footer>

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

@@ -0,0 +1,20 @@
+mat-tab-group .mat-tab-body-content {
+  padding: var(--ion-grid-padding);
+  display: grid;
+}
+
+form {
+  width: 100%;
+
+  mat-form-field {
+    width: 100%;
+  }
+}
+
+div.options-table {
+  height: calc(100vh - 380px);
+}
+
+div.tokens-table {
+  height: calc(100vh - 250px);
+}