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

Code before:

    renderApplicationPre(applicationPre: string) {
        return html`<p>${msg(str`Login to continue to ${applicationPre}.`)}</p>`;
    }

    dispatchChallengeToHost = (challenge: LoginChallengeTypes) => {
        if (!this.host) return;
        this.host.challenge = challenge;
    };

    renderDefaultSource(source: LoginSource, showLabels: boolean) {
        const icon = renderSourceIcon(source.name, source.iconUrl);
        return html`<button
            type="button"
            @click=${() => this.dispatchChallengeToHost(source.challenge)}
            part="source-item"
            name=${`source-${kebabCase(source.name)}`}
            class="pf-c-button source-button"
            aria-label=${msg(str`Continue with ${source.name}`)}
        >
            <span class="pf-c-button__icon pf-m-start">${icon}</span>
            ${showLabels ? source.name : ""}
        </button>`;
    }

    renderPromotedSource(source: LoginSource) {
        return html`<button
            type="button"
            @click=${() => this.dispatchChallengeToHost(source.challenge)}
            part="source-item source-item-promoted"
            name=${`source-${kebabCase(source.name)}`}
            class="pf-c-button pf-m-primary pf-m-block source-button source-button-promoted"
            aria-label=${msg(str`Continue with ${source.name}`)}
        >
            ${msg(str`Continue with ${source.name}`)}
        </button>`;
    }

    renderSource(source: LoginSource, showLabels: boolean) {
        return source.promoted
            ? this.renderPromotedSource(source)
            : this.renderDefaultSource(source, showLabels);
    }

    renderRecoveryPhase() {
        const message = msg(
            "Enter the email associated with your account, and we'll send you a link to reset your password.",
        );
        return html` <p>${message}</p> `;
    }


Review comment (suggestion):
```suggestion
    protected renderPromotedSource(source: LoginSource): SlottedTemplateResult {
```

Code after:
    }

    protected override onSubmitFailure(): void {
        const captchaInput = this.#captchaInputRef.value;

        if (captchaInput) {
            captchaInput.value = "";
        }

        this.captchaRefreshedAt = new Date();
    }

    #dispatchChallengeToHost = (challenge: LoginChallengeTypes) => {
        if (!this.host) return;
        this.host.challenge = challenge;
    };

    protected renderRecoveryMessage() {
        return html`
            <p>${msg("Enter the email address or username associated with your account.")}</p>
        `;
    }

    protected renderUidField(
        id: string,
        type: string,
        label: string,
        username: EmptyString,
        autocomplete: string,
    ) {
        return html`<input
            id=${id}
            type=${type}
            name="uidField"
            placeholder=${label}
            autofocus
            autocomplete=${autocomplete}
            spellcheck="false"
            class="pf-c-form-control"
            value=${username ?? ""}
            required
        />`;
    }

    protected renderPasswordFields(challenge: IdentificationChallenge) {
        const { allowShowPassword } = challenge;
        return html`
            <ak-flow-input-password
                label=${msg("Password")}
                input-id="ak-stage-identification-password"
                class="pf-c-form__group"