Clean up home.page.ts (#21)

* centralize loading overlay logic

* re-enable console log easter-egg

* revert unwanted environment.ts change

* fix migration service

* remove bloat popover logic

* lint refactor

* create password service for home page

* Refactor home page code to remove unused event listeners

* refactor countdown timer precision using rxjs

* Reorganize components to reside in its page's folders

* Refactor home page code to remove unused event listeners

* moved add account modal logic to its component

* remove unused service injection

* Refactor account modal component to better handle camera status

* Refactor account modal component to enable closing when scan is not active and avoid being stuck

* fixes #22

.eslintrc.json

@@ -13,7 +13,8 @@
       },
       "extends": [
         "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:@typescript-eslint/recommended"
       ],
       "rules": {
         "@angular-eslint/component-class-suffix": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "authleu",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "author": "Leonardo 'Leu' Pereira <[email protected]>",
   "homepage": "https://github.com/jlcvp/AuthLeu",
   "description": "Open source authenticator and 2fa code generator to use across multiple devices and platforms",

src/app/app.component.ts

@@ -61,7 +61,7 @@ export class AppComponent {
     this.translate.setDefaultLang('en')
     const supportedLanguages = /en|pt/
     // get the browser language
-    let browserLang = this.translate.getBrowserLang()
+    const browserLang = this.translate.getBrowserLang()
     console.log("detected browser language: ", browserLang)
     if (browserLang !== undefined && this.translate.getBrowserLang()?.match(supportedLanguages)) {
       this.translate.use(browserLang)

src/app/components/account-detail/account-detail.component.ts → src/app/home/components/account-detail/account-detail.component.ts

@@ -3,7 +3,7 @@ import { ToastController } from '@ionic/angular';
 import { Account2FA } from 'src/app/models/account2FA.model';
 import { OtpService } from 'src/app/services/otp.service';
 import { CountdownTimerComponent } from '../countdown-timer/countdown-timer.component';
-import { debounceTime, firstValueFrom, pipe } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -26,6 +26,7 @@ export class AccountDetailComponent {
   @HostListener('window:focus', ['$event'])
   onFocus(event: FocusEvent): void {
     // resume timer
+    console.log('focus event', event)
     this.updateCode()
     this.updateTokenCountdown()
   }
@@ -76,10 +77,11 @@ export class AccountDetailComponent {
     return this._tokenCountdown
   }
 
-  async copyCode(evt: any) {
+  async copyCode(evt: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
     if(!this.account) {
       return
     }
+    console.log("copying code", {evt})
     const code = this.token.replace(/\s/g, '')
     await navigator.clipboard.writeText(code)
     console.log("code copied")
@@ -100,7 +102,7 @@ export class AccountDetailComponent {
     setTimeout(() => {
       this.updateTokenCountdown()
       this.updateCode()
-    }, 500);
+    }, 150); // using 150ms to debounce the timer end event
   }
 
   updateCode() {

src/app/home/components/account-modal/account-modal.component.html

@@ -0,0 +1,86 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ "ADD_ACCOUNT_MODAL.TITLE" | translate }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()" [disabled]="isScanActive && !isCameraSettled "><ion-icon slot="icon-only" name="close-outline"></ion-icon></ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ng-container *ngIf="isScanActive;else manualForm">
+    <ngx-scanner-qrcode #qrscanner="scanner" (event)="onQRCodeScanned($event, qrscanner)"
+      [config]="qrScannerOpts"></ngx-scanner-qrcode>
+    <ion-grid>
+      <ion-row>
+        <ion-col size="auto">
+        </ion-col>
+        <ion-col></ion-col>
+        <ion-col size="auto">
+          <ion-button size="large" [disabled]="!isCameraSettled" (click)="cycleCamera()">
+            <ion-icon slot="icon-only" name="sync-outline"></ion-icon>
+          </ion-button>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col size="12">
+          <ion-button size="large" expand="block" (click)="manualInputAction()">
+            <ion-icon slot="start" name="create-outline"></ion-icon>
+            {{ "ADD_ACCOUNT_MODAL.MANUAL_INPUT" | translate }}
+          </ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ng-container>
+  <ng-template #manualForm>
+    <ion-button size="large" expand="block" (click)="scanCode()">
+      <ion-icon slot="start" name="qr-code-outline"></ion-icon>
+      {{ "ADD_ACCOUNT_MODAL.SCAN_QR_CODE" | translate }}
+    </ion-button>
+    <form [formGroup]="validations_form" (ngSubmit)="createAccount(validations_form.value)">
+      <ion-item>
+        <ion-input label="{{ 'ADD_ACCOUNT_MODAL.LABEL' | translate }}" labelPlacement="stacked" formControlName="label"
+          placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} Google:[email protected]"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-input label="{{ 'ADD_ACCOUNT_MODAL.SECRET_KEY' | translate }}" labelPlacement="stacked"
+          formControlName="secret"
+          placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} QAPERTPEO123"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-input label="{{ 'ADD_ACCOUNT_MODAL.TOKEN_SIZE' | translate }}" labelPlacement="stacked"
+          formControlName="tokenLength"
+          placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} 6"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-input label="{{ 'ADD_ACCOUNT_MODAL.TOKEN_INTERVAL' | translate }}" labelPlacement="stacked"
+          formControlName="interval"
+          placeholder="{{ 'ADD_ACCOUNT_MODAL.EXAMPLI_GRATIA_SHORT' | translate }} 30"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label position="stacked">{{ "ADD_ACCOUNT_MODAL.LOGO" | translate }}</ion-label>
+        <ion-searchbar placeholder="{{ 'SEARCH' | translate }}" class="ion-padding-top" [debounce]="250"
+          [value]="draftLogoSearchTxt" (ionInput)="handleSearchLogo($event)"></ion-searchbar>
+        <ion-grid class="full-row">
+          <ion-row class="full-row">
+            <ion-col size-xs="6" size-sm="4" size="4">
+              <ion-card class="logo-card" (click)="selectLogo('')" [ngClass]="{ 'selected-logo': !draftLogoURL }">
+                <ion-img class="ion-padding logo-img" [src]="'assets/icon/favicon.png'"></ion-img>
+                <p>{{ "ADD_ACCOUNT_MODAL.NO_LOGO" | translate }}</p>
+              </ion-card>
+            </ion-col>
+            <ion-col size-xs="6" size-sm="4" *ngFor="let logoResult of searchLogoResults">
+              <ion-card class="logo-card" (click)="selectLogo(logoResult)"
+                [ngClass]="{ 'selected-logo': logoResult === draftLogoURL }">
+                <ion-img class="ion-padding ion-margin logo-img" [src]="logoResult"></ion-img>
+              </ion-card>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+        <p *ngIf="searchLogoResults.length > 0">Logos provided by <a href="https://brandfetch.com">Brandfetch</a>
+        </p>
+      </ion-item>
+      <ion-button expand="block" [disabled]="!validations_form.valid" type="submit">{{ "ADD_ACCOUNT_MODAL.SAVE" |
+        translate }}</ion-button>
+    </form>
+  </ng-template>
+</ion-content>

src/app/home/components/account-modal/account-modal.component.scss

@@ -0,0 +1,20 @@
+.full-row {
+  width: 100%;
+}
+
+.selected-logo {
+  border: 3px solid var(--ion-color-danger);
+}
+
+.logo-img {
+  background-color: whitesmoke;
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
+}
+
+.logo-card {
+  aspect-ratio: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}