From ce0265bd8c1b10c97ff70a2b4108d5280d049839 Mon Sep 17 00:00:00 2001 From: charles-gauthereau Date: Sun, 10 Nov 2024 09:34:27 +0100 Subject: [PATCH] Working on the dropdown logged in dashboard. --- app/(customer)/dashboard/layout.tsx | 2 +- .../Auth/Login/LoginForm/LoginForm.tsx | 9 ++- .../PaswordInput/password-input.tsx | 0 .../Register/RegisterForm/RegisterForm.tsx | 2 +- .../RegisterForm/register-form.action.ts | 1 + .../LoggedInButton/LoggedInButton.tsx | 29 +++++++++ .../LoggedInDropdown/LoggedInDropdown.tsx | 40 ++++++++++++ .../{ => Dashboard}/SideBar/app-sidebar.tsx | 63 +++++++++++-------- .../Dashboard/UserAvatar/UserAvatar.tsx | 21 +++++++ 9 files changed, 136 insertions(+), 31 deletions(-) rename src/components/wrappers/{ => Auth}/PaswordInput/password-input.tsx (100%) create mode 100644 src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx create mode 100644 src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx rename src/components/wrappers/{ => Dashboard}/SideBar/app-sidebar.tsx (64%) create mode 100644 src/components/wrappers/Dashboard/UserAvatar/UserAvatar.tsx diff --git a/app/(customer)/dashboard/layout.tsx b/app/(customer)/dashboard/layout.tsx index fb32680c..c9d1f58d 100644 --- a/app/(customer)/dashboard/layout.tsx +++ b/app/(customer)/dashboard/layout.tsx @@ -1,5 +1,5 @@ import {SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" -import {AppSidebar} from "@/components/wrappers/SideBar/app-sidebar"; +import {AppSidebar} from "@/components/wrappers/Dashboard/SideBar/app-sidebar"; import {currentUser} from "@/auth/current-user"; import {redirect} from "next/navigation"; diff --git a/src/components/wrappers/Auth/Login/LoginForm/LoginForm.tsx b/src/components/wrappers/Auth/Login/LoginForm/LoginForm.tsx index b2bab8ee..529a8d06 100644 --- a/src/components/wrappers/Auth/Login/LoginForm/LoginForm.tsx +++ b/src/components/wrappers/Auth/Login/LoginForm/LoginForm.tsx @@ -11,10 +11,11 @@ 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/PaswordInput/password-input"; +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; @@ -27,7 +28,7 @@ export const LoginForm = (props: loginFormProps) => { const mutation = useMutation({ mutationFn: async (values: LoginType) => { const result = await signInAction("credentials", values) - if(result?.error){ + if (result?.error) { toast.error(result.error) } } @@ -38,6 +39,10 @@ export const LoginForm = (props: loginFormProps) => {
+ {/*
*/} + {/* Logo Portabase*/} + {/*
*/}

Login

Enter your informations bellow to login diff --git a/src/components/wrappers/PaswordInput/password-input.tsx b/src/components/wrappers/Auth/PaswordInput/password-input.tsx similarity index 100% rename from src/components/wrappers/PaswordInput/password-input.tsx rename to src/components/wrappers/Auth/PaswordInput/password-input.tsx diff --git a/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx b/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx index cd7a4549..ed5acd2b 100644 --- a/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx +++ b/src/components/wrappers/Auth/Register/RegisterForm/RegisterForm.tsx @@ -14,7 +14,7 @@ import {TooltipProvider, TooltipTrigger, Tooltip, TooltipContent} from "@/compon import {RegisterSchema, RegisterType} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.schema"; import {registerUserAction} from "@/components/wrappers/Auth/Register/RegisterForm/register-form.action"; import {Info} from "lucide-react"; -import {PasswordInput} from "@/components/wrappers/PaswordInput/password-input"; +import {PasswordInput} from "@/components/wrappers/Auth/PaswordInput/password-input"; export type registerFormProps = { defaultValues?: RegisterType; diff --git a/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts b/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts index 1c4c9e3f..99391f0d 100644 --- a/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts +++ b/src/components/wrappers/Auth/Register/RegisterForm/register-form.action.ts @@ -13,6 +13,7 @@ export const registerUserAction = action if (!user && parsedInput.password === parsedInput.confirmPassword) { const new_user = await prisma.user.create({ data: { + name: parsedInput.name, email: parsedInput.email, password: await hashPassword(parsedInput.password), }, diff --git a/src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx b/src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx new file mode 100644 index 00000000..e8195251 --- /dev/null +++ b/src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx @@ -0,0 +1,29 @@ +import {Button} from "@/components/ui/button" +import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar" +import {currentUser} from "@/auth/current-user"; +import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown"; +import {SidebarMenuButton} from "@/components/ui/sidebar"; +import {ChevronUp} from "lucide-react"; + +export const LoggedInButton = async () => { + + const user = await currentUser() + // if (!user) { + // return + // } + + return ( + + + + {user.name?.[0]} + {user.image ? ( + + ) : null} + + {user.name} + + + + ) +} diff --git a/src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx b/src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx new file mode 100644 index 00000000..af5ac6b7 --- /dev/null +++ b/src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx @@ -0,0 +1,40 @@ +"use client" + +import {PropsWithChildren} from "react"; +import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu"; +import {signOutAction} from "@/features/auth/auth.action"; +import {Home, LogOut, Square, User, Gauge, User2, ChevronUp} from "lucide-react"; +import Link from "next/link"; +import {useTranslations} from "use-intl"; +import {SidebarMenuButton} from "@/components/ui/sidebar"; +import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar"; + +export type LoggedInDropdownProps = PropsWithChildren<{}> + +export const LoggedInDropdown = (props: LoggedInDropdownProps) => { + + return ( + + + {props.children} + + + + Account + + + Billing + + { + signOutAction() + }}> + Sign out + + + + +) +} diff --git a/src/components/wrappers/SideBar/app-sidebar.tsx b/src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx similarity index 64% rename from src/components/wrappers/SideBar/app-sidebar.tsx rename to src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx index 0c7f9376..43f898d9 100644 --- a/src/components/wrappers/SideBar/app-sidebar.tsx +++ b/src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx @@ -1,21 +1,26 @@ -"use client" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, - SidebarHeader, SidebarInset, + SidebarHeader, SidebarMenu, SidebarMenuButton, - SidebarMenuItem, SidebarTrigger + SidebarMenuItem, } from "@/components/ui/sidebar" import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu"; import {Calendar, ChevronDown, ChevronUp, Home, Inbox, Search, Settings, User2} from "lucide-react"; import Link from "next/link"; import {signOutAction} from "@/features/auth/auth.action"; +import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar"; +import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown"; +import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton"; export function AppSidebar() { + + + const BASE_URL = "/dashboard"; // Menu items. @@ -93,30 +98,34 @@ export function AppSidebar() { - - - - Username - - - - - - Account - - - Billing - - { - signOutAction() - }}> - Sign out - - - + {/**/} + {/* */} + {/* */} + {/* */} + {/* Username*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* Account*/} + {/* */} + {/* */} + {/* Billing*/} + {/* */} + {/* /!* {*!/*/} + {/* /!* signOutAction()*!/*/} + {/* /!*}}>*!/*/} + {/* /!* Sign out*!/*/} + {/* /!**!/*/} + {/* */} + {/**/} + + + diff --git a/src/components/wrappers/Dashboard/UserAvatar/UserAvatar.tsx b/src/components/wrappers/Dashboard/UserAvatar/UserAvatar.tsx new file mode 100644 index 00000000..8f2d2dde --- /dev/null +++ b/src/components/wrappers/Dashboard/UserAvatar/UserAvatar.tsx @@ -0,0 +1,21 @@ +import {currentUser, requiredCurrentUser} from "@/auth/current-user"; +import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"; + +export type UserAvatarProps = {} + +export const UserAvatar = async () => { + + const user = await currentUser() + + + return ( +

+ + {user.name?.[0]} + {user.image ? ( + + ) : null} + +
+ ) +} \ No newline at end of file