matrix-dimension/web/app/widget-wrappers/reauth-example/reauth-example.component.ts

import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
import { ScalarWidgetApi } from "../../shared/services/scalar/scalar-widget.api";
import { Subscription } from "rxjs";
import { CapableWidget } from "../capable-widget";
import { ActivatedRoute } from "@angular/router";
import { ScalarServerApiService } from "../../shared/services/scalar/scalar-server-api.service";
import { SessionStorage } from "../../shared/SessionStorage";
import { FE_ScalarOpenIdRequestBody } from "../../shared/models/scalar-server-responses";

@Component({
    selector: "my-reauth-example-widget-wrapper",
    templateUrl: "reauth-example.component.html",
    styleUrls: ["reauth-example.component.scss"],
})
export class ReauthExampleWidgetWrapperComponent extends CapableWidget implements OnInit, OnDestroy {

    public busy = true; // busy until we load supported versions
    public hasOpenId = false;
    public userId: string;
    public blocked = false;
    public error = false;
    public stateMessage = "Checking client version...";

    private widgetReplySubscription: Subscription;
    private widgetRequestSubscription: Subscription;

    constructor(activatedRoute: ActivatedRoute,
                private scalarApi: ScalarServerApiService,
                private changeDetector: ChangeDetectorRef) {
        super();

        const params: any = activatedRoute.snapshot.queryParams;
        ScalarWidgetApi.widgetId = params.widgetId;
    }

    public get widgetId(): string {
        return ScalarWidgetApi.widgetId;
    }

    public ngOnInit(): void {
        super.ngOnInit();
        this.widgetReplySubscription = ScalarWidgetApi.replyReceived.subscribe(async response => {
            const data = response.response;

            if (response.action === "supported_api_versions") {
                if (!data || !data.supported_versions) {
                    this.stateMessage = "Invalid API version response";
                    this.changeDetector.detectChanges();
                    return;
                }

                if (data.supported_versions.indexOf("0.0.2") === -1) {
                    this.stateMessage = "Your client is not supported by this widget.";
                    this.changeDetector.detectChanges();
                    return;
                }

                this.busy = false;
                this.stateMessage = "";
                this.changeDetector.detectChanges();
                return;
            }

            if (response.action !== "get_openid") return;

            try {
                if (data.state === "request") {
                    this.stateMessage = "Waiting for you to accept the prompt...";
                } else if (data.state === "allowed") {
                    await this.exchangeOpenIdInfo(data);
                } else {
                    this.blocked = true;
                    this.busy = false;
                    this.hasOpenId = false;
                    this.stateMessage = null;
                }
            } catch (e) {
                console.error(e);
                this.error = true;
                this.busy = false;
                this.stateMessage = null;
            }

            this.changeDetector.detectChanges();
        });

        this.widgetRequestSubscription = ScalarWidgetApi.requestReceived.subscribe(async request => {
            if (request.action !== "openid_credentials") return;
            ScalarWidgetApi.replyAcknowledge(request);

            try {
                if (request.data.success) {
                    await this.exchangeOpenIdInfo(request.data);
                } else {
                    this.blocked = true;
                    this.busy = false;
                    this.stateMessage = null;
                }
            } catch (e) {
                console.error(e);
                this.error = true;
                this.busy = false;
                this.stateMessage = null;
            }

            this.changeDetector.detectChanges();
        });
    }

    public ngOnDestroy() {
        super.ngOnDestroy();
        if (this.widgetReplySubscription) this.widgetReplySubscription.unsubscribe();
        if (this.widgetRequestSubscription) this.widgetRequestSubscription.unsubscribe();
    }

    protected onCapabilitiesSent(): void {
        super.onCapabilitiesSent();

        // Start a request for supported API versions
        ScalarWidgetApi.requestSupportedVersions();
    }

    public onReauthStart(): void {
        this.busy = true;
        this.error = false;
        this.blocked = false;
        this.hasOpenId = false;
        ScalarWidgetApi.requestOpenID();
    }

    private async exchangeOpenIdInfo(openId: FE_ScalarOpenIdRequestBody) {
        this.stateMessage = "Exchanging OpenID credentials for token...";
        this.changeDetector.detectChanges();
        const scalarTokenResp = await this.scalarApi.register(openId);
        SessionStorage.scalarToken = scalarTokenResp.scalar_token;
        const userInfo = await this.scalarApi.getAccount();
        this.hasOpenId = true;
        this.userId = userInfo.user_id;
        this.blocked = false;
        this.busy = false;
        this.stateMessage = null;
    }
}