fix: I should be able to use "enter" key to create profile (#4978)

## Context
Fixes #4808 

TL;DR
Introducing pure stateless modal component ("UI modal") for our auth
modal not to have default hotkeyScope overriding our create-profile
hotkeyScope
+ we dont want the shortcut to be available for all the modal content, only for the input that should not be using a hotkeyscope, so we are using onKeyDown for the specific issue on create profile.

Explanation
create-profile hotkey scope is set by PageChangeEffect; CreateProfile
component adds enter key shortcut; but this scope is overwritten by the
default scope by the Modal component that expects a hotkeyScope to reset
to (and defaults to the default hotkeyScope if none indicated).
In the auth flow we were using that Modal component to give a modal look
to the flow but it is not a modal per say, it's a set of pages contained
within a modal look.
By creating this UI component we are escaping that hotkeyScope
overriding that does not make sense in our context.

## How was it tested
Locally
Storybook

packages/twenty-front/src/pages/auth/CreateProfile.tsx

@@ -3,7 +3,6 @@ import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRecoilState } from 'recoil';
-import { Key } from 'ts-key-enum';
 import { z } from 'zod';
 
 import { SubTitle } from '@/auth/components/SubTitle';
@@ -14,12 +13,10 @@ import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
-import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
 const StyledContentContainer = styled.div`
@@ -126,19 +123,17 @@ export const CreateProfile = () => {
     ],
   );
 
-  useScopedHotkeys(
-    Key.Enter,
-    () => {
-      onSubmit(getValues());
-    },
-    PageHotkeyScope.CreateProfile,
-    [onSubmit],
-  );
-
   if (onboardingStatus !== OnboardingStatus.OngoingProfileCreation) {
     return null;
   }
 
+  const onNameInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      onSubmit(getValues());
+    }
+  };
+
   return (
     <>
       <Title withMarginTop={false}>Create profile</Title>
@@ -171,6 +166,7 @@ export const CreateProfile = () => {
                   placeholder="Tim"
                   error={error?.message}
                   fullWidth
+                  onKeyDown={onNameInputKeyDown}
                   disableHotkeys
                 />
               )}
@@ -190,6 +186,7 @@ export const CreateProfile = () => {
                   placeholder="Cook"
                   error={error?.message}
                   fullWidth
+                  onKeyDown={onNameInputKeyDown}
                   disableHotkeys
                 />
               )}