update pay function

boilerplate-chakra-pro-main/components/auth-ui/EmailSignIn.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { signInWithEmail } from '@/utils/auth-helpers/server';
+import { handleRequest } from '@/utils/auth-helpers/client';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  FormLabel,
+  Input,
+  useColorModeValue,
+  Link
+} from '@chakra-ui/react';
+
+// Define prop type with allowPassword boolean
+interface EmailSignInProps {
+  allowPassword: boolean;
+  redirectMethod: string;
+  disableButton?: boolean;
+}
+
+export default function EmailSignIn({
+  allowPassword,
+  redirectMethod
+}: EmailSignInProps) {
+  const router = redirectMethod === 'client' ? useRouter() : null;
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const textColor = useColorModeValue('navy.700', 'white');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    setIsSubmitting(true); // Disable the button while the request is being handled
+    await handleRequest(e, signInWithEmail, router);
+    setIsSubmitting(false);
+  };
+
+  return (
+    <Box mb={8}>
+      <form onSubmit={(e) => handleSubmit(e)}>
+        <FormLabel
+          htmlFor="email"
+          display="flex"
+          ms="4px"
+          fontSize="sm"
+          fontWeight="500"
+          color={textColor}
+          mb="8px"
+        >
+          Email
+        </FormLabel>
+        <Input
+          isRequired={true}
+          variant="auth"
+          fontSize="sm"
+          ms={{ base: '0px', md: '0px' }}
+          id="email"
+          placeholder="name@example.com"
+          type="email"
+          name="email"
+          mb="24px"
+          fontWeight="500"
+          size="lg"
+        />
+        <Button
+          fontSize="sm"
+          variant="brand"
+          fontWeight="500"
+          w="100%"
+          h="50"
+          mb="24px"
+          type="submit"
+          isLoading={isSubmitting}
+        >
+          Sign in
+        </Button>
+      </form>
+
+      {allowPassword && (
+        <Flex direction="column">
+          <Link
+            href="/dashboard/signin/password_signin"
+            color={textColor}
+            fontWeight="medium"
+          >
+            Sign in with email and password
+          </Link>
+
+          <Link
+            href="/dashboard/signin/signup"
+            color={textColor}
+            fontWeight="medium"
+          >
+            Don't have an account? Sign up
+          </Link>
+        </Flex>
+      )}
+    </Box>
+  );
+}