Add auth screens (#193)

skyvern-frontend/src/routes/root/Profile.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+import { ExitIcon, PersonIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  name: string;
+  onLogout?: () => void;
+};
+
+function Profile({ name, onLogout }: Props) {
+  return (
+    <div className="flex items-center border-2 p-2 rounded-lg">
+      <div className="flex gap-2 items-center">
+        <PersonIcon className="h-4 w-4" />
+        <p className="w-40 overflow-hidden text-ellipsis">{name}</p>
+      </div>
+      <div>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => {
+            onLogout?.();
+          }}
+        >
+          <ExitIcon className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { Profile };

skyvern-frontend/src/routes/root/RootLayout.tsx

@@ -4,8 +4,17 @@ import { SideNav } from "./SideNav";
 import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
 import { Logo } from "@/components/Logo";
 import { ThemeToggle } from "@/components/ThemeSwitch";
+import { Profile } from "./Profile";
+import { useContext } from "react";
+import { UserContext } from "@/store/UserContext";
+
+type Props = {
+  onLogout?: () => void;
+};
+
+function RootLayout({ onLogout }: Props) {
+  const user = useContext(UserContext);
 
-function RootLayout() {
   return (
     <>
       <div className="w-full h-full px-4">
@@ -20,6 +29,11 @@ function RootLayout() {
             </div>
           </Link>
           <SideNav />
+          {user ? (
+            <div className="absolute bottom-2 left-0 w-72 px-6 shrink-0">
+              <Profile name={user.name} onLogout={onLogout} />
+            </div>
+          ) : null}
         </aside>
         <div className="pl-72 h-24 flex justify-end items-center px-6 gap-4">
           <Link