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 { CapableWidget, WIDGET_API_VERSION_OPENID } 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...";

    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;
    }

    protected onSupportedVersionsFound(): void {
        super.onSupportedVersionsFound();
        if (!this.doesSupportAtLeastVersion(WIDGET_API_VERSION_OPENID)) {
            this.busy = true;
            this.error = true;
            this.hasOpenId = false;
            this.blocked = false;
            this.stateMessage = "Your client is too old to use this widget, sorry";
        } else {
            this.busy = false;
            this.error = false;
            this.hasOpenId = false;
            this.blocked = false;
            this.stateMessage = null;
        }
        this.changeDetector.detectChanges();
    }

    public async onReauthStart(): Promise<any> {
        this.busy = true;
        this.error = false;
        this.blocked = false;
        this.hasOpenId = false;
        this.stateMessage = "Please accept the prompt to verify your identity";

        const response = await this.getOpenIdInfo();
        if (response.blocked) {
            this.busy = false;
            this.blocked = true;
            this.hasOpenId = false;
            this.stateMessage = "";
            return;
        }

        try {
            await this.exchangeOpenIdInfo(response.openId);
        } catch (e) {
            console.error(e);
            this.busy = false;
            this.error = true;
            this.hasOpenId = false;
            this.stateMessage = "";
        }
    }

    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;
    }
}