feat: add organizations and members

apps/dokploy/pages/dashboard/settings/users.tsx

@@ -28,6 +28,8 @@ export async function getServerSideProps(
 ) {
 	const { req, res } = ctx;
 	const { user, session } = await validateRequest(req);
+
+	console.log("user", user, session);
 	if (!user || user.role === "member") {
 		return {
 			redirect: {

apps/dokploy/pages/invitation.tsx

@@ -1,4 +1,5 @@
 import { OnboardingLayout } from "@/components/layouts/onboarding-layout";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Logo } from "@/components/shared/logo";
 import { Button } from "@/components/ui/button";
 import {
@@ -16,21 +17,24 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 import { IS_CLOUD, getUserByToken } from "@dokploy/server";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
+import { AlertCircle, AlertTriangle } from "lucide-react";
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { type ReactElement, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import superjson from "superjson";
 import { z } from "zod";
 
 const registerSchema = z
 	.object({
+		name: z.string().min(1, {
+			message: "Name is required",
+		}),
 		email: z
 			.string()
 			.min(1, {
@@ -39,7 +43,6 @@ const registerSchema = z
 			.email({
 				message: "Email must be a valid email",
 			}),
-
 		password: z
 			.string()
 			.min(1, {
@@ -72,9 +75,15 @@ interface Props {
 	token: string;
 	invitation: Awaited<ReturnType<typeof getUserByToken>>;
 	isCloud: boolean;
+	userAlreadyExists: boolean;
 }
 
-const Invitation = ({ token, invitation, isCloud }: Props) => {
+const Invitation = ({
+	token,
+	invitation,
+	isCloud,
+	userAlreadyExists,
+}: Props) => {
 	const router = useRouter();
 	const { data } = api.admin.getUserByToken.useQuery(
 		{
@@ -91,6 +100,7 @@ const Invitation = ({ token, invitation, isCloud }: Props) => {
 
 	const form = useForm<Register>({
 		defaultValues: {
+			name: "",
 			email: "",
 			password: "",
 			confirmPassword: "",
@@ -109,20 +119,32 @@ const Invitation = ({ token, invitation, isCloud }: Props) => {
 	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
 
 	const onSubmit = async (values: Register) => {
-		await mutateAsync({
-			id: data?.id,
-			password: values.password,
-			token: token,
-		})
-			.then(() => {
-				toast.success("User registered successfuly", {
-					description:
-						"Please check your inbox or spam folder to confirm your account.",
-					duration: 100000,
-				});
-				router.push("/dashboard/projects");
-			})
-			.catch((e) => e);
+		try {
+			const { data, error } = await authClient.signUp.email({
+				email: values.email,
+				password: values.password,
+				name: values.name,
+				fetchOptions: {
+					headers: {
+						"x-dokploy-token": token,
+					},
+				},
+			});
+
+			if (error) {
+				toast.error(error.message);
+				return;
+			}
+
+			const result = await authClient.organization.acceptInvitation({
+				invitationId: token,
+			});
+
+			toast.success("Account created successfully");
+			router.push("/dashboard/projects");
+		} catch (error) {
+			toast.error("An error occurred while creating your account");
+		}
 	};
 
 	return (
@@ -139,114 +161,155 @@ const Invitation = ({ token, invitation, isCloud }: Props) => {
 						</Link>
 						Invitation
 					</CardTitle>
-					<CardDescription>
-						Fill the form below to create your account
-					</CardDescription>
-					<div className="w-full">
-						<div className="p-3" />
+					{userAlreadyExists ? (
+						<div className="flex flex-col gap-4 justify-center items-center">
+							<AlertBlock type="success">
+								<div className="flex flex-col gap-2">
+									<span className="font-medium">Valid Invitation!</span>
+									<span className="text-sm text-green-600 dark:text-green-400">
+										We detected that you already have an account with this
+										email. Please sign in to accept the invitation.
+									</span>
+								</div>
+							</AlertBlock>
 
-						{isError && (
-							<div className="mx-5 my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-								<AlertTriangle className="text-red-600 dark:text-red-400" />
-								<span className="text-sm text-red-600 dark:text-red-400">
-									{error?.message}
-								</span>
-							</div>
-						)}
+							<Button asChild variant="default" className="w-full">
+								<Link href="/">Sign In</Link>
+							</Button>
+						</div>
+					) : (
+						<>
+							<CardDescription>
+								Fill the form below to create your account
+							</CardDescription>
+							<div className="w-full">
+								<div className="p-3" />
 
-						<CardContent className="p-0">
-							<Form {...form}>
-								<form
-									onSubmit={form.handleSubmit(onSubmit)}
-									className="grid gap-4"
-								>
-									<div className="space-y-4">
-										<FormField
-											control={form.control}
-											name="email"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Email</FormLabel>
-													<FormControl>
-														<Input disabled placeholder="Email" {...field} />
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="password"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Password</FormLabel>
-													<FormControl>
-														<Input
-															type="password"
-															placeholder="Password"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+								{isError && (
+									<div className="mx-5 my-2 flex flex-row items-center gap-2 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+										<AlertTriangle className="text-red-600 dark:text-red-400" />
+										<span className="text-sm text-red-600 dark:text-red-400">
+											{error?.message}
+										</span>
+									</div>
+								)}
 
-										<FormField
-											control={form.control}
-											name="confirmPassword"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Confirm Password</FormLabel>
-													<FormControl>
-														<Input
-															type="password"
-															placeholder="Confirm Password"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<Button
-											type="submit"
-											isLoading={form.formState.isSubmitting}
-											className="w-full"
+								<CardContent className="p-0">
+									<Form {...form}>
+										<form
+											onSubmit={form.handleSubmit(onSubmit)}
+											className="grid gap-4"
 										>
-											Register
-										</Button>
-									</div>
+											<div className="space-y-4">
+												<FormField
+													control={form.control}
+													name="name"
+													render={({ field }) => (
+														<FormItem>
+															<FormLabel>Name</FormLabel>
+															<FormControl>
+																<Input
+																	placeholder="Enter your name"
+																	{...field}
+																/>
+															</FormControl>
+															<FormMessage />
+														</FormItem>
+													)}
+												/>
+												<FormField
+													control={form.control}
+													name="email"
+													render={({ field }) => (
+														<FormItem>
+															<FormLabel>Email</FormLabel>
+															<FormControl>
+																<Input
+																	disabled
+																	placeholder="Email"
+																	{...field}
+																/>
+															</FormControl>
+															<FormMessage />
+														</FormItem>
+													)}
+												/>
+												<FormField
+													control={form.control}
+													name="password"
+													render={({ field }) => (
+														<FormItem>
+															<FormLabel>Password</FormLabel>
+															<FormControl>
+																<Input
+																	type="password"
+																	placeholder="Password"
+																	{...field}
+																/>
+															</FormControl>
+															<FormMessage />
+														</FormItem>
+													)}
+												/>
 
-									<div className="mt-4 text-sm flex flex-row justify-between gap-2 w-full">
-										{isCloud && (
-											<>
-												<Link
-													className="hover:underline text-muted-foreground"
-													href="/"
+												<FormField
+													control={form.control}
+													name="confirmPassword"
+													render={({ field }) => (
+														<FormItem>
+															<FormLabel>Confirm Password</FormLabel>
+															<FormControl>
+																<Input
+																	type="password"
+																	placeholder="Confirm Password"
+																	{...field}
+																/>
+															</FormControl>
+															<FormMessage />
+														</FormItem>
+													)}
+												/>
+
+												<Button
+													type="submit"
+													isLoading={form.formState.isSubmitting}
+													className="w-full"
 												>
-													Login
-												</Link>
-												<Link
-													className="hover:underline text-muted-foreground"
-													href="/send-reset-password"
-												>
-													Lost your password?
-												</Link>
-											</>
-										)}
-									</div>
-								</form>
-							</Form>
-						</CardContent>
-					</div>
+													Register
+												</Button>
+											</div>
+
+											<div className="mt-4 text-sm flex flex-row justify-between gap-2 w-full">
+												{isCloud && (
+													<>
+														<Link
+															className="hover:underline text-muted-foreground"
+															href="/"
+														>
+															Login
+														</Link>
+														<Link
+															className="hover:underline text-muted-foreground"
+															href="/send-reset-password"
+														>
+															Lost your password?
+														</Link>
+													</>
+												)}
+											</div>
+										</form>
+									</Form>
+								</CardContent>
+							</div>
+						</>
+					)}
 				</div>
 			</div>
 		</div>
 	);
 };
-
+// http://localhost:3000/invitation?token=CZK4BLrUdMa32RVkAdZiLsPDdvnPiAgZ
+// /f7af93acc1a99eae864972ab4c92fee089f0d83473d415ede8e821e5dbabe79c
 export default Invitation;
 Invitation.getLayout = (page: ReactElement) => {
 	return <OnboardingLayout>{page}</OnboardingLayout>;
@@ -268,7 +331,17 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
 
 	try {
 		const invitation = await getUserByToken(token);
-		console.log("invitation", invitation);
+
+		if (invitation.userAlreadyExists) {
+			return {
+				props: {
+					isCloud: IS_CLOUD,
+					token: token,
+					invitation: invitation,
+					userAlreadyExists: true,
+				},
+			};
+		}
 
 		if (invitation.isExpired) {
 			return {
@@ -287,6 +360,7 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
 			},
 		};
 	} catch (error) {
+		console.log("error", error);
 		return {
 			redirect: {
 				permanent: true,