mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Refactoring user Page in admin panel.
This commit is contained in:
charlesgauthereau
@@ -1,9 +1,9 @@
|
|||||||
import {PageParams} from "@/types/next";
|
import {PageParams} from "@/types/next";
|
||||||
import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
|
import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
|
||||||
import {db} from "@/db";
|
import {db} from "@/db";
|
||||||
import {DataTable} from "@/components/wrappers/common/table/data-table";
|
import {desc, isNull} from "drizzle-orm";
|
||||||
import {usersColumnsAdmin} from "@/components/wrappers/dashboard/admin/users/columns-users";
|
import {AdminUserList} from "@/components/wrappers/dashboard/admin/users/admin-user-list";
|
||||||
import {isNull} from "drizzle-orm";
|
import {AdminUserAddModal} from "@/components/wrappers/dashboard/admin/users/admin-user-add-modal";
|
||||||
|
|
||||||
export default async function RoutePage(props: PageParams<{}>) {
|
export default async function RoutePage(props: PageParams<{}>) {
|
||||||
|
|
||||||
@@ -11,7 +11,14 @@ export default async function RoutePage(props: PageParams<{}>) {
|
|||||||
where: (fields) => isNull(fields.deletedAt),
|
where: (fields) => isNull(fields.deletedAt),
|
||||||
with: {
|
with: {
|
||||||
accounts: true
|
accounts: true
|
||||||
}
|
},
|
||||||
|
orderBy: (fields) => desc(fields.createdAt),
|
||||||
|
|
||||||
|
});
|
||||||
|
const organizations = await db.query.organization.findMany({
|
||||||
|
with: {
|
||||||
|
members: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -19,14 +26,16 @@ export default async function RoutePage(props: PageParams<{}>) {
|
|||||||
<PageHeader className="flex flex-col">
|
<PageHeader className="flex flex-col">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<PageTitle className="mb-3">Active users</PageTitle>
|
<PageTitle className="mb-3">Active users</PageTitle>
|
||||||
|
<PageActions>
|
||||||
|
<AdminUserAddModal organizations={organizations}/>
|
||||||
|
</PageActions>
|
||||||
</div>
|
</div>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<PageContent className="flex flex-col gap-5">
|
<PageContent className="flex flex-col gap-5">
|
||||||
<DataTable
|
<AdminUserList users={users}/>
|
||||||
enableSelect={false}
|
|
||||||
columns={usersColumnsAdmin}
|
|
||||||
data={users}/>
|
|
||||||
</PageContent>
|
</PageContent>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import EmailLayout from "./email-layout";
|
||||||
|
import {Heading, Text, Section, Button} from "@react-email/components";
|
||||||
|
import {getServerUrl} from "@/utils/get-server-url";
|
||||||
|
import {env} from "@/env.mjs";
|
||||||
|
|
||||||
|
interface EmailCreateUserProps {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EmailCreateUser = ({email, password}: EmailCreateUserProps) => {
|
||||||
|
const baseUrl = getServerUrl();
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<EmailLayout preview="Portabase Dashboard">
|
||||||
|
<Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
|
||||||
|
Your account on {env.PROJECT_NAME} has just been created!
|
||||||
|
</Heading>
|
||||||
|
|
||||||
|
<Text className="text-[14px] text-black leading-[24px]">
|
||||||
|
<strong>Email: </strong>{email}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Text className="text-[14px] text-black leading-[24px]">
|
||||||
|
<strong>Default password: </strong>{password}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Section className="mt-[32px] mb-[32px] text-center">
|
||||||
|
<Button
|
||||||
|
className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
|
||||||
|
href={baseUrl}
|
||||||
|
>
|
||||||
|
Sign in
|
||||||
|
</Button>
|
||||||
|
</Section>
|
||||||
|
</EmailLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EmailCreateUser;
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Plus } from "lucide-react";
|
||||||
|
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Organization } from "@/db/schema/03_organization";
|
||||||
|
import {AdminUserForm} from "@/components/wrappers/dashboard/admin/users/admin-user-form";
|
||||||
|
|
||||||
|
type AdminUserAddModalProps = {
|
||||||
|
organizations: Organization[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminUserAddModal = ({ organizations }: AdminUserAddModalProps) => {
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Plus /> Create a user
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create a new user</DialogTitle>
|
||||||
|
<DialogDescription>To create a new user please provide following informations</DialogDescription>
|
||||||
|
<AdminUserForm organizations={organizations} onSuccess={() => setOpen(false)} />
|
||||||
|
</DialogHeader>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
import { User } from "@/db/schema/02_user";
|
||||||
|
import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
import { requestPasswordReset } from "@/lib/auth/auth-client";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
type AdminUserChangePasswordProps = {
|
||||||
|
open: boolean;
|
||||||
|
user: User;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminUserChangePassword = ({ user, open, onOpenChange }: AdminUserChangePasswordProps) => {
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
await requestPasswordReset(
|
||||||
|
{
|
||||||
|
email: user.email,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success("Reset password request successfully sent!");
|
||||||
|
onOpenChange(false);
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast.error(error.error.message);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast.error(error.message);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Change {user.name}'s password</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>This action will send an email to the user to reset their password.</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<ButtonWithLoading onClick={async () => await mutation.mutateAsync()} isPending={mutation.isPending}>
|
||||||
|
Validate
|
||||||
|
</ButtonWithLoading>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
import { authClient } from "@/lib/auth/auth-client";
|
||||||
|
import { User } from "@/db/schema/02_user";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
|
||||||
|
|
||||||
|
type AdminUserChangeRoleModalProps = {
|
||||||
|
open: boolean;
|
||||||
|
user: User;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminUserChangeRoleModal = (props: AdminUserChangeRoleModalProps) => {
|
||||||
|
|
||||||
|
|
||||||
|
const { user, open, onOpenChange } = props;
|
||||||
|
const router = useRouter();
|
||||||
|
const [role, setRole] = useState<string | null>(user.role);
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
await authClient.admin.setRole(
|
||||||
|
{
|
||||||
|
userId: user.id,
|
||||||
|
// @ts-ignore
|
||||||
|
role: role,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: async (response) => {
|
||||||
|
toast.success("User role changed successfully.");
|
||||||
|
onOpenChange(false);
|
||||||
|
router.refresh();
|
||||||
|
},
|
||||||
|
onError: async (error) => {
|
||||||
|
console.error("AdminUserChangeRoleModal - setRole", error);
|
||||||
|
toast.error("An error occurred while updating user roles.");
|
||||||
|
onOpenChange(false);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Change the user's role</DialogTitle>
|
||||||
|
<DialogDescription>Modify this user's role within your organization.</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Select defaultValue={user.role ?? ""} onValueChange={setRole}>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Sélectionnez un rôle" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="pending">Pending</SelectItem>
|
||||||
|
<SelectItem value="user">User</SelectItem>
|
||||||
|
<SelectItem value="admin">Admin</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<DialogFooter>
|
||||||
|
<div className="flex gap-4 justify-end">
|
||||||
|
<ButtonWithLoading
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
onOpenChange(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</ButtonWithLoading>
|
||||||
|
<ButtonWithLoading
|
||||||
|
isPending={mutation.isPending}
|
||||||
|
onClick={async () => {
|
||||||
|
await mutation.mutateAsync();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Validate
|
||||||
|
</ButtonWithLoading>
|
||||||
|
</div>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {useMutation} from "@tanstack/react-query";
|
||||||
|
import {User} from "@/db/schema/02_user";
|
||||||
|
import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
|
||||||
|
import {useRouter} from "next/navigation";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
import {authClient} from "@/lib/auth/auth-client";
|
||||||
|
import {toast} from "sonner";
|
||||||
|
import {setSuperAdminOwnerOfOrganizationsOwnedByUser} from "@/components/wrappers/dashboard/admin/users/user.action";
|
||||||
|
|
||||||
|
type AdminDeleteUserModalProps = {
|
||||||
|
open: boolean;
|
||||||
|
user: User;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminDeleteUserModal = ({user, open, onOpenChange}: AdminDeleteUserModalProps) => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
const res = await setSuperAdminOwnerOfOrganizationsOwnedByUser({userId: user.id});
|
||||||
|
const result = res?.data;
|
||||||
|
if (result?.success) {
|
||||||
|
await authClient.admin.removeUser(
|
||||||
|
{
|
||||||
|
userId: user.id,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: async (response) => {
|
||||||
|
toast.success(`User ${user.name} successfully deleted`);
|
||||||
|
onOpenChange(false);
|
||||||
|
router.refresh();
|
||||||
|
},
|
||||||
|
onError: async (error) => {
|
||||||
|
toast.error("An error has occurred while deleting user");
|
||||||
|
onOpenChange(false);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toast.error("An error has occurred while deleting user");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast.error(error.message);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you sure you want to delete {user.name} ?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>This action is irreversible: it will lead to the deletion of the user's
|
||||||
|
data.</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<ButtonWithLoading
|
||||||
|
onClick={async () => await mutation.mutateAsync()}>Confirm</ButtonWithLoading>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { ButtonWithLoading } from "@/components/wrappers/common/button/button-with-loading";
|
||||||
|
import {Button} from "@/components/ui/button";
|
||||||
|
import {UserEditSchema, UserEditType, UserSchema} from "@/components/wrappers/dashboard/admin/users/user.schema";
|
||||||
|
import {updateUserAction} from "@/components/wrappers/dashboard/admin/users/user.action";
|
||||||
|
type AdminUserEditFormProps = {
|
||||||
|
onSuccess?: () => void;
|
||||||
|
defaultValues: {
|
||||||
|
id: string;
|
||||||
|
} & UserEditType;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminUserEditForm = ({ onSuccess, defaultValues }: AdminUserEditFormProps) => {
|
||||||
|
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const form = useZodForm({
|
||||||
|
schema: defaultValues ? UserEditSchema : UserSchema,
|
||||||
|
defaultValues: {
|
||||||
|
name: defaultValues.name,
|
||||||
|
email: defaultValues.email,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
form.reset();
|
||||||
|
onSuccess?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: async (data: UserEditType) => {
|
||||||
|
const result = await updateUserAction({
|
||||||
|
...data,
|
||||||
|
id: defaultValues?.id || "",
|
||||||
|
});
|
||||||
|
console.log(result)
|
||||||
|
const inner = result?.data;
|
||||||
|
if (inner?.success) {
|
||||||
|
toast.success("User Successfully updated");
|
||||||
|
onSuccess?.();
|
||||||
|
router.refresh();
|
||||||
|
} else {
|
||||||
|
toast.error("An error occurred");
|
||||||
|
onSuccess?.();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={async (values) => {
|
||||||
|
await mutation.mutateAsync(values);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Enter a name" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input disabled placeholder="Fill user email" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex gap-4 justify-end">
|
||||||
|
<Button type="button" variant="outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<ButtonWithLoading type="submit" isPending={mutation.isPending}>Validate</ButtonWithLoading>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {User} from "@/db/schema/02_user";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {AdminUserEditForm} from "./admin-user-edit-form";
|
||||||
|
|
||||||
|
type AdminUserEditPasswordProps = {
|
||||||
|
open: boolean;
|
||||||
|
user: User;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminUserEdit = ({user, open, onOpenChange}: AdminUserEditPasswordProps) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Edit ${user.name}'s profile</DialogTitle>
|
||||||
|
<DialogDescription>Update following information</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogContent
|
||||||
|
onOpenAutoFocus={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
<AdminUserEditForm
|
||||||
|
defaultValues={{
|
||||||
|
name: user.name,
|
||||||
|
email: user.email,
|
||||||
|
id: user.id,
|
||||||
|
}}
|
||||||
|
onSuccess={() => onOpenChange(false)}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {useRouter} from "next/navigation";
|
||||||
|
import {useMutation} from "@tanstack/react-query";
|
||||||
|
import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
|
||||||
|
import {Organization} from "@/db/schema/03_organization";
|
||||||
|
import {Input} from "@/components/ui/input";
|
||||||
|
import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
|
||||||
|
import {Button} from "@/components/ui/button";
|
||||||
|
import {UserSchema, UserType} from "@/components/wrappers/dashboard/admin/users/user.schema";
|
||||||
|
import {toast} from "sonner";
|
||||||
|
import {createUserAction} from "@/components/wrappers/dashboard/admin/users/user.action";
|
||||||
|
|
||||||
|
type AdminUserFormProps = {
|
||||||
|
onSuccess?: () => void;
|
||||||
|
organizations: Organization[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminUserForm = ({onSuccess, organizations}: AdminUserFormProps) => {
|
||||||
|
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const form = useZodForm({
|
||||||
|
schema: UserSchema,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
form.reset();
|
||||||
|
onSuccess?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: async (data: UserType) => {
|
||||||
|
const result = await createUserAction(data);
|
||||||
|
const inner = result?.data;
|
||||||
|
if (inner?.success) {
|
||||||
|
toast.success("User Successfully created");
|
||||||
|
onSuccess?.();
|
||||||
|
router.refresh();
|
||||||
|
} else {
|
||||||
|
toast.error("An error occurred");
|
||||||
|
onSuccess?.();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
className="flex flex-col gap-4"
|
||||||
|
onSubmit={async (values) => {
|
||||||
|
await mutation.mutateAsync(values);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({field}) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Enter a name" {...field} value={field.value ?? ""}/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage/>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
render={({field}) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Fill user email" {...field} value={field.value ?? ""}/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage/>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="flex gap-4 justify-end">
|
||||||
|
<Button type="button" variant="outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<ButtonWithLoading type="submit" isPending={mutation.isPending}>
|
||||||
|
Validate
|
||||||
|
</ButtonWithLoading>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
"use client";
|
||||||
|
import { DataTable } from "@/components/wrappers/common/table/data-table";
|
||||||
|
import {usersListColumns} from "@/components/wrappers/dashboard/admin/users/table-colums";
|
||||||
|
import {User} from "@/db/schema/02_user";
|
||||||
|
|
||||||
|
type AdminUserListProps = {
|
||||||
|
users: User[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AdminUserList = ({ users }: AdminUserListProps) => {
|
||||||
|
return <DataTable columns={usersListColumns()} data={users} enablePagination={true} enableSelect={false} />;
|
||||||
|
};
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import {ColumnDef} from "@tanstack/react-table";
|
||||||
|
import {User} from "@/db/schema/02_user";
|
||||||
|
import {Badge} from "@/components/ui/badge";
|
||||||
|
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
|
||||||
|
import {formatLocalizedDate, timeAgo} from "@/utils/date-formatting";
|
||||||
|
import {Tooltip, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
|
||||||
|
import {TooltipContent} from "@radix-ui/react-tooltip";
|
||||||
|
import {Info} from "lucide-react";
|
||||||
|
import {Table, TableBody, TableCell, TableRow} from "@/components/ui/table";
|
||||||
|
import {UserActionsCell} from "@/components/wrappers/dashboard/admin/users/user-actions-cell";
|
||||||
|
|
||||||
|
export function usersListColumns(): ColumnDef<User>[] {
|
||||||
|
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
accessorKey: "name",
|
||||||
|
header: "Profile",
|
||||||
|
cell: ({row}) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<div className="flex flex-row items-center gap-x-2">
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage src={row.original.image ?? ""} alt={row.original.name}/>
|
||||||
|
<AvatarFallback>
|
||||||
|
{row.original.name
|
||||||
|
.split(" ")
|
||||||
|
.map((n) => n[0])
|
||||||
|
.join("")}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div className="flex flex-row items-center gap-x-2">
|
||||||
|
<div className="font-medium">{row.original.name}</div>
|
||||||
|
<Info size={16} aria-hidden="true" className="text-muted-foreground"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="bg-background shadow-lg border border-border z-20 rounded-md"
|
||||||
|
side="bottom">
|
||||||
|
<Table>
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Joined</TableCell>
|
||||||
|
<TableCell
|
||||||
|
className="text-right text-muted-foreground">{formatLocalizedDate(row.original.createdAt)}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
{/*{row.original.lastConnectedAt && (*/}
|
||||||
|
{/* <TableRow>*/}
|
||||||
|
{/* <TableCell>Last connected</TableCell>*/}
|
||||||
|
{/* <TableCell className="text-right text-muted-foreground">*/}
|
||||||
|
{/* {formatLocalizedDate(row.original.lastConnectedAt)} ({timeAgo(row.original.lastConnectedAt, locale)})*/}
|
||||||
|
{/* </TableCell>*/}
|
||||||
|
{/* </TableRow>*/}
|
||||||
|
{/*)}*/}
|
||||||
|
{row.original.lastChangedPasswordAt && (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>Last password change</TableCell>
|
||||||
|
<TableCell className="text-right text-muted-foreground">
|
||||||
|
{formatLocalizedDate(row.original.lastChangedPasswordAt)} ({timeAgo(row.original.lastChangedPasswordAt)})
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "email",
|
||||||
|
header: "Email",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "role",
|
||||||
|
header: "Role",
|
||||||
|
cell: ({row}) => {
|
||||||
|
const role = row.original.role!;
|
||||||
|
return <Badge>{role}</Badge>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
header: "Actions",
|
||||||
|
cell: ({row}) => <UserActionsCell user={row.original}/>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {useState} from "react";
|
||||||
|
import {Button} from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import {MoreHorizontal, Settings, Trash2, RotateCcwKey, UserCog} from "lucide-react";
|
||||||
|
import {authClient} from "@/lib/auth/auth-client";
|
||||||
|
import {cn} from "@/lib/utils";
|
||||||
|
import {User} from "@/db/schema/02_user";
|
||||||
|
import {AdminUserChangePassword} from "./admin-user-change-password-modal";
|
||||||
|
import {AdminUserEdit} from "./admin-user-edit-modal";
|
||||||
|
import {AdminUserChangeRoleModal} from "@/components/wrappers/dashboard/admin/users/admin-user-change-role-modal";
|
||||||
|
import {AdminDeleteUserModal} from "@/components/wrappers/dashboard/admin/users/admin-user-delete-modal";
|
||||||
|
|
||||||
|
interface UserActionsCellProps {
|
||||||
|
user: User;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UserActionsCell({user}: UserActionsCellProps) {
|
||||||
|
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [isModalChangePasswordOpen, setIsModalChangePasswordOpen] = useState(false);
|
||||||
|
const [isModalEditUserOpen, setIsModalEditUserOpen] = useState(false);
|
||||||
|
const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
|
||||||
|
const {data: session, isPending, error} = authClient.useSession();
|
||||||
|
if (isPending || error) return null;
|
||||||
|
const isCurrentUser = session?.user?.id === user.id;
|
||||||
|
const isSuperAdmin = session?.user?.role === "superadmin";
|
||||||
|
|
||||||
|
if (isCurrentUser || user.role === "superadmin") return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<AdminUserChangeRoleModal user={user} open={isModalOpen} onOpenChange={setIsModalOpen}/>
|
||||||
|
<AdminDeleteUserModal user={user} open={isModalDeleteOpen} onOpenChange={setIsModalDeleteOpen}/>
|
||||||
|
<AdminUserChangePassword user={user} open={isModalChangePasswordOpen}
|
||||||
|
onOpenChange={setIsModalChangePasswordOpen}/>
|
||||||
|
<AdminUserEdit user={user} open={isModalEditUserOpen} onOpenChange={setIsModalEditUserOpen}/>
|
||||||
|
<div className={cn("flex items-center space-x-2")}>
|
||||||
|
<Button variant="outline" size="icon" onClick={() => setIsModalChangePasswordOpen(true)}>
|
||||||
|
<RotateCcwKey className="w-4 h-4"/>
|
||||||
|
</Button>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon">
|
||||||
|
<MoreHorizontal className="w-4 h-4"/>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem onSelect={() => setIsModalOpen(true)}>
|
||||||
|
<Settings className="w-4 h-4 mr-2"/>
|
||||||
|
Role
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onSelect={() => setIsModalEditUserOpen(true)}>
|
||||||
|
<UserCog className="w-4 h-4 mr-2"/>
|
||||||
|
Edit User
|
||||||
|
</DropdownMenuItem>
|
||||||
|
{isSuperAdmin && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuSeparator/>
|
||||||
|
<DropdownMenuItem onSelect={() => setIsModalDeleteOpen(true)} className="text-red-600">
|
||||||
|
<Trash2 className="w-4 h-4 mr-2"/>
|
||||||
|
Delete
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import * as drizzleDb from "@/db";
|
||||||
|
import {ServerActionResult} from "@/types/action-type";
|
||||||
|
import {render} from "@react-email/render";
|
||||||
|
import {UserSchema} from "@/components/wrappers/dashboard/admin/users/user.schema";
|
||||||
|
import {extractNameFromEmail} from "@/utils/name-from-email";
|
||||||
|
import {generateValidPassword} from "@/utils/password";
|
||||||
|
import {auth} from "@/lib/auth/auth";
|
||||||
|
import {z} from "zod";
|
||||||
|
import {Organization} from "@/db/schema/03_organization";
|
||||||
|
import {db} from "@/db";
|
||||||
|
import {and, eq} from "drizzle-orm";
|
||||||
|
|
||||||
|
import {zEmail, zString} from "@/lib/zod";
|
||||||
|
import {withUpdatedAt} from "@/db/utils";
|
||||||
|
import {userAction} from "@/lib/safe-actions/actions";
|
||||||
|
import {
|
||||||
|
addMemberOrganizationAction
|
||||||
|
} from "@/components/wrappers/dashboard/admin/organizations/organization/details/add-member.action";
|
||||||
|
import {sendEmail} from "@/lib/email/email-helper";
|
||||||
|
import EmailCreateUser from "@/components/emails/email-create-user";
|
||||||
|
import {SignUpUser} from "@/types/auth";
|
||||||
|
import {createUserDb} from "@/db/services/user";
|
||||||
|
import {User} from "@/db/schema/02_user";
|
||||||
|
|
||||||
|
export const createUserAction = userAction.schema(UserSchema).action(async ({parsedInput}): Promise<ServerActionResult<User>> => {
|
||||||
|
try {
|
||||||
|
const password = generateValidPassword();
|
||||||
|
|
||||||
|
const userData: SignUpUser = {
|
||||||
|
name: parsedInput.name || extractNameFromEmail(parsedInput.email),
|
||||||
|
email: parsedInput.email,
|
||||||
|
password: password,
|
||||||
|
theme: "dark",
|
||||||
|
role: "user",
|
||||||
|
};
|
||||||
|
|
||||||
|
const newUser = await createUserDb(userData);
|
||||||
|
|
||||||
|
if (newUser) {
|
||||||
|
|
||||||
|
await sendEmail({
|
||||||
|
to: parsedInput.email,
|
||||||
|
subject: "Your account is created",
|
||||||
|
html: await render(EmailCreateUser({
|
||||||
|
password: password,
|
||||||
|
email: parsedInput.email,
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultOrganization = await db.query.organization.findFirst({
|
||||||
|
where: eq(drizzleDb.schemas.organization.slug, "default"),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (defaultOrganization) {
|
||||||
|
await auth.api.addMember({
|
||||||
|
body: {
|
||||||
|
userId: newUser.id,
|
||||||
|
organizationId: defaultOrganization.id,
|
||||||
|
role: "admin",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
value: newUser,
|
||||||
|
actionSuccess: {
|
||||||
|
message: "user_created",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
actionError: {
|
||||||
|
message: "user_created",
|
||||||
|
cause: "Unknown error",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
actionError: {
|
||||||
|
message: "user_created",
|
||||||
|
cause: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const updateUserAction = userAction
|
||||||
|
.schema(
|
||||||
|
z.object({
|
||||||
|
id: zString(),
|
||||||
|
name: zString().optional(),
|
||||||
|
email: zEmail(),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.action(async ({parsedInput, ctx}): Promise<ServerActionResult<{}>> => {
|
||||||
|
try {
|
||||||
|
|
||||||
|
|
||||||
|
const [updatedUser] = await db.update(drizzleDb.schemas.user).set(withUpdatedAt({
|
||||||
|
name: parsedInput.name ? parsedInput.name : extractNameFromEmail(parsedInput.email),
|
||||||
|
email: parsedInput.email,
|
||||||
|
emailVerified: false
|
||||||
|
})).where(eq(drizzleDb.schemas.user.id, parsedInput.id)).returning();
|
||||||
|
|
||||||
|
|
||||||
|
if (updatedUser) {
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
actionSuccess: {
|
||||||
|
message: "user_updated",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
actionError: {
|
||||||
|
message: "user_updated",
|
||||||
|
cause: "Unknown error",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
actionError: {
|
||||||
|
message: "user_updated",
|
||||||
|
cause: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const setSuperAdminOwnerOfOrganizationsOwnedByUser = userAction
|
||||||
|
.schema(
|
||||||
|
z.object({
|
||||||
|
userId: z.string(),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.action(async ({parsedInput}): Promise<ServerActionResult<Organization[]>> => {
|
||||||
|
try {
|
||||||
|
const organizationsWhereUserIsMemberAndOwner = await db.query.member.findMany({
|
||||||
|
where: and(eq(drizzleDb.schemas.member.role, "owner"), eq(drizzleDb.schemas.member.userId, parsedInput.userId)),
|
||||||
|
with: {
|
||||||
|
organization: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const superAdminUser = await db.query.user.findFirst();
|
||||||
|
if (!superAdminUser) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
actionError: {
|
||||||
|
message: "set_super_admin_owner_of_organizations_owned_by_user",
|
||||||
|
cause: "Unknown error",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let {organization} of organizationsWhereUserIsMemberAndOwner) {
|
||||||
|
await addMemberOrganizationAction({
|
||||||
|
userId: superAdminUser.id,
|
||||||
|
organizationId: organization.id,
|
||||||
|
role: "owner",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const organizations = organizationsWhereUserIsMemberAndOwner.map(
|
||||||
|
(organizationWhereUserIsMemberAndOwner) => organizationWhereUserIsMemberAndOwner.organization
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
value: organizations as unknown as Organization[],
|
||||||
|
actionSuccess: {
|
||||||
|
message: "set_super_admin_owner_of_organizations_owned_by_user",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
actionError: {
|
||||||
|
message: "error_set_super_admin_owner_of_organizations_owned_by_user",
|
||||||
|
cause: error instanceof Error ? error.message : "Unknown error",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { z } from "zod";
|
||||||
|
import { zEmail, zString } from "@/lib/zod";
|
||||||
|
|
||||||
|
export const UserSchema = z.object({
|
||||||
|
email: zEmail(),
|
||||||
|
name: zString(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type UserType = z.infer<typeof UserSchema>;
|
||||||
|
|
||||||
|
export const UserEditSchema = z.object({
|
||||||
|
email: zEmail(),
|
||||||
|
name: zString(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type UserEditType = z.infer<typeof UserEditSchema>;
|
||||||
@@ -4,7 +4,7 @@ import { UploadIcon } from "lucide-react";
|
|||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { uploadImageAction } from "@/features/upload/public/upload.action";
|
import { uploadImageAction } from "@/features/upload/public/upload.action";
|
||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation } from "@tanstack/react-query";
|
||||||
import { updateImageUserAction } from "@/components/wrappers/dashboard/profile2/avatar/avatar.action";
|
import { updateImageUserAction } from "@/components/wrappers/dashboard/profile/actions/avatar.action";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { User } from "@/db/schema/02_user";
|
import { User } from "@/db/schema/02_user";
|
||||||
import React, {ChangeEvent} from "react";
|
import React, {ChangeEvent} from "react";
|
||||||
|
|||||||
@@ -1,80 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
||||||
import { UploadIcon } from "lucide-react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { uploadImageAction } from "@/features/upload/public/upload.action";
|
|
||||||
import { useMutation } from "@tanstack/react-query";
|
|
||||||
import { updateImageUserAction } from "@/components/wrappers/dashboard/profile2/avatar/avatar.action";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { User } from "@/db/schema/02_user";
|
|
||||||
import {ChangeEvent} from "react";
|
|
||||||
|
|
||||||
export type AvatarWithUploadProps = {
|
|
||||||
user: User;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
|
|
||||||
const user = props.user;
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const submitImage = useMutation({
|
|
||||||
mutationFn: async (file: File) => {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.set("file", file);
|
|
||||||
const uploadImage = await uploadImageAction(formData);
|
|
||||||
const data = uploadImage?.data?.data;
|
|
||||||
|
|
||||||
if (uploadImage?.serverError || !data) {
|
|
||||||
console.log(uploadImage?.serverError);
|
|
||||||
toast.error(uploadImage?.serverError);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateUser = await updateImageUserAction(data.url);
|
|
||||||
const dataUser = updateUser?.data?.data;
|
|
||||||
|
|
||||||
if (updateUser?.serverError || !dataUser) {
|
|
||||||
console.log(updateUser?.serverError);
|
|
||||||
toast.error(updateUser?.serverError);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.success("Successfully uploaded user image!");
|
|
||||||
router.refresh();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleImageUpload = async (event: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
if (!file.type.includes("image")) {
|
|
||||||
toast.error("File not an image");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
submitImage.mutate(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative ">
|
|
||||||
<Avatar className="size-14 mr-3 ">
|
|
||||||
<AvatarFallback>{user.name[0]}</AvatarFallback>
|
|
||||||
{user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
|
|
||||||
</Avatar>
|
|
||||||
<div
|
|
||||||
onClick={() => {
|
|
||||||
const fileInput = document.createElement("input");
|
|
||||||
fileInput.type = "file";
|
|
||||||
fileInput.accept = "image/*";
|
|
||||||
// @ts-ignore
|
|
||||||
fileInput.onchange = handleImageUpload;
|
|
||||||
fileInput.click();
|
|
||||||
}}
|
|
||||||
className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-100 hover:bg-gray-500 hover:bg-opacity-50 rounded-full size-14"
|
|
||||||
>
|
|
||||||
<UploadIcon className="w-8 h-8 text-primary" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
"use server";
|
|
||||||
import { db } from "@/db";
|
|
||||||
import {userAction} from "@/lib/safe-actions/actions";
|
|
||||||
import { eq } from "drizzle-orm";
|
|
||||||
import { z } from "zod";
|
|
||||||
import * as drizzleDb from "@/db";
|
|
||||||
|
|
||||||
|
|
||||||
export const updateImageUserAction = userAction.schema(z.string()).action(async ({ parsedInput, ctx }) => {
|
|
||||||
const [updatedUser] = await db.update(drizzleDb.schemas.user).set({ image: parsedInput }).where(eq(drizzleDb.schemas.user.id, ctx.user.id)).returning();
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: updatedUser,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
||||||
import { currentUser } from "@/lib/auth/current-user";
|
|
||||||
import { notFound } from "next/navigation";
|
|
||||||
|
|
||||||
export type UserAvatarProps = {};
|
|
||||||
|
|
||||||
export const UserAvatar = async () => {
|
|
||||||
const user = await currentUser();
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return notFound();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Avatar className="size-6">
|
|
||||||
<AvatarFallback>{user.name[0]}</AvatarFallback>
|
|
||||||
{user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
|
|
||||||
</Avatar>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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 { useRouter } from "next/navigation";
|
|
||||||
import { useMutation } from "@tanstack/react-query";
|
|
||||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
||||||
import { UserSchema, UserType } from "@/components/wrappers/dashboard/profile2/user-form/user-form.schema";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { updateUserAction } from "@/components/wrappers/dashboard/profile2/user-form/user-form.action";
|
|
||||||
import {DataTable} from "@/components/wrappers/common/table/data-table";
|
|
||||||
import {sessionsColumns} from "@/components/wrappers/dashboard/admin/users/sessions/table-columns";
|
|
||||||
import {accountsColumns} from "@/components/wrappers/dashboard/admin/users/accounts/table-columns";
|
|
||||||
import {Account, Session} from "better-auth";
|
|
||||||
|
|
||||||
export type UserFormProps = {
|
|
||||||
defaultValues?: UserType;
|
|
||||||
userId?: string;
|
|
||||||
sessions: Session[];
|
|
||||||
accounts?: Account[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export const UserForm = (props: UserFormProps) => {
|
|
||||||
const isCreate = !Boolean(props.defaultValues);
|
|
||||||
|
|
||||||
const form = useZodForm({
|
|
||||||
schema: UserSchema,
|
|
||||||
defaultValues: props.defaultValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const mutation = useMutation({
|
|
||||||
mutationFn: async (values: UserType) => {
|
|
||||||
const updateUser = await updateUserAction({
|
|
||||||
id: props.userId ?? "-",
|
|
||||||
data: values,
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = updateUser?.data?.data;
|
|
||||||
if (updateUser?.serverError || !data) {
|
|
||||||
toast.error(updateUser?.serverError);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.success(`Profile updated successfully.`);
|
|
||||||
router.refresh();
|
|
||||||
router.push(`/dashboard/profile`);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-y-4 h-full py-4">
|
|
||||||
<TooltipProvider>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Account</CardTitle>
|
|
||||||
<CardDescription>Your informations</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
className="flex flex-col gap-4"
|
|
||||||
onSubmit={async (values) => {
|
|
||||||
await mutation.mutateAsync(values);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="name"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Name</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder={"Your Name"} {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="email"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Email</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder={"exemple@portabase.com"} disabled {...field} value={field.value ?? ""} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Button>{isCreate ? `` : `Save`}</Button>
|
|
||||||
</Form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Active sessions</CardTitle>
|
|
||||||
<CardDescription>Manage your active sessions</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<DataTable columns={sessionsColumns} data={props.sessions} enableSelect={false}/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Auth providers</CardTitle>
|
|
||||||
<CardDescription>Manage your active auth providers</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<DataTable columns={accountsColumns} data={props.accounts ?? []} enableSelect={false}/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</TooltipProvider>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -126,6 +126,10 @@ export const projectRelations = relations(project, ({one}) => ({
|
|||||||
export const userSchema = createSelectSchema(user);
|
export const userSchema = createSelectSchema(user);
|
||||||
export type User = z.infer<typeof userSchema>;
|
export type User = z.infer<typeof userSchema>;
|
||||||
|
|
||||||
|
export const userThemeEnumSchema = createSelectSchema(userThemeEnum)
|
||||||
|
export type UserThemeEnum = z.infer<typeof userThemeEnumSchema>;
|
||||||
|
|
||||||
|
|
||||||
export const sessionSchema = createSelectSchema(session);
|
export const sessionSchema = createSelectSchema(session);
|
||||||
export type Session = z.infer<typeof sessionSchema>;
|
export type Session = z.infer<typeof sessionSchema>;
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import {SignUpUser} from "@/types/auth";
|
||||||
|
import {hashPassword} from "better-auth/crypto";
|
||||||
|
import {db} from "@/db";
|
||||||
|
import * as drizzleDb from "@/db";
|
||||||
|
import {User, UserThemeEnum} from "@/db/schema/02_user";
|
||||||
|
|
||||||
|
|
||||||
|
export async function createUserDb(data: SignUpUser): Promise<User> {
|
||||||
|
const now = new Date();
|
||||||
|
const hashedPassword = await hashPassword(data.password);
|
||||||
|
const userId = crypto.randomUUID();
|
||||||
|
|
||||||
|
const [newUser] = await db.insert(drizzleDb.schemas.user).values({
|
||||||
|
id: userId,
|
||||||
|
name: data.name,
|
||||||
|
email: data.email,
|
||||||
|
emailVerified: true,
|
||||||
|
role: data.role,
|
||||||
|
createdAt: now,
|
||||||
|
updatedAt: now,
|
||||||
|
theme: data.theme as UserThemeEnum,
|
||||||
|
}).returning();
|
||||||
|
|
||||||
|
await db.insert(drizzleDb.schemas.account).values({
|
||||||
|
providerId: "credential",
|
||||||
|
accountId: userId,
|
||||||
|
userId: userId,
|
||||||
|
password: hashedPassword,
|
||||||
|
createdAt: now,
|
||||||
|
updatedAt: now,
|
||||||
|
});
|
||||||
|
|
||||||
|
return newUser
|
||||||
|
}
|
||||||
+1
-1
@@ -4,8 +4,8 @@ export type SignUpUser = {
|
|||||||
email: string
|
email: string
|
||||||
password: string
|
password: string
|
||||||
callbackURL?: string
|
callbackURL?: string
|
||||||
|
role?: string
|
||||||
theme: string
|
theme: string
|
||||||
isDefaultPassword: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
export function extractNameFromEmail(email: string): string {
|
||||||
|
const localPart = email.split("@")[0];
|
||||||
|
const nameParts = localPart
|
||||||
|
.replace(/[_\.\-]/g, " ") // Replace underscores, dots, and hyphens with spaces
|
||||||
|
.split(" ") // Split into parts
|
||||||
|
.filter(Boolean); // Remove empty strings
|
||||||
|
|
||||||
|
return nameParts
|
||||||
|
.map((part) => part.charAt(0).toUpperCase() + part.slice(1)) // Capitalize each part
|
||||||
|
.join(" ");
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
export function generateValidPassword(length = 12) {
|
||||||
|
const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||||
|
const lower = 'abcdefghijklmnopqrstuvwxyz';
|
||||||
|
const numbers = '0123456789';
|
||||||
|
const special = '#?!@$%^&*-';
|
||||||
|
const all = upper + lower + numbers + special;
|
||||||
|
|
||||||
|
const getRandomChar = (set: string) => set[Math.floor(Math.random() * set.length)];
|
||||||
|
|
||||||
|
const passwordChars = [
|
||||||
|
getRandomChar(upper),
|
||||||
|
getRandomChar(lower),
|
||||||
|
getRandomChar(numbers),
|
||||||
|
getRandomChar(special),
|
||||||
|
];
|
||||||
|
|
||||||
|
for (let i = passwordChars.length; i < length; i++) {
|
||||||
|
passwordChars.push(getRandomChar(all));
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = passwordChars.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[passwordChars[i], passwordChars[j]] = [passwordChars[j], passwordChars[i]];
|
||||||
|
}
|
||||||
|
|
||||||
|
return passwordChars.join('');
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user