Masquer le champ nom complet dans le formulaire Créer un compte

Dev
1

Salut l’équipe,

Nous avons personnalisé le formulaire de création de compte Discourse habituel en utilisant une mise en page en grille, comme illustré ci-dessous :

image
image828×555 24.9 KB

Actuellement, nous avons masqué le nom complet en utilisant le SCSS ci-dessous :

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

Nous masquons les champs de nom complet à l’aide du sélecteur nth-child car il n’y a pas de classe unique pour la div input-group mentionnée ci-dessous :

Mais nous avons maintenant activé la connexion Google Oauth2, sur laquelle le champ du nom complet est en 4ème position. Le CSS actuel casse donc la création de compte pour le formulaire de création de compte du fournisseur d’authentification, comme illustré ci-dessous :

image
image826×574 28.3 KB

Comment puis-je identifier si le formulaire actuel est un formulaire de création de compte habituel ou un formulaire de fournisseur d’authentification (tel que Google OAuth2) à l’aide de CSS ? Ainsi, je peux appliquer le CSS pour les champs en conséquence.

Problème similaire pour le champ Mot de passe.

Merci,
Saurabh

1 « J'aime »
2

Le sélecteur CSS :has pourrait fonctionner pour votre cas d’utilisation :

.input-group:has(#new-account-name) { ... }
1 « J'aime »
3

Merci pour votre réponse,
Mais le sélecteur :has ne fonctionne pas.

1 « J'aime »
9

Il y a eu quelques échanges par MP à ce sujet, mais cela a abouti à l’ajout de classes à la modale de création de compte. :partying_face: :balloon:

2 « J'aime »