Add about section in menu to include app info and licenses (#26)

* Add about section in menu to include app info and licenses Fixes #25 * Refactor i18n files to remove unused keys * Remove unused keys from i18n files
jlcvp · Oct 25, 2024 · e394034 · e394034
1 parent 988f5fb
commit e394034
Show file tree

Hide file tree

Showing 10 changed files with 637 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "authleu",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "author": "Leonardo 'Leu' Pereira <jlcvp@users.noreply.github.com>",
   "homepage": "https://github.com/jlcvp/AuthLeu",
   "description": "Open source authenticator and 2fa code generator to use across multiple devices and platforms",

diff --git a/src/app/home/components/about-modal/about-modal.component.html b/src/app/home/components/about-modal/about-modal.component.html
@@ -0,0 +1,43 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismissModal()">
+        <ion-icon *ngIf="isMD" slot="icon-only" name="close-outline"></ion-icon>
+        <ion-label *ngIf="!isMD">{{ "ABOUT_MODAL.CLOSE" | translate }}</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{ "ABOUT_MODAL.TITLE" | translate }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>{{ "ABOUT_MODAL.VERSION_INFO_HEADER" | translate }}</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>{{ "ABOUT_MODAL.VERSION_INFO.VERSION" | translate }}:&emsp;{{ versionInfo.versionName }}</p>
+      <p>{{ "ABOUT_MODAL.VERSION_INFO.BUILD_DATE" | translate }}:&emsp;{{ versionInfo.buildDate }}</p>
+      <p>{{ "ABOUT_MODAL.VERSION_INFO.GIT_HASH" | translate }}:&emsp;{{ versionInfo.commitHash }}</p>
+    </ion-card-content>
+  </ion-card>
+
+  <ng-container *ngIf="licenses.length > 0">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>{{ "ABOUT_MODAL.LICENSES_HEADER" | translate }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-accordion-group>
+          <ion-accordion *ngFor="let license of licenses">
+            <ion-item slot="header" color="light">
+              <ion-label> {{ license.title }}</ion-label>
+            </ion-item>
+            <div class="ion-padding" slot="content">
+              <p class="line-break">{{ license.body }}</p>
+            </div>
+          </ion-accordion>
+        </ion-accordion-group>
+      </ion-card-content>
+    </ion-card>
+</ng-container>
+</ion-content>
diff --git a/src/app/home/components/about-modal/about-modal.component.scss b/src/app/home/components/about-modal/about-modal.component.scss
@@ -0,0 +1,3 @@
+.line-break {
+  white-space: pre-line;
+}
diff --git a/src/app/home/components/about-modal/about-modal.component.ts b/src/app/home/components/about-modal/about-modal.component.ts
@@ -0,0 +1,37 @@
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { Config, ModalController } from '@ionic/angular';
+import { lastValueFrom } from 'rxjs';
+import { AppVersionInfo } from 'src/app/models/app-version.enum';
+import { AppConfigService } from 'src/app/services/app-config.service';
+
+@Component({
+  selector: 'app-about-modal',
+  templateUrl: './about-modal.component.html',
+  styleUrls: ['./about-modal.component.scss'],
+})
+export class AboutModalComponent {
+
+  isMD: boolean
+  versionInfo: AppVersionInfo
+  licenses: {title: string, body: string}[] = []
+
+  constructor(
+    private modalController: ModalController,
+    private httpClient: HttpClient,
+    configService: AppConfigService, 
+    config: Config) {
+    this.isMD = config.get('mode') !== 'ios'
+    this.versionInfo = configService.versionInfo
+    this.loadLicenses()
+  }
+
+  async dismissModal() {
+    await this.modalController.dismiss()
+  }
+
+  private async loadLicenses() {
+    const ngxscannerqrcodeLicense = await lastValueFrom(this.httpClient.get('assets/licenses/ngxqrcode.txt', {responseType: 'text'}))
+    this.licenses.push({title: 'ngx-scanner-qrcode', body: ngxscannerqrcodeLicense})
+  }
+}
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
@@ -13,6 +13,7 @@ import { CountdownTimerComponent } from './components/countdown-timer/countdown-
 import { TranslateModule } from '@ngx-translate/core'
 import { AccountSelectModalComponent } from './components/account-select-modal/account-select-modal.component';
 import { AccountModalComponent } from './components/account-modal/account-modal.component';
+import { AboutModalComponent } from './components/about-modal/about-modal.component';
 
 @NgModule({
   imports: [
@@ -25,6 +26,14 @@ import { AccountModalComponent } from './components/account-modal/account-modal.
     NgxScannerQrcodeModule,
     TranslateModule.forChild()
   ],
-  declarations: [HomePage, AccountListComponent, AccountDetailComponent, CountdownTimerComponent, AccountSelectModalComponent, AccountModalComponent]
+  declarations: [
+    HomePage, 
+    AccountListComponent, 
+    AccountDetailComponent, 
+    CountdownTimerComponent, 
+    AccountSelectModalComponent, 
+    AccountModalComponent,
+    AboutModalComponent
+  ]
 })
 export class HomePageModule {}
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
@@ -73,21 +73,20 @@
                   </ion-content>
                 </ng-template>
               </ion-popover>
+              <ion-item button detail="false" (click)="aboutAction()">
+                <ion-icon slot="start" name="information-circle-outline"></ion-icon>
+                <ion-label>{{ "CONFIG_MENU.ABOUT" | translate }}</ion-label>
+              </ion-item>
               <ion-item button detail="false" (click)="logout()">
                 <ion-icon slot="start" name="log-out-outline"></ion-icon>
                 <ion-label>{{ "CONFIG_MENU.LOGOUT" | translate }}</ion-label>
               </ion-item>
             </ion-list>
           </ion-content>
-          <ion-footer *ngIf="versionClickCount < 2;else clickableVersionInfo" class="ion-no-padding ion-no-margin ion-text-center" (click)="showVersionInfoAction()">
-            <ion-note class="ion-no-padding ion-no-margin">{{ versionInfo.versionName }}</ion-note>
-          </ion-footer>
-          <ng-template #clickableVersionInfo>
-          <ion-footer class="ion-no-padding ion-no-margin ion-text-center ion-activatable ripple-parent version-info" (click)="showVersionInfoAction()">
+          <ion-footer class="ion-no-padding ion-no-margin ion-text-center ion-activatable ripple-parent version-info">
             <ion-ripple-effect></ion-ripple-effect>
             <ion-note class="ion-no-padding ion-no-margin">{{ versionInfo.versionName }}</ion-note>
           </ion-footer>
-          </ng-template>
         </ng-template>
       </ion-popover>
     </ion-buttons>

diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
@@ -15,6 +15,7 @@ import { LoggingService } from '../services/logging.service';
 import { AppVersionInfo } from '../models/app-version.enum';
 import { PasswordService } from './password.service';
 import { AccountModalComponent } from './components/account-modal/account-modal.component';
+import { AboutModalComponent } from './components/about-modal/about-modal.component';
 
 @Component({
   selector: 'app-home',
@@ -36,7 +37,6 @@ export class HomePage implements OnInit {
   isWindowFocused: boolean = true
   hasLockedAccounts: boolean = true
   versionInfo: AppVersionInfo
-  versionClickCount = 0
 
   private encryptionOptions: EncryptionOptions = ENCRYPTION_OPTIONS_DEFAULT
   private systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
@@ -603,25 +603,13 @@ export class HomePage implements OnInit {
     return willInputPassword
   }
 
-  async showVersionInfoAction(): Promise<void> {
-    this.versionClickCount += 1
-    if(this.versionClickCount < 3) {
-      return
-    }
-    if(this.versionClickCount === 3) {
-      this.loggingService.enableConsole()
-    }
-    const versionInfo = this.configService.versionInfo
-    const title = await firstValueFrom(this.translateService.get('HOME.VERSION_INFO.VERSION_INFO_TITLE'))
-    const versionLabel = await firstValueFrom(this.translateService.get('HOME.VERSION_INFO.VERSION_LABEL'))
-    const buildDateLabel = await firstValueFrom(this.translateService.get('HOME.VERSION_INFO.VERSION_DATE'))
-    const gitHashLabel = await firstValueFrom(this.translateService.get('HOME.VERSION_INFO.GIT_HASH'))
-    const message = `
-    <p>${versionLabel}: ${versionInfo.versionName}</p>
-    <p>${buildDateLabel}: ${versionInfo.buildDate}</p>
-    <p>${gitHashLabel}: ${versionInfo.commitHash}</p>`
-
-    await this.showAlert(message, title)
+  async aboutAction(): Promise<void> {
+    // show about modal
+    const modal = await this.modalController.create({
+      component: AboutModalComponent,
+      backdropDismiss: true
+    })
+    await modal.present()
   }
 
   async enableLogging() {

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -79,7 +79,8 @@
     "IMPORT_ACCOUNTS": "Import Backup",
     "LOGOUT": "Sign out",
     "PERIODIC_CHECK": "Periodic Password Check",
-    "UNLOCK_ACCOUNTS": "Decrypt accounts"
+    "UNLOCK_ACCOUNTS": "Decrypt accounts",
+    "ABOUT": "About..."
   },
   "CRYPTO": {
     "ALREADY_DECRYPTED": "Data is already decrypted",
@@ -98,13 +99,6 @@
     "CONFIRM_LOGOUT_MESSAGE": "<p>All local or unsynchronized accounts will be deleted!</p><p><strong>This action cannot be undone.</strong></p>",
     "CONFIRM_LOGOUT_TITLE": "Are you sure you want to sign out?",
     "CONFIRM_LOGOUT_YES": "CLEAR LOCAL DATA AND SIGN OUT",
-    "ENCRYPTION_ALERT": {
-      "DONT_SHOW_AGAIN": "Do not show this again",
-      "ENABLE_ENCRYPTION": "Enable encryption",
-      "LATER": "Not now",
-      "MESSAGE": "Enhance the security of your accounts by using the encryption feature.<p>Do you want to configure a password?</p>",
-      "TITLE": "Security alert"
-    },
     "ERRORS": {
       "ACCOUNTS_LOCKED": "Your accounts are encrypted. You won't be able to view the codes until they are decrypted using the encryption password.",
       "ACCOUNTS_LOCKED_TITLE": "Encrypted accounts detected",
@@ -136,12 +130,6 @@
       },
       "TITLE": "Password Confirmation"
     },
-    "VERSION_INFO": {
-      "GIT_HASH": "Commit hash",
-      "VERSION_DATE": "Build date",
-      "VERSION_INFO_TITLE": "Version Info",
-      "VERSION_LABEL": "Version"
-    },
     "UNLOCK_ACCOUNTS": "Enter Password"
   },
   "LOGIN": {
@@ -171,5 +159,16 @@
   },
   "UTILS": {
     "ERROR_INVALID_SEMVER_FORMAT": "Invalid SemVer format"
+  },
+  "ABOUT_MODAL": {
+    "CLOSE": "Close",
+    "TITLE": "About",
+    "VERSION_INFO_HEADER": "Version Info",
+    "VERSION_INFO": {
+      "VERSION": "Version",
+      "BUILD_DATE": "Build date",
+      "GIT_HASH": "Commit hash"
+    },
+    "LICENSES_HEADER": "Third-party Licenses"
   }
 }
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
@@ -79,7 +79,8 @@
     "IMPORT_ACCOUNTS": "Importar Backup",
     "LOGOUT": "Sair",
     "PERIODIC_CHECK": "Re-checagem periódica",
-    "UNLOCK_ACCOUNTS": "Decriptar contas"
+    "UNLOCK_ACCOUNTS": "Decriptar contas",
+    "ABOUT": "Sobre..."
   },
   "CRYPTO": {
     "ALREADY_DECRYPTED": "Os dados já estão descriptografados",
@@ -98,13 +99,6 @@
     "CONFIRM_LOGOUT_MESSAGE": "<p>Todas as contas locais e não sincronizadas serão excluídas!</p><p><strong>Esta ação não pode ser desfeita.</strong></p>",
     "CONFIRM_LOGOUT_TITLE": "Tem certeza de que deseja sair?",
     "CONFIRM_LOGOUT_YES": "LIMPAR DADOS LOCAIS E SAIR",
-    "ENCRYPTION_ALERT": {
-      "DONT_SHOW_AGAIN": "Não mostrar novamente",
-      "ENABLE_ENCRYPTION": "Ativar criptografia",
-      "LATER": "Mais tarde",
-      "MESSAGE": "Para melhor proteger suas contas, é recomendável ativar a funcionalidade de criptografia de chaves.<p>Deseja configurar uma senha agora?</p>",
-      "TITLE": "Alerta de segurança"
-    },
     "ERRORS": {
       "ACCOUNTS_LOCKED": "Suas contas estão criptografadas. Não será possível gerar os códigos de acesso até que eles sejam descriptografados usando a senha de criptografia.",
       "ACCOUNTS_LOCKED_TITLE": "Contas criptografadas",
@@ -136,12 +130,6 @@
       },
       "TITLE": "Confirmação de Senha"
     },
-    "VERSION_INFO": {
-      "GIT_HASH": "Hash do commit",
-      "VERSION_DATE": "Data de build",
-      "VERSION_INFO_TITLE": "Informações de Versão",
-      "VERSION_LABEL": "Versão"
-    },
     "UNLOCK_ACCOUNTS": "Inserir Senha"
   },
   "LOGIN": {
@@ -171,5 +159,16 @@
   },
   "UTILS": {
     "ERROR_INVALID_SEMVER_FORMAT": "Formato SemVer inválido"
+  },
+  "ABOUT_MODAL": {
+    "CLOSE": "Fechar",
+    "TITLE": "Sobre",
+    "VERSION_INFO_HEADER": "Informações de Versão",
+    "VERSION_INFO": {
+      "VERSION": "Número da versão",
+      "BUILD_DATE": "Data de build",
+      "GIT_HASH": "Hash do commit"
+    },
+    "LICENSES_HEADER": "Licenças"
   }
 }