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

UX: Update styling of readonly values in signup form (#13886) 

During some authentication flows (e.g. external auth with validated emails), some fields on the signup form are readonly. Previously, they were rendered in a simple `<span>`, with no associated label. This commit makes them render in a disabled `<input>` field, so that the styling matches the rest of the form.

A subtle background is added to the disabled input to distinguish them from editable inputs.
This commit is contained in:
David Taylor 2021-07-29 15:19:44 +01:00 committed by GitHub
parent 300db3d3fa
commit 1e66e4602f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/controllers/create-account.js
View File

@ -237,7 +237,7 @@ export default Controller.extend(
"authOptions.email", "authOptions.email",
"authOptions.email_valid" "authOptions.email_valid"
) )
emailValidated() { emailDisabled() {
return ( return (
this.get("authOptions.email") === this.accountEmail && this.get("authOptions.email") === this.accountEmail &&
this.get("authOptions.email_valid") this.get("authOptions.email_valid")

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

@ -15,37 +15,28 @@
{{#if showCreateForm}} {{#if showCreateForm}}
<div class="login-form"> <div class="login-form">
<form> <form>
<div class="input-group create-account-email"> <div class="input-group create-account-email">
{{#if emailValidated}} {{input type="email" disabled=emailDisabled value=accountEmail id="new-account-email" name="email" class=(value-entered accountEmail) autofocus="autofocus" focusOut=(action "checkEmailAvailability")}}
<span class="value">{{accountEmail}}</span> <label class="alt-placeholder" for="new-account-email">
{{else}} {{i18n "user.email.title"}}
{{input type="email" value=accountEmail id="new-account-email" name="email" class=(value-entered accountEmail) autofocus="autofocus" focusOut=(action "checkEmailAvailability")}} {{~#if userFields~}}
<label class="alt-placeholder" for="new-account-email"> <span class="required">*</span>
{{i18n "user.email.title"}} {{/if}}
{{~#if userFields~}} </label>
<span class="required">*</span>
{{/if}}
</label>
{{/if}}
{{input-tip validation=emailValidation id="account-email-validation"}} {{input-tip validation=emailValidation id="account-email-validation"}}
<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">
{{#if usernameDisabled}} {{input value=accountUsername disabled=usernameDisabled class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength
<span class="value">{{accountUsername}}</span> autocomplete="discourse"}}
{{else}} <label class="alt-placeholder" for="new-account-username">
{{input value=accountUsername class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength {{i18n "user.username.title"}}
autocomplete="discourse"}} {{~#if userFields~}}
<label class="alt-placeholder" for="new-account-username"> <span class="required">*</span>
{{i18n "user.username.title"}} {{/if}}
{{~#if userFields~}} </label>
<span class="required">*</span>
{{/if}}
</label>
{{/if}}
{{input-tip validation=usernameValidation id="username-validation"}} {{input-tip validation=usernameValidation id="username-validation"}}
<span class="more-info">{{i18n "user.username.instructions"}}</span> <span class="more-info">{{i18n "user.username.instructions"}}</span>
@ -53,20 +44,15 @@
<div class="input-group"> <div class="input-group">
{{#if fullnameRequired}} {{#if fullnameRequired}}
{{text-field disabled=nameDisabled value=accountName id="new-account-name" class=(value-entered accountName)}}
{{#if nameDisabled}} <label class="alt-placeholder" for="new-account-name">
<span class="value">{{accountName}}</span> {{i18n "user.name.title"}}
{{else}} {{#if siteSettings.full_name_required}}
{{text-field value=accountName id="new-account-name" class=(value-entered accountName)}} {{~#if userFields~}}
<label class="alt-placeholder" for="new-account-name"> <span class="required">*</span>
{{i18n "user.name.title"}}
{{#if siteSettings.full_name_required}}
{{~#if userFields~}}
<span class="required">*</span>
{{/if}}
{{/if}} {{/if}}
</label> {{/if}}
{{/if}} </label>
{{input-tip validation=nameValidation}} {{input-tip validation=nameValidation}}
<span class="more-info">{{nameInstructions}}</span> <span class="more-info">{{nameInstructions}}</span>

4
app/assets/stylesheets/common/base/login.scss
View File

@ -141,6 +141,9 @@
border: 1px solid var(--tertiary); border: 1px solid var(--tertiary);
box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25); box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
} }
input:disabled {
background-color: var(--primary-low);
}
span.more-info { span.more-info {
color: var(--primary-medium); color: var(--primary-medium);
min-height: 1.4em; // prevents height increase due to tips min-height: 1.4em; // prevents height increase due to tips
@ -154,6 +157,7 @@
left: 1em; left: 1em;
top: 10px; top: 10px;
box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0); box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
border-radius: 0.25em;
transition: 0.2s ease all; transition: 0.2s ease all;
} }
input:focus + label.alt-placeholder, input:focus + label.alt-placeholder,