External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

migration

Browse Source
This commit is contained in:
Théo LAGACHE
2025-05-16 15:54:17 +02:00
parent 01019fe1a3
commit 6f2523e524
285 changed files with 15492 additions and 46090 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/auth/PaswordInput/password-input.tsx
+18 -24
View File
@@ -1,23 +1,21 @@
'use client'
"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'
import * as React from "react";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import type { InputHTMLAttributes } from "react";
type InputProps = InputHTMLAttributes<HTMLInputElement>;
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
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}
/>
<Input type={showPassword ? "text" : "password"} className={cn("hide-password-toggle pr-10", className)} ref={ref} {...props} />
<Button
type="button"
variant="ghost"
@@ -26,12 +24,8 @@ const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(({ classNam
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>
{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,
@@ -42,8 +36,8 @@ const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(({ classNam
}
`}</style>
</div>
)
})
PasswordInput.displayName = 'PasswordInput'
);
});
PasswordInput.displayName = "PasswordInput";
export { PasswordInput }
export { PasswordInput };
src/components/wrappers/auth/Register/register-form/RegisterForm.tsx
+49 -53
View File
@@ -1,36 +1,35 @@
"use client";
import {useRouter} from "next/navigation";
import {Info} from "lucide-react";
import {useMutation} from "@tanstack/react-query";
import {toast} from "sonner";
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/register-form/register-form.schema";
import {registerUserAction} from "@/components/wrappers/auth/Register/register-form/register-form.action";
import {PasswordInput} from "@/components/wrappers/auth/PaswordInput/password-input";
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/register-form/register-form.schema";
import { registerUserAction } from "@/components/wrappers/auth/Register/register-form/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)
console.log(values);
const createUser = await registerUserAction(values);
console.log(createUser)
const data = createUser?.data?.data
console.log(createUser);
const data = createUser?.data?.data;
if (createUser?.serverError || !data) {
console.log(createUser?.serverError);
toast.error(createUser?.serverError);
@@ -38,9 +37,9 @@ export const RegisterForm = (props: registerFormProps) => {
}
toast.success(`Success`);
router.push(`/login`);
router.refresh()
}
})
router.refresh();
},
});
return (
<TooltipProvider>
@@ -48,30 +47,28 @@ export const RegisterForm = (props: registerFormProps) => {
<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>
<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);
}}
<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}) => (
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input
placeholder="Your name" {...field} />
<Input placeholder="Your name" {...field} />
</FormControl>
<FormMessage/>
<FormMessage />
</FormItem>
)}
/>
@@ -79,14 +76,13 @@ export const RegisterForm = (props: registerFormProps) => {
control={form.control}
name="email"
defaultValue=""
render={({field}) => (
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
placeholder="exemple@portabase.com" {...field} />
<Input placeholder="exemple@portabase.io" {...field} />
</FormControl>
<FormMessage/>
<FormMessage />
</FormItem>
)}
/>
@@ -94,25 +90,28 @@ export const RegisterForm = (props: registerFormProps) => {
control={form.control}
name="password"
defaultValue=""
render={({field}) => (
render={({ field }) => (
<FormItem>
<FormLabel className="flex">Password
<FormLabel className="flex">
Password
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Info className="ml-3" size="15"/>
<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>
<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}/>
<PasswordInput placeholder="Your password" {...field} />
</FormControl>
<FormMessage/>
<FormMessage />
</FormItem>
)}
/>
@@ -120,23 +119,20 @@ export const RegisterForm = (props: registerFormProps) => {
control={form.control}
name="confirmPassword"
defaultValue=""
render={({field}) => (
render={({ field }) => (
<FormItem>
<FormLabel>Password Confirmation</FormLabel>
<FormControl>
<PasswordInput
placeholder="Conform your password" {...field} />
<PasswordInput placeholder="Conform your password" {...field} />
</FormControl>
<FormMessage/>
<FormMessage />
</FormItem>
)}
/>
<Button>
Sign up
</Button>
<Button>Sign up</Button>
</Form>
</CardContent>
</Card>
</TooltipProvider>
)
}
);
};
src/components/wrappers/auth/Register/register-form/register-form.action.ts
+23 -46
View File
@@ -1,51 +1,28 @@
"use server"
import {RegisterSchema} from "@/components/wrappers/auth/Register/register-form/register-form.schema";
import {action} from "@/safe-actions";
import {prisma} from "@/prisma";
import {hashPassword} from "@/utils/password";
"use server";
import { RegisterSchema } from "@/components/wrappers/auth/Register/register-form/register-form.schema";
import { action } from "@/safe-actions";
import { signUp } from "@/lib/auth/auth-client";
import { db } from "@/db";
import { user as drizzleUser } from "@/db/schema/01_user";
import { eq } from "drizzle-orm";
export const registerUserAction = action.schema(RegisterSchema).action(async ({ parsedInput }: { parsedInput: typeof RegisterSchema._type }) => {
const [user] = await db.select().from(drizzleUser).where(eq(drizzleUser.email, parsedInput.email)).limit(1);
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) {
if (!user && parsedInput.password === parsedInput.confirmPassword) {
const { data, error } = await signUp.email({
email: parsedInput.email,
password: parsedInput.password,
name: parsedInput.name,
});
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"},
});
const organizationRole = users.length > 0 ? "member" : "admin"
await prisma.userOrganization.create({
data: {
userId: newUser.id,
organizationId: defaultOrganization.id,
role:organizationRole
},
});
return {
data: newUser,
}
if (error) {
throw new Error(error.message);
}
throw new Error('An error occured while creating user');
});
return {
data: data?.user,
};
}
throw new Error("An error occured while creating user");
});
src/components/wrappers/auth/Register/register-form/register-form.schema.ts
+19 -22
View File
@@ -1,28 +1,25 @@
import {z} from "zod";
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,}$/
);
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',
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 must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
}),
confirmPassword: z.string(),
}).superRefine(({ confirmPassword, password }, ctx) => {
if (confirmPassword !== password) {
ctx.addIssue({
code: "custom",
message: "The passwords did not match",
path: ['confirmPassword']
});
}
});
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/auth/login/buttonAuth/SocialAuthButton.tsx
+54
View File
@@ -0,0 +1,54 @@
"use client";
import { Button } from "@/components/ui/button";
import { signIn } from "@/lib/auth/auth-client";
import { JSX } from "react";
export type AuthButtonProps = {
providers: SocialProviderType[];
};
export type SocialProviderType = {
id:
| "github"
| "apple"
| "discord"
| "facebook"
| "microsoft"
| "google"
| "spotify"
| "twitch"
| "twitter"
| "dropbox"
| "kick"
| "linkedin"
| "gitlab"
| "tiktok"
| "reddit"
| "roblox"
| "vk";
name: string;
icon: JSX.Element;
};
export const SocialAuthButton = (props: AuthButtonProps): JSX.Element => {
return (
<div className="flex flex-col gap-4 mt-5">
{props.providers.map((provider) => (
<Button
key={provider.id}
aria-label={`Sign in with ${provider.name}`}
onClick={(e) => {
e.preventDefault();
void signIn.social({
provider: provider.id,
callbackURL: "/dashboard/profile",
});
}}
>
{provider.icon}
Sign in with {provider.name}
</Button>
))}
</div>
);
};
src/components/wrappers/auth/login/loginForm/LoginForm.tsx
+54 -51
View File
@@ -1,37 +1,52 @@
"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 { 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 {signInAction} from "@/features/auth/auth.action";
import {LoginSchema, LoginType} from "@/components/wrappers/auth/login/loginForm/login-form.schema";
import {SocialAuthButton} from "@/components/wrappers/auth/login/socialAuth/socialAuthButtons/SocialAuthButton";
import { PasswordInput } from "@/components/wrappers/auth/PaswordInput/password-input";
import { LoginSchema, LoginType } from "@/components/wrappers/auth/login/loginForm/login-form.schema";
import { SocialAuthButton, SocialProviderType } from "@/components/wrappers/auth/login/buttonAuth/SocialAuthButton";
import { signIn } from "@/lib/auth/auth-client";
import { useRouter } from "next/navigation";
import { Icon } from "@iconify/react";
export type loginFormProps = {
defaultValues?: LoginType;
}
};
export const LoginForm = (props: loginFormProps) => {
const router = useRouter();
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)
const { error } = await signIn.email(values, {
onSuccess: () => {
toast.success("Login success");
router.push("/dashboard/profile");
},
});
if (error) {
toast.error(error.message);
}
}
})
},
});
const availableProviders: SocialProviderType[] = [
{
id: "google",
name: "Google",
icon: <Icon icon={"logos:google-icon"} width="25" height="25" />,
},
];
return (
<TooltipProvider>
@@ -39,30 +54,28 @@ export const LoginForm = (props: loginFormProps) => {
<CardHeader>
<div className="grid gap-2 text-center mb-2">
<h1 className="text-3xl font-bold">Login</h1>
<p className="text-balance text-muted-foreground">
Enter your informations bellow to login
</p>
<p className="text-balance text-muted-foreground">Enter your informations below to login</p>
</div>
</CardHeader>
<CardContent>
<Form form={form}
className="flex flex-col gap-4"
onSubmit={async (values) => {
await mutation.mutateAsync(values);
}}
<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}) => (
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
placeholder="exemple@portabase.com" {...field} />
<Input autoComplete="email webauthn" placeholder="exemple@portabase.io" {...field} />
</FormControl>
<FormMessage/>
<FormMessage />
</FormItem>
)}
/>
@@ -70,28 +83,22 @@ export const LoginForm = (props: loginFormProps) => {
control={form.control}
name="password"
defaultValue=""
render={({field}) => (
render={({ field }) => (
<FormItem>
<div className="flex items-center">
<FormLabel>Password</FormLabel>
<Link
href={"/forgot-password"}
className="ml-auto inline-block text-sm underline"
>
{/* <Link href={"/forgot-password"} className="ml-auto inline-block text-sm underline">
Forgot your password?
</Link>
</Link>*/}
</div>
<FormControl>
<PasswordInput placeholder="Your password" {...field}/>
<PasswordInput autoComplete="current-password webauthn" placeholder="Your password" {...field} />
</FormControl>
<FormMessage/>
<FormMessage />
</FormItem>
)}
/>
<Button>
Sign in
</Button>
<Button>Sign in</Button>
<div className="mt-4 text-center text-sm">
Don&apos;t have an account?{" "}
<Link href={"/register"} className="underline">
@@ -99,13 +106,9 @@ export const LoginForm = (props: loginFormProps) => {
</Link>
</div>
</Form>
{/*{env.NEXT_PUBLIC_GOOGLE_AUTH ?*/}
<SocialAuthButton/>
{/*:null}*/}
<SocialAuthButton providers={availableProviders} />
</CardContent>
</Card>
</TooltipProvider>
)
}
);
};
src/components/wrappers/auth/login/loginForm/login-form.action.ts
View File
src/components/wrappers/auth/login/loginForm/login-form.schema.ts
+1 -2
View File
@@ -1,5 +1,4 @@
import {z} from "zod";
import { z } from "zod";
export const LoginSchema = z.object({
email: z.string(),
src/components/wrappers/auth/login/socialAuth/socialAuthButtons/SocialAuthButton.tsx
-22
View File
@@ -1,22 +0,0 @@
"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>
)
}