1632 la modale dauthentification le bouton se connecter et rester anonyme

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" },

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" },

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);
+}

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 @@
     <font size="3" color="red">{{ error }}</font>
   </div>
 </form>
+
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner [diameter]="40"></mat-spinner>
+</div>

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;
+}

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
+      );
+    }
+  }
+}

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

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",

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;

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);