migrated to fa lib

.github/workflows/deploy.yml

@@ -6,27 +6,26 @@ on:
         branches:
             - release
 
+permissions:
+    id-token: write  # Required for OIDC
+    contents: read
+
 jobs:
     build:
         if: github.event.pull_request.merged
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
               with:
-                  # The branch, tag or SHA to checkout. When checking out the repository that
-                  # triggered a workflow, this defaults to the reference or SHA for that event.
-                  # Otherwise, defaults to `master`.
                   ref: "dev"
-            - name: npm install
-              run: |
-                  cd $GITHUB_WORKSPACE
-                  npm i
-            - name: build package
-              run: |
-                  cd $GITHUB_WORKSPACE
-                  npm run build:prod
-            - name: publish to npm
-              uses: JS-DevTools/npm-publish@v1
+            - uses: actions/setup-node@v4
               with:
-                  token: ${{ secrets.NPM_TOKEN }}
-                  package: ./dist/ngx-material-auth/package.json
+                node-version: '20'
+                registry-url: 'https://registry.npmjs.org'
+            # Ensure npm 11.5.1 or later is installed
+            - run: npm install -g npm@latest
+            - run: npm i
+            - run: npm run build:prod
+            - run: |
+                  cd dist/ngx-material-auth
+                  npm publish

package.json

@@ -28,16 +28,16 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^20.2.1",
+        "@angular/animations": "^20.3.16",
         "@angular/cdk": "^20.2.0",
-        "@angular/common": "^20.2.1",
-        "@angular/compiler": "^20.2.1",
-        "@angular/core": "^20.2.1",
-        "@angular/forms": "^20.2.1",
+        "@angular/common": "^20.3.16",
+        "@angular/compiler": "^20.3.16",
+        "@angular/core": "^20.3.16",
+        "@angular/forms": "^20.3.16",
         "@angular/material": "^20.2.0",
-        "@angular/platform-browser": "^20.2.1",
-        "@angular/platform-browser-dynamic": "^20.2.1",
-        "@angular/router": "^20.2.1",
+        "@angular/platform-browser": "^20.3.16",
+        "@angular/platform-browser-dynamic": "^20.3.16",
+        "@angular/router": "^20.3.16",
         "@fortawesome/angular-fontawesome": "^3.0.0",
         "@fortawesome/free-solid-svg-icons": "^7.0.0",
         "rxjs": "~7.8.2",
@@ -46,14 +46,14 @@
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "^20.2.0",
-        "@angular/cli": "~20.2.0",
-        "@angular/compiler-cli": "^20.2.1",
+        "@angular/cli": "^20.3.15",
+        "@angular/compiler-cli": "^20.3.16",
         "@simplewebauthn/browser": "^13.1.2",
         "@simplewebauthn/types": "^12.0.0",
         "@types/jasmine": "~5.1.9",
         "@types/qrcode": "^1.5.5",
         "concurrently": "^9.2.0",
-        "eslint-config-service-soft": "^2.0.8",
+        "eslint-config-service-soft": "^2.1.2",
         "jasmine-core": "~5.9.0",
         "karma": "~6.4.4",
         "karma-chrome-launcher": "~3.2.0",
@@ -62,12 +62,13 @@
         "karma-jasmine-html-reporter": "~2.1.0",
         "ncp": "^2.0.0",
         "ng-packagr": "^20.2.0",
-        "ngx-material-navigation": "^20.0.0",
+        "ngx-material-navigation": "^20.1.3",
         "nodemon": "^3.1.10",
         "npm-run-all": "^4.1.5",
         "qrcode": "^1.5.4",
         "ts-node": "^10.9.2",
         "typescript": "~5.9",
-        "wait-on": "^8.0.4"
+        "wait-on": "^8.0.4",
+        "rimraf": "^6.1.2"
     }
 }

projects/ngx-material-auth-showcase/src/app/routes.ts

@@ -36,7 +36,7 @@ export const navbarRows: NavbarRow[] = [
             },
             {
                 type: NavElementTypes.MENU,
-                icon: faLock,
+                iconState: faLock,
                 name: 'Restricted Routes',
                 collapse: 'sm',
                 elements: [

projects/ngx-material-auth/package.json

@@ -1,14 +1,18 @@
 {
     "name": "ngx-material-auth",
-    "version": "20.0.0",
+    "version": "20.0.1",
     "license": "MIT",
+    "repository": {
+        "url": "https://github.com/Service-Soft/ngx-material-auth"
+    },
     "keywords": [
         "angular",
         "material",
         "authentication",
         "authorization",
         "login",
-        "jwt"
+        "jwt",
+        "2fa"
     ],
     "peerDependencies": {
         "@angular/animations": "20",
@@ -17,6 +21,8 @@
         "@angular/core": "20",
         "@angular/forms": "20",
         "@angular/material": "20",
+        "@fortawesome/angular-fontawesome": "^3",
+        "@fortawesome/free-solid-svg-icons": "^7",
         "qrcode": "^1.5.4",
         "@simplewebauthn/browser": "^13.1.2",
         "@simplewebauthn/types": "^12.0.0"

projects/ngx-material-auth/src/components/confirm-reset-password/confirm-reset-password.component.html

@@ -12,8 +12,8 @@ <h1>{{confirmResetPasswordTitle}}</h1>
                 [type]="hide ? 'password' : 'text'"
                 [minlength]="minLength"
                 [(ngModel)]="password">
-            <button type="button" mat-icon-button matSuffix (click)="hide = !hide">
-                <i class="fas" [class.fa-eye-slash]="hide" [class.fa-eye]="!hide"></i>
+            <button class="hide-password" type="button" mat-icon-button matSuffix (click)="hide = !hide">
+                <fa-icon style="line-height: 1;" [icon]="hide ? faEyeSlash : faEye"></fa-icon>
             </button>
             <!-- eslint-disable-next-line angular/no-call-expression -->
             <mat-error>{{getValidationErrorMessage(pw)}}</mat-error>

projects/ngx-material-auth/src/components/confirm-reset-password/confirm-reset-password.component.scss

@@ -3,6 +3,14 @@
     border-radius: 5px;
 }
 
+.hide-password {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 h1 {
     text-align: center;
     margin-bottom: 8px;

projects/ngx-material-auth/src/components/confirm-reset-password/confirm-reset-password.component.ts

@@ -5,6 +5,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FaIconComponent, IconDefinition } from '@fortawesome/angular-fontawesome';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { firstValueFrom } from 'rxjs';
 
 import { BaseAuthData } from '../../models/base-auth-data.model';
@@ -33,7 +35,8 @@ import { NGX_GET_VALIDATION_ERROR_MESSAGE } from '../get-validation-error-messag
         FormsModule,
         MatInputModule,
         MatFormFieldModule,
-        MatButtonModule
+        MatButtonModule,
+        FaIconComponent
     ]
 })
 export class NgxMatAuthConfirmResetPasswordComponent<
@@ -132,6 +135,11 @@ export class NgxMatAuthConfirmResetPasswordComponent<
      */
     hideConfirm: boolean = true;
 
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faEye: IconDefinition = faEye;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faEyeSlash: IconDefinition = faEyeSlash;
+
     private resetToken?: string;
 
     private readonly defaultInvalidResetTokenErrorData: ErrorData = {

projects/ngx-material-auth/src/components/login/login.component.html

@@ -1,6 +1,6 @@
 <!-- eslint-disable angular/no-call-expression -->
 <div class="mat-elevation-z8 login-box">
-    <i class="title-icon fas fa-circle-user"></i>
+    <fa-icon class="title-icon" [icon]="faCircleUser"></fa-icon>
     <h1>{{loginTitle}}</h1>
 
     <form #formControl="ngForm" (ngSubmit)="onSubmit(formControl)">
@@ -20,7 +20,7 @@ <h1>{{loginTitle}}</h1>
                 [type]="hide ? 'password' : 'text'"
                 [(ngModel)]="password">
             <button class="hide-password" type="button" mat-icon-button matSuffix (click)="$event.stopPropagation(); hide = !hide">
-                <i class="fas" [class.fa-eye-slash]="hide" [class.fa-eye]="!hide"></i>
+                <fa-icon style="line-height: 1;" [icon]="hide ? faEyeSlash : faEye"></fa-icon>
             </button>
             <mat-error>{{getValidationErrorMessage(pw)}}</mat-error>
         </mat-form-field>

projects/ngx-material-auth/src/components/login/login.component.scss

@@ -3,6 +3,7 @@
     border-radius: 5px;
 
     .title-icon {
+        display: block;
         width: 100%;
         text-align: center;
         font-size: 50px;
@@ -12,6 +13,7 @@
     h1 {
         text-align: center;
         margin-bottom: 8px;
+        font-size: 24px;
     }
 
     mat-form-field,

projects/ngx-material-auth/src/components/login/login.component.ts

@@ -4,6 +4,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { Router, RouterModule } from '@angular/router';
+import { FaIconComponent, IconDefinition } from '@fortawesome/angular-fontawesome';
+import { faCircleUser, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 
 import { BaseAuthData } from '../../models/base-auth-data.model';
 import { BaseRole } from '../../models/base-role.model';
@@ -40,7 +42,8 @@ export interface ForgotPasswordLinkData {
         MatFormFieldModule,
         RouterModule,
         MatInputModule,
-        MatButtonModule
+        MatButtonModule,
+        FaIconComponent
     ]
 })
 export class NgxMatAuthLoginComponent<
@@ -124,6 +127,13 @@ export class NgxMatAuthLoginComponent<
      */
     hide: boolean = true;
 
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faCircleUser: IconDefinition = faCircleUser;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faEye: IconDefinition = faEye;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    faEyeSlash: IconDefinition = faEyeSlash;
+
     constructor(
         @Inject(NGX_AUTH_SERVICE)
         protected readonly authService: AuthServiceType,