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

UX: Registration design and validation improvements (#27666)

This commit is contained in:
Jan Cernik 2024-07-04 09:17:07 -03:00 committed by GitHub
parent 8bbb4c5cca
commit 0d608ceff8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 89 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
app/assets/javascripts/discourse/app/components/modal/create-account.hbs
View File

@ -53,17 +53,16 @@
/>
<label class="alt-placeholder" for="new-account-email">
{{i18n "user.email.title"}}
{{~#if this.userFields~}}
<span class="required">*</span>
{{/if}}
</label>
<InputTip
@validation={{this.emailValidation}}
id="account-email-validation"
/>
<span class="more-info" id="account-email-validation-more-info">
{{i18n "user.email.instructions"}}
</span>
{{#unless this.emailValidation.reason}}
<span class="more-info" id="account-email-validation-more-info">
{{i18n "user.email.instructions"}}
</span>
{{/unless}}
</div>
<div class="input-group create-account__username">
@ -80,47 +79,18 @@
/>
<label class="alt-placeholder" for="new-account-username">
{{i18n "user.username.title"}}
{{~#if this.userFields~}}
<span class="required">*</span>
{{/if}}
</label>
<InputTip
@validation={{this.usernameValidation}}
id="username-validation"
/>
<span class="more-info" id="username-validation-more-info">
{{i18n "user.username.instructions"}}
</span>
</div>
{{#unless this.usernameValidation.reason}}
<div class="input-group create-account__fullname">
{{#if this.fullnameRequired}}
<TextField
@disabled={{this.nameDisabled}}
@value={{this.model.accountName}}
@id="new-account-name"
aria-describedby="fullname-validation fullname-validation-more-info"
aria-invalid={{this.nameValidation.failed}}
class={{value-entered this.model.accountName}}
/>
<label class="alt-placeholder" for="new-account-name">
{{i18n "user.name.title"}}
{{#if this.siteSettings.full_name_required}}
{{~#if this.userFields~}}
<span class="required">*</span>
{{/if}}
{{/if}}
</label>
<InputTip
@validation={{this.nameValidation}}
id="fullname-validation"
/>
<span class="more-info" id="fullname-validation-more-info">
{{this.nameInstructions}}
<span class="more-info" id="username-validation-more-info">
{{i18n "user.username.instructions"}}
</span>
{{/if}}
{{/unless}}
</div>
<PluginOutlet
@ -148,9 +118,6 @@
/>
<label class="alt-placeholder" for="new-account-password">
{{i18n "user.password.title"}}
{{~#if this.userFields~}}
<span class="required">*</span>
{{/if}}
</label>
<div class="create-account__password-info">
@ -159,9 +126,11 @@
@validation={{this.passwordValidation}}
id="password-validation"
/>
<span class="more-info" id="password-validation-more-info">
{{this.passwordInstructions}}
</span>
{{#unless this.passwordValidation.reason}}
<span class="more-info" id="password-validation-more-info">
{{this.passwordInstructions}}
</span>
{{/unless}}
<div
class={{concat-class
"caps-lock-warning"
@ -221,6 +190,38 @@
}}
/>
<div
class={{concat-class
"input-group"
"create-account__fullname"
(if this.siteSettings.full_name_required "required")
}}
>
{{#if this.fullnameRequired}}
<TextField
@disabled={{this.nameDisabled}}
@value={{this.model.accountName}}
@id="new-account-name"
aria-describedby="fullname-validation fullname-validation-more-info"
aria-invalid={{this.nameValidation.failed}}
class={{value-entered this.model.accountName}}
/>
<label class="alt-placeholder" for="new-account-name">
{{i18n "user.name.title"}}
</label>
<InputTip
@validation={{this.nameValidation}}
id="fullname-validation"
/>
{{#unless this.nameValidation.reason}}
<span class="more-info" id="fullname-validation-more-info">
{{this.nameInstructions}}
</span>
{{/unless}}
{{/if}}
</div>
{{#if this.userFields}}
<div class="user-fields">
{{#each this.userFields as |f|}}
@ -249,9 +250,11 @@
{{#if this.site.desktopView}}
<div class="d-modal__footer">
<div class="disclaimer">
{{html-safe this.disclaimerHtml}}
</div>
{{#if this.disclaimerHtml}}
<div class="disclaimer">
{{html-safe this.disclaimerHtml}}
</div>
{{/if}}
<div class="d-modal__footer-buttons">
<DButton
@action={{this.createAccount}}
@ -262,6 +265,10 @@
/>
{{#unless this.hasAuthOptions}}
<hr />
<div class="already-have-account">
{{i18n "create_account.already_have_account"}}
</div>
<DButton
@action={{route-action "showLogin"}}
@disabled={{this.formSubmitted}}

2
app/assets/javascripts/discourse/app/components/user-fields/confirm.hbs
View File

@ -1,7 +1,7 @@
{{#if this.field.name}}
<label class="control-label">
{{this.field.name}}
{{#if this.field.required}}<span class="required">*</span>{{/if}}
{{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
</label>
{{/if}}

4
app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
View File

@ -3,9 +3,7 @@
for={{concat "user-" this.elementId}}
>
{{this.field.name}}
{{#if this.field.required}}
<span class="required">*</span>
{{/if}}
{{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
</label>
<div class="controls">

4
app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
View File

@ -3,9 +3,7 @@
for={{concat "user-" this.elementId}}
>
{{this.field.name}}
{{#if this.field.required}}
<span class="required">*</span>
{{/if}}
{{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
</label>
<div class="controls">

6
app/assets/javascripts/discourse/app/components/user-fields/text.hbs
View File

@ -9,11 +9,13 @@
for={{concat "user-" this.elementId}}
>
{{this.field.name}}
{{#if this.field.required}}<span class="required">*</span>{{/if}}
{{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
</label>
<InputTip
@validation={{this.validation}}
class={{unless this.validation "hidden"}}
/>
<div class="instructions">{{html-safe this.field.description}}</div>
{{#unless this.validation}}
<div class="instructions">{{html-safe this.field.description}}</div>
{{/unless}}
</div>

27
app/assets/stylesheets/common/modal/login-modal.scss
View File

@ -1,4 +1,4 @@
/*
/*
* shared styles
*/
.d-modal.login-modal,
@ -82,7 +82,17 @@
}
#login-form {
margin: 3em 0 2em 0;
margin: 3em 0 1.2em 0;
display: flex;
flex-direction: column;
.input-group {
&.create-account-email,
&.create-account__username,
&.create-account__fullname.required {
order: -1;
}
}
}
.tip {
@ -164,9 +174,18 @@
}
&__footer-buttons {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
align-items: center;
gap: 0.5rem;
.already-have-account {
color: var(--primary-medium);
margin-bottom: 0.5em;
}
button,
hr {
width: 100%;
}
}
}

4
config/locales/client.en.yml
View File

@ -1142,6 +1142,7 @@ en:
none: "(select an option)"
required: 'Please enter a value for "%{name}"'
same_as_password: "Your password should not be repeated in other fields."
optional: (optional)
user:
said: "%{username}:"
@ -2233,10 +2234,11 @@ en:
header_title: "Welcome!"
subheader_title: "Let's create your account"
disclaimer: "By registering, you agree to the <a href='%{privacy_link}' target='blank'>privacy policy</a> and <a href='%{tos_link}' target='blank'>terms of service</a>."
title: "Create your account"
title: "Sign Up"
failed: "Something went wrong, perhaps this email is already registered, try the forgot password link"
associate: "Already have an account? <a href='%{associate_link}'>Log In</a> to link your %{provider} account."
activation_title: "Activate your account"
already_have_account: "Already have an account?"
forgot_password:
title: "Password Reset"

2
spec/system/create_account_spec.rb
View File

@ -13,7 +13,7 @@ describe "Create account", type: :system do
find("#new-account-password").fill_in with: "secret-password"
click_button "Create your account"
find(".d-modal.create-account").click_button "Sign Up"
expect(page).to have_no_css(".d-modal.create-account")
user = User.last