feat: add providers OAuth

2024-12-18 07:02:08 +03:00
parent a2d4151cc3
commit 86e6f59567
4 changed files with 255 additions and 2 deletions
--- a/src/components/OAuthProviders/OAuthProviders.ts
+++ b/src/components/OAuthProviders/OAuthProviders.ts
@ -0,0 +1,126 @@
+import {Component, Inject, Input, OnInit} from '@angular/core';
+import AuthApiService, {OAuthProviderData} from "@api/v1/authApiService";
+import {OAuthProvider} from "@model/oAuthProvider";
+import {ToastrService} from "ngx-toastr";
+import {
+  MAT_DIALOG_DATA, MatDialog,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatButton} from "@angular/material/button";
+
+interface AvailableOAuthProviders extends OAuthProviderData {
+  disabled: boolean;
+}
+
+@Component({
+  selector: 'app-delete-confirm-dialog',
+  template: `
+    <h1 mat-dialog-title>Удалить провайдера?</h1>
+    <mat-dialog-content>
+      <p>Вы уверены, что хотите удалить провайдера {{ data.provider.name }}?</p>
+    </mat-dialog-content>
+    <mat-dialog-actions style="display: flex; justify-content: flex-end;">
+      <button mat-button (click)="onCancel()">Отмена</button>
+      <button mat-raised-button color="warn" (click)="onConfirm()">Удалить</button>
+    </mat-dialog-actions>
+  `,
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatButton
+  ]
+})
+export class DeleteConfirmDialog {
+
+  constructor(
+    public dialogRef: MatDialogRef<DeleteConfirmDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+  }
+
+  onConfirm(): void {
+    this.dialogRef.close(true);
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+}
+
+@Component({
+  selector: 'OAuthProviders',
+  imports: [],
+  templateUrl: './OAuthProviders.html',
+  styleUrl: './OAuthProviders.css',
+  providers: [AuthApiService]
+})
+export class OAuthProviders implements OnInit {
+  protected providers: AvailableOAuthProviders[] = [];
+  protected _activeProvidersId: OAuthProvider[] = [];
+
+  @Input() message: string = 'Вы можете войти в аккаунт через';
+  @Input() activeProviders: string[] = [];
+
+  @Input() set activeProvidersId(data: OAuthProvider[]) {
+    this._activeProvidersId = data;
+    this.updateDisabledProviders();
+  }
+
+  @Input() canUnlink: boolean = false;
+
+  constructor(authApi: AuthApiService, private notify: ToastrService, private dialog: MatDialog) {
+    authApi.availableProviders().subscribe(providers => this.updateDisabledProviders(providers));
+  }
+
+  private updateDisabledProviders(data: OAuthProviderData[] | null = null) {
+    this.providers = (data ?? this.providers).map(provider => {
+      return {
+        ...provider,
+        disabled: this._activeProvidersId.includes(provider.provider) || this.activeProviders.includes(provider.providerName)
+      };
+    });
+  }
+
+  ngOnInit(): void {
+    window.addEventListener('message', (event) => {
+      if (event.data && event.data.success === false) {
+        console.error(event.data.message);
+        this.notify.error(event.data.message, 'OAuth ошибка');
+      } else {
+        this.activeProvidersId.push(event.data.provider);
+        this.updateDisabledProviders();
+      }
+    });
+  }
+
+  protected openOAuth(provider: AvailableOAuthProviders) {
+    console.log(provider.redirect);
+    const oauthWindow = window.open(
+      provider.redirect,
+      '_blank',
+    );
+
+    if (!oauthWindow) {
+      this.notify.error('Не удалось открыть OAuth окно');
+      return;
+    }
+  }
+
+  protected confirmDelete(provider: AvailableOAuthProviders) {
+    const dialogRef = this.dialog.open(DeleteConfirmDialog, {data: {provider}});
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.deleteProvider(provider);
+      }
+    });
+  }
+
+  protected deleteProvider(provider: AvailableOAuthProviders) {
+    // todo: remove provider
+  }
+}