otp.component.ts

import { Component, OnInit } from '@angular/core';
import { SignaturesContentService } from '../../service/signatures.service';
import { NotificationService } from '../../service/notification.service';
import { HttpClient } from '@angular/common/http';
import { MatDialog } from '@angular/material/dialog';
import { map, finalize, tap, catchError } from 'rxjs/operators';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '../../service/auth.service';
import { AlertController, ModalController, PopoverController } from '@ionic/angular';
import { of } from 'rxjs';
import { OtpService } from '../../document/visa-workflow/otps/otp.service';

export interface Connector {
    id: string;
    type: string;
    label: string;
    apiUri: string;
    apiKey: string;
    securityModes: string[];
    message: any;
}

@Component({
    selector: 'app-administration-otp',
    templateUrl: 'otp.component.html',
    styleUrls: ['../administration.scss', 'otp.component.scss'],
})

export class OtpComponent implements OnInit {

    creationMode: boolean = true;
    loading: boolean = true;
    connector: Connector;
    connectorClone: Connector;
    title: string = '';

    apiDefaultUri = {
        yousign : 'https://api.yousign.com/'
    };

    securityModes: string[] =  [
        'sms',
        'email'
    ];

    connectorTypes: any[] = [];

    constructor(
        public http: HttpClient,
        private translate: TranslateService,
        private route: ActivatedRoute,
        private router: Router,
        public signaturesService: SignaturesContentService,
        public notificationService: NotificationService,
        public dialog: MatDialog,
        public authService: AuthService,
        public popoverController: PopoverController,
        public modalController: ModalController,
        public alertController: AlertController,
        public otpService: OtpService,
    ) {
        this.getConnectorTypes();
        this.connector = {
            id: '',
            type: this.connectorTypes[0].id,
            label: '',
            apiUri: this.apiDefaultUri[this.connectorTypes[0]],
            apiKey: '',
            securityModes: ['sms'],
            message : {
                sms: '',
                email: ''
            }
        };
    }

    ngOnInit(): void {
        this.route.params.subscribe(async (params: any) => {
            if (params['id'] === undefined) {
                this.creationMode = true;
                this.title = this.translate.instant('lang.otpConnectorCreation');
                this.loading = false;
                this.connectorClone = JSON.parse(JSON.stringify(this.connector));
            } else {
                this.creationMode = false;
                await this.getConfig(params['id']);
            }
        });
    }

    getConfig(id: any) {
        return new Promise((resolve) => {
            this.http.get('../rest/connectors/' + id)
                .pipe(
                    map((data: any) => data.otp),
                    tap((data: any) => {
                        this.connector = data;
                        this.connectorClone = JSON.parse(JSON.stringify(this.connector));
                        this.title = this.connector.label;
                    }),
                    finalize(() => {
                        this.loading = false;
                    }),
                    catchError((err: any) => {
                        this.notificationService.handleErrors(err);
                        return of(false);
                    })
                )
                .subscribe();
        });
    }

    getConnectorTypes() {
        this.connectorTypes = this.otpService.getConnectorTypes().map((item: any) => ({
            id: item,
            logo: null
        }));

        this.connectorTypes.forEach(async element => {
            element.logo = await this.otpService.getUserOtpIcon(element.id);
        });
    }

    canValidate() {
        if (this.connector.label === this.connectorClone.label) {
            return false;
        } else {
            return true;
        }
    }

    onSubmit() {
        this.connector.message.sms = !this.connector.securityModes.includes('sms') ? '' : this.connector.message.sms;
        this.connector.message.email = !this.connector.securityModes.includes('email') ? '' : this.connector.message.email;
        if (this.creationMode) {
            this.createconnector();
        } else {
            this.modifyconnector();
        }
    }

    modifyconnector() {
        this.loading = true;
        this.http.put('../rest/connectors/' + this.connector.id, this.connector)
            .pipe(
                tap(() => {
                    this.router.navigate(['/administration/otps']);
                    this.notificationService.success('lang.connectorUpdated');
                }),
                catchError((err: any) => {
                    this.notificationService.handleErrors(err);
                    return of(false);
                })
            )
            .subscribe();
    }

    createconnector() {
        this.loading = true;
        this.http.post('../rest/connectors', this.connector)
            .pipe(
                tap((data: any) => {
                    this.router.navigate(['/administration/otps/' + data.id]);
                    this.notificationService.success('lang.connectorAdded');
                }),
                catchError((err: any) => {
                    this.notificationService.handleErrors(err);
                    return of(false);
                })
            )
            .subscribe();
    }

    async deleteconnector() {
        const alert = await this.alertController.create({
            // cssClass: 'custom-alert-danger',
            header: this.translate.instant('lang.confirmMsg'),
            buttons: [
                {
                    text: this.translate.instant('lang.no'),
                    role: 'cancel',
                    cssClass: 'secondary',
                    handler: () => { }
                },
                {
                    text: this.translate.instant('lang.yes'),
                    handler: () => {
                        this.http.delete('../rest/connectors/' + this.connector.id)
                            .pipe(
                                tap(() => {
                                    this.router.navigate(['/administration/otps']);
                                    this.notificationService.success('lang.connectorDeleted');
                                }),
                                catchError((err: any) => {
                                    this.notificationService.handleErrors(err);
                                    return of(false);
                                })
                            )
                            .subscribe();
                    }
                }
            ]
        });

        await alert.present();
    }

    toggleSecurityMode(ev: any) {
        if (ev.checked) {
            this.connector.securityModes.push(ev.value);
        } else {
            const index = this.connector.securityModes.indexOf(ev.value);
            this.connector.securityModes.splice(index, 1);
        }
    }

    isCheckedSecurityMode(value: string) {
        return this.connector.securityModes.indexOf(value) > -1;
    }

    cancel() {
        this.router.navigate(['/administration/otps']);
    }

}