Improve profile access and auth navigation

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import CreateAccount from "./pages/CreateAccountPage";
 import ProfilePage from "./pages/ProfilePage";
 import ArtworkDetailPage from "./pages/ArtworkDetailPage";
 import Footer from "./components/Footer";
+import ProtectedRoute from "./components/ProtectedRoute";
 
 function App() {
   // No footers for Login and CreateAccount Pages
@@ -19,7 +20,14 @@ function App() {
           <Route path="/" element={<HomePage />} />
           <Route path="/login" element={<Login />} />
           <Route path="/create-account" element={<CreateAccount />} />
-          <Route path="/profile" element={<ProfilePage />} />
+          <Route
+            path="/profile"
+            element={
+              <ProtectedRoute>
+                <ProfilePage />
+              </ProtectedRoute>
+            }
+          />
           <Route path="/artworks/:id" element={<ArtworkDetailPage />} />
         </Routes>
       </main>

frontend/src/components/Hero.tsx

@@ -4,11 +4,13 @@ import { CircleUserRound } from "lucide-react";
 import { Link } from "react-router-dom";
 
 function Hero() {
+  const isLoggedIn = Boolean(sessionStorage.getItem("token"));
+
   return (
     <section className="relative mx-auto flex min-h-152 max-w-350 items-center justify-between gap-12 px-10 py-16 pt-30">
       <Link
-        to="/login"
-        aria-label="Open login"
+        to={isLoggedIn ? "/profile" : "/login"}
+        aria-label={isLoggedIn ? "Open profile" : "Open login"}
         className="absolute left-10 top-15 text-gray-300 hover:text-gray-500"
       >
         <CircleUserRound size={34} strokeWidth={1.5} />

frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,15 @@
+import { Navigate } from "react-router-dom";
+
+type ProtectedRouteProps = {
+  children: React.ReactNode;
+};
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const token = sessionStorage.getItem("token");
+
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+}

frontend/src/pages/ArtworkDetailPage.tsx

@@ -55,7 +55,7 @@ export default function ArtworkDetailPage() {
               type="button"
               aria-label="Add artwork to gallery"
               onClick={() => setShowGalleryModal(true)}
-              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-300 text-2xl font-light text-gray-500 transition hover:border-gray-500 hover:text-black"
+              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-300 text-2xl font-light text-gray-500 transition cursor-pointer hover:border-gray-500 hover:text-black"
             >
               <span className="-translate-y-0.75">+</span>
             </button>

frontend/src/pages/CreateAccountPage.tsx

@@ -1,13 +1,25 @@
 import { useState, type SubmitEvent as ReactSubmitEvent } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import type { User } from "../types/User";
 
 type RegisterResponse = {
   data?: { register?: User };
   errors?: Array<{ message: string }>;
 };
 
+type LoginResponse = {
+  data?: {
+    login: {
+      user: User;
+      token: string;
+    };
+  };
+  errors?: { message: string }[];
+};
+
 export default function CreateAccount() {
+  const navigate = useNavigate();
+
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [message, setMessage] = useState("");
@@ -46,8 +58,47 @@ export default function CreateAccount() {
         throw new Error("The server did not return the new account.");
       }
 
-      setMessage(`Account created for ${result.data.register.username}.`);
-      setPassword("");
+      const loginQuery = `
+        mutation Login($username: String!, $password: String!) {
+          login(username: $username, password: $password) {
+            user {
+              id
+              username
+            }
+            token
+          }
+        }
+      `;
+
+      const loginResponse = await fetch("/graphql", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          query: loginQuery,
+          variables: { username, password },
+        }),
+      });
+
+      if (!loginResponse.ok) {
+        throw new Error(`Server error (${loginResponse.status}).`);
+      }
+
+      const loginResult = (await loginResponse.json()) as LoginResponse;
+
+      if (loginResult.errors?.length) {
+        throw new Error(loginResult.errors[0].message);
+      }
+
+      if (!loginResult.data?.login) {
+        throw new Error("Account was created, but login failed.");
+      }
+
+      const { user, token } = loginResult.data.login;
+
+      sessionStorage.setItem("user", JSON.stringify(user));
+      sessionStorage.setItem("token", token);
+
+      navigate("/profile");
     } catch (error) {
       setMessage(
         error instanceof Error ? error.message : "Something went wrong.",

frontend/src/pages/LoginPage.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useState, type SubmitEvent as ReactSubmitEvent } from "react";
 import type { User } from "../types/User";
 
@@ -13,6 +13,8 @@ type LoginResponse = {
 };
 
 function Login() {
+  const navigate = useNavigate();
+
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [message, setMessage] = useState("");
@@ -59,8 +61,7 @@ function Login() {
       sessionStorage.setItem("user", JSON.stringify(user));
       sessionStorage.setItem("token", token);
 
-      setMessage(`Welcome back, ${user.username}.`);
-      setPassword("");
+      navigate("/profile");
     } catch (error) {
       setMessage(
         error instanceof Error ? error.message : "Something went wrong.",

frontend/src/pages/ProfilePage.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import type { Gallery } from "../types/Gallery";
 import CreateGalleryModal from "../components/CreateGalleryModal";
 import { useGalleryCoverImages } from "../hooks/useGalleryCoverImages";
+import { Link, useNavigate } from "react-router-dom";
 
 const coverColors = [
   "#F3CA34", // Yellow
@@ -16,6 +17,8 @@ const coverColors = [
 ];
 
 export default function ProfilePage() {
+  const navigate = useNavigate();
+
   const [coverColor] = useState(() => {
     const randomIndex = Math.floor(Math.random() * coverColors.length);
     return coverColors[randomIndex];
@@ -258,8 +261,29 @@ export default function ProfilePage() {
     reader.readAsDataURL(file);
   }
 
+  function handleLogout() {
+    sessionStorage.removeItem("user");
+    sessionStorage.removeItem("token");
+    navigate("/");
+  }
+
   return (
     <div className="profile">
+      <Link
+        to="/"
+        className="absolute left-4 top-4 z-20 p-2 hover:text-gray-500"
+      >
+        ← Back
+      </Link>
+
+      <button
+        type="button"
+        onClick={handleLogout}
+        className="absolute right-4 top-4 z-20 cursor-pointer p-2 hover:text-gray-500"
+      >
+        Log out
+      </button>
+
       <div
         className="group cover relative h-50 w-full"
         style={{
@@ -278,15 +302,20 @@ export default function ProfilePage() {
           )
         )}
 
-        <label className="absolute top-4 right-4 cursor-pointer rounded-full bg-white px-4 py-2 text-sm text-gray-700 opacity-0 shadow-sm transition-opacity duration-200 group-hover:opacity-100 hover:bg-gray-100">
+        <label
+          htmlFor="cover-image-input"
+          className="absolute bottom-4 right-4 z-20 cursor-pointer rounded-full bg-white px-4 py-2 text-sm text-gray-700 opacity-0 shadow-sm transition-opacity duration-200 group-hover:opacity-100 hover:bg-gray-100"
+        >
           Change
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/webp"
-            onChange={handleCoverImageChange}
-            className="hidden"
-          />
         </label>
+
+        <input
+          id="cover-image-input"
+          type="file"
+          accept="image/jpeg,image/png,image/webp"
+          onChange={handleCoverImageChange}
+          className="hidden"
+        />
       </div>
       <div className="picture-and-username relative z-10 -mt-16 ml-20 flex items-center gap-6">
         <label className="profile-pic group relative block h-44 w-44 shrink-0 cursor-pointer overflow-hidden rounded-full border-4 border-white bg-gray-300">