Initial commit

src/app/[locale]/(auth)/signup/page.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { Box, Flex, Input, Link as ChakraLink, Text, ClientOnly } from '@chakra-ui/react';
+import signUpImage from '/public/assets/img/sign-up-image.png';
+import { Button } from '@/components/ui/buttons/button';
+import { Field } from '@/components/ui/forms/field';
+import { useTranslations } from 'next-intl';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { InputGroup } from '@/components/ui/forms/input-group';
+import { BiLock, BiUser } from 'react-icons/bi';
+import { Link } from '@/i18n/navigation';
+import { MdMail } from 'react-icons/md';
+import { useRouter } from 'next/navigation';
+import { PasswordInput } from '@/components/ui/forms/password-input';
+import { Skeleton } from '@/components/ui/feedback/skeleton';
+
+const schema = yup.object({
+  name: yup.string().required(),
+  email: yup.string().email().required(),
+  password: yup.string().required(),
+});
+
+type SignUpForm = yup.InferType<typeof schema>;
+
+function SignUpPage() {
+  const t = useTranslations();
+  const router = useRouter();
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<SignUpForm>({ resolver: yupResolver(schema), mode: 'onChange' });
+
+  const onSubmit = async (formData: SignUpForm) => {
+    router.replace('/signin');
+    return formData;
+  };
+
+  return (
+    <Box>
+      <Box
+        position='absolute'
+        minH={{ base: '70vh', md: '50vh' }}
+        w={{ md: 'calc(100vw - 50px)' }}
+        borderRadius={{ md: '15px' }}
+        left='0'
+        right='0'
+        bgRepeat='no-repeat'
+        overflow='hidden'
+        zIndex='-1'
+        top='0'
+        bgImage={`url(${signUpImage.src})`}
+        bgSize='cover'
+        mx={{ md: 'auto' }}
+        mt={{ md: '14px' }}
+      />
+      <Flex w='full' h='full' direction='column' alignItems='center' justifyContent='center'>
+        <Text
+          fontSize={{ base: '2xl', md: '3xl', lg: '4xl' }}
+          color='white'
+          fontWeight='bold'
+          mt={{ base: '2rem', md: '4.5rem', '2xl': '6.5rem' }}
+          mb={{ base: '2rem', md: '3rem', '2xl': '4rem' }}
+        >
+          {t('auth.create-an-account-now')}
+        </Text>
+        <Flex
+          direction='column'
+          w={{ base: '100%', md: '445px' }}
+          background='transparent'
+          borderRadius='15px'
+          p='10'
+          mx={{ base: '100px' }}
+          bg='bg.panel'
+          boxShadow='0 20px 27px 0 rgb(0 0 0 / 5%)'
+          mb='8'
+        >
+          <Flex
+            as='form'
+            onSubmit={handleSubmit(onSubmit)}
+            flexDirection='column'
+            alignItems='center'
+            justifyContent='start'
+            w='100%'
+          >
+            <Field mb='24px' label={t('name')} errorText={errors.name?.message} invalid={!!errors.name}>
+              <InputGroup w='full' startElement={<BiUser size='1rem' />}>
+                <Input
+                  borderRadius='15px'
+                  fontSize='sm'
+                  type='text'
+                  placeholder={t('name')}
+                  size='lg'
+                  {...register('name')}
+                />
+              </InputGroup>
+            </Field>
+            <Field mb='24px' label={t('email')} errorText={errors.email?.message} invalid={!!errors.email}>
+              <InputGroup w='full' startElement={<MdMail size='1rem' />}>
+                <Input
+                  borderRadius='15px'
+                  fontSize='sm'
+                  type='text'
+                  placeholder={t('email')}
+                  size='lg'
+                  {...register('email')}
+                />
+              </InputGroup>
+            </Field>
+            <Field mb='24px' label={t('password')} errorText={errors.password?.message} invalid={!!errors.password}>
+              <InputGroup w='full' startElement={<BiLock size='1rem' />}>
+                <PasswordInput
+                  borderRadius='15px'
+                  fontSize='sm'
+                  placeholder={t('password')}
+                  size='lg'
+                  {...register('password')}
+                />
+              </InputGroup>
+            </Field>
+            <Field mb='24px'>
+              <ClientOnly fallback={<Skeleton height='45px' width='100%' />}>
+                <Button
+                  type='submit'
+                  bg='primary.400'
+                  color='white'
+                  fontWeight='bold'
+                  w='100%'
+                  h='45px'
+                  _hover={{
+                    bg: 'primary.500',
+                  }}
+                  _active={{
+                    bg: 'primary.400',
+                  }}
+                >
+                  {t('auth.sign-up')}
+                </Button>
+              </ClientOnly>
+            </Field>
+          </Flex>
+          <Flex flexDirection='column' justifyContent='center' alignItems='center' maxW='100%'>
+            <Text color={{ base: 'gray.400', _dark: 'white' }} fontWeight='medium'>
+              {t('auth.already-have-an-account')}
+              <ChakraLink
+                as={Link}
+                color={{ base: 'primary.400', _dark: 'primary.200' }}
+                ml='2'
+                href='/signin'
+                fontWeight='bold'
+                focusRing='none'
+              >
+                {t('auth.sign-in')}
+              </ChakraLink>
+            </Text>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}
+
+export default SignUpPage;