Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Add classes to create-account modal for easier customization (#17435) 

Adds BEM-style classes to the input-group elements, and a dynamic class to the create-account-form element that reflects which auth provider is being used (if any).
This commit is contained in:
tshenry 2022-07-12 10:29:02 -07:00 committed by GitHub
parent be29197f62
commit 2e7e48d982
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/discourse/app/templates/modal/create-account.hbs
View File

@ -2,7 +2,7 @@
{{#unless this.complete}} {{#unless this.complete}}
<PluginOutlet @name="create-account-before-modal-body" @tagName="span" @connectorTagName="div" /> <PluginOutlet @name="create-account-before-modal-body" @tagName="span" @connectorTagName="div" />
<DModalBody @class={{this.modalBodyClasses}} @preventModalAlertHiding={{true}}> <DModalBody @class={{this.modalBodyClasses}} @preventModalAlertHiding={{true}}>
<div class="create-account-form"> <div class="create-account-form {{this.authOptions.auth_provider}}">
<div class="login-welcome-header" id="create-account-title"> <div class="login-welcome-header" id="create-account-title">
<h1 class="login-title">{{i18n "create_account.header_title"}}</h1> <img src={{this.wavingHandURL}} alt="" class="waving-hand"> <h1 class="login-title">{{i18n "create_account.header_title"}}</h1> <img src={{this.wavingHandURL}} alt="" class="waving-hand">
<p class="login-subheader">{{i18n "create_account.subheader_title"}}</p> <p class="login-subheader">{{i18n "create_account.subheader_title"}}</p>
@ -28,7 +28,7 @@
<span class="more-info">{{i18n "user.email.instructions"}}</span> <span class="more-info">{{i18n "user.email.instructions"}}</span>
</div> </div>
<div class="input-group"> <div class="input-group create-account__username">
<Input @value={{this.accountUsername}} disabled={{this.usernameDisabled}} class={{value-entered this.accountUsername}} id="new-account-username" name="username" maxlength={{this.maxUsernameLength}} aria-describedby="username-validation" aria-invalid={{this.usernameValidation.failed}} autocomplete="off" /> <Input @value={{this.accountUsername}} disabled={{this.usernameDisabled}} class={{value-entered this.accountUsername}} id="new-account-username" name="username" maxlength={{this.maxUsernameLength}} aria-describedby="username-validation" aria-invalid={{this.usernameValidation.failed}} autocomplete="off" />
<label class="alt-placeholder" for="new-account-username"> <label class="alt-placeholder" for="new-account-username">
{{i18n "user.username.title"}} {{i18n "user.username.title"}}
@ -41,7 +41,7 @@
<span class="more-info">{{i18n "user.username.instructions"}}</span> <span class="more-info">{{i18n "user.username.instructions"}}</span>
</div> </div>
<div class="input-group"> <div class="input-group create-account__fullname">
{{#if this.fullnameRequired}} {{#if this.fullnameRequired}}
<TextField @disabled={{this.nameDisabled}} @value={{this.accountName}} @id="new-account-name" @class={{value-entered this.accountName}} @aria-describedby="fullname-validation" @aria-invalid={{this.nameValidation.failed}} /> <TextField @disabled={{this.nameDisabled}} @value={{this.accountName}} @id="new-account-name" @class={{value-entered this.accountName}} @aria-describedby="fullname-validation" @aria-invalid={{this.nameValidation.failed}} />
<label class="alt-placeholder" for="new-account-name"> <label class="alt-placeholder" for="new-account-name">
@ -66,7 +66,7 @@
authOptions=this.authOptions authOptions=this.authOptions
}} /> }} />
<div class="input-group"> <div class="input-group create-account__password">
{{#if this.passwordRequired}} {{#if this.passwordRequired}}
<PasswordField @value={{this.accountPassword}} @class={{value-entered this.accountPassword}} @type="password" @id="new-account-password" @autocomplete="current-password" @capsLockOn={{this.capsLockOn}} @aria-describedby="password-validation" @aria-invalid={{this.passwordValidation.failed}} /> <PasswordField @value={{this.accountPassword}} @class={{value-entered this.accountPassword}} @type="password" @id="new-account-password" @autocomplete="current-password" @capsLockOn={{this.capsLockOn}} @aria-describedby="password-validation" @aria-invalid={{this.passwordValidation.failed}} />
<label class="alt-placeholder" for="new-account-password"> <label class="alt-placeholder" for="new-account-password">
@ -91,7 +91,7 @@
</div> </div>
{{#if this.requireInviteCode }} {{#if this.requireInviteCode }}
<div class="input-group"> <div class="input-group create-account__invite-code">
<Input @value={{this.inviteCode}} class={{value-entered this.inviteCode}} id="inviteCode" /> <Input @value={{this.inviteCode}} class={{value-entered this.inviteCode}} id="inviteCode" />
<label class="alt-placeholder" for="invite-code">{{i18n "user.invite_code.title"}}</label> <label class="alt-placeholder" for="invite-code">{{i18n "user.invite_code.title"}}</label>
<span class="more-info">{{i18n "user.invite_code.instructions"}}</span> <span class="more-info">{{i18n "user.invite_code.instructions"}}</span>