127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
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
|
||
}
|
||
}
|