Hide the full name field in the Create account form

AI-generated summary

The discussion revolves around hiding the full name field in the Create account form on Discourse. saurabhmasc initially used SCSS with the nth-child selector to hide the field but encountered issues when enabling Google Oauth2 login, which changed the field’s position.

saurabhmasc sought a way to identify whether the form is a regular Create account form or an Auth provider form using CSS, to apply styles accordingly. mayfield suggested using the :has selector, but saurabhmasc reported it didn’t work.

JammmyDodger eventually shared that classes have been added to the create-account modal, resolving the issue, with the changes available in this GitHub pull request.

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:

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

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

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

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

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. :partying_face: :balloon:

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