Merge pull request #33 from tabi-memo/A2_sign_up_UI

A2 sign up UI

app/(auth)/signin/components/signin-footer.tsx

@@ -17,7 +17,7 @@ export const SignInFooter = () => {
           fontSize="sm"
           color="primary.800"
           fontWeight="semibold"
-          href="/signup/email"
+          href="/signup"
         >
           Sign Up
         </Link>

app/(auth)/signin/components/signin-form.tsx

@@ -67,7 +67,8 @@ export const SignInForm = () => {
       mt={{ base: '38px', md: '42px' }}
       gap={{ base: '30px', md: '40px' }}
       p="0%"
-      maxW="380px"
+      maxW="500px"
+      w={{ base: '90vw', md: 'unset' }}
     >
       <VStack gap="24px">
         <FormControl isInvalid={!!errors.email}>

app/(auth)/signin/page.tsx

@@ -14,6 +14,7 @@ export default function SignIn() {
       <Box
         as="main"
         h="100vh"
+        minH="600px"
         w="100vw"
         bg={{
           base: 'white',

app/(auth)/signup/email/action/index.ts → app/(auth)/signup/action/index.ts

@@ -1,7 +1,7 @@
 'use server'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-import type { SignUpSchema } from '@/(auth)/signup/email/schema'
+import type { SignUpSchema } from '@/(auth)/signup/schema'
 import { createClient } from '@/(auth)/supabase/with-cookie'
 
 export const signUp = async ({

app/(auth)/signup/components/index.tsx

@@ -0,0 +1,3 @@
+export { SignUpHeader } from './signup-header'
+export { SignUpForm } from './signup-form'
+export { SignUpFooter } from './signup-footer'

app/(auth)/signup/components/signup-footer.tsx

@@ -0,0 +1,45 @@
+import { CardFooter, VStack, Text } from '@chakra-ui/react'
+import { Link } from '@/components/link'
+
+export const SignUpFooter = () => {
+  return (
+    <CardFooter
+      mt={{ base: '38px', md: '32px' }}
+      display="flex"
+      flexDirection="column"
+      p="0"
+    >
+      <VStack w="100%">
+        <Text fontSize="sm" color="gray.600">
+          Already have an account?
+        </Text>
+        <Link
+          hasUnderLine={true}
+          fontSize="sm"
+          color="primary.800"
+          fontWeight="semibold"
+          href="/signIn/email"
+        >
+          Sign In
+        </Link>
+      </VStack>
+      <Text
+        align="center"
+        fontSize="xs"
+        color="gray.600"
+        mt={{ base: '38px', md: '32px' }}
+      >
+        By signing up, you agree to
+        {/* TODO Add terms of policy page */}
+        <Link href="/signUp" color="primary.800" hasUnderLine={true}>
+          Terms of Service
+        </Link>{' '}
+        and {/* TODO Add terms of privacy policy page */}
+        <Link href="/signUp" color="primary.800" hasUnderLine={true}>
+          Privacy Policy
+        </Link>{' '}
+        .
+      </Text>
+    </CardFooter>
+  )
+}

app/(auth)/signup/components/signup-form.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import {
+  CardBody,
+  VStack,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  useToast,
+  useBoolean
+} from '@chakra-ui/react'
+import { signUp } from '@/(auth)/signup/action'
+import { signUpResolver, SignUpSchema } from '@/(auth)/signup/schema'
+import { PrimaryButton } from '@/components/button'
+import { InputForm } from '@/components/input'
+
+export const SignUpForm = () => {
+  const toast = useToast()
+  const [isLoading, setIsLoading] = useBoolean()
+  const [toastId, setToastId] = useState<ReturnType<typeof toast> | undefined>(
+    undefined
+  )
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<SignUpSchema>({
+    resolver: signUpResolver
+  })
+
+  const signUpHandler = handleSubmit(async (data: SignUpSchema) => {
+    try {
+      setIsLoading.on()
+      await signUp(data)
+    } catch (error) {
+      if (!toastId) {
+        const res = toast({
+          title: "We're sorry, but you failed to sign up.",
+          description: error instanceof Error ? error.message : 'unknown error',
+          status: 'error',
+          duration: 5000,
+          isClosable: true,
+          position: 'top',
+          onCloseComplete() {
+            setToastId(undefined)
+          }
+        })
+        setToastId(res)
+      }
+    } finally {
+      setIsLoading.off()
+    }
+  })
+  const signUpInputStyle = {
+    'input:-webkit-autofill, input:-webkit-autofill:focus': {
+      boxShadow: '0 0 0 1000px #f8f8f8 inset',
+      textFillColor: 'black'
+    }
+  }
+  return (
+    <CardBody
+      sx={signUpInputStyle}
+      as="form"
+      onSubmit={signUpHandler}
+      mt={{ base: '38px', md: '32px' }}
+      gap={{ base: '30px', md: '40px' }}
+      p="0%"
+      w={{ base: '90vw', md: 'unset' }}
+      maxW="500px"
+    >
+      <VStack>
+        <FormControl isInvalid={!!errors.email}>
+          <FormLabel color="black">Email</FormLabel>
+          <InputForm
+            type="email"
+            {...register('email')}
+            placeholder="[email protected]"
+            minW={{ base: '300px', md: '380px' }}
+          />
+          {errors.email && (
+            <FormErrorMessage>{errors.email.message}</FormErrorMessage>
+          )}
+        </FormControl>
+        <FormControl isInvalid={!!errors.name}>
+          <FormLabel color="black">Name</FormLabel>
+          <InputForm
+            type="text"
+            {...register('name')}
+            placeholder="John Smith"
+          />
+          {errors.name && (
+            <FormErrorMessage>{errors.name.message}</FormErrorMessage>
+          )}
+        </FormControl>
+        <FormControl isInvalid={!!errors.password}>
+          <FormLabel color="black">Password</FormLabel>
+          <InputForm
+            type="password"
+            hasEyeIcon={true}
+            {...register('password')}
+            placeholder="password"
+          />
+          {errors.password && (
+            <FormErrorMessage>{errors.password.message}</FormErrorMessage>
+          )}
+        </FormControl>
+        <FormControl isInvalid={!!errors.confirmationPassword}>
+          <FormLabel color="black">Confirm Password</FormLabel>
+          <InputForm
+            type="password"
+            hasEyeIcon={true}
+            {...register('confirmationPassword')}
+            placeholder="password"
+          />
+          {errors.confirmationPassword && (
+            <FormErrorMessage>
+              {errors.confirmationPassword.message}
+            </FormErrorMessage>
+          )}
+        </FormControl>
+      </VStack>
+      <PrimaryButton isLoading={isLoading} type={'submit'} w="100%" mt="30px">
+        Create Account
+      </PrimaryButton>
+    </CardBody>
+  )
+}

app/(auth)/signup/components/signup-header.tsx

@@ -0,0 +1,25 @@
+import { CardHeader, Center, VStack, Heading } from '@chakra-ui/react'
+import Image from 'next/image'
+import logo from 'public/logo/logo.png'
+
+export const SignUpHeader = () => {
+  return (
+    <CardHeader w="100%" p="0">
+      <Center w="100%">
+        <Image src={logo} width={144} height={40} alt="Tabi Memo" />
+      </Center>
+      <VStack
+        w="100%"
+        mt={{ base: '28px', md: '5px' }}
+        align={{ base: 'center', md: 'start' }}
+      >
+        <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }} color="gray.700">
+          Create your account
+        </Heading>
+        <Heading as="h2" fontSize="sm" color="gray.700" fontWeight="regular">
+          It{"'s"} quick and easy
+        </Heading>
+      </VStack>
+    </CardHeader>
+  )
+}