feat: new topbar layout & account modal

Solvro · Nov 20, 2024 · 44b134c · 44b134c
1 parent 0fb424c
commit 44b134c
Show file tree

Hide file tree

Showing 12 changed files with 669 additions and 37 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",

diff --git a/frontend/src/actions/logout.ts b/frontend/src/actions/logout.ts
@@ -0,0 +1,17 @@
+"use server";
+
+import { cookies as cookiesPromise } from "next/headers";
+
+export const signOutFunction = async () => {
+  const cookies = await cookiesPromise();
+  cookies.delete({
+    name: "access_token",
+    path: "/",
+  });
+  cookies.delete({
+    name: "access_token_secret",
+    path: "/",
+  });
+
+  return true;
+};
diff --git a/frontend/src/app/plans/_components/PlansTopbar.tsx b/frontend/src/app/plans/_components/PlansTopbar.tsx
@@ -1,18 +1,20 @@
-import React from 'react'
+import Link from "next/link";
+import React, { Suspense } from "react";
+
 import { SolvroLogo } from "@/components/SolvroLogo";
 import { Button, buttonVariants } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { UserButton } from "@/components/user-button";
+import { createUsosService } from "@/lib/usos";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
-import { createUsosService } from '@/lib/usos';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 
 export const PlansTopbar = () => {
   return (
     <div className="flex w-full items-center justify-between bg-mainbutton7 py-4 shadow-sm">
       <div className="container mx-auto flex items-center justify-between">
         <div className="ml-4 flex items-center gap-4 text-2xl font-bold text-white md:w-1/4">
           <SolvroLogo />
-          <h1 className="hidden md:block text-2xl font-semibold">Kreator</h1>
+          <h1 className="hidden text-2xl font-semibold md:block">Kreator</h1>
         </div>
         <div className="mr-4 flex w-1/4 items-center justify-end">
           <Link
@@ -24,40 +26,38 @@ export const PlansTopbar = () => {
           </Link>
           <Link
             href="https://web.usos.pwr.edu.pl/kontroler.php?_action=news/default&panel=DOMYSLNY&file=zapisyPL.html"
-            target='_blank'
+            target="_blank"
             data-umami-event="Go to USOS"
-            className={cn(buttonVariants({ variant: "link" }), "text-white")}
+            className={cn(
+              buttonVariants({ variant: "link" }),
+              "hidden text-white md:flex",
+            )}
           >
             <span className="text-nowrap">Terminarz USOS</span>
           </Link>
 
-          <UserProfile />
+          <Suspense
+            fallback={<Skeleton className="size-[40px] rounded-full" />}
+          >
+            <UserProfile />
+          </Suspense>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 const UserProfile = async () => {
   try {
     const usos = await createUsosService();
     const profile = await usos.getProfile();
 
-    return (
-      <div className='flex items-center gap-2'>
-        {/* <div className='text-right text-nowrap'>
-          <h1 className='text-lg font-semibold text-white leading-none'>{profile.first_name + " " + profile.last_name}</h1>
-          <h2 className='text-xs text-muted leading-none'>Nr. indeksu: <span className='font-medium'>{profile.student_number}</span></h2>
-        </div> */}
-        <Avatar>
-          <AvatarImage src={profile.photo_urls["50x50"]} />
-          <AvatarFallback>{profile.first_name.slice(0,1) + profile.last_name.slice(0,1)}</AvatarFallback>
-        </Avatar>
-      </div>
-    )
+    return <UserButton profile={profile} />;
   } catch (error) {
     return (
-      <Button variant="default" size="sm">Zaloguj się</Button>
-    )
+      <Button variant="default" size="sm" asChild={true}>
+        <Link href="/api/login">Zaloguj się</Link>
+      </Button>
+    );
   }
-}
+};
diff --git a/frontend/src/app/plans/layout.tsx b/frontend/src/app/plans/layout.tsx
@@ -1,4 +1,5 @@
 import type React from "react";
+
 import { PlansTopbar } from "./_components/PlansTopbar";
 
 export default function PlansLayout({