update pay function
This commit is contained in:
100
boilerplate-chakra-pro-main/components/auth-ui/EmailSignIn.tsx
Normal file
100
boilerplate-chakra-pro-main/components/auth-ui/EmailSignIn.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
'use client';
|
||||
import { requestPasswordUpdate } 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 allowEmail boolean
|
||||
interface ForgotPasswordProps {
|
||||
allowEmail: boolean;
|
||||
redirectMethod: string;
|
||||
disableButton?: boolean;
|
||||
}
|
||||
|
||||
export default function ForgotPassword({
|
||||
allowEmail,
|
||||
redirectMethod
|
||||
}: ForgotPasswordProps) {
|
||||
const router = redirectMethod === 'client' ? useRouter() : null;
|
||||
|
||||
const textColor = useColorModeValue('navy.700', 'white');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
setIsSubmitting(true); // Disable the button while the request is being handled
|
||||
await handleRequest(e, requestPasswordUpdate, 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>
|
||||
|
||||
<Flex direction="column">
|
||||
<Link
|
||||
href="/dashboard/signin/password_signin"
|
||||
color={textColor}
|
||||
fontWeight="medium"
|
||||
>
|
||||
Sign in with email and 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client';
|
||||
|
||||
|
||||
import { signInWithOAuth } from '@/utils/auth-helpers/client';
|
||||
import { type Provider } from '@supabase/supabase-js';
|
||||
import { FcGoogle } from "react-icons/fc";
|
||||
import { useState } from 'react';
|
||||
import { useColorModeValue } from '@chakra-ui/system';
|
||||
import { Box, Button, Icon, Input } from '@chakra-ui/react';
|
||||
import { IconType } from 'react-icons';
|
||||
|
||||
type OAuthProviders = {
|
||||
name: Provider;
|
||||
displayName: string;
|
||||
icon: IconType;
|
||||
};
|
||||
|
||||
export default function OauthSignIn() {
|
||||
// Chakra color mode
|
||||
const googleBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.200');
|
||||
const googleText = useColorModeValue('navy.700', 'white');
|
||||
const googleHover = useColorModeValue(
|
||||
{ bg: 'gray.200' },
|
||||
{ bg: 'whiteAlpha.300' },
|
||||
);
|
||||
const googleActive = useColorModeValue(
|
||||
{ bg: 'secondaryGray.300' },
|
||||
{ bg: 'whiteAlpha.200' },
|
||||
);
|
||||
const oAuthProviders: OAuthProviders[] = [
|
||||
{
|
||||
name: 'google',
|
||||
displayName: 'Google',
|
||||
icon: FcGoogle
|
||||
}
|
||||
/* Add desired OAuth providers here */
|
||||
];
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
setIsSubmitting(true); // Disable the button while the request is being handled
|
||||
await signInWithOAuth(e);
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box mt="40px">
|
||||
{oAuthProviders.map((provider) => (
|
||||
<form
|
||||
key={provider.name}
|
||||
className="pb-2"
|
||||
onSubmit={(e) => handleSubmit(e)}
|
||||
>
|
||||
<Input type="hidden" name="provider" value={provider.name} />
|
||||
<Button
|
||||
fontSize="sm"
|
||||
me="0px"
|
||||
py="15px"
|
||||
h="50px"
|
||||
w="100%"
|
||||
borderRadius="16px"
|
||||
bg={googleBg}
|
||||
color={googleText}
|
||||
fontWeight="500"
|
||||
_hover={googleHover}
|
||||
_active={googleActive}
|
||||
_focus={googleActive}
|
||||
type="submit"
|
||||
>
|
||||
<Icon as={ provider.icon} w="20px" h="20px" me="10px" />
|
||||
{provider.displayName}
|
||||
</Button>
|
||||
</form>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
131
boilerplate-chakra-pro-main/components/auth-ui/Signup.tsx
Normal file
131
boilerplate-chakra-pro-main/components/auth-ui/Signup.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { signUp } from '@/utils/auth-helpers/server';
|
||||
import { handleRequest } from '@/utils/auth-helpers/client';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Flex,
|
||||
useColorModeValue,
|
||||
Link,
|
||||
FormLabel,
|
||||
Box,
|
||||
Input,
|
||||
Button
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
// Define prop type with allowEmail boolean
|
||||
interface SignUpProps {
|
||||
allowEmail: boolean;
|
||||
redirectMethod: string;
|
||||
}
|
||||
|
||||
export default function SignUp({ allowEmail, redirectMethod }: SignUpProps) {
|
||||
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, signUp, router);
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box mb="auto" mt="20px">
|
||||
<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>
|
||||
<Link
|
||||
href="/dashboard/signin/password_signin"
|
||||
color={textColor}
|
||||
fontWeight="medium"
|
||||
>
|
||||
Already have an account?
|
||||
</Link>
|
||||
{allowEmail && (
|
||||
<Link
|
||||
href="/dashboard/signin/email_signin"
|
||||
color={textColor}
|
||||
fontWeight="medium"
|
||||
>
|
||||
Sign in via magic link
|
||||
</Link>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user