(ui) Add label for user profil form gender field

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>
   );
 };

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}

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;

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:

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:

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:

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:

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:

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:

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: