diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx index 6d86d198..040e552c 100644 --- a/app/(auth)/register/page.tsx +++ b/app/(auth)/register/page.tsx @@ -12,47 +12,6 @@ export default async function RoutePage(props: PageParams<{}>) { return (
- {/*
*/} - {/*

Create an account

*/} - {/*

*/} - {/* Enter your email below to login to your account*/} - {/*

*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* Forgot your password?*/} - {/* */} - {/*
*/} - {/* */} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/* Don't have an account?{" "}*/} - {/* /!**!/*/} - {/* /!* Sign up*!/*/} - {/* /!**!/*/} - {/*
*/}
) diff --git a/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx b/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx index 85e667fa..38ae8f89 100644 --- a/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx +++ b/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx @@ -10,9 +10,13 @@ import {Button} from "@/components/ui/button"; import {toast} from "sonner"; import {useRouter} from "next/navigation"; import {useMutation} from "@tanstack/react-query"; -import {TooltipProvider} from "@/components/ui/tooltip"; +import {TooltipProvider, TooltipTrigger, Tooltip, TooltipContent} from "@/components/ui/tooltip"; import {RegisterSchema, RegisterType} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.schema"; import {registerUserAction} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.action"; +import {Label} from "@/components/ui/label"; +import Link from "next/link"; +import {Info} from "lucide-react"; +import {PasswordInput} from "@/components/wrappers/PaswordInput/password-input"; export type registerFormProps = { defaultValues?: RegisterType; @@ -47,7 +51,13 @@ export const RegisterForm = (props: registerFormProps) => { - Register + +
+

Create an account

+

+ Enter your informations bellow to register +

+
{ }} > - ( - - Name - - - - {/*{t('tabs.general.data.name.description')}*/} - - - )} - /> + ( + + Name + + + + {/*{t('tabs.general.data.name.description')}*/} + + + )} + /> { Email + placeholder="exemple@portabase.com" {...field} /> {/*{t('tabs.general.data.name.description')}*/} @@ -92,20 +102,75 @@ export const RegisterForm = (props: registerFormProps) => { name="password" render={({field}) => ( - Password + + Password + + + + + + +

Min. 8 characters, 1 uppercase (A-Z), 1 lowercase (a-z), 1 number (0-9), 1 special character (!, @, etc.)

+
+
+
+
+ + {/*
*/} + {/* Password*/} + {/* */} + {/* Forgot your password?*/} + {/* */} + {/*
*/} + + - + + + +
+ )} + /> + ( + + + Password Confirmation + + {/*
*/} + {/* Password*/} + {/* */} + {/* Forgot your password?*/} + {/* */} + {/*
*/} + + + + {/*{t('tabs.general.data.name.description')}*/}
)} /> - + {/*
*/} + {/* Don't have an account?{" "}*/} + {/* /!**!/*/} + {/* /!* Sign up*!/*/} + {/* /!**!/*/} + {/*
*/}
diff --git a/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts b/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts index 07a0875f..1c4c9e3f 100644 --- a/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts +++ b/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts @@ -8,10 +8,9 @@ import {hashPassword} from "@/utils/password"; export const registerUserAction = action .schema(RegisterSchema) .action(async ({parsedInput, ctx}) => { - const user = await prisma.user.findUnique({ where: { email: parsedInput.email } }); console.log(user); - if (!user) { + if (!user && parsedInput.password === parsedInput.confirmPassword) { const new_user = await prisma.user.create({ data: { email: parsedInput.email, @@ -22,7 +21,6 @@ export const registerUserAction = action data: new_user, } } - return { data: user, } diff --git a/src/components/wrappers/Auth/Register/RegisterForm/register-form.schema.ts b/src/components/wrappers/Auth/Register/RegisterForm/register-form.schema.ts index 6097be8a..58767b38 100644 --- a/src/components/wrappers/Auth/Register/RegisterForm/register-form.schema.ts +++ b/src/components/wrappers/Auth/Register/RegisterForm/register-form.schema.ts @@ -1,10 +1,29 @@ import {z} from "zod"; +// Minimum 8 characters, at least one uppercase letter, one lowercase letter, one number and one special character +const passwordValidation = new RegExp( + /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/ +); + export const RegisterSchema = z.object({ name: z.string(), email: z.string(), - password: z.string(), + password: z + .string() + .min(8, { message: 'Must have at least 8 character' }) + .regex(passwordValidation, { + message: 'Your password is not valid', + }), + confirmPassword: z.string(), +}).superRefine(({ confirmPassword, password }, ctx) => { + if (confirmPassword !== password) { + ctx.addIssue({ + code: "custom", + message: "The passwords did not match", + path: ['confirmPassword'] + }); + } }); export type RegisterType = z.infer; diff --git a/src/components/wrappers/PaswordInput/password-input.tsx b/src/components/wrappers/PaswordInput/password-input.tsx new file mode 100644 index 00000000..9768eea2 --- /dev/null +++ b/src/components/wrappers/PaswordInput/password-input.tsx @@ -0,0 +1,52 @@ +'use client' + +import * as React from 'react' +import { EyeIcon, EyeOffIcon } from 'lucide-react' + +import { Button } from '@/components/ui/button' +import { Input, type InputProps } from '@/components/ui/input' +import { cn } from '@/lib/utils' + +const PasswordInput = React.forwardRef(({ className, ...props }, ref) => { + const [showPassword, setShowPassword] = React.useState(false) + const disabled = props.value === '' || props.value === undefined || props.disabled + + return ( +
+ + + + {/* hides browsers password toggles */} + +
+ ) +}) +PasswordInput.displayName = 'PasswordInput' + +export { PasswordInput } \ No newline at end of file