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

FIX: Signup fields tab order and descriptions (#29772)

This commit is contained in:
Jan Cernik 2024-11-15 18:17:55 -03:00 committed by GitHub
parent 276bc8a565
commit 876591fdab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 125 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/discourse/app/components/fullname-input.gjs Normal file
View File

@ -0,0 +1,33 @@
import Component from "@glimmer/component";
import { on } from "@ember/modifier";
import InputTip from "discourse/components/input-tip";
import TextField from "discourse/components/text-field";
import valueEntered from "discourse/helpers/value-entered";
export default class SidebarEditNavigationMenuTagsModal extends Component {
get showFullname() {
return (
this.siteSettings.full_name_required || this.siteSettings.enable_names
);
}
<template>
<div ...attributes>
<TextField
{{on "focusin" @onFocusIn}}
@disabled={{@nameDisabled}}
@value={{@accountName}}
@id="new-account-name"
aria-describedby="fullname-validation fullname-validation-more-info"
aria-invalid={{@nameValidation.failed}}
class={{valueEntered @accountName}}
name="name"
/>
<label class="alt-placeholder" for="new-account-name">
{{@nameTitle}}
</label>
<InputTip @validation={{@nameValidation}} id="fullname-validation" />
</div>
</template>
}

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

@ -95,6 +95,17 @@
/>
</div>
{{#if this.fullnameRequired}}
<FullnameInput
@nameValidation={{this.nameValidation}}
@nameTitle={{this.nameTitle}}
@accountName={{this.accountName}}
@nameDisabled={{this.nameDisabled}}
@onFocusIn={{this.scrollInputIntoView}}
class="input-group create-account__fullname required"
/>
{{/if}}
<PluginOutlet
@name="create-account-before-password"
@outletArgs={{hash
@ -200,33 +211,16 @@
}}
/>
<div
class={{concat-class
"input-group"
"create-account__fullname"
(if this.siteSettings.full_name_required "required")
}}
>
{{#if this.fullnameRequired}}
<TextField
{{on "focusin" this.scrollInputIntoView}}
@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">
{{this.nameTitle}}
</label>
<InputTip
@validation={{this.nameValidation}}
id="fullname-validation"
/>
{{/if}}
</div>
{{#if (and this.showFullname (not this.fullnameRequired))}}
<FullnameInput
@nameValidation={{this.nameValidation}}
@nameTitle={{this.nameTitle}}
@accountName={{this.accountName}}
@nameDisabled={{this.nameDisabled}}
@onFocusIn={{this.scrollInputIntoView}}
class="input-group create-account__fullname"
/>
{{/if}}
{{#if this.userFields}}
<div class="user-fields">

9
app/assets/javascripts/discourse/app/components/modal/create-account.js
View File

@ -132,11 +132,14 @@ export default class CreateAccount extends Component.extend(
return authOptions && !canEditName;
}
@discourseComputed
showFullname() {
return this.siteSettings.enable_names;
}
@discourseComputed
fullnameRequired() {
return (
this.siteSettings.full_name_required || this.siteSettings.enable_names
);
return this.siteSettings.full_name_required;
}
@discourseComputed("model.authOptions.auth_provider")

17
app/assets/javascripts/discourse/app/controllers/invites-show.js
View File

@ -155,11 +155,14 @@ export default class InvitesShowController extends Controller.extend(
);
}
@discourseComputed
showFullname() {
return this.siteSettings.enable_names;
}
@discourseComputed
fullnameRequired() {
return (
this.siteSettings.full_name_required || this.siteSettings.enable_names
);
return this.siteSettings.full_name_required;
}
@discourseComputed(
@ -281,6 +284,14 @@ export default class InvitesShowController extends Controller.extend(
this.toggleProperty("maskPassword");
}
@action
scrollInputIntoView(event) {
event.target.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
@action
submit() {
const userFields = this.userFields;

9
app/assets/javascripts/discourse/app/controllers/signup.js
View File

@ -121,11 +121,14 @@ export default class SignupPageController extends Controller.extend(
return authOptions && !canEditName;
}
@discourseComputed
showFullname() {
return this.siteSettings.enable_names;
}
@discourseComputed
fullnameRequired() {
return (
this.siteSettings.full_name_required || this.siteSettings.enable_names
);
return this.siteSettings.full_name_required;
}
@discourseComputed("authOptions.auth_provider")

47
app/assets/javascripts/discourse/app/templates/invites/show.hbs
View File

@ -66,6 +66,7 @@
{{#if this.isInviteLink}}
<div class="input email-input input-group">
<Input
{{on "focusin" this.scrollInputIntoView}}
@type="email"
@value={{this.email}}
id="new-account-email"
@ -91,6 +92,7 @@
<div class="input username-input input-group">
<Input
{{on "focusin" this.scrollInputIntoView}}
@value={{this.accountUsername}}
class={{value-entered this.accountUsername}}
id="new-account-username"
@ -107,9 +109,21 @@
/>
</div>
{{#if this.fullnameRequired}}
<FullnameInput
@nameValidation={{this.nameValidation}}
@nameTitle={{this.nameTitle}}
@accountName={{this.accountName}}
@nameDisabled={{this.nameDisabled}}
@onFocusIn={{this.scrollInputIntoView}}
class="input name-input input-group name-required"
/>
{{/if}}
{{#unless this.externalAuthsOnly}}
<div class="input password-input input-group">
<PasswordField
{{on "focusin" this.scrollInputIntoView}}
@value={{this.accountPassword}}
@capsLockOn={{this.capsLockOn}}
type={{if this.maskPassword "password" "text"}}
@ -143,29 +157,15 @@
</div>
{{/unless}}
{{#if this.fullnameRequired}}
<div
class={{concat-class
"input"
"name-input"
"input-group"
(if this.siteSettings.full_name_required "name-required")
}}
>
<Input
@value={{this.accountName}}
class={{value-entered this.accountName}}
id="new-account-name"
name="name"
/>
<label class="alt-placeholder" for="new-account-name">
{{i18n "invites.name_label"}}
</label>
<InputTip
@validation={{this.nameValidation}}
id="fullname-validation"
/>
</div>
{{#if (and this.showFullname (not this.fullnameRequired))}}
<FullnameInput
@nameValidation={{this.nameValidation}}
@nameTitle={{this.nameTitle}}
@accountName={{this.accountName}}
@nameDisabled={{this.nameDisabled}}
@onFocusIn={{this.scrollInputIntoView}}
class="input name-input input-group"
/>
{{/if}}
{{#if this.userFields}}
@ -173,6 +173,7 @@
{{#each this.userFields as |f|}}
<div class="input-group">
<UserField
{{on "focusin" this.scrollInputIntoView}}
@field={{f.field}}
@value={{f.value}}
class={{value-entered f.value}}

48
app/assets/javascripts/discourse/app/templates/signup.hbs
View File

@ -91,6 +91,17 @@
/>
</div>
{{#if this.fullnameRequired}}
<FullnameInput
@nameValidation={{this.nameValidation}}
@nameTitle={{this.nameTitle}}
@accountName={{this.accountName}}
@nameDisabled={{this.nameDisabled}}
@onFocusIn={{this.scrollInputIntoView}}
class="input-group create-account__fullname required"
/>
{{/if}}
<PluginOutlet
@name="create-account-before-password"
@outletArgs={{hash
@ -196,33 +207,16 @@
}}
/>
<div
class={{concat-class
"input-group"
"create-account__fullname"
(if this.siteSettings.full_name_required "required")
}}
>
{{#if this.fullnameRequired}}
<TextField
{{on "focusin" this.scrollInputIntoView}}
@disabled={{this.nameDisabled}}
@value={{this.accountName}}
@id="new-account-name"
aria-describedby="fullname-validation fullname-validation-more-info"
aria-invalid={{this.nameValidation.failed}}
class={{value-entered this.accountName}}
/>
<label class="alt-placeholder" for="new-account-name">
{{this.nameTitle}}
</label>
<InputTip
@validation={{this.nameValidation}}
id="fullname-validation"
/>
{{/if}}
</div>
{{#if (and this.showFullname (not this.fullnameRequired))}}
<FullnameInput
@nameValidation={{this.nameValidation}}
@nameTitle={{this.nameTitle}}
@accountName={{this.accountName}}
@nameDisabled={{this.nameDisabled}}
@onFocusIn={{this.scrollInputIntoView}}
class="input-group create-account__fullname"
/>
{{/if}}
{{#if this.userFields}}
<div class="user-fields">

17
app/assets/stylesheets/common/base/login-signup-page.scss
View File

@ -193,14 +193,6 @@ body.signup-page {
display: flex;
flex-direction: column;
.input-group {
&.create-account-email,
&.create-account__username,
&.create-account__fullname.required {
order: -1;
}
}
.create-account-associate-link {
order: 1;
}
@ -244,15 +236,6 @@ body.signup-page {
font-size: var(--font-down-1);
color: var(--primary-medium);
overflow-wrap: anywhere;
transition: opacity 0.2s ease;
opacity: 0;
}
.input-group input:focus {
& ~ .more-info,
& ~ .instructions {
opacity: 1;
}
}
.caps-lock-warning {

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

@ -68,13 +68,6 @@
display: flex;
flex-direction: column;
.input-group {
&.create-account-email,
&.create-account__username,
&.create-account__fullname.required {
order: -1;
}
}
.create-account-associate-link {
order: 1;
}
@ -98,15 +91,6 @@
font-size: var(--font-down-1);
color: var(--primary-medium);
overflow-wrap: anywhere;
transition: opacity 0.2s ease;
opacity: 0;
}
.input-group input:focus {
& ~ .more-info,
& ~ .instructions {
opacity: 1;
}
}
.caps-lock-warning {