From 434ff3518dd4a746365b9717f167603cb266c920 Mon Sep 17 00:00:00 2001 From: Alexandre Caron Date: Fri, 9 Feb 2024 10:01:37 -0500 Subject: [PATCH] refactor(auth): change the behavior of disabling button on request - feat(auth): add the capability to theme the auth package --- packages/auth/ng-package.json | 1 + packages/auth/ng-package.prod.json | 1 + packages/auth/src/auth.theme.scss | 9 +++++++++ .../lib/auth-form/auth-intern.component.html | 5 ++++- .../lib/auth-form/auth-intern.component.scss | 14 ++++++++++++++ .../src/lib/auth-form/auth-intern.theme.scss | 19 +++++++++++++++++++ packages/auth/src/lib/auth.module.ts | 2 ++ packages/auth/src/locale/fr.auth.json | 2 +- packages/core/src/packages.import.scss | 1 + packages/core/src/theming/all-theme.scss | 1 + 10 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 packages/auth/src/auth.theme.scss create mode 100644 packages/auth/src/lib/auth-form/auth-intern.theme.scss diff --git a/packages/auth/ng-package.json b/packages/auth/ng-package.json index 3b4625c3d6..6ee20f2ddf 100644 --- a/packages/auth/ng-package.json +++ b/packages/auth/ng-package.json @@ -7,6 +7,7 @@ }, "allowedNonPeerDependencies": ["jwt-decode", "ts-cacheable", "ts-md5"], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/auth/ng-package.prod.json b/packages/auth/ng-package.prod.json index 71ba51ee79..2101286a57 100644 --- a/packages/auth/ng-package.prod.json +++ b/packages/auth/ng-package.prod.json @@ -6,6 +6,7 @@ }, "allowedNonPeerDependencies": ["jwt-decode", "ts-cacheable", "ts-md5"], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/auth/src/auth.theme.scss b/packages/auth/src/auth.theme.scss new file mode 100644 index 0000000000..9321256c1b --- /dev/null +++ b/packages/auth/src/auth.theme.scss @@ -0,0 +1,9 @@ +@use './lib/auth-form/auth-intern.theme.scss' as auth-intern; + +@mixin themes($theme) { + @include auth-intern.theme($theme); +} + +@mixin colors($theme) { + @include auth-intern.color($theme); +} diff --git a/packages/auth/src/lib/auth-form/auth-intern.component.html b/packages/auth/src/lib/auth-form/auth-intern.component.html index ba3de9f546..45b798f139 100644 --- a/packages/auth/src/lib/auth-form/auth-intern.component.html +++ b/packages/auth/src/lib/auth-form/auth-intern.component.html @@ -32,7 +32,6 @@ mat-raised-button class="anonymous" type="button" - [disabled]="loading" (click)="loginAnonymous()" > {{ 'igo.auth.accessAnonymous' | translate }} @@ -42,3 +41,7 @@ {{ error }} + +
+ +
diff --git a/packages/auth/src/lib/auth-form/auth-intern.component.scss b/packages/auth/src/lib/auth-form/auth-intern.component.scss index 058a644997..91d143f337 100644 --- a/packages/auth/src/lib/auth-form/auth-intern.component.scss +++ b/packages/auth/src/lib/auth-form/auth-intern.component.scss @@ -5,3 +5,17 @@ .anonymous { margin-left: 10px; } + +.loading-container { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + top: 0; + left: 0; + padding: 24px; + box-sizing: border-box; +} diff --git a/packages/auth/src/lib/auth-form/auth-intern.theme.scss b/packages/auth/src/lib/auth-form/auth-intern.theme.scss new file mode 100644 index 0000000000..e562cf6127 --- /dev/null +++ b/packages/auth/src/lib/auth-form/auth-intern.theme.scss @@ -0,0 +1,19 @@ +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($theme) { + @include color($theme); +} + +@mixin color($theme) { + $background: map-get($theme, background); + + igo-auth-intern { + .loading-container { + background-color: change-color( + $color: mat.get-color-from-palette($background, status-bar), + $alpha: 0.64 + ); + } + } +} diff --git a/packages/auth/src/lib/auth.module.ts b/packages/auth/src/lib/auth.module.ts index eb5903dafc..d998ac4ec7 100644 --- a/packages/auth/src/lib/auth.module.ts +++ b/packages/auth/src/lib/auth.module.ts @@ -6,6 +6,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { IgoLanguageModule, StorageService } from '@igo2/core'; @@ -29,6 +30,7 @@ import { ProtectedDirective } from './shared/protected.directive'; MatFormFieldModule, MatInputModule, MatIconModule, + MatProgressSpinnerModule, MatButtonModule, IgoLanguageModule, MsalModule diff --git a/packages/auth/src/locale/fr.auth.json b/packages/auth/src/locale/fr.auth.json index 03891630ec..5b7b663f6e 100644 --- a/packages/auth/src/locale/fr.auth.json +++ b/packages/auth/src/locale/fr.auth.json @@ -3,7 +3,7 @@ "auth": { "accessAnonymous": "Accès public", "connection": "Connexion", - "login": "Connecter", + "login": "Se connecter", "password": "Mot de passe", "signOut": "Se déconnecter", "user": "Utilisateur", diff --git a/packages/core/src/packages.import.scss b/packages/core/src/packages.import.scss index 8b6eb61820..b0faf3dd77 100644 --- a/packages/core/src/packages.import.scss +++ b/packages/core/src/packages.import.scss @@ -1,4 +1,5 @@ @forward './core-theme' show core-component-themes; +@forward '../../auth/src/auth.theme' as auth-component-*; @forward '../../common/src/common-theme' show common-component-themes; @forward '../../context/src/context-theme' show context-component-themes; @forward '../../geo/src/geo-theme' show geo-component-themes; diff --git a/packages/core/src/theming/all-theme.scss b/packages/core/src/theming/all-theme.scss index 523f2b275b..b042609f37 100644 --- a/packages/core/src/theming/all-theme.scss +++ b/packages/core/src/theming/all-theme.scss @@ -8,6 +8,7 @@ @include material-theme-override.material-override($config); @include igo.core-component-themes($config); + @include igo.auth-component-themes($config); @include igo.common-component-themes($config); @include igo.context-component-themes($config); @include igo.geo-component-themes($config);