mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
refactoring some files.
This commit is contained in:
killian-larcher
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import {Card, CardContent, CardHeader} from "@/components/ui/card";
|
||||
import {
|
||||
FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm
|
||||
} from "@/components/ui/form";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Form} from "@/components/ui/form"
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {toast} from "sonner";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {TooltipProvider} from "@/components/ui/tooltip";
|
||||
import Link from "next/link";
|
||||
import {PasswordInput} from "@/components/wrappers/auth/PaswordInput/password-input";
|
||||
import {LoginSchema, LoginType} from "@/components/wrappers/auth/Login/LoginForm/login-form.schema";
|
||||
import {signInAction} from "@/features/auth/auth.action";
|
||||
import {SocialAuthButton} from "@/components/wrappers/auth/Login/SocialAuth/SocialAuthButtons/SocialAuthButton";
|
||||
import Image from 'next/image';
|
||||
|
||||
export type loginFormProps = {
|
||||
defaultValues?: LoginType;
|
||||
}
|
||||
|
||||
export const LoginForm = (props: loginFormProps) => {
|
||||
const form = useZodForm({
|
||||
schema: LoginSchema,
|
||||
});
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (values: LoginType) => {
|
||||
const result = await signInAction("credentials", values)
|
||||
if (result?.error) {
|
||||
toast.error(result.error)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="grid gap-2 text-center mb-2">
|
||||
{/*<div className="justify-center text-center flex">*/}
|
||||
{/* <Image src="/logo.png" alt="Logo Portabase" width={100}*/}
|
||||
{/* height={50}/>*/}
|
||||
{/*</div>*/}
|
||||
<h1 className="text-3xl font-bold">Login</h1>
|
||||
<p className="text-balance text-muted-foreground">
|
||||
Enter your informations bellow to login
|
||||
</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form form={form}
|
||||
className="flex flex-col gap-4"
|
||||
onSubmit={async (values) => {
|
||||
await mutation.mutateAsync(values);
|
||||
}}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
defaultValue=""
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="exemple@portabase.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
defaultValue=""
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
|
||||
<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="Your password" {...field}/>
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button>
|
||||
Sign in
|
||||
</Button>
|
||||
<div className="mt-4 text-center text-sm">
|
||||
Don't have an account?{" "}
|
||||
<Link href="/register" className="underline">
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
</Form>
|
||||
<SocialAuthButton/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import {z} from "zod";
|
||||
|
||||
|
||||
export const LoginSchema = z.object({
|
||||
email: z.string(),
|
||||
password: z.string(),
|
||||
});
|
||||
|
||||
export type LoginType = z.infer<typeof LoginSchema>;
|
||||
@@ -0,0 +1,22 @@
|
||||
"use client"
|
||||
import {signInAction} from "@/features/auth/auth.action";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
|
||||
export type SocialAuthButtonProps = {}
|
||||
|
||||
export const SocialAuthButton = (props: SocialAuthButtonProps) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4 mt-5">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
void signInAction("google")
|
||||
}}
|
||||
>
|
||||
<Image src="/google-icon.png" alt="Google OAuth" width={25} height={25}/>
|
||||
Sign in with google
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
'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>
|
||||
<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 }
|
||||
@@ -0,0 +1,142 @@
|
||||
"use client";
|
||||
|
||||
import {useRouter} from "next/navigation";
|
||||
import {Info} from "lucide-react";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {toast} from "sonner";
|
||||
|
||||
import {Card, CardContent, CardHeader} from "@/components/ui/card";
|
||||
import {FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Form} from "@/components/ui/form"
|
||||
import {Button} from "@/components/ui/button";
|
||||
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 {PasswordInput} from "@/components/wrappers/auth/PaswordInput/password-input";
|
||||
|
||||
export type registerFormProps = {
|
||||
defaultValues?: RegisterType;
|
||||
}
|
||||
|
||||
export const RegisterForm = (props: registerFormProps) => {
|
||||
|
||||
const form = useZodForm({
|
||||
schema: RegisterSchema,
|
||||
});
|
||||
const router = useRouter();
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (values: RegisterType) => {
|
||||
console.log(values)
|
||||
const createUser = await registerUserAction(values);
|
||||
console.log(createUser)
|
||||
const data = createUser?.data?.data
|
||||
if (createUser?.serverError || !data) {
|
||||
console.log(createUser?.serverError);
|
||||
toast.error(createUser?.serverError);
|
||||
return;
|
||||
}
|
||||
toast.success(`Success`);
|
||||
router.push(`/login`);
|
||||
router.refresh()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<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}
|
||||
className="flex flex-col gap-4"
|
||||
onSubmit={async (values) => {
|
||||
await mutation.mutateAsync(values);
|
||||
}}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
defaultValue=""
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Your name" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
defaultValue=""
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="exemple@portabase.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
defaultValue=""
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<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>
|
||||
<FormControl>
|
||||
<PasswordInput placeholder="Your password" {...field}/>
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPassword"
|
||||
defaultValue=""
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password Confirmation</FormLabel>
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
placeholder="Conform your password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button>
|
||||
Sign up
|
||||
</Button>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
"use server"
|
||||
import {RegisterSchema} from "@/components/wrappers/auth/Register/RegisterForm/register-form.schema";
|
||||
import {action} from "@/safe-actions";
|
||||
import {prisma} from "@/prisma";
|
||||
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 && parsedInput.password === parsedInput.confirmPassword) {
|
||||
|
||||
const users = await prisma.user.findMany({
|
||||
where: {
|
||||
deleted: {not: true},
|
||||
}
|
||||
})
|
||||
const role = users.length > 0 ? "pending" : "admin"
|
||||
|
||||
const newUser = await prisma.user.create({
|
||||
data: {
|
||||
name: parsedInput.name,
|
||||
email: parsedInput.email,
|
||||
password: await hashPassword(parsedInput.password),
|
||||
role: role
|
||||
},
|
||||
});
|
||||
|
||||
const defaultOrganization = await prisma.organization.findUnique({
|
||||
where: {slug: "default"},
|
||||
});
|
||||
|
||||
await prisma.userOrganization.create({
|
||||
data: {
|
||||
userId: newUser.id,
|
||||
organizationId: defaultOrganization.id
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
data: newUser,
|
||||
}
|
||||
}
|
||||
throw new Error('An error occured while creating user');
|
||||
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
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()
|
||||
.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>;
|
||||
Reference in New Issue
Block a user