From 849929fd344adef9da36f056d1ec5b70671400e7 Mon Sep 17 00:00:00 2001 From: Sachi Goto <70562492+SachiGoto@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:53:53 -0800 Subject: [PATCH 1/5] sign up page ui --- app/(auth)/signup/email/page.tsx | 186 +++++++++++++++++++++++-------- 1 file changed, 142 insertions(+), 44 deletions(-) diff --git a/app/(auth)/signup/email/page.tsx b/app/(auth)/signup/email/page.tsx index 49f05f7..87e2d83 100644 --- a/app/(auth)/signup/email/page.tsx +++ b/app/(auth)/signup/email/page.tsx @@ -2,19 +2,29 @@ import { useState } from 'react' import { useForm } from 'react-hook-form' import { + AbsoluteCenter, Box, - Flex, + Card, + CardHeader, + CardBody, + CardFooter, + Center, + VStack, FormLabel, FormErrorMessage, FormControl, - Input, Heading, useToast, - useBoolean + useBoolean, + Text } from '@chakra-ui/react' +import Image from 'next/image' import { signUp } from '@/(auth)/signup/email/action' import { signUpResolver, SignUpSchema } from '@/(auth)/signup/email/schema' import { PrimaryButton } from '@/components/button' +import { InputForm } from '@/components/input' +import { Link } from '@/components/link' +import logo from 'public/logo/logo.png' export default function SignUp() { const toast = useToast() @@ -56,46 +66,134 @@ export default function SignUp() { }) return ( - <> - Welcome! - Create an Account - - - - Name - - {errors.name && ( - {errors.name.message} - )} - - - Email address - - {errors.email && ( - {errors.email.message} - )} - - - Password - - {errors.password && ( - {errors.password.message} - )} - - - Confirmation Password - - {errors.confirmationPassword && ( - - {errors.confirmationPassword.message} - - )} - - - Sign Up - - - - + + + + +
+ Tabi Memo +
+ + + Create your account + + + It{"'s"} quick and easy + + + + + + + Name + + {errors.name && ( + {errors.name.message} + )} + + + Email + + {errors.email && ( + {errors.email.message} + )} + + + Password + + {errors.password && ( + {errors.password.message} + )} + + + Confirm Password + + {errors.confirmationPassword && ( + + {errors.confirmationPassword.message} + + )} + + + + Sign Up + + + + + + Already have an account? + + + Sign In + + + + + + ) } From 3de98d3baacd76e6ea4228b504fb73780e8eeee5 Mon Sep 17 00:00:00 2001 From: Sachi Goto <70562492+SachiGoto@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:17:03 -0800 Subject: [PATCH 2/5] restrict to light mode --- app/(auth)/signup/email/page.tsx | 17 ++++++++++++----- app/components/input/input-form.tsx | 24 ++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 7 deletions(-) diff --git a/app/(auth)/signup/email/page.tsx b/app/(auth)/signup/email/page.tsx index 87e2d83..18df513 100644 --- a/app/(auth)/signup/email/page.tsx +++ b/app/(auth)/signup/email/page.tsx @@ -121,16 +121,21 @@ export default function SignUp() { > - Name - + Name + {errors.name && ( {errors.name.message} )} - Email + Email @@ -139,9 +144,10 @@ export default function SignUp() { )} - Password + Password @@ -150,9 +156,10 @@ export default function SignUp() { )} - Confirm Password + Confirm Password diff --git a/app/components/input/input-form.tsx b/app/components/input/input-form.tsx index 237044f..7cc4108 100644 --- a/app/components/input/input-form.tsx +++ b/app/components/input/input-form.tsx @@ -10,14 +10,34 @@ import { type InputFormProps = { rightIcon?: IconType + forceLightMode?: boolean } export const InputForm = forwardRef( - ({ rightIcon: RightIcon, ...props }, ref) => { + ({ rightIcon: RightIcon, forceLightMode, ...props }, ref) => { const bgColor = useColorModeValue('white', 'gray.700') const borderColor = useColorModeValue('gray.300', 'gray.500') const placeholdercolor = useColorModeValue('gray.400', 'gray.600') - return ( + return forceLightMode ? ( + + + {RightIcon && ( + + + + )} + + ) : ( Date: Tue, 13 Feb 2024 15:50:13 -0800 Subject: [PATCH 3/5] sign up page UI --- app/(auth)/signin/components/signin-form.tsx | 3 +- app/(auth)/signin/page.tsx | 1 + app/(auth)/signup/email/components/index.tsx | 2 + .../signup/email/components/signup-footer.tsx | 44 ++++++++ .../signup/email/components/signup-form.tsx | 32 ++++-- .../signup/email/components/signup-header.tsx | 25 +++++ app/(auth)/signup/email/page.tsx | 100 +++++------------- 7 files changed, 123 insertions(+), 84 deletions(-) create mode 100644 app/(auth)/signup/email/components/signup-footer.tsx create mode 100644 app/(auth)/signup/email/components/signup-header.tsx diff --git a/app/(auth)/signin/components/signin-form.tsx b/app/(auth)/signin/components/signin-form.tsx index 99de6b3..6d09964 100644 --- a/app/(auth)/signin/components/signin-form.tsx +++ b/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' }} > diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx index 11fc42a..c2e522f 100644 --- a/app/(auth)/signin/page.tsx +++ b/app/(auth)/signin/page.tsx @@ -14,6 +14,7 @@ export default function SignIn() { { + return ( + + + + Already have an account? + + + Sign In + + + + By signing up, you agree to{' '} + + Terms of Service + {' '} + and{' '} + + Privacy Policy + {' '} + . + + + ) +} diff --git a/app/(auth)/signup/email/components/signup-form.tsx b/app/(auth)/signup/email/components/signup-form.tsx index 9a76cf9..00c329c 100644 --- a/app/(auth)/signup/email/components/signup-form.tsx +++ b/app/(auth)/signup/email/components/signup-form.tsx @@ -52,27 +52,28 @@ export const SignUpForm = () => { setIsLoading.off() } }) + const signUpInputStyle = { + 'input:-webkit-autofill, input:-webkit-autofill:focus': { + boxShadow: '0 0 0 1000px #f8f8f8 inset', + textFillColor: 'black' + } + } return ( - - Name - - {errors.name && ( - {errors.name.message} - )} - Email { {errors.email.message} )} + + Name + + {errors.name && ( + {errors.name.message} + )} + Password @@ -96,6 +109,7 @@ export const SignUpForm = () => { Confirm Password @@ -107,7 +121,7 @@ export const SignUpForm = () => { - Sign Up + Create Account ) diff --git a/app/(auth)/signup/email/components/signup-header.tsx b/app/(auth)/signup/email/components/signup-header.tsx new file mode 100644 index 0000000..47e0f8c --- /dev/null +++ b/app/(auth)/signup/email/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 ( + +
+ Tabi Memo +
+ + + Create your account + + + It{"'s"} quick and easy + + + + ) +} diff --git a/app/(auth)/signup/email/page.tsx b/app/(auth)/signup/email/page.tsx index 1cbe31c..b0780fe 100644 --- a/app/(auth)/signup/email/page.tsx +++ b/app/(auth)/signup/email/page.tsx @@ -1,92 +1,44 @@ 'use client' +import { Box, Card, LightMode } from '@chakra-ui/react' import { - AbsoluteCenter, - Box, - Card, - CardHeader, - CardFooter, - Center, - VStack, - Heading, - Text, - LightMode -} from '@chakra-ui/react' -import Image from 'next/image' -import { SignUpForm } from '@/(auth)/signup/email/components' -import { Link } from '@/components/link' -import logo from 'public/logo/logo.png' + SignUpHeader, + SignUpForm, + SignUpFooter +} from '@/(auth)/signup/email/components' export default function SignUp() { return ( - - - -
- Tabi Memo -
- - - Create your account - - - It{"'s"} quick and easy - - - - - - - - Already have an account? - - - Sign In - - - - - + + + + + ) From fea2dd3b771120175379c17e3d2027fa5443c42f Mon Sep 17 00:00:00 2001 From: Sachi Goto <70562492+SachiGoto@users.noreply.github.com> Date: Thu, 22 Feb 2024 22:38:37 -0800 Subject: [PATCH 4/5] adjusted padding and margin --- .../signup/email/components/signup-footer.tsx | 4 ++-- .../signup/email/components/signup-form.tsx | 4 ++-- .../signup/email/components/signup-header.tsx | 2 +- app/(auth)/signup/email/page.tsx | 20 ++++++++----------- 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/app/(auth)/signup/email/components/signup-footer.tsx b/app/(auth)/signup/email/components/signup-footer.tsx index 67e0d66..debdb08 100644 --- a/app/(auth)/signup/email/components/signup-footer.tsx +++ b/app/(auth)/signup/email/components/signup-footer.tsx @@ -4,7 +4,7 @@ import { Link } from '@/components/link' export const SignUpFooter = () => { return ( { align="center" fontSize="xs" color="gray.600" - mt={{ base: '38px', md: '42px' }} + mt={{ base: '38px', md: '32px' }} > By signing up, you agree to{' '} diff --git a/app/(auth)/signup/email/components/signup-form.tsx b/app/(auth)/signup/email/components/signup-form.tsx index 00c329c..f38d4f9 100644 --- a/app/(auth)/signup/email/components/signup-form.tsx +++ b/app/(auth)/signup/email/components/signup-form.tsx @@ -63,13 +63,13 @@ export const SignUpForm = () => { sx={signUpInputStyle} as="form" onSubmit={signUpHandler} - mt={{ base: '38px', md: '42px' }} + mt={{ base: '38px', md: '32px' }} gap={{ base: '30px', md: '40px' }} p="0%" w={{ base: '90vw', md: 'unset' }} maxW="500px" > - + Email { diff --git a/app/(auth)/signup/email/page.tsx b/app/(auth)/signup/email/page.tsx index b0780fe..4398119 100644 --- a/app/(auth)/signup/email/page.tsx +++ b/app/(auth)/signup/email/page.tsx @@ -12,27 +12,23 @@ export default function SignUp() { From a8cb4673bb085367608373c684105f57405df4e4 Mon Sep 17 00:00:00 2001 From: Kana Taguchi Date: Sat, 2 Mar 2024 14:10:20 -0800 Subject: [PATCH 5/5] Fix signup page --- .../signin/components/signin-footer.tsx | 2 +- app/(auth)/signup/{email => }/action/index.ts | 2 +- .../signup/{email => }/components/index.tsx | 0 .../{email => }/components/signup-footer.tsx | 9 ++-- .../{email => }/components/signup-form.tsx | 4 +- .../{email => }/components/signup-header.tsx | 0 app/(auth)/signup/email/page.tsx | 41 -------------- app/(auth)/signup/page.tsx | 54 ++++++++++++------- app/(auth)/signup/{email => }/schema.ts | 0 9 files changed, 45 insertions(+), 67 deletions(-) rename app/(auth)/signup/{email => }/action/index.ts (88%) rename app/(auth)/signup/{email => }/components/index.tsx (100%) rename app/(auth)/signup/{email => }/components/signup-footer.tsx (76%) rename app/(auth)/signup/{email => }/components/signup-form.tsx (96%) rename app/(auth)/signup/{email => }/components/signup-header.tsx (100%) delete mode 100644 app/(auth)/signup/email/page.tsx rename app/(auth)/signup/{email => }/schema.ts (100%) diff --git a/app/(auth)/signin/components/signin-footer.tsx b/app/(auth)/signin/components/signin-footer.tsx index 45f60c9..23ac62d 100644 --- a/app/(auth)/signin/components/signin-footer.tsx +++ b/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 diff --git a/app/(auth)/signup/email/action/index.ts b/app/(auth)/signup/action/index.ts similarity index 88% rename from app/(auth)/signup/email/action/index.ts rename to app/(auth)/signup/action/index.ts index fbcea14..c4ff932 100644 --- a/app/(auth)/signup/email/action/index.ts +++ b/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 ({ diff --git a/app/(auth)/signup/email/components/index.tsx b/app/(auth)/signup/components/index.tsx similarity index 100% rename from app/(auth)/signup/email/components/index.tsx rename to app/(auth)/signup/components/index.tsx diff --git a/app/(auth)/signup/email/components/signup-footer.tsx b/app/(auth)/signup/components/signup-footer.tsx similarity index 76% rename from app/(auth)/signup/email/components/signup-footer.tsx rename to app/(auth)/signup/components/signup-footer.tsx index debdb08..c9bec29 100644 --- a/app/(auth)/signup/email/components/signup-footer.tsx +++ b/app/(auth)/signup/components/signup-footer.tsx @@ -29,12 +29,13 @@ export const SignUpFooter = () => { color="gray.600" mt={{ base: '38px', md: '32px' }} > - By signing up, you agree to{' '} - + By signing up, you agree to + {/* TODO Add terms of policy page */} + Terms of Service {' '} - and{' '} - + and {/* TODO Add terms of privacy policy page */} + Privacy Policy {' '} . diff --git a/app/(auth)/signup/email/components/signup-form.tsx b/app/(auth)/signup/components/signup-form.tsx similarity index 96% rename from app/(auth)/signup/email/components/signup-form.tsx rename to app/(auth)/signup/components/signup-form.tsx index f38d4f9..4ca9680 100644 --- a/app/(auth)/signup/email/components/signup-form.tsx +++ b/app/(auth)/signup/components/signup-form.tsx @@ -9,8 +9,8 @@ import { useToast, useBoolean } from '@chakra-ui/react' -import { signUp } from '@/(auth)/signup/email/action' -import { signUpResolver, SignUpSchema } from '@/(auth)/signup/email/schema' +import { signUp } from '@/(auth)/signup/action' +import { signUpResolver, SignUpSchema } from '@/(auth)/signup/schema' import { PrimaryButton } from '@/components/button' import { InputForm } from '@/components/input' diff --git a/app/(auth)/signup/email/components/signup-header.tsx b/app/(auth)/signup/components/signup-header.tsx similarity index 100% rename from app/(auth)/signup/email/components/signup-header.tsx rename to app/(auth)/signup/components/signup-header.tsx diff --git a/app/(auth)/signup/email/page.tsx b/app/(auth)/signup/email/page.tsx deleted file mode 100644 index 4398119..0000000 --- a/app/(auth)/signup/email/page.tsx +++ /dev/null @@ -1,41 +0,0 @@ -'use client' - -import { Box, Card, LightMode } from '@chakra-ui/react' -import { - SignUpHeader, - SignUpForm, - SignUpFooter -} from '@/(auth)/signup/email/components' - -export default function SignUp() { - return ( - - - - - - - - - - ) -} diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx index 8c116c1..7bbb96a 100644 --- a/app/(auth)/signup/page.tsx +++ b/app/(auth)/signup/page.tsx @@ -1,23 +1,41 @@ -import { Heading, List, ListItem } from '@chakra-ui/react' -import Link from 'next/link' -import { SecondaryButton } from '@/components/button' +'use client' + +import { Box, Card, LightMode } from '@chakra-ui/react' +import { + SignUpHeader, + SignUpForm, + SignUpFooter +} from '@/(auth)/signup/components' export default function SignUp() { return ( - <> - Welcome! - Create an Account - - - - Sign up with Email - - - - Already have an account? - - Sign in to your account? - - + + + + + + + + + ) } diff --git a/app/(auth)/signup/email/schema.ts b/app/(auth)/signup/schema.ts similarity index 100% rename from app/(auth)/signup/email/schema.ts rename to app/(auth)/signup/schema.ts