Repository: goauthentik/authentik
File: web/src/flow/stages/identification/IdentificationStage.ts (TypeScript)

Code before:

    renderIdentificationStage(challenge: IdentificationChallenge) {
        const {
            passwordlessUrl,
            applicationPre,
            sources,
            showSourceLabels,
            enrollUrl,
            recoveryUrl,
        } = challenge;
        const hasSources = !!sources?.length;
        const hasFooter = !!enrollUrl || !!recoveryUrl;

        // prettier-ignore
        return html`<ak-flow-card .challenge=${challenge} part="flow-card">
            <form class="pf-c-form" @submit=${this.submitForm}>
                ${applicationPre ? this.renderApplicationPre(applicationPre) : nothing}
                ${this.renderInput(challenge)}
                ${passwordlessUrl ? this.renderPasswordlessUrl(passwordlessUrl) : nothing}
            </form>
            ${hasSources ? this.renderLoginSources(sources, showSourceLabels) : nothing}
            ${hasFooter ? this.renderFooter({ enrollUrl, recoveryUrl}) : nothing }
        </ak-flow-card>`;
    }

    render() {
        if (!this.challenge) {
            console.warn("Identification stage called with empty challenge");
            return nothing;
        }

        return this.renderIdentificationStage(this.challenge);
    }

    //#endregion
}

export default IdentificationStage;

declare global {
    interface HTMLElementTagNameMap {
        "ak-stage-identification": IdentificationStage;
    }
}


Review comment (suggestion):
```suggestion
    protected override render(): SlottedTemplateResult {
```

Code after:
            </form>
            ${sources.length ? this.renderLoginSources(sources, showSourceLabels) : nothing}
        `;
    }

    protected renderFooter({ enrollUrl, recoveryUrl }: IdentificationFooter) {
        if (!(enrollUrl || recoveryUrl)) {
            return nothing;
        }

        return html`<fieldset
            slot="footer-band"
            part="additional-actions"
            class="pf-c-login__main-footer-band"
        >
            <legend class="sr-only">${msg("Additional actions")}</legend>
            ${enrollUrl
                ? html`<div class="pf-c-login__main-footer-band-item">
                      ${msg("Need an account?")}
                      <a href="${enrollUrl}" ouiaId="enroll">${msg("Sign up.")}</a>
                  </div>`
                : nothing}
            ${recoveryUrl
                ? html`<div class="pf-c-login__main-footer-band-item">
                      <a href="${recoveryUrl}" ouiaId="recovery"
                          >${msg("Forgot username or password?")}</a
                      >
                  </div>`
                : nothing}
        </fieldset>`;
    }

    public override render() {
        const { challenge } = this;
        const { enrollUrl, recoveryUrl } = challenge ?? {};
        const hasFooter = !!enrollUrl || !!recoveryUrl;

        return html`<ak-flow-card .challenge=${challenge} part="flow-card">
            ${challenge ? this.renderIdentificationStage(challenge) : nothing}
            ${hasFooter ? this.renderFooter({ enrollUrl, recoveryUrl }) : nothing}
        </ak-flow-card>`;
    }

    //#endregion
}

export default IdentificationStage;

declare global {
    interface HTMLElementTagNameMap {
        "ak-stage-identification": IdentificationStage;