update pay function

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { updatePassword } 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,
+  FormLabel,
+  Input,
+  useColorModeValue
+} from '@chakra-ui/react';
+
+interface UpdatePasswordProps {
+  redirectMethod: string;
+}
+
+export default function UpdatePassword({
+  redirectMethod
+}: UpdatePasswordProps) {
+  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, updatePassword, router);
+    setIsSubmitting(false);
+  };
+
+  return (
+    <Box mb={8}>
+      <form onSubmit={(e) => handleSubmit(e)}>
+        <FormLabel
+          htmlFor="password"
+          display="flex"
+          ms="4px"
+          fontSize="sm"
+          fontWeight="500"
+          color={textColor}
+          mb="8px"
+        >
+          New Password
+        </FormLabel>
+        <Input
+          isRequired={true}
+          variant="auth"
+          fontSize="sm"
+          ms={{ base: '0px', md: '0px' }}
+          mb="24px"
+          fontWeight="500"
+          size="lg"
+          id="password"
+          placeholder="Password"
+          type="password"
+          name="password"
+          autoComplete="current-password"
+        />
+        <FormLabel
+          htmlFor="password"
+          display="flex"
+          ms="4px"
+          fontSize="sm"
+          fontWeight="500"
+          color={textColor}
+          mb="8px"
+        >
+          Confirm New Password
+        </FormLabel>
+        <Input
+          isRequired={true}
+          variant="auth"
+          fontSize="sm"
+          ms={{ base: '0px', md: '0px' }}
+          mb="24px"
+          fontWeight="500"
+          size="lg"
+          id="passwordConfirm"
+          placeholder="Password"
+          type="password"
+          name="passwordConfirm"
+          autoComplete="current-password"
+        />
+        <Button
+          fontSize="sm"
+          variant="brand"
+          fontWeight="500"
+          w="100%"
+          h="50"
+          mb="24px"
+          type="submit"
+          isLoading={isSubmitting}
+        >
+          Sign in
+        </Button>
+      </form>
+    </Box>
+  );
+}