mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Register wording.
This commit is contained in:
charles-gauthereau
@@ -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't have an account?{" "}*/}
|
||||
{/* /!*<Link to="#" className="underline">*!/*/}
|
||||
{/* /!* Sign up*!/*/}
|
||||
{/* /!*</Link>*!/*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
|
||||
)
|
||||
|
||||
@@ -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
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Your name" {...field} />
|
||||
</FormControl>
|
||||
{/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Your name" {...field} />
|
||||
</FormControl>
|
||||
{/*<FormDescription>{t('tabs.general.data.name.description')}</FormDescription>*/}
|
||||
<FormMessage/>
|
||||
</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
|
||||
placeholder="Your password" {...field} />
|
||||
<PasswordInput 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't have an account?{" "}*/}
|
||||
{/* /!*<Link to="#" className="underline">*!/*/}
|
||||
{/* /!* Sign up*!/*/}
|
||||
{/* /!*</Link>*!/*/}
|
||||
{/*</div>*/}
|
||||
</Form>
|
||||
|
||||
</CardContent>
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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>;
|
||||
|
||||
@@ -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 }
|
||||
Reference in New Issue
Block a user