update pay function

boilerplate-chakra-pro-main/components/auth/AuthUI.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import PasswordSignIn from '@/components/auth-ui/PasswordSignIn';
+import EmailSignIn from '@/components/auth-ui/EmailSignIn';
+import OauthSignIn from '@/components/auth-ui/OauthSignIn';
+import ForgotPassword from '@/components/auth-ui/ForgotPassword';
+import UpdatePassword from '@/components/auth-ui/UpdatePassword';
+import SignUp from '@/components/auth-ui/Signup';
+import { Flex, Text } from '@chakra-ui/react';
+import { HSeparator } from '../separator/Separator';
+
+export default function AuthUI(props: any) {
+  return (
+    <Flex
+      direction={'column'}
+      my="auto"
+      mt={{ base: '30px', md: '70px', lg: 'auto' }}
+      maxW={{ md: 'full', lg: '420px' }}
+    >
+      <Text fontSize="32px" fontWeight={'bold'} color="gray.900">
+        {props.viewProp === 'signup'
+          ? 'Sign Up'
+          : props.viewProp === 'forgot_password'
+          ? 'Forgot Password'
+          : props.viewProp === 'update_password'
+          ? 'Update Password'
+          : props.viewProp === 'email_signin'
+          ? 'Email Sign In'
+          : 'Sign In'}
+      </Text>
+      <Text fontSize="16px" color="gray.t00">
+        {props.viewProp === 'signup'
+          ? 'Enter your email and password to sign up!'
+          : props.viewProp === 'forgot_password'
+          ? 'Enter your email to get a passoword reset link!'
+          : props.viewProp === 'update_password'
+          ? 'Choose a new password for your account!'
+          : props.viewProp === 'email_signin'
+          ? 'Enter your email to get a magic link!'
+          : 'Enter your email and password to sign in!'}
+      </Text>
+      {props.viewProp !== 'update_password' &&
+        props.viewProp !== 'signup' &&
+        props.allowOauth && (
+          <>
+            <OauthSignIn />
+            <HSeparator my="20px" />
+          </>
+        )}
+      {props.viewProp === 'password_signin' && (
+        <PasswordSignIn
+          allowEmail={props.allowEmail}
+          redirectMethod={props.redirectMethod}
+        />
+      )}
+      {props.viewProp === 'email_signin' && (
+        <EmailSignIn
+          allowPassword={props.allowPassword}
+          redirectMethod={props.redirectMethod}
+          disableButton={props.disableButton}
+        />
+      )}
+      {props.viewProp === 'forgot_password' && (
+        <ForgotPassword
+          allowEmail={props.allowEmail}
+          redirectMethod={props.redirectMethod}
+          disableButton={props.disableButton}
+        />
+      )}
+      {props.viewProp === 'update_password' && (
+        <UpdatePassword redirectMethod={props.redirectMethod} />
+      )}
+      {props.viewProp === 'signup' && (
+        <SignUp
+          allowEmail={props.allowEmail}
+          redirectMethod={props.redirectMethod}
+        />
+      )}
+    </Flex>
+  );
+}

boilerplate-chakra-pro-main/components/auth/index.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import Footer from '@/components/footer/FooterAuthDefault';
+import NavLink from '@/components/link/NavLink';
+import { Box, Flex, Icon, Link, Text } from '@chakra-ui/react';
+import { PropsWithChildren } from 'react';
+import { FaChevronLeft } from 'react-icons/fa';
+interface DefaultAuthLayoutProps extends PropsWithChildren {
+  children: JSX.Element;
+  illustrationBackground: string;
+  viewProp: any;
+}
+
+export default function DefaultAuthLayout(props: DefaultAuthLayoutProps) {
+  const { children, illustrationBackground } = props;
+  return (
+    <Flex position="relative" h="max-content">
+      <Flex
+        minH="100vh"
+        w="100%"
+        maxW={{ base: '90%', md: '66%', lg: '1313px' }}
+        mx="auto"
+        pt={{ sm: '0px', md: '0px' }}
+        px={{ lg: '30px', xl: '0px' }}
+        ps={{ xl: '70px' }}
+        justifyContent="start"
+        direction="column"
+      >
+        <Link
+          href="/"
+          width={'fit-content'}
+          mt={10}
+          mb={{ base: '', md: '', lg: '120px', xl: '150px' }}
+        >
+          <Flex
+            align="center"
+            ps={{ base: '25px', lg: '0px' }}
+            pt={{ lg: '0px', xl: '0px' }}
+            w="fit-content"
+          >
+            <Icon
+              as={FaChevronLeft}
+              me="12px"
+              h="13px"
+              w="8px"
+              color="gray.500"
+            />
+            <Text ms="0px" fontSize="sm" color="gray.500">
+              Back to the website
+            </Text>
+          </Flex>
+        </Link>
+        {children}
+        <Box
+          display={{ base: 'none', md: 'block' }}
+          h="100%"
+          minH="100vh"
+          w={{ lg: '50vw', '2xl': '44vw' }}
+          position="absolute"
+          right="0px"
+        >
+          <Link href="/">
+            <Flex
+              bg={`url(${illustrationBackground})`}
+              justify="center"
+              align="end"
+              w="100%"
+              h="100%"
+              bgSize="cover"
+              bgPosition="50%"
+              position="absolute"
+            />
+          </Link>
+        </Box>
+        <Footer />
+      </Flex>
+    </Flex>
+  );
+}