github-plugin/src/main/ts/gr-github-oauth-progress.ts

import { PluginApi } from '@gerritcodereview/typescript-api/plugin';
import { AuthInfo } from '@gerritcodereview/typescript-api/rest-api';
import { CSSResult, LitElement, css, html } from "lit";
import { customElement, property, query, state } from 'lit/decorators.js';

@customElement('gr-github-oauth-progress')
export class GrGitHubOAuthProgress extends LitElement {
    @query('#gitHubOAuthProgress')
    gitHubOAuthProgress?: HTMLDialogElement;

    @property() plugin!: PluginApi;

    @state() authInfo?: AuthInfo;

    @state() loggedIn?: boolean;

    @state() currentNavigationPath?: string;

    override connectedCallback() {
        super.connectedCallback();
        const restApi = this.plugin.restApi();
        if (!this.authInfo) {
            restApi.getConfig().then(config => this.authInfo = config?.auth);
        }
        restApi.getLoggedIn().then(loggedIn => this.loggedIn = loggedIn);
        document.addEventListener(
          'nav-report',
          // the `nav-report` event is emitted before `window.location` is updated, in order
          // to get the current location, we need to delay `this.updateLocationPath` execution
          // by putting it on the end of processing queue
          () => setTimeout(() => this.updateLocationPath(), 0));
        this.updateLocationPath();
    }

    static override get styles() {
        return [
            window.Gerrit.styles.spinner as CSSResult,
            window.Gerrit.styles.font as CSSResult,
            window.Gerrit.styles.modal as CSSResult,
            css`
            .loginButton {
                --gr-button-text-color: var(--header-text-color);
                color: var(--header-text-color);
                padding: var(--spacing-m) var(--spacing-l);
            }
            .loadingContainer {
                display: flex;
                gap: var(--spacing-s);
                align-items: baseline;
                padding: var(--spacing-xxl);
            }
            .loadingSpin {
                vertical-align: top;
                position: relative;
                top: 3px;
            }
          `];
    }

    override render() {
        if (!this.authInfo || this.loggedIn !== false) {
            return;
        }
        const loginWithRedirect = new URL(this.authInfo.login_url ?? "/", window.location.origin);
        if (this.currentNavigationPath) {
          loginWithRedirect.pathname = loginWithRedirect.pathname + this.currentNavigationPath;
        }

        return html`
            <a class="loginButton" href="${loginWithRedirect}" @click=${this.showModal}>
                ${this.authInfo.login_text}
            </a>
            <dialog id="gitHubOAuthProgress">
                <div class="loadingContainer">
                    <span class="loadingSpin"></span>
                    <span class="loadingText">Waiting for GitHub API response ...</span>
                </div>
           </dialog>
        `
    }

    private updateLocationPath() {
        this.currentNavigationPath = window.location.pathname;
    }

    private showModal() {
        setTimeout(() => this.gitHubOAuthProgress?.showModal(), 550);
    }
}