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 @@
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) {