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

Profile Page with update user information.

Browse Source
This commit is contained in:
charles-gauthereau
2024-11-11 14:33:20 +01:00
parent f9e00cb2d9
commit cd4ad4be01
12 changed files with 242 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(customer)/dashboard/profile/page.tsx
+44
View File
@@ -0,0 +1,44 @@
import {PageParams} from "@/types/next";
import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {notFound} from "next/navigation";
import {requiredCurrentUser} from "@/auth/current-user";
import {UserForm} from "@/components/wrappers/Dashboard/Profile/UserForm/UserForm";
import {prisma} from "@/prisma";
import {Badge} from "@/components/ui/badge";
export default async function RoutePage(props: PageParams<{}>) {
const user = await requiredCurrentUser()
if (!user) {
notFound()
}
const userInfo = await prisma.user.findUnique({
where: {
email: user.email
}
})
console.log(userInfo)
return (
<Page>
<PageHeader>
<PageTitle className="flex items-center">
<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>
{user.name}
<Badge className="ml-3">{userInfo.authMethod}</Badge>
</PageTitle>
</PageHeader>
<PageContent>
<UserForm userId={userInfo.id} defaultValues={userInfo} />
</PageContent>
</Page>
)
}
src/auth/auth.ts
+16 -6
View File
@@ -65,10 +65,21 @@ export const {handlers, auth: baseAuth, signIn, signOut} = NextAuth({
error: "/error"
},
callbacks: {
session({session, user, token}) {
// session.user.role = user.role
// session.user.authMethod = user.authMethod;
return session
// session({session, user, token}) {
// // session.user.role = user.role
// // session.user.authMethod = user.authMethod;
// return session
// },
async jwt({ token, trigger, session, user }) {
if (trigger === "update" && session) {
return { ...token, ...session?.user };
}
return { ...token, ...user };
},
async session({ session, token, user }) {
session.user = token;
return session;
},
async signIn({ account, user }) {
console.log(account)
@@ -89,10 +100,9 @@ export const {handlers, auth: baseAuth, signIn, signOut} = NextAuth({
authMethod: account.provider
},
});
return true;
},
},
}
});
src/components/wrappers/Agent/AgentForm/AgentForm.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import {Button} from "@/components/ui/button";
import {useRouter} from "next/navigation";
import {useMutation} from "@tanstack/react-query";
import {TooltipProvider} from "@/components/ui/tooltip";
import {AgentSchema, AgentType} from "@/components/wrappers/Agent/AgentForm/action-form.schema";
import {AgentSchema, AgentType} from "@/components/wrappers/Agent/AgentForm/agent-form.schema";
import {toast} from "sonner";
import {createAgentAction, updateAgentAction} from "@/components/wrappers/Agent/AgentForm/agent-form.action";
src/components/wrappers/Agent/AgentForm/agent-form.action.ts
+1 -1
View File
@@ -1,7 +1,7 @@
"use server"
import {ActionError, userAction} from "@/safe-actions";
import {prisma} from "@/prisma";
import {AgentSchema} from "@/components/wrappers/Agent/AgentForm/action-form.schema";
import {AgentSchema} from "@/components/wrappers/Agent/AgentForm/agent-form.schema";
import {z} from "zod";
src/components/wrappers/Agent/AgentForm/action-form.schema.ts → src/components/wrappers/Agent/AgentForm/agent-form.schema.ts
View File
src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx
+1
View File
@@ -30,6 +30,7 @@ export const RegisterForm = (props: registerFormProps) => {
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);
src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts
+2 -3
View File
@@ -22,7 +22,6 @@ export const registerUserAction = action
data: new_user,
}
}
return {
data: user,
}
throw new Error('An error occured while creating user');
});
src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx
+4 -1
View File
@@ -8,6 +8,7 @@ import Link from "next/link";
import {useTranslations} from "use-intl";
import {SidebarMenuButton} from "@/components/ui/sidebar";
import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
import {redirect} from "next/navigation";
export type LoggedInDropdownProps = PropsWithChildren<{}>
@@ -22,7 +23,9 @@ export const LoggedInDropdown = (props: LoggedInDropdownProps) => {
side="top"
className="w-[--radix-popper-anchor-width]"
>
<DropdownMenuItem>
<DropdownMenuItem onClick={() => {
redirect("/dashboard/profile")
}}>
<span>Account</span>
</DropdownMenuItem>
<DropdownMenuItem>
src/components/wrappers/Dashboard/Profile/UserForm/UserForm.tsx
+125
View File
@@ -0,0 +1,125 @@
"use client";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {
FormControl, FormDescription, 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/Profile/UserForm/user-form.schema";
import {toast} from "sonner";
import {updateUserAction} from "@/components/wrappers/Dashboard/Profile/UserForm/user-form.action";
import { useSession } from "next-auth/react";
export type userFormProps = {
defaultValues?: UserType;
userId?: string;
}
export const UserForm = (props: userFormProps) => {
const isCreate = !Boolean(props.defaultValues)
const form = useZodForm({
schema: UserSchema,
defaultValues: props.defaultValues,
});
const router = useRouter();
const { data: session, update } = useSession();
const mutation = useMutation({
mutationFn: async (values: UserType) => {
console.log("values", values)
console.log(props.userId)
const updateUser = await updateUserAction({
id: props.userId ?? "-",
data: values
})
const data = updateUser?.data?.data
if (updateUser?.serverError || !data) {
console.log(updateUser?.serverError);
toast.error(updateUser?.serverError);
return;
}
console.log("email:", values.email)
const newSession = {
...session,
user: {
...session?.user,
name: values.name,
email: values.email
},
};
const updateSession = await update(newSession);
console.log(updateSession);
toast.success(`Success updating user informations`);
router.push(`/dashboard/profile`);
router.refresh()
}
})
return (
<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>
</TooltipProvider>
)
}
src/components/wrappers/Dashboard/Profile/UserForm/user-form.action.ts
+26
View File
@@ -0,0 +1,26 @@
"use server"
import {userAction} from "@/safe-actions";
import {z} from "zod";
import {prisma} from "@/prisma";
import {UserSchema} from "@/components/wrappers/Dashboard/Profile/UserForm/user-form.schema";
export const updateUserAction = userAction
.schema(
z.object({
id: z.string(),
data: UserSchema,
}
)
)
.action(async ({parsedInput, ctx}) => {
const updatedUser = await prisma.user.update({
where: {
id: parsedInput.id,
},
data: parsedInput.data,
})
return {
data: updatedUser,
}
})
src/components/wrappers/Dashboard/Profile/UserForm/user-form.schema.ts
+8
View File
@@ -0,0 +1,8 @@
import {z} from "zod";
export const UserSchema = z.object({
name: z.string(),
email: z.string(),
});
export type UserType = z.infer<typeof UserSchema>;
src/features/layout/page.tsx
+14 -11
View File
@@ -1,4 +1,6 @@
import {PropsWithChildren} from 'react';
import {twx} from "@/lib/twx";
import {cn} from "@/lib/utils";
export const Page = ({children}: PropsWithChildren<{}>) => {
return (
@@ -12,17 +14,17 @@ export const PageHeader = ({children}: PropsWithChildren<{}>) => {
);
};
export const PageTitle = ({children}: PropsWithChildren<{}>) => {
return (
<h1 className="text-3xl font-bold mb-6">{children}</h1>
);
};
export const PageDescription = ({children}: PropsWithChildren<{}>) => {
return (
<h2 className="text-s mb-6 text-gray-700">{children}</h2>
);
};
export const PageTitle = twx.h1((props)=>[
cn(`text-3xl font-bold mb-6`, props.className),
])
export const PageDescription = twx.h2((props)=>[
cn(`text-s mb-6 text-gray-700`, props.className),
])
export const PageActions = ({children}: PropsWithChildren<{}>) => {
return (
@@ -35,4 +37,5 @@ export const PageContent = ({children}: PropsWithChildren<{}>) => {
return (
<div className="">{children}</div>
);
};
};