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

Code before:

    renderLoginSources(sources: LoginSource[], showLabels: boolean) {
        const key = ({ name }: LoginSource, idx: number) => `${name}${idx}`;
        const content = (source: LoginSource) => this.renderSource(source, showLabels);
        const promoted = (a: LoginSource) => !!a.promoted;

        // Sort promoted sources to show up first
        const sortby = (a: LoginSource, b: LoginSource) =>
            match([promoted(a), promoted(b)])
                .with([true, false], () => -1)
                .with([false, true], () => 1)
                .otherwise(() => 0);

        const sortedSources = [...sources].sort(sortby);

        return html`<fieldset
            slot="footer"
            part="source-list"
            role="group"
            name="login-sources"
            class="pf-c-form__group"
        >
            <legend class="sr-only">${msg("Login sources")}</legend>
            ${repeat(sortedSources, key, content)}
        </fieldset> `;
    }

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


Review comment (suggestion):
```suggestion
protected renderLoginSources(sources: LoginSource[], showLabels: boolean): SlottedTemplateResult {
        return guard([sources, showLabels], () => {
            const key = ({ name }: LoginSource, idx: number) => `${name}${idx}`;
            const content = (source: LoginSource) => this.renderSource(source, showLabels);
            const promoted = (a: LoginSource) => !!a.promoted;

            // Sort promoted sources to show up first
            const sortby = (a: LoginSource, b: LoginSource) =>
                match([promoted(a), promoted(b)])
                    .with([true, false], () => -1)
                    .with([false, true], () => 1)
                    .otherwise(() => 0);

            const sortedSources = [...sources].sort(sortby);

            return html`<fieldset
                slot="footer"
                part="source-list"
                role="group"
                name="login-sources"
                class="pf-c-form__group"
            >
                <legend class="sr-only">${msg("Login sources")}</legend>
                ${repeat(sortedSources, key, content)}
            </fieldset>`;
        });
    }
```

Code after:

    protected renderLoginSources(sources: LoginSource[], showLabels: boolean) {
        return html`<fieldset
            slot="footer"
            part="source-list"
            role="group"
            name="login-sources"
            class="pf-c-form__group"
        >
            <legend class="sr-only">${msg("Login sources")}</legend>
            ${repeat(
                [...sources].sort(sortLoginSources),
                (source, idx) => source.name + idx,
                (source) => this.renderLoginSource(source, showLabels),
            )}
        </fieldset> `;
    }

    protected renderIdentificationStage(challenge: IdentificationChallenge) {
        const { applicationPre, passwordlessUrl, showSourceLabels, sources = [] } = challenge;

        return html`
            <form class="pf-c-form" @submit=${this.submitForm}>
                ${applicationPre ? this.renderPrelude(applicationPre) : nothing}
                ${this.renderInput(challenge)}
                ${passwordlessUrl ? this.renderPasswordlessUrl(passwordlessUrl) : nothing}
            </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"