refactor - login und auth

src/app/shared/components/ui/button/button.component.css

@@ -134,3 +134,42 @@
   visibility: visible;
   transform: translateX(-50%) translateY(-12px);
 }
+
+
+.btn.is-loading {
+  cursor: wait;
+}
+
+.btn-content.is-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+
+/* Der Lade-Spinner */
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.2rem;
+  height: 1.2rem;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff; /* Farbe des sich drehenden Teils */
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* Spinner-Farbe für nicht-primäre Buttons anpassen */
+.btn-secondary .spinner,
+.btn-stroked .spinner,
+.btn-flat .spinner,
+.btn-icon .spinner {
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-top-color: var(--color-primary);
+}
+
+@keyframes spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}

src/app/shared/components/ui/button/button.component.html

@@ -1,6 +1,8 @@
+<!-- /src/app/shared/components/ui/button/button.component.html -->
+
 <button
   [type]="submitType"
-  [disabled]="disabled"
+  [disabled]="disabled || isLoading"  
   class="btn"
   [class.btn-primary]="buttonType === 'primary'"
   [class.btn-secondary]="buttonType === 'secondary'"
@@ -9,7 +11,14 @@
   [class.btn-icon]="buttonType === 'icon' || buttonType === 'icon-danger'"
   [class.btn-icon-danger]="buttonType === 'icon-danger'"
   [class.btn-full-width]="fullWidth"
+  [class.is-loading]="isLoading" 
 >
-  <app-icon *ngIf="iconName" [iconName]="iconName" [svgColor]="svgColor"></app-icon>
-  <ng-content></ng-content>
-</button>
+  <div *ngIf="isLoading" class="spinner"></div>
+
+  <div class="btn-content" [class.is-hidden]="isLoading">
+    <app-icon *ngIf="iconName" [iconName]="iconName" [svgColor]="svgColor"></app-icon>
+    <span>
+      <ng-content></ng-content>
+    </span>
+  </div>
+</button>

src/app/shared/components/ui/button/button.component.ts

@@ -19,6 +19,7 @@ export class ButtonComponent {
   @Input() fullWidth = false;
   @Input() iconName: string | null = null; 
   @Input() svgColor: string | null = null;
+  @Input() isLoading = false;
   
   // Der Tooltip-Input
   @Input() tooltip: string | null = null;