アカウント作成フォームでフルネームフィールドを非表示にする

開発
1

こんにちは、チームの皆さん。

以下に示すように、グリッドレイアウトを使用して通常の Discourse のアカウント作成フォームをカスタマイズしました。

image
image828×555 24.9 KB

現在、以下の SCSS を使用してフルネームを非表示にしています。

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

以下で言及されている input-group div に一意のクラスがないため、nth-child セレクターを使用してフルネームフィールドを非表示にしています。

しかし、現在 Google Oauth2 ログインを有効にしたところ、フルネームフィールドが 4 番目の位置にあります。そのため、現在の CSS は、以下に示すように、Auth プロバイダーのアカウント作成フォームの作成アカウントを壊してしまいます。

image
image826×574 28.3 KB

CSS を使用して、現在のフォームが通常の作成アカウントフォームなのか、それとも Auth プロバイダー (Google OAuth2 など) のフォームなのかを識別するにはどうすればよいですか？これにより、フィールドにそれに応じて CSS を適用できます。

パスワードフィールドについても同様の問題があります。

よろしくお願いします。
Saurabh

「いいね！」 1
2

CSS の :has セレクター がユースケースに有効かもしれません。

.input-group:has(#new-account-name) { ... }
「いいね！」 1
3

返信ありがとうございます。
しかし、:has セレクターが機能していません。

「いいね！」 1
9

この件については、PMで多少のやり取りがありましたが、その結果、create-accountモーダルにクラスが追加されました。:partying_face: :balloon:

「いいね！」 2