LayoutAuth wrapper and outlet setTitle and setSubTitle context

vocdoni · Oct 22, 2024 · d9b40ac · d9b40ac
1 parent 00bac43
commit d9b40ac
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 69 deletions.
diff --git a/src/components/Auth/ForgotPassword.tsx b/src/components/Auth/ForgotPassword.tsx
@@ -1,32 +1,30 @@
-import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'
+import { Button, Flex, Text } from '@chakra-ui/react'
+import { useEffect } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { NavLink } from 'react-router-dom'
-import useDarkMode from '~components/Layout/useDarkMode'
+import { NavLink, useOutletContext } from 'react-router-dom'
+import { OutletContextType } from '~elements/LayoutAuth'
 import InputCustom from '../Layout/InputCustom'
 
 function ForgotPassword() {
   const { t } = useTranslation()
-  const { textColor, textColorSecondary, textColorBrand } = useDarkMode()
+  const [setTitle, setSubTitle] = useOutletContext<OutletContextType>()
+
   const methods = useForm({
     defaultValues: {
       email: '',
     },
   })
 
+  useEffect(() => {
+    setTitle(t('forgot_password_title'))
+    setSubTitle(t('forgot_password_subtitle'))
+  }, [])
+
   const onSubmit = () => {}
 
   return (
-    <Flex direction='column' gap={6}>
-      <Box me='auto'>
-        <Heading color={textColor} fontSize='4xl' mb={2.5}>
-          {t('forgot_password_title')}
-        </Heading>
-        <Text color={textColorSecondary} fontWeight='400' fontSize='md'>
-          {t('forgot_password_subtitle')}
-        </Text>
-      </Box>
-
+    <>
       <FormProvider {...methods}>
         <Flex as='form' onSubmit={methods.handleSubmit(onSubmit)} flexDirection='column' gap={6}>
           <InputCustom
@@ -42,16 +40,16 @@ function ForgotPassword() {
         </Flex>
       </FormProvider>
       <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%' mt={0}>
-        <Text color={textColorSecondary} fontWeight='400' fontSize='sm'>
+        <Text fontWeight='400' fontSize='sm'>
           {t('already_member')}
           <NavLink to='/account/signin'>
-            <Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
+            <Text as='span' color={'account.link'} ms={1} fontWeight='500'>
               {t('signin')}
             </Text>
           </NavLink>
         </Text>
       </Flex>
-    </Flex>
+    </>
   )
 }
 

diff --git a/src/components/Auth/SignIn.tsx b/src/components/Auth/SignIn.tsx
@@ -1,14 +1,14 @@
-import { Box, Button, Flex, Heading, Text } from '@chakra-ui/react'
-import { useState } from 'react'
+import { Button, Flex, Text } from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { NavLink, useNavigate } from 'react-router-dom'
+import { NavLink, useNavigate, useOutletContext } from 'react-router-dom'
 import { UnverifiedApiError } from '~components/Auth/api'
 import { ILoginParams } from '~components/Auth/authQueries'
 import { useAuth } from '~components/Auth/useAuth'
 import { VerifyAccountNeeded } from '~components/Auth/Verify'
 import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
-import useDarkMode from '~components/Layout/useDarkMode'
+import { OutletContextType } from '~elements/LayoutAuth'
 import CustomCheckbox from '../Layout/CheckboxCustom'
 import InputCustom from '../Layout/InputCustom'
 import GoogleAuth from './GoogleAuth'
@@ -20,11 +20,16 @@ type FormData = {
 const SignIn = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { textColor, textColorSecondary, textColorBrand, googleBg, googleHover, googleActive } = useDarkMode()
+  const [setTitle, setSubTitle] = useOutletContext<OutletContextType>()
   const methods = useForm<FormData>()
   const { handleSubmit, watch } = methods
   const email = watch('email')
 
+  useEffect(() => {
+    setTitle(t('signin_title'))
+    setSubTitle(t('signin_subtitle'))
+  }, [])
+
   const {
     login: { mutateAsync: login, isError, error, isPending },
   } = useAuth()
@@ -47,15 +52,7 @@ const SignIn = () => {
   }
 
   return (
-    <Flex direction='column' gap={6}>
-      <Box me='auto'>
-        <Heading color={textColor} fontSize='4xl' mb={2.5}>
-          {t('signin_title')}
-        </Heading>
-        <Text color={textColorSecondary} fontWeight='400' fontSize='md'>
-          {t('signin_subtitle')}
-        </Text>
-      </Box>
+    <>
       <GoogleAuth />
       <Flex align='center'>
         <HSeparator />
@@ -84,7 +81,7 @@ const SignIn = () => {
             <CustomCheckbox formValue='keepLogedIn' label={t('keep_me_logged', { defaultValue: 'Keep me logged' })} />
 
             <NavLink to='/account/recovery'>
-              <Text color={textColorBrand} fontSize='sm' fontWeight='500' whiteSpace='nowrap'>
+              <Text color={'account.link'} fontSize='sm' fontWeight='500' whiteSpace='nowrap'>
                 {t('forgot_password')}
               </Text>
             </NavLink>
@@ -99,14 +96,14 @@ const SignIn = () => {
         <Text fontWeight='400' fontSize='sm'>
           {t('not_registred_yet')}
           <NavLink to='/account/signup'>
-            <Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
+            <Text color={'account.link'} as='span' ms={1} fontWeight='500'>
               {t('create_account')}
             </Text>
           </NavLink>
         </Text>
       </Flex>
       <FormSubmitMessage isError={isError} error={error} />
-    </Flex>
+    </>
   )
 }
 

diff --git a/src/components/Auth/SignUp.tsx b/src/components/Auth/SignUp.tsx
@@ -1,13 +1,13 @@
-import { Box, Button, Flex, Heading, Link, Text } from '@chakra-ui/react'
-import { useState } from 'react'
+import { Button, Flex, Link, Text } from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
-import { NavLink, Link as ReactRouterLink } from 'react-router-dom'
+import { NavLink, Link as ReactRouterLink, useOutletContext } from 'react-router-dom'
 import { IRegisterParams } from '~components/Auth/authQueries'
 import { useAuth } from '~components/Auth/useAuth'
 import { VerifyAccountNeeded } from '~components/Auth/Verify'
 import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
-import useDarkMode from '~components/Layout/useDarkMode'
+import { OutletContextType } from '~elements/LayoutAuth'
 import CustomCheckbox from '../Layout/CheckboxCustom'
 import InputCustom from '../Layout/InputCustom'
 import GoogleAuth from './GoogleAuth'
@@ -19,7 +19,8 @@ type FormData = {
 
 const SignUp = () => {
   const { t } = useTranslation()
-  const { textColor, textColorSecondary, textColorBrand, googleBg, googleHover, googleActive } = useDarkMode()
+  const [setTitle, setSubTitle] = useOutletContext<OutletContextType>()
+
   const {
     register: { mutateAsync: signup, isError, error, isPending },
   } = useAuth()
@@ -31,6 +32,11 @@ const SignUp = () => {
   // State to show signup is successful
   const [isSuccess, setIsSuccess] = useState(false)
 
+  useEffect(() => {
+    setTitle(t('signup_title'))
+    setSubTitle(t('signup_subtitle'))
+  }, [])
+
   const onSubmit = async (data: FormData) => {
     await signup(data).then(() => setIsSuccess(true))
   }
@@ -40,15 +46,7 @@ const SignUp = () => {
   }
 
   return (
-    <Flex direction='column' gap={6}>
-      <Box me='auto'>
-        <Heading color={textColor} fontSize='4xl' mb={2.5}>
-          {t('signup_title')}
-        </Heading>
-        <Text color={textColorSecondary} fontWeight='400' fontSize='md'>
-          {t('signup_subtitle')}
-        </Text>
-      </Box>
+    <>
       <GoogleAuth />
       <Flex align='center'>
         <HSeparator />
@@ -106,17 +104,17 @@ const SignUp = () => {
       </FormProvider>
 
       <Flex flexDirection='column' justifyContent='center' alignItems='start' maxW='100%'>
-        <Text color={textColorSecondary} fontWeight='400' fontSize='sm'>
+        <Text color='account.description' fontWeight='400' fontSize='sm'>
           {t('already_member')}
           <NavLink to='/account/signin'>
-            <Text color={textColorBrand} as='span' ms={1} fontWeight='500'>
+            <Text color={'account.link'} as='span' ms={1} fontWeight='500'>
               {t('signin')}
             </Text>
           </NavLink>
         </Text>
       </Flex>
       {isError && <FormSubmitMessage isError={isError} error={error} />}
-    </Flex>
+    </>
   )
 }
 export default SignUp
diff --git a/src/components/Auth/Verify.tsx b/src/components/Auth/Verify.tsx
@@ -1,11 +1,12 @@
 import { Box, Button, Divider, Flex, FormControl, FormErrorMessage, Heading, Input, Text } from '@chakra-ui/react'
 import { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link as ReactRouterLink, useNavigate, useSearchParams } from 'react-router-dom'
+import { Link as ReactRouterLink, useNavigate, useOutletContext, useSearchParams } from 'react-router-dom'
 import { useResendVerificationMail } from '~components/Auth/authQueries'
 import { useAuth } from '~components/Auth/useAuth'
 import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 import useDarkMode from '~components/Layout/useDarkMode'
+import { OutletContextType } from '~elements/LayoutAuth'
 import { Loading } from '~src/router/SuspenseLoader'
 
 const Verify = () => {
@@ -106,8 +107,8 @@ const VerifyForm = ({ email }: IVerifyAccountProps) => {
 }
 
 export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
-  const { textColor, textColorSecondary } = useDarkMode()
   const { t } = useTranslation()
+  const [setTitle, setSubTitle] = useOutletContext<OutletContextType>()
   const {
     mutate: resend,
     isError: isResendError,
@@ -116,32 +117,33 @@ export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
     isSuccess: isResendSuccess,
   } = useResendVerificationMail()
 
+  useEffect(() => {
+    setTitle(t('verify.account_created_succesfully', { defaultValue: 'Account created successfully!' }))
+    setSubTitle(
+      t('verify.verification_email_is_sent', {
+        defaultValue: 'A verification email has been sent to:',
+      })
+    )
+  }, [])
+
   const resendMail = useCallback(() => {
     if (email && !isResendSuccess) {
       resend({ email })
     }
   }, [isResendSuccess, email])
 
   return (
-    <Flex direction='column' gap={2}>
-      <Box me='auto'>
-        <Heading color={textColor} fontSize='36px' mb='10px'>
-          {t('verify.account_created_succesfully', { defaultValue: 'Account created successfully!' })}
-        </Heading>
-        <Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='400' fontSize='md'>
-          {t('verify.verification_email_is_sent', {
-            defaultValue: 'A verification email has been sent to:',
-          })}
-        </Text>
-        <Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='bold' fontSize='md'>
+    <>
+      <Flex flexDirection='column' gap={6}>
+        <Text mb='36px' ms='4px' color={'account.description'} fontWeight='bold' fontSize='md'>
           {email}
         </Text>
-        <Text mb='36px' ms='4px' color={textColorSecondary} fontWeight='400' fontSize='md'>
+        <Text mb='36px' ms='4px' color={'account.description'} fontWeight='400' fontSize='md'>
           {t('verify.follow_email_instructions', {
             defaultValue: 'Follow the instructions there to activate your account.',
           })}
         </Text>
-      </Box>
+      </Flex>
       <VerifyForm email={email} />
 
       <Button isLoading={isResendPending} onClick={resendMail}>
@@ -164,7 +166,7 @@ export const VerifyAccountNeeded = ({ email }: IVerifyAccountProps) => {
           </Button>
         </>
       )}
-    </Flex>
+    </>
   )
 }
 

diff --git a/src/elements/LayoutAuth.tsx b/src/elements/LayoutAuth.tsx
@@ -1,14 +1,23 @@
-import { Box, Flex, Icon, Text } from '@chakra-ui/react'
+import { Box, Flex, Heading, Icon, Text } from '@chakra-ui/react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaChevronLeft } from 'react-icons/fa'
 import { NavLink, Outlet } from 'react-router-dom'
 import useDarkMode from '~components/Layout/useDarkMode'
 import AuthBanner from '~components/Organization/Dashboard/AuthBanner'
 
+export type OutletContextType = [
+  React.Dispatch<React.SetStateAction<string>>,
+  React.Dispatch<React.SetStateAction<string>>,
+]
+
 const LayoutAuth = () => {
   const { t } = useTranslation()
   const { bg, textColorSecondary } = useDarkMode()
 
+  const [title, setTitle] = useState('')
+  const [subTitle, setSubtitle] = useState('')
+
   return (
     <Flex bgColor={bg} minH='100vh' flexDirection={{ base: 'column', xl: 'row' }}>
       <Flex
@@ -30,7 +39,17 @@ const LayoutAuth = () => {
           </Box>
           <Flex pt={14} minW='100%' flexGrow={1} flexDirection='column' justifyContent='center' alignItems='center'>
             <Box maxW={{ base: '90%', md: 96 }} minW={{ base: '90%', md: 96 }}>
-              <Outlet />
+              <Flex direction='column' gap={6}>
+                <Box me='auto'>
+                  <Heading fontSize='4xl' mb={2.5}>
+                    {title}
+                  </Heading>
+                  <Text color={'account.description'} fontWeight='400' fontSize='md'>
+                    {subTitle}
+                  </Text>
+                </Box>
+                <Outlet context={[setTitle, setSubtitle]} />
+              </Flex>
             </Box>
           </Flex>
           <Text display={{ base: 'none', xl: 'block' }} mt='auto' color={textColorSecondary} py={5} textAlign='center'>