DEV: Add plugin outlet to login form (#33609)

**Description**
Currently, we don't have a way to customize the login template layout,
this change will allow for easier customization through plugins and
themes.
This commit is contained in:
Juan David Martínez Cubillos
2025-08-01 10:56:21 -05:00
committed by GitHub
parent ac3428f930
commit ce668c1af8
3 changed files with 46 additions and 25 deletions
@@ -170,7 +170,7 @@ export default class LocalLoginForm extends Component {
<div class="input-group" {{didInsert this.passkeyConditionalLogin}}>
<Input
{{on "focusin" this.scrollInputIntoView}}
@value={{@loginName}}
value={{@loginName}}
@type="email"
id="login-account-name"
class={{valueEntered @loginName}}
@@ -202,7 +202,8 @@ export default class LocalLoginForm extends Component {
<PasswordField
{{on "focusin" this.scrollInputIntoView}}
{{on "keydown" this.loginOnEnter}}
@value={{@loginPassword}}
{{on "input" @loginPasswordChanged}}
value={{@loginPassword}}
@capsLockOn={{this.capsLockOn}}
type={{if this.maskPassword "password" "text"}}
disabled={{this.disableLoginFields}}
@@ -202,6 +202,11 @@ export default class LoginPageController extends Controller {
this.loginName = event.target.value;
}
@action
loginPasswordChanged(event) {
this.loginPassword = event.target.value;
}
@action
showCreateAccount(createAccountProps = {}) {
if (this.site.isReadOnly) {
@@ -244,7 +249,6 @@ export default class LoginPageController extends Controller {
if (this.loginDisabled) {
return;
}
if (isEmpty(this.loginName) || isEmpty(this.loginPassword)) {
this.flash = i18n("login.blank_username_or_password");
this.flashType = "error";
@@ -71,11 +71,13 @@ export default RouteTemplate(
/>
</WelcomeHeader>
{{#if @controller.showLoginButtons}}
<LoginButtons
@externalLogin={{@controller.externalLoginAction}}
@passkeyLogin={{@controller.passkeyLogin}}
@context="login"
/>
{{/if}}
{{/if}}
@@ -91,28 +93,39 @@ export default RouteTemplate(
/>
</WelcomeHeader>
{{/if}}
<LocalLoginForm
@loginName={{@controller.loginName}}
@loginNameChanged={{@controller.loginNameChanged}}
@canLoginLocalWithEmail={{@controller.canLoginLocalWithEmail}}
@canUsePasskeys={{@controller.canUsePasskeys}}
@passkeyLogin={{@controller.passkeyLogin}}
@loginPassword={{@controller.loginPassword}}
@secondFactorMethod={{@controller.secondFactorMethod}}
@secondFactorToken={{@controller.secondFactorToken}}
@backupEnabled={{@controller.backupEnabled}}
@totpEnabled={{@controller.totpEnabled}}
@securityKeyAllowedCredentialIds={{@controller.securityKeyAllowedCredentialIds}}
@securityKeyChallenge={{@controller.securityKeyChallenge}}
@showSecurityKey={{@controller.showSecurityKey}}
@otherMethodAllowed={{@controller.otherMethodAllowed}}
@showSecondFactor={{@controller.showSecondFactor}}
@handleForgotPassword={{@controller.handleForgotPassword}}
@login={{@controller.triggerLogin}}
@flashChanged={{@controller.flashChanged}}
@flashTypeChanged={{@controller.flashTypeChanged}}
@securityKeyCredentialChanged={{@controller.securityKeyCredentialChanged}}
/>
<PluginOutlet
@name="login-wrapper"
@outletArgs={{lazyHash
externalLoginAction=@controller.externalLoginAction
}}
>
<LocalLoginForm
@loginName={{@controller.loginName}}
@loginNameChanged={{@controller.loginNameChanged}}
@canLoginLocalWithEmail={{@controller.canLoginLocalWithEmail}}
@canUsePasskeys={{@controller.canUsePasskeys}}
@passkeyLogin={{@controller.passkeyLogin}}
@loginPassword={{@controller.loginPassword}}
@loginPasswordChanged={{@controller.loginPasswordChanged}}
@secondFactorMethod={{@controller.secondFactorMethod}}
@secondFactorToken={{@controller.secondFactorToken}}
@backupEnabled={{@controller.backupEnabled}}
@totpEnabled={{@controller.totpEnabled}}
@securityKeyAllowedCredentialIds={{@controller.securityKeyAllowedCredentialIds}}
@securityKeyChallenge={{@controller.securityKeyChallenge}}
@showSecurityKey={{@controller.showSecurityKey}}
@otherMethodAllowed={{@controller.otherMethodAllowed}}
@showSecondFactor={{@controller.showSecondFactor}}
@handleForgotPassword={{@controller.handleForgotPassword}}
@login={{@controller.triggerLogin}}
@flashChanged={{@controller.flashChanged}}
@flashTypeChanged={{@controller.flashTypeChanged}}
@securityKeyCredentialChanged={{@controller.securityKeyCredentialChanged}}
/>
</PluginOutlet>
{{#if @controller.site.desktopView}}
<LoginPageCta
@canLoginLocal={{@controller.canLoginLocal}}
@@ -132,6 +145,7 @@ export default RouteTemplate(
{{#if
(and @controller.showLoginButtons @controller.site.desktopView)
}}
{{#unless @controller.canLoginLocal}}
<div class="login-left-side">
<WelcomeHeader @header={{i18n "login.header_title"}} />
@@ -146,6 +160,7 @@ export default RouteTemplate(
/>
</div>
{{/if}}
{{/if}}
{{/if}}
@@ -164,6 +179,7 @@ export default RouteTemplate(
/>
{{/unless}}
{{/if}}
</div>
<PluginOutlet @name="below-login-page" />
</div>