github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 03:59:50 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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_valid"
)
emailValidated() {
emailDisabled() {
return (
this.get("authOptions.email") === this.accountEmail &&
this.get("authOptions.email_valid")

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

@ -15,37 +15,28 @@
{{#if showCreateForm}}
<div class="login-form">
<form>
<div class="input-group create-account-email">
{{#if emailValidated}}
<span class="value">{{accountEmail}}</span>
{{else}}
{{input type="email" value=accountEmail id="new-account-email" name="email" class=(value-entered accountEmail) autofocus="autofocus" focusOut=(action "checkEmailAvailability")}}
<label class="alt-placeholder" for="new-account-email">
{{i18n "user.email.title"}}
{{~#if userFields~}}
<span class="required">*</span>
{{/if}}
</label>
{{/if}}
{{input type="email" disabled=emailDisabled value=accountEmail id="new-account-email" name="email" class=(value-entered accountEmail) autofocus="autofocus" focusOut=(action "checkEmailAvailability")}}
<label class="alt-placeholder" for="new-account-email">
{{i18n "user.email.title"}}
{{~#if userFields~}}
<span class="required">*</span>
{{/if}}
</label>
{{input-tip validation=emailValidation id="account-email-validation"}}
<span class="more-info">{{i18n "user.email.instructions"}}</span>
</div>
<div class="input-group">
{{#if usernameDisabled}}
<span class="value">{{accountUsername}}</span>
{{else}}
{{input value=accountUsername class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength
autocomplete="discourse"}}
<label class="alt-placeholder" for="new-account-username">
{{i18n "user.username.title"}}
{{~#if userFields~}}
<span class="required">*</span>
{{/if}}
</label>
{{/if}}
{{input value=accountUsername disabled=usernameDisabled class=(value-entered accountUsername) id="new-account-username" name="username" maxlength=maxUsernameLength
autocomplete="discourse"}}
<label class="alt-placeholder" for="new-account-username">
{{i18n "user.username.title"}}
{{~#if userFields~}}
<span class="required">*</span>
{{/if}}
</label>
{{input-tip validation=usernameValidation id="username-validation"}}
<span class="more-info">{{i18n "user.username.instructions"}}</span>
@ -53,20 +44,15 @@
<div class="input-group">
{{#if fullnameRequired}}
{{#if nameDisabled}}
<span class="value">{{accountName}}</span>
{{else}}
{{text-field value=accountName id="new-account-name" class=(value-entered accountName)}}
<label class="alt-placeholder" for="new-account-name">
{{i18n "user.name.title"}}
{{#if siteSettings.full_name_required}}
{{~#if userFields~}}
<span class="required">*</span>
{{/if}}
{{text-field disabled=nameDisabled value=accountName id="new-account-name" class=(value-entered accountName)}}
<label class="alt-placeholder" for="new-account-name">
{{i18n "user.name.title"}}
{{#if siteSettings.full_name_required}}
{{~#if userFields~}}
<span class="required">*</span>
{{/if}}
</label>
{{/if}}
{{/if}}
</label>
{{input-tip validation=nameValidation}}
<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);
box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
}
input:disabled {
background-color: var(--primary-low);
}
span.more-info {
color: var(--primary-medium);
min-height: 1.4em; // prevents height increase due to tips
@ -154,6 +157,7 @@
left: 1em;
top: 10px;
box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
border-radius: 0.25em;
transition: 0.2s ease all;
}
input:focus + label.alt-placeholder,