github pages workflow

.github/workflows/deploy_gh_pages.yml

@@ -1,25 +1,20 @@
 # Simple workflow for deploying static content to GitHub Pages
 name: Deploy to GitHub pages
-
 on:
   # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
-
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
-
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
-
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
   group: "pages"
-
 jobs:
   # Single deploy job since we're just deploying
   build_and_deploy:
@@ -32,6 +27,8 @@ jobs:
         uses: actions/checkout@v4
       - name: Build
         run: npm ci && npm run build:githubpages
+      - name: Create 404 page
+        run: cp www/index.html www/404.html
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact

README.md

@@ -1,20 +1,27 @@
 
 ![logo](resources/icon_256.png)
 # AuthLeu
-An open source, Self-hosted synced or fully offline alternative to Twilio's Authy (but can also substitute Google Authenticator, Microsoft authenticator and other TOTP 2FA Apps). 
+[![GitHub pages deploy](https://github.com/jlcvp/AuthLeu/actions/workflows/deploy_gh_pages.yml/badge.svg)](https://github.com/jlcvp/AuthLeu/actions/workflows/deploy_gh_pages.yml)  
+An open-source, self-hosted alternative to Twilio's Authy, capable of syncing or operating fully offline. It can also serve as a substitute for TOTP 2FA apps like Google Authenticator and Microsoft Authenticator.
 
-If you want, you may sync your 2FA tokens and have your own URL using Firebase Firestore and Firebase Hosting with your google account.
+If preferred, you can synchronize your 2FA tokens and have your own URL using Firebase Firestore and Firebase Hosting with your Google account.
 
 ## Current and Planned Features
+- [x] Progressive Web App (PWA) support.
 - [x] Add 2FA accounts by scanning QR code or manually entering the secret key and account details.
 - [ ] Edit 2FA account details.
 - [ ] Delete/disable/hide 2FA accounts.
 - [x] Sync 2FA accounts across multiple devices using Firebase Firestore.
-- [ ] Sync 2FA accounts across multiple devices using an exported file.
+- [x] Import/Export 2FA accounts as a JSON file.
+    - [ ] Import/Export only selected 2FA accounts.
 - [ ] Encrypt 2FA Secrets in the local storage using a master password.
 - [ ] Encrypt 2FA Secrets in the firestore using a master password. 
 - [ ] Support for other 2FA methods like HOTP.
-- [x] Internationalization.
+- [x] Internationalization
+    - [x] English
+    - [x] Portuguese (Brazil)
+    - [ ] Other languages support (HELP WANTED)
+- [x] Dark mode support.
 
 ## Screenshots
 ### Portrait layout

angular.json

@@ -44,7 +44,10 @@
             "styles": ["src/global.scss", "src/theme/variables.scss"],
             "scripts": [],
             "serviceWorker": true,
-            "ngswConfigPath": "ngsw-config.json"
+            "ngswConfigPath": "ngsw-config.json",
+            "allowedCommonJsDependencies": [
+              "localforage"
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -7,7 +7,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "build:githubpages": "ng build --configuration githubpages",
+    "build:githubpages": "ng build --configuration githubpages --base-href ./",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "ng lint",

src/app/app.module.ts

@@ -42,7 +42,7 @@ const firebaseProviders = () => {
 
 // exported function for the translation loader to work with AoT
 export function createTranslateLoader(http: HttpClient) {
-  return new TranslateHttpLoader(http);
+  return new TranslateHttpLoader(http, './assets/i18n/');
 }
 @NgModule({
   declarations: [

src/app/home/home.page.html

@@ -135,7 +135,7 @@
                 <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>
+                      <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>

src/app/home/home.page.ts

@@ -1,6 +1,6 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
 import { AuthenticationService } from '../services/authentication.service';
-import { AlertController, IonModal, LoadingController, ToastController } from '@ionic/angular';
+import { AlertController, IonModal, LoadingController, NavController, ToastController } from '@ionic/angular';
 import { firstValueFrom, Observable } from 'rxjs';
 import { Account2FA } from '../models/account2FA.model';
 import { Account2faService } from '../services/accounts/account2fa.service';
@@ -77,6 +77,7 @@ export class HomePage implements OnInit {
     private logoService: LogoService,
     private storageService: LocalStorageService,
     private translateService: TranslateService,
+    private navCtrl: NavController,
     formBuilder: FormBuilder
   ) {
     this.validations_form = formBuilder.group({
@@ -160,7 +161,9 @@ export class HomePage implements OnInit {
     await this.authService.logout()
     //reload window
     await loading.dismiss()
-    window.location.href = '/'
+    await this.navCtrl.navigateRoot('/').then(() => {
+      window.location.reload()
+    })
   }
 
   selectAccount(account: any) {

src/app/login/login.page.html

@@ -3,7 +3,7 @@
     <div class="login-card-container"> 
       <ion-card class="ion-text-center login-card">
         <ion-card-header color="primary" class="ion-padding">
-          <img class="logo ion-align-self-center" src="../../assets/pwaicons/ios/192.png" />
+          <img class="logo ion-align-self-center" src="assets/pwaicons/ios/256.png" />
         </ion-card-header>
         <ion-card-content color="primary" class="ion-padding card-content-bg">
           <form [@openClose]="loginFormVisible" class="form" [class.form-expand]="loginFormVisible" [formGroup]="validations_form" (ngSubmit)="loginUser(validations_form.value)">

src/app/models/account2FA.model.ts

@@ -95,7 +95,7 @@ export class Account2FA implements IAccount2FA {
     }
 
     getLogo(): string {
-        return this.logo || '../assets/icon/128.png';
+        return this.logo || 'assets/icon/128.png';
     }
 
     getNextRollingTimeLeft(): number {

src/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8"/>
   <title>AuthLeu</title>
 
-  <base href="/"/>
+  <base href="."/>
 
   <meta name="color-scheme" content="light dark"/>
   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>