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

'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;