Fix "Add account" button and freeze issue (#28)

* Create an "Add account" button/link shortcut when account list is empty * fix Application freezes for 10 seconds after scanning a QR code #27 * Add check version update workflow for pull requests * Update package.json version to 2.1.3 Fixes #10 Fixes #27
jlcvp · Oct 26, 2024 · 29db365 · 29db365
1 parent e394034
commit 29db365
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 25 deletions.
diff --git a/.github/workflows/check-version-update-pull-request.yml b/.github/workflows/check-version-update-pull-request.yml
@@ -0,0 +1,17 @@
+name: Check Version Update on Pull Request
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  check-version-update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Version Check
+        id: version-check
+        uses: EndBug/[email protected]
+      - name: Fail when unchanged
+        if: steps.version-check.outputs.changed == 'false'
+        run: 'echo "No version change detected. Please update the version in package.json." && exit 1'
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "authleu",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "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",

diff --git a/src/app/home/components/account-list/account-list.component.html b/src/app/home/components/account-list/account-list.component.html
@@ -2,39 +2,62 @@
   <!-- CARD GRID -->
   <ion-grid *ngIf="isGridType; else listView">
     <ion-row>
-      <ion-col *ngFor="let account of accounts; trackBy:itemTrackBy" size-xs="4" size-sm="3" size-md="2">
-        <ion-card button [disabled]="account.isLocked" (click)="selectAccount(account)" class="ion-no-padding ion-no-margin square fill-parent ion-activatable clickable">
+      <ion-col *ngIf="accounts.length === 0;else accountGrid" size-xs="4" size-sm="3" size-md="2">
+        <ion-card button (click)="addAccount()" class="ion-no-padding ion-no-margin square fill-parent ion-activatable clickable">
           <!-- <ion-ripple-effect></ion-ripple-effect> -->
           <ion-card-content class="ion-no-padding ion-padding-start ion-padding-end ">
-            <ion-thumbnail class="thumb ion-no-padding ion-padding-top">
-              <img class="thumb-img" [src]="account.getLogo()">
+            <ion-thumbnail class="thumbnail-card thumbnail-flex-container ion-no-padding ion-padding-top">
+              <ion-icon color="success" name="add-outline" size="large" class="thumb-img"></ion-icon>
             </ion-thumbnail>
-            <p class="small-text ion-text-center ion-no-padding ion-padding-top">{{account.label}}</p>
+            <p class="small-text ion-text-center ion-no-padding ion-padding-top">{{ 'ACCOUNT_LIST.ADD_ACCOUNT_LABEL' | translate }}</p>
           </ion-card-content>
-          <div class="float-bottom" *ngIf="account.isLocked">
-            <div class="lock-overlay">
-              <ion-icon slot="end" color="light" name="lock-closed-outline"></ion-icon>
-            </div>
-          </div>
         </ion-card>
       </ion-col>
+      <ng-template #accountGrid>
+        <ion-col *ngFor="let account of accounts; trackBy:itemTrackBy" size-xs="4" size-sm="3" size-md="2">
+          <ion-card button [disabled]="account.isLocked" (click)="selectAccount(account)" class="ion-no-padding ion-no-margin square fill-parent ion-activatable clickable">
+            <!-- <ion-ripple-effect></ion-ripple-effect> -->
+            <ion-card-content class="ion-no-padding ion-padding-start ion-padding-end ">
+              <ion-thumbnail class="thumbnail-card ion-no-padding ion-padding-top">
+                <img class="thumb-img" [src]="account.getLogo()">
+              </ion-thumbnail>
+              <p class="small-text ion-text-center ion-no-padding ion-padding-top">{{account.label}}</p>
+            </ion-card-content>
+            <div class="float-bottom" *ngIf="account.isLocked">
+              <div class="lock-overlay">
+                <ion-icon slot="end" color="light" name="lock-closed-outline"></ion-icon>
+              </div>
+            </div>
+          </ion-card>
+        </ion-col>
+      </ng-template>
     </ion-row>
   </ion-grid>
   <!-- LIST VIEW -->
   <ng-template #listView>
     <ion-list>
-      <ion-item button *ngFor="let account of accounts; trackBy:itemTrackBy" [disabled]="account.isLocked" (click)="selectAccount(account)">
-        <ion-thumbnail slot="start">
-          <img class="thumb-img" [src]="account.getLogo()">
+      <ion-item button *ngIf="accounts.length === 0;else accountsList"(click)="addAccount()">
+        <ion-thumbnail slot="start" class="thumbnail-flex-container">
+          <ion-icon color="success" size="large" name="add-outline" class="thumb-img"></ion-icon>
         </ion-thumbnail>
         <ion-label>
-          <h2>{{account.label}}</h2>
-          <p *ngIf="account.isLocked">({{ 'ACCOUNT_LIST.LOCKED' | translate }})</p>
+          <h2>{{ 'ACCOUNT_LIST.ADD_ACCOUNT_LABEL' | translate }}</h2>
         </ion-label>
-        <ion-badge color="danger" slot="end">
-          <ion-icon *ngIf="account.isLocked" name="lock-closed-outline"></ion-icon>
-        </ion-badge>
       </ion-item>
+      <ng-template #accountsList>
+        <ion-item button *ngFor="let account of accounts; trackBy:itemTrackBy" [disabled]="account.isLocked" (click)="selectAccount(account)">
+          <ion-thumbnail slot="start" class="thumbnail-flex-container">
+            <img class="thumb-img" [src]="account.getLogo()">
+          </ion-thumbnail>
+          <ion-label>
+            <h2>{{ account.label }}</h2>
+            <p *ngIf="account.isLocked">({{ 'ACCOUNT_LIST.LOCKED' | translate }})</p>
+          </ion-label>
+          <ion-badge color="danger" slot="end">
+            <ion-icon *ngIf="account.isLocked" name="lock-closed-outline"></ion-icon>
+          </ion-badge>
+        </ion-item>
+      </ng-template>
     </ion-list>
   </ng-template>
 </div>
diff --git a/src/app/home/components/account-list/account-list.component.scss b/src/app/home/components/account-list/account-list.component.scss
@@ -2,9 +2,12 @@
     object-fit: scale-down;
 }
 
-.thumb {
+.thumbnail-card {
     width: 100%;
     max-height: 35%;
+}
+
+.thumbnail-flex-container {
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/src/app/home/components/account-list/account-list.component.ts b/src/app/home/components/account-list/account-list.component.ts
@@ -10,18 +10,23 @@ export class AccountListComponent {
   @Input() accounts: Account2FA[] = [];
   @Input() type: "list" | "grid" = "list";
   @Output() accountSelected = new EventEmitter<Account2FA>();
+  @Output() newAccountClick = new EventEmitter<void>();
 
   constructor() { }
 
   selectAccount(account: Account2FA) {
     this.accountSelected.emit(account);
   }
 
+  addAccount() {
+    this.newAccountClick.emit();
+  }
+
   get isGridType() {
     return this.type === "grid";
   }
 
-  itemTrackBy(index: number, account: Account2FA) {
+  itemTrackBy(_index: number, account: Account2FA) {
     return account.id;
   }
 }
diff --git a/src/app/home/components/account-modal/account-modal.component.ts b/src/app/home/components/account-modal/account-modal.component.ts
@@ -83,7 +83,7 @@ export class AccountModalComponent implements OnInit {
 
   async onQRCodeScanned(evt: ScannerQRCodeResult[], qrscanner: NgxScannerQrcodeComponent) {
     try {
-      await qrscanner.stop()
+      console.log('qr code scanned', { evt, qrscanner })
       await this.stopScanner()
     } catch (error) {
       console.error("Error stopping scanner", error)

diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
@@ -99,6 +99,7 @@
       [account]="selectedAccount"></app-account-detail>
     <app-account-list [ngClass]="layoutOrientationClass" id="accounts-container"
       [accounts]="accounts$ | async | accountFilter: searchTxt" [type]="accountListType"
-      (accountSelected)="selectAccount($event)"></app-account-list>
+      (accountSelected)="selectAccount($event)"
+      (newAccountClick)="addAccountAction()"></app-account-list>
   </div>
 </ion-content>
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -5,7 +5,8 @@
     "SELECT_ACCOUNT_HINT": "Select an account to start..."
   },
   "ACCOUNT_LIST": {
-    "LOCKED": "Encrypted"
+    "LOCKED": "Encrypted",
+    "ADD_ACCOUNT_LABEL": "Add account"
   },
   "ACCOUNT_SELECT_MODAL": {
     "CANCEL": "Cancel",

diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
@@ -5,7 +5,8 @@
     "SELECT_ACCOUNT_HINT": "Selecione uma conta para iniciar..."
   },
   "ACCOUNT_LIST": {
-    "LOCKED": "Criptografada"
+    "LOCKED": "Criptografada",
+    "ADD_ACCOUNT_LABEL": "Adicionar conta"
   },
   "ACCOUNT_SELECT_MODAL": {
     "CANCEL": "Cancelar",