From 16e25905dc844c6b55038b0b7024bc68277cf99c Mon Sep 17 00:00:00 2001
From: Polianin Nikita <nikitkapolyanin@yandex.ru>
Date: Wed, 18 Dec 2024 08:40:54 +0300
Subject: [PATCH] feat: add spinner

---
 .../OAuthProviders/OAuthProviders.css          |  8 ++++++++
 .../OAuthProviders/OAuthProviders.html         |  6 +++++-
 .../OAuthProviders/OAuthProviders.ts           | 18 +++++++++++++++---
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/OAuthProviders/OAuthProviders.css b/src/components/OAuthProviders/OAuthProviders.css
index 1d16347..54d8214 100644
--- a/src/components/OAuthProviders/OAuthProviders.css
+++ b/src/components/OAuthProviders/OAuthProviders.css
@@ -75,3 +75,11 @@
 .provider-item.provider-unlink:hover::after {
   transform: translate(-50%, -50%) scale(1.0);
 }
+
+.provider-item .provider-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(1.0);
+  border-radius: 50%;
+}
diff --git a/src/components/OAuthProviders/OAuthProviders.html b/src/components/OAuthProviders/OAuthProviders.html
index fa20880..5fe8d02 100644
--- a/src/components/OAuthProviders/OAuthProviders.html
+++ b/src/components/OAuthProviders/OAuthProviders.html
@@ -6,9 +6,13 @@
     <div class="provider-container">
       @for (provider of providers; track $index) {
         <a class="provider-item" (click)="provider.disabled ? confirmDelete(provider) : openOAuth(provider)"
-           [class.disabled]="!canUnlink && provider.disabled" [class.provider-unlink]="canUnlink && provider.disabled">
+           [class.disabled]="!canUnlink && provider.disabled || provider.active"
+           [class.provider-unlink]="canUnlink && provider.disabled">
           <img [alt]="provider.providerName" [src]="provider.icon"
                class="provider-icon" draggable="false"/>
+          @if (provider.active) {
+            <app-data-spinner class="provider-spinner"/>
+          }
         </a>
       }
     </div>
diff --git a/src/components/OAuthProviders/OAuthProviders.ts b/src/components/OAuthProviders/OAuthProviders.ts
index ccbaed9..a39360c 100644
--- a/src/components/OAuthProviders/OAuthProviders.ts
+++ b/src/components/OAuthProviders/OAuthProviders.ts
@@ -10,9 +10,11 @@ import {
   MatDialogTitle
 } from "@angular/material/dialog";
 import {MatButton} from "@angular/material/button";
+import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
 
 interface AvailableOAuthProviders extends OAuthProviderData {
   disabled: boolean;
+  active: boolean;
 }
 
 @Component({
@@ -53,7 +55,9 @@ export class DeleteConfirmDialog {
 
 @Component({
   selector: 'OAuthProviders',
-  imports: [],
+  imports: [
+    DataSpinnerComponent
+  ],
   templateUrl: './OAuthProviders.html',
   styleUrl: './OAuthProviders.css',
   providers: [AuthApiService]
@@ -61,9 +65,14 @@ export class DeleteConfirmDialog {
 export class OAuthProviders implements OnInit {
   protected providers: AvailableOAuthProviders[] = [];
   protected _activeProvidersId: OAuthProvider[] = [];
+  protected _activeProviders: string[] = [];
 
   @Input() message: string = 'Вы можете войти в аккаунт через';
-  @Input() activeProviders: string[] = [];
+
+  @Input() set activeProviders(data: string[]) {
+    this._activeProviders = data;
+    this.updateDisabledProviders();
+  }
 
   @Input() set activeProvidersId(data: OAuthProvider[]) {
     this._activeProvidersId = data;
@@ -80,7 +89,8 @@ export class OAuthProviders implements OnInit {
     this.providers = (data ?? this.providers).map(provider => {
       return {
         ...provider,
-        disabled: this._activeProvidersId.includes(provider.provider) || this.activeProviders.includes(provider.providerName)
+        disabled: this._activeProvidersId.includes(provider.provider) || this._activeProviders.includes(provider.providerName),
+        active: false
       };
     });
   }
@@ -108,6 +118,8 @@ export class OAuthProviders implements OnInit {
       this.notify.error('Не удалось открыть OAuth окно');
       return;
     }
+
+    provider.active = true;
   }
 
   protected confirmDelete(provider: AvailableOAuthProviders) {