Add frontend for profile where an API key can be generated

Author: Breus

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import Register from './pages/Register';
 import type {User} from './types/User';
 import Layout from "./components/PageLayout";
 import MyCourses from "./pages/MyCourses";
+import Profile from "./pages/Profile";
 
 function App() {
     const [user, setUser] = useState<User | null | undefined>(undefined);
@@ -30,7 +31,8 @@ function App() {
             {path: '/', element: <AllCourses/>},
             {path: '/my-courses', element: <MyCourses user={user}/>},
             {path: '/login', element: <Login setUser={setUser}/>},
-            {path: '/register', element: <Register setUser={setUser}/>}
+            {path: '/register', element: <Register setUser={setUser}/>},
+            {path: '/profile', element: <Profile user={user}/>}
         ]
     }]);
 

frontend/src/components/Header.tsx

@@ -36,9 +36,11 @@ function Header({user, setUser}: {
             <div>
                 {user ? (
                     <div className="flex items-center gap-4">
-            <span>
-                {user.firstName} {user.lastName} ({user.role})
-            </span>
+                        <Link to="/profile" className="underline hover:text-blue-600 transition">
+                            <span>
+                                {user.firstName} {user.lastName} ({user.role})
+                            </span>
+                        </Link>
                         <button
                             onClick={logout}
                             className="bg-blue-600 text-white px-5 py-2 rounded-full font-semibold shadow hover:bg-blue-700 transition"
@@ -62,4 +64,3 @@ function Header({user, setUser}: {
 }
 
 export default Header
-

frontend/src/pages/Profile.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { User } from '../types/User';
+import { Navigate } from 'react-router';
+
+function Profile({ user }: { user: User | null }) {
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+
+  const generateApiKey = async () => {
+    setIsGenerating(true);
+    setError(null);
+
+    try {
+      // TODO: Replace with actual backend endpoint when implemented
+      // This is a placeholder that simulates API key generation
+      setTimeout(() => {
+        // Mock API key (in production this would come from the backend)
+        const mockApiKey = `key_${Math.random().toString(36).substring(2, 15)}`;
+        setApiKey(mockApiKey);
+        setIsGenerating(false);
+      }, 1000);
+
+      // Actual API call would look like:
+      // const response = await fetch('http://localhost:8080/api/users/generate-api-key', {
+      //   method: 'POST',
+      //   credentials: 'include',
+      //   headers: {
+      //     'Content-Type': 'application/json',
+      //   }
+      // });
+      // const data = await response.json();
+      // setApiKey(data.apiKey);
+    } catch (err) {
+      setError('Failed to generate API key. Please try again later.');
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="max-w-5xl container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">User Profile</h1>
+
+      <div className="bg-white shadow-md rounded-lg p-6 mb-6">
+        <h2 className="text-xl font-semibold mb-4">Personal Information</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <p className="text-sm text-gray-500">First Name</p>
+            <p className="font-medium">{user.firstName}</p>
+          </div>
+          <div>
+            <p className="text-sm text-gray-500">Last Name</p>
+            <p className="font-medium">{user.lastName}</p>
+          </div>
+          <div>
+            <p className="text-sm text-gray-500">Role</p>
+            <p className="font-medium">{user.role}</p>
+          </div>
+          <div>
+            <p className="text-sm text-gray-500">Email</p>
+            <p className="font-medium">{user.emailAddress}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white shadow-md rounded-lg p-6">
+        <h2 className="text-xl font-semibold mb-4">API Access</h2>
+        <p className="text-gray-600 mb-4">
+          Generate an API key to access the CourseHub APIs programmatically. Keep this key secure!
+        </p>
+
+        {apiKey ? (
+          <div className="mb-4">
+            <p className="text-sm text-gray-500 mb-1">Your API Key</p>
+            <div className="flex items-center">
+              <input
+                type="text"
+                value={apiKey}
+                readOnly
+                className="flex-1 border rounded-md py-2 px-3 bg-gray-50"
+              />
+              <button
+                className="ml-2 bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md"
+                onClick={() => {
+                  navigator.clipboard.writeText(apiKey);
+                }}
+              >
+                Copy
+              </button>
+            </div>
+            <p className="text-sm text-red-500 mt-2">
+              Make sure to save this key now! You won't be able to see it again.
+            </p>
+          </div>
+        ) : (
+          <>
+            {error && <p className="text-red-500 mb-4">{error}</p>}
+            <button
+              onClick={generateApiKey}
+              disabled={isGenerating}
+              className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition disabled:bg-blue-400"
+            >
+              {isGenerating ? 'Generating...' : 'Generate API Key'}
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Profile;