show signed in user's email on nav (#274)

Author: adityanandanx

frontend/app/components/NavBar/components/NavItems/index.tsx

@@ -3,7 +3,7 @@ import { useSupabase } from "@/app/supabase-provider";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { Dispatch, FC, HTMLAttributes, SetStateAction } from "react";
-import { MdSettings } from "react-icons/md";
+import { MdPerson, MdSettings } from "react-icons/md";
 import Button from "../../../ui/Button";
 import { AuthButtons } from "./components/AuthButtons";
 import { DarkModeToggle } from "./components/DarkModeToggle";
@@ -54,13 +54,14 @@ export const NavItems: FC<NavItemsProps> = ({
       <div className="flex sm:flex-1 sm:justify-end flex-col items-center justify-center sm:flex-row gap-5 sm:gap-2">
         {isUserLoggedIn && (
           <>
-            <Link href={"/logout"}>
-              <Button variant={"secondary"}>Logout</Button>
+            <Link aria-label="account" className="" href={"/user"}>
+              <MdPerson />
             </Link>
             <Link href={"/config"}>
               <Button
                 variant={"tertiary"}
                 className="focus:outline-none text-2xl"
+                aria-label="Settings"
               >
                 <MdSettings />
               </Button>

frontend/app/config/page.tsx

@@ -5,6 +5,7 @@ import {
   anthropicModels,
   models,
 } from "@/lib/context/BrainConfigProvider/types";
+import Link from "next/link";
 import Button from "../components/ui/Button";
 import Field from "../components/ui/Field";
 import { useSupabase } from "../supabase-provider";
@@ -157,6 +158,22 @@ export default function ExplorePage() {
               Done
             </Button>
           </div>
+          <div className="border-b border-gray-300 mt-8 mb-8">
+            <p className="text-center text-gray-600 uppercase tracking-wide font-semibold">
+              Your Account
+            </p>
+          </div>
+          <div className="flex justify-between items-center w-full">
+            <span>
+              Signed In as: <b>{session.user.email}</b>
+            </span>
+            <Link className="mt-2" href={"/logout"}>
+              <Button className="px-3 py-2" variant={"danger"}>
+                Logout
+              </Button>
+            </Link>
+            {/* TODO: add functionality to change password */}
+          </div>
         </form>
       </section>
     </main>

frontend/app/user/components/UserStatistics.tsx

@@ -1,5 +1,7 @@
 "use client";
+import Button from "@/app/components/ui/Button";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
 import prettyBytes from "pretty-bytes";
 import { HTMLAttributes } from "react";
 import { UserStats } from "../types";
@@ -14,11 +16,16 @@ export const UserStatistics = (userStats: UserStats): JSX.Element => {
   return (
     <>
       <div className="flex flex-col sm:flex-row sm:items-center py-10 gap-5">
-        <div className="flex-1">
+        <div className="flex-1 flex flex-col">
           <h1 className="text-4xl font-semibold">
             {email.split("@")[0] + "'"}s Brain Usage
           </h1>
           <p className="opacity-50">{email}</p>
+          <Link className="mt-2" href={"/logout"}>
+            <Button className="px-3 py-2" variant={"danger"}>
+              Logout
+            </Button>
+          </Link>
         </div>
 
         <BrainConsumption {...userStats} />