Hide the full name field in the Create account form

saurabhmasc · July 7, 2022, 2:05pm

Hi team,

We have customized the regular Discourse create account form using a grid layout as shown below:

Currently, we have hidden the full name using the below SCSS:

.d-modal.create-account .login-form {
   form{
        .input-group:nth-child(3)
            display:none !important;
        }
   }
}

We hide full name fields using nth-child selector as there is no unique class for the below mention input-group div:

github.com

discourse/discourse/blob/2e4056d18532435e6e68d79cceca5b8b280c6948/app/assets/javascripts/discourse/app/templates/modal/create-account.hbs#L44


      
              {{i18n "user.username.title"}}
              {{~#if this.userFields~}}
                <span class="required">*</span>
              {{/if}}
            </label>
          
          
  <InputTip @validation={{this.usernameValidation}} @id="username-validation" />
            <span class="more-info">{{i18n "user.username.instructions"}}</span>
          </div>
          
          
<div class="input-group">
            {{#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}} />
              <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>

But now we have enabled the Google Oauth2 login on which the full name field is at the 4th position. So current CSS breaks the Create account for the Auth provider create account form as shown below:

How I can identify whether the current form is a Regular create account form or Auth provider (such as google oauth2) form using CSS? So I can apply CSS for the fields accordingly.

Similar issue for the Password field.

Thanks,
Saurabh

mayfield · July 7, 2022, 3:39pm

The CSS :has selector may work for your use case:

.input-group:has(#new-account-name) { ... }

saurabhmasc · July 8, 2022, 7:27am

Thanks for the reply,
But :has selector is not working.

JammyDodger · July 13, 2022, 10:52am

There has been a little back and forth over PM about this one, but it has resulted in classes being added to the create-account modal.

https://github.com/discourse/discourse/pull/17435

Topic		Replies	Views
Allow “Name" field to be disabled in registration dialog Feature completed , signup	10	2048	January 8, 2025
Hide full name if not logged in Dev	11	1644	March 5, 2024
Full name at Sign Up went missing Bug signup	28	241	January 11, 2025
How to restrict account changes when authenticating with Google? SSO	9	3017	July 15, 2016
Site setting to hide custom user fields from signup page Feature user-custom-fields	13	1792	February 28, 2023

Hide the full name field in the Create account form

Related topics