Fix mobilephone field

The mobile phone field had some strange behaviour. Using a controller to wrap the field now to make it better. The problem was that if the value was set from the server (not really expected, but should be supported still) when the guest was about to enter information, the value in the field was not really registered, so that when the user pressed save in the wizard, he got a validation error on the mobile phone field, even though a value was displayed there.

Also did a change on the backend so that it is now possible to update the mobile phone field, not just add it if it is not already set.

frontend/src/routes/guest/register/registerPage.tsx

@@ -48,7 +48,6 @@ const GuestRegisterStep = forwardRef(
     const [countryCode, setCountryCode] = useState<
       CountryCallingCode | undefined
     >(undefined)
-    const [mobilePhone, setMobilePhone] = useState<string>('')
 
     const submit: SubmitHandler<EnteredGuestData> = (data) => {
       nextHandler(data)
@@ -99,27 +98,26 @@ const GuestRegisterStep = forwardRef(
         }
       }
 
-      setMobilePhone(value.target.value)
+      setValue('mobilePhone', value.target.value)
     }
 
     useEffect(() => {
       setCountryCode(guestData.countryForCallingCode)
-      setMobilePhone(guestData.mobile_phone ? guestData.mobile_phone : '')
       setValue(
         'mobilePhoneCountry',
         guestData.countryForCallingCode ? guestData.countryForCallingCode : ''
       )
       setValue('firstName', guestData.first_name)
       setValue('lastName', guestData.last_name)
+      setValue(
+        'mobilePhone',
+        guestData.mobile_phone ? guestData.mobile_phone : ''
+      )
     }, [guestData])
 
     function doSubmit() {
       return onSubmit()
     }
-
-    register('mobilePhone', {
-      required: t<string>('validation.mobilePhoneRequired'),
-    })
     register('mobilePhoneCountry')
 
     useImperativeHandle(ref, () => ({ doSubmit }))
@@ -212,6 +210,7 @@ const GuestRegisterStep = forwardRef(
                 />
               )}
 
+              {/* Box with phone country code and mobile phone */}
               <Box
                 sx={{
                   display: 'flex',
@@ -276,13 +275,32 @@ const GuestRegisterStep = forwardRef(
                     ))}
                 </Select>
 
-                <TextField
-                  sx={{ flexGrow: 2 }}
-                  label={t('input.mobilePhone')}
-                  error={!!errors.mobilePhone}
-                  value={mobilePhone}
-                  helperText={errors.mobilePhone && errors.mobilePhone.message}
-                  onChange={handleMobilePhoneChange}
+                <Controller
+                  name="mobilePhone"
+                  control={control}
+                  defaultValue=""
+                  rules={{
+                    required: true,
+                  }}
+                  render={({ field: { value } }) => (
+                    // <TextField
+                    //   id="lastName"
+                    //   label={t('input.lastName')}
+                    //   value={value}
+                    //   onChange={onChange}
+                    // />
+
+                    <TextField
+                      sx={{ flexGrow: 2 }}
+                      label={t('input.mobilePhone')}
+                      error={!!errors.mobilePhone}
+                      value={value}
+                      helperText={
+                        errors.mobilePhone && errors.mobilePhone.message
+                      }
+                      onChange={handleMobilePhoneChange}
+                    />
+                  )}
                 />
               </Box>
               {guestData.authentication_method ===