From abc5fa66914ce7e75e22db970cdb111bf7fe2a3a Mon Sep 17 00:00:00 2001
From: Vincent <vincent@sleede.com>
Date: Fri, 17 Mar 2023 18:36:25 +0100
Subject: [PATCH] (ui) Add label for user profil form gender field

---
 .../src/javascript/components/user/gender-input.tsx  | 11 ++++++++---
 .../javascript/components/user/user-profile-form.tsx |  2 +-
 .../src/stylesheets/modules/user/gender-input.scss   | 12 ++++++++++++
 config/locales/app.shared.de.yml                     |  1 +
 config/locales/app.shared.en.yml                     |  1 +
 config/locales/app.shared.es.yml                     |  1 +
 config/locales/app.shared.fr.yml                     |  1 +
 config/locales/app.shared.no.yml                     |  1 +
 config/locales/app.shared.pt.yml                     |  1 +
 config/locales/app.shared.zu.yml                     |  1 +
 10 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/frontend/src/javascript/components/user/gender-input.tsx b/app/frontend/src/javascript/components/user/gender-input.tsx
index 66d3dc071..5958fe753 100644
--- a/app/frontend/src/javascript/components/user/gender-input.tsx
+++ b/app/frontend/src/javascript/components/user/gender-input.tsx
@@ -7,12 +7,13 @@ import { useTranslation } from 'react-i18next';
 interface GenderInputProps<TFieldValues> {
   register: UseFormRegister<TFieldValues>,
   disabled?: boolean|((id: string) => boolean),
+  required?: boolean
 }
 
 /**
  * Input component to set the gender for the user
  */
-export const GenderInput = <TFieldValues extends FieldValues>({ register, disabled = false }: GenderInputProps<TFieldValues>) => {
+export const GenderInput = <TFieldValues extends FieldValues>({ register, disabled = false, required }: GenderInputProps<TFieldValues>) => {
   const { t } = useTranslation('shared');
 
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
@@ -26,21 +27,25 @@ export const GenderInput = <TFieldValues extends FieldValues>({ register, disabl
   }, [disabled]);
 
   return (
-    <div className="gender-input">
+    <fieldset className="gender-input">
+      <legend className={required ? 'is-required' : ''}>{t('app.shared.gender_input.label')}</legend>
       <label>
         <p>{t('app.shared.gender_input.man')}</p>
         <input type="radio"
+               name='gender'
                value="true"
+               required={required}
                disabled={isDisabled}
                {...register('statistic_profile_attributes.gender' as FieldPath<TFieldValues>)} />
       </label>
       <label>
         <p>{t('app.shared.gender_input.woman')}</p>
         <input type="radio"
+               name='gender'
                value="false"
                disabled={isDisabled}
                {...register('statistic_profile_attributes.gender' as FieldPath<TFieldValues>)} />
       </label>
-    </div>
+    </fieldset>
   );
 };
diff --git a/app/frontend/src/javascript/components/user/user-profile-form.tsx b/app/frontend/src/javascript/components/user/user-profile-form.tsx
index f5125fb23..940315ed7 100644
--- a/app/frontend/src/javascript/components/user/user-profile-form.tsx
+++ b/app/frontend/src/javascript/components/user/user-profile-form.tsx
@@ -184,7 +184,7 @@ export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size,
       <div className="fields-group">
         <div className="personnal-data">
           <h4>{t('app.shared.user_profile_form.personal_data')}</h4>
-          <GenderInput register={register} disabled={isDisabled} />
+          <GenderInput register={register} disabled={isDisabled} required />
           <div className="names">
             <FormInput id="profile_attributes.last_name"
                        register={register}
diff --git a/app/frontend/src/stylesheets/modules/user/gender-input.scss b/app/frontend/src/stylesheets/modules/user/gender-input.scss
index f639c5eee..f72452b76 100644
--- a/app/frontend/src/stylesheets/modules/user/gender-input.scss
+++ b/app/frontend/src/stylesheets/modules/user/gender-input.scss
@@ -1,5 +1,17 @@
 .gender-input {
   margin-bottom: 1.6rem;
+  legend {
+    @include text-sm;
+    margin: 0 0 0.8rem;
+    border: none;
+    cursor: pointer;
+    &::first-letter { text-transform: uppercase; }
+    &.is-required::after {
+      content: "*";
+      margin-left: 0.5ch;
+      color: var(--alert);
+    }
+  }
 
   label {
     display: inline-flex;
diff --git a/config/locales/app.shared.de.yml b/config/locales/app.shared.de.yml
index e6729c1d2..ddbe9125f 100644
--- a/config/locales/app.shared.de.yml
+++ b/config/locales/app.shared.de.yml
@@ -103,6 +103,7 @@ de:
         must_accept_terms: "You must accept the terms and conditions"
         save: "Save"
       gender_input:
+        label: "Gender"
         man: "Man"
         woman: "Woman"
       change_password:
diff --git a/config/locales/app.shared.en.yml b/config/locales/app.shared.en.yml
index 92ecc9b37..2b6e75841 100644
--- a/config/locales/app.shared.en.yml
+++ b/config/locales/app.shared.en.yml
@@ -103,6 +103,7 @@ en:
         must_accept_terms: "You must accept the terms and conditions"
         save: "Save"
       gender_input:
+        label: "Gender"
         man: "Man"
         woman: "Woman"
       change_password:
diff --git a/config/locales/app.shared.es.yml b/config/locales/app.shared.es.yml
index 84b402efe..2e219ad88 100644
--- a/config/locales/app.shared.es.yml
+++ b/config/locales/app.shared.es.yml
@@ -103,6 +103,7 @@ es:
         must_accept_terms: "You must accept the terms and conditions"
         save: "Save"
       gender_input:
+        label: "Gender"
         man: "Man"
         woman: "Woman"
       change_password:
diff --git a/config/locales/app.shared.fr.yml b/config/locales/app.shared.fr.yml
index 7a1bed07c..c854f8d54 100644
--- a/config/locales/app.shared.fr.yml
+++ b/config/locales/app.shared.fr.yml
@@ -103,6 +103,7 @@ fr:
         must_accept_terms: "Vous devez accepter les conditions générales"
         save: "Enregistrer"
       gender_input:
+        label: "Genre"
         man: "Homme"
         woman: "Femme"
       change_password:
diff --git a/config/locales/app.shared.no.yml b/config/locales/app.shared.no.yml
index c4cfe28ae..7668c94cc 100644
--- a/config/locales/app.shared.no.yml
+++ b/config/locales/app.shared.no.yml
@@ -103,6 +103,7 @@
         must_accept_terms: "You must accept the terms and conditions"
         save: "Save"
       gender_input:
+        label: "Gender"
         man: "Man"
         woman: "Woman"
       change_password:
diff --git a/config/locales/app.shared.pt.yml b/config/locales/app.shared.pt.yml
index 979387e4f..31b503b60 100644
--- a/config/locales/app.shared.pt.yml
+++ b/config/locales/app.shared.pt.yml
@@ -103,6 +103,7 @@ pt:
         must_accept_terms: "Você deve aceitar os termos e condições"
         save: "Salvar"
       gender_input:
+        label: "Gender"
         man: "Homem"
         woman: "Mulher"
       change_password:
diff --git a/config/locales/app.shared.zu.yml b/config/locales/app.shared.zu.yml
index 16d393cda..a7f971d23 100644
--- a/config/locales/app.shared.zu.yml
+++ b/config/locales/app.shared.zu.yml
@@ -103,6 +103,7 @@ zu:
         must_accept_terms: "crwdns28700:0crwdne28700:0"
         save: "crwdns28702:0crwdne28702:0"
       gender_input:
+        label: "crwdns37591:0crwdne37591:0"
         man: "crwdns28704:0crwdne28704:0"
         woman: "crwdns28706:0crwdne28706:0"
       change_password: