Register wording.

app/(auth)/register/page.tsx

@@ -12,47 +12,6 @@ export default async function RoutePage(props: PageParams<{}>) {
     return (
         <div className="mx-auto grid w-[350px] gap-6">
             <RegisterForm/>
-            {/*<div className="grid gap-2 text-center">*/}
-            {/*    <h1 className="text-3xl font-bold">Create an account</h1>*/}
-            {/*    <p className="text-balance text-muted-foreground">*/}
-            {/*        Enter your email below to login to your account*/}
-            {/*    </p>*/}
-            {/*</div>*/}
-            {/*<div className="grid gap-4">*/}
-            {/*    <div className="grid gap-2">*/}
-            {/*        <Label htmlFor="email">Email</Label>*/}
-            {/*        <Input*/}
-            {/*            id="email"*/}
-            {/*            type="email"*/}
-            {/*            placeholder="m@example.com"*/}
-            {/*            required*/}
-            {/*        />*/}
-            {/*    </div>*/}
-            {/*    <div className="grid gap-2">*/}
-            {/*        <div className="flex items-center">*/}
-            {/*            <Label htmlFor="password">Password</Label>*/}
-            {/*            <Link*/}
-            {/*                href="/forgot-password"*/}
-            {/*                className="ml-auto inline-block text-sm underline"*/}
-            {/*            >*/}
-            {/*                Forgot your password?*/}
-            {/*            </Link>*/}
-            {/*        </div>*/}
-            {/*        <Input id="password" type="password" required/>*/}
-            {/*    </div>*/}
-            {/*    <Button type="submit" className="w-full">*/}
-            {/*        Login*/}
-            {/*    </Button>*/}
-            {/*    <Button variant="outline" className="w-full">*/}
-            {/*        Login with Google*/}
-            {/*    </Button>*/}
-            {/*</div>*/}
-            {/*<div className="mt-4 text-center text-sm">*/}
-            {/*    Don&apos;t have an account?{" "}*/}
-            {/*    /!*<Link to="#" className="underline">*!/*/}
-            {/*    /!*    Sign up*!/*/}
-            {/*    /!*</Link>*!/*/}
-            {/*</div>*/}
         </div>
 
     )

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) => {
 
             <Card>
                 <CardHeader>
-                    <CardTitle>Register</CardTitle>
+
+                    <div className="grid gap-2 text-center mb-2">
+                        <h1 className="text-3xl font-bold">Create an account</h1>
+                        <p className="text-balance text-muted-foreground">
+                            Enter your informations bellow to register
+                        </p>
+                    </div>
                 </CardHeader>
                 <CardContent>
                     <Form form={form}
@@ -57,21 +67,21 @@ export const RegisterForm = (props: registerFormProps) => {
                           }}
                     >
 
-                                <FormField
+                        <FormField
-                                    control={form.control}
+                            control={form.control}
-                                    name="name"
+                            name="name"
-                                    render={({field}) => (
+                            render={({field}) => (
-                                        <FormItem>
+                                <FormItem>
-                                            <FormLabel>Name</FormLabel>
+                                    <FormLabel>Name</FormLabel>
-                                            <FormControl>
+                                    <FormControl>
-                                                <Input
+                                        <Input
-                                                    placeholder="Your name" {...field} />
+                                            placeholder="Your name" {...field} />
-                                            </FormControl>
+                                    </FormControl>
-                                            {/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
+                                    {/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
-                                            <FormMessage/>
+                                    <FormMessage/>
-                                        </FormItem>
+                                </FormItem>
-                                    )}
+                            )}
-                                />
+                        />
                         <FormField
                             control={form.control}
                             name="email"
@@ -80,7 +90,7 @@ export const RegisterForm = (props: registerFormProps) => {
                                     <FormLabel>Email</FormLabel>
                                     <FormControl>
                                         <Input
-                                            placeholder="Your email" {...field} />
+                                            placeholder="exemple@portabase.com" {...field} />
                                     </FormControl>
                                     {/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
                                     <FormMessage/>
@@ -92,20 +102,75 @@ export const RegisterForm = (props: registerFormProps) => {
                             name="password"
                             render={({field}) => (
                                 <FormItem>
-                                    <FormLabel>Password</FormLabel>
+
+                                    <FormLabel className="flex">Password
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Info className="ml-3" size="15"/>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p> Min. 8 characters, 1 uppercase (A-Z), 1 lowercase (a-z), 1 number (0-9), 1 special character (!, @, etc.)</p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </FormLabel>
+
+                                    {/*<div className="flex items-center">*/}
+                                    {/*    <FormLabel>Password</FormLabel>*/}
+                                    {/*    <Link*/}
+                                    {/*        href="/forgot-password"*/}
+                                    {/*        className="ml-auto inline-block text-sm underline"*/}
+                                    {/*    >*/}
+                                    {/*        Forgot your password?*/}
+                                    {/*    </Link>*/}
+                                    {/*</div>*/}
+
+
                                     <FormControl>
-                                        <Input
+                                        <PasswordInput placeholder="Your password" {...field}/>
-                                            placeholder="Your password" {...field} />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="confirmPassword"
+                            render={({field}) => (
+                                <FormItem>
+
+                                    <FormLabel>Password Confirmation</FormLabel>
+
+                                    {/*<div className="flex items-center">*/}
+                                    {/*    <FormLabel>Password</FormLabel>*/}
+                                    {/*    <Link*/}
+                                    {/*        href="/forgot-password"*/}
+                                    {/*        className="ml-auto inline-block text-sm underline"*/}
+                                    {/*    >*/}
+                                    {/*        Forgot your password?*/}
+                                    {/*    </Link>*/}
+                                    {/*</div>*/}
+
+
+                                    <FormControl>
+                                        <PasswordInput
+                                            placeholder="Conform your password" {...field} />
                                     </FormControl>
                                     {/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
                                     <FormMessage/>
                                 </FormItem>
                             )}
                         />
-
                         <Button>
                             Sign up
                         </Button>
+                        {/*<div className="mt-4 text-center text-sm">*/}
+                        {/*    Don&apos;t have an account?{" "}*/}
+                        {/*    /!*<Link to="#" className="underline">*!/*/}
+                        {/*    /!*    Sign up*!/*/}
+                        {/*    /!*</Link>*!/*/}
+                        {/*</div>*/}
                     </Form>
 
                 </CardContent>

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,
         }

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<typeof RegisterSchema>;

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<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false)
+    const disabled = props.value === '' || props.value === undefined || props.disabled
+
+    return (
+        <div className="relative">
+            <Input
+                type={showPassword ? 'text' : 'password'}
+                className={cn('hide-password-toggle pr-10', className)}
+                ref={ref}
+                {...props}
+            />
+            <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowPassword((prev) => !prev)}
+                disabled={disabled}
+            >
+                {showPassword && !disabled ? (
+                    <EyeIcon className="h-4 w-4" aria-hidden="true" />
+                ) : (
+                    <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+                )}
+                <span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>
+            </Button>
+
+            {/* hides browsers password toggles */}
+            <style>{`
+					.hide-password-toggle::-ms-reveal,
+					.hide-password-toggle::-ms-clear {
+						visibility: hidden;
+						pointer-events: none;
+						display: none;
+					}
+				`}</style>
+        </div>
+    )
+})
+PasswordInput.displayName = 'PasswordInput'
+
+export { PasswordInput }