update pay function

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

@@ -0,0 +1,132 @@
+'use client';
+
+import { signInWithPassword } from '@/utils/auth-helpers/server';
+import { handleRequest } from '@/utils/auth-helpers/client';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  FormLabel,
+  Input,
+  Link,
+  useColorModeValue
+} from '@chakra-ui/react';
+
+// Define prop type with allowEmail boolean
+interface PasswordSignInProps {
+  allowEmail: boolean;
+  redirectMethod: string;
+}
+
+export default function PasswordSignIn({
+  allowEmail,
+  redirectMethod
+}: PasswordSignInProps) {
+  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, signInWithPassword, router);
+    setIsSubmitting(false);
+  };
+
+  return (
+    <Box mb="auto">
+      <Box mb="8px">
+        <form noValidate={true} onSubmit={(e) => handleSubmit(e)}>
+          <FormLabel
+            htmlFor="email"
+            display="flex"
+            ms="4px"
+            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"
+            autoCapitalize="none"
+            autoComplete="email"
+            autoCorrect="off"
+            mb="24px"
+            fontWeight="500"
+            size="lg"
+          />
+          <FormLabel
+            htmlFor="password"
+            display="flex"
+            ms="4px"
+            fontWeight="500"
+            color={textColor}
+            mb="8px"
+          >
+            Password
+          </FormLabel>
+          <Input
+            isRequired={true}
+            variant="auth"
+            fontSize="sm"
+            ms={{ base: '0px', md: '0px' }}
+            id="password"
+            placeholder="Password"
+            type="password"
+            name="password"
+            autoComplete="current-password"
+            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>
+      </Box>
+      <Flex direction="column">
+        <Link
+          href="/dashboard/signin/forgot_password"
+          color={textColor}
+          fontWeight="medium"
+        >
+          Forgot your password?
+        </Link>
+        {allowEmail && (
+          <Link
+            href="/dashboard/signin/email_signin"
+            color={textColor}
+            fontWeight="medium"
+          >
+            Sign in via magic link
+          </Link>
+        )}
+        <Link
+          href="/dashboard/signin/signup"
+          color={textColor}
+          fontWeight="medium"
+        >
+          Don't have an account? Sign up
+        </Link>
+      </Flex>
+    </Box>
+  );
+}