feat(frontend): add dedicated Welcome page and persistent session (#32)

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
 import Login from './pages/Login/Login';
+import Welcome from './pages/Welcome/Welcome';
 import ErrorPage from './pages/ErrorPage/ErrorPage';
 import { pingServer, registerServerDownHandler } from './services/apiClient';
 
@@ -33,7 +34,10 @@ export default function App() {
       <Route path="/403" element={<ErrorPage kind="not-authorized" />} />
       <Route path="/422" element={<ErrorPage kind="file-corrupted" />} />
       <Route path="/404" element={<ErrorPage kind="not-found" />} />
-      <Route path="*" element={<Login />} />
+      <Route path="/welcome" element={<Welcome />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/" element={<Welcome />} />
+      <Route path="*" element={<ErrorPage kind="not-found" />} />
     </Routes>
   );
 }

frontend/src/pages/Login/Login.tsx

@@ -1,15 +1,10 @@
-import { FormEvent, useState } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styles from './Login.module.scss';
 import { apiFetch } from '../../services/apiClient';
 
 type Mode = 'signin' | 'signup';
 
-interface LoggedInUser {
-  id: number;
-  name?: string;
-  email: string;
-}
-
 export default function Login() {
   const [mode, setMode] = useState<Mode>('signin');
   const [name, setName] = useState('');
@@ -18,8 +13,22 @@ export default function Login() {
   const [confirmPassword, setConfirmPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
-  const [loggedInUser, setLoggedInUser] = useState<LoggedInUser | null>(null);
-  const [welcomeMessage, setWelcomeMessage] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // If user is already authenticated, redirect to Welcome page
+    const stored = localStorage.getItem('zemo_user');
+    if (stored) {
+      try {
+        const u = JSON.parse(stored);
+        if (u && u.id) {
+          navigate('/welcome', { replace: true });
+        }
+      } catch {
+        localStorage.removeItem('zemo_user');
+      }
+    }
+  }, [navigate]);
 
   function toggleMode() {
     setMode((m) => (m === 'signin' ? 'signup' : 'signin'));
@@ -49,8 +58,9 @@ export default function Login() {
           setLoading(false);
           return;
         }
-        setLoggedInUser(data.user);
-        setWelcomeMessage(`Welcome to ZemoLibrary, ${data.user?.name || data.user?.email}!`);
+        // Save session and redirect to Welcome page
+        localStorage.setItem('zemo_user', JSON.stringify(data.user));
+        navigate('/welcome', { replace: true });
       } else {
         const res = await apiFetch('/auth/login', {
           method: 'POST',
@@ -63,8 +73,9 @@ export default function Login() {
           setLoading(false);
           return;
         }
-        setLoggedInUser(data.user);
-        setWelcomeMessage(`Welcome back, ${data.user?.name || data.user?.email}!`);
+        // Save session and redirect to Welcome page
+        localStorage.setItem('zemo_user', JSON.stringify(data.user));
+        navigate('/welcome', { replace: true });
       }
     } catch {
       // apiFetch automatically triggers server-down navigation on network fault
@@ -74,32 +85,6 @@ export default function Login() {
     }
   }
 
-  if (loggedInUser && welcomeMessage) {
-    return (
-      <div className={styles.wrapper}>
-        <div className={styles.welcomeCard}>
-          <div className={styles.successBadge}>✓</div>
-          <h2>{welcomeMessage}</h2>
-          <p className={styles.userInfo}>
-            Logged in as <strong>{loggedInUser.email}</strong>
-          </p>
-          <button
-            type="button"
-            className={styles.signOutButton}
-            onClick={() => {
-              setLoggedInUser(null);
-              setWelcomeMessage(null);
-              setPassword('');
-              setConfirmPassword('');
-            }}
-          >
-            Sign Out / Switch Account
-          </button>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className={styles.wrapper}>
       <form className={styles.form} onSubmit={handleSubmit}>

frontend/src/pages/Welcome/Welcome.module.scss

@@ -0,0 +1,131 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 80vh;
+  padding: 2rem 1rem;
+}
+
+.welcomeCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 480px;
+  width: 100%;
+  background: var(--card-bg, #ffffff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 16px;
+  padding: 2.5rem 2rem;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+  text-align: center;
+}
+
+.avatarCircle {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1.25rem;
+  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
+}
+
+.header {
+  margin-bottom: 1.5rem;
+
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin: 0.5rem 0;
+    color: var(--text-color, #111827);
+  }
+
+  .subtitle {
+    font-size: 0.95rem;
+    color: #6b7280;
+    margin: 0;
+
+    strong {
+      color: var(--text-color, #111827);
+    }
+  }
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  background: #ecfdf5;
+  color: #059669;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.detailsBox {
+  width: 100%;
+  background: var(--bg-color, #f9fafb);
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 12px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  margin-bottom: 1.75rem;
+  text-align: left;
+}
+
+.detailRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.detailLabel {
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.detailValue {
+  color: var(--text-color, #111827);
+  font-weight: 600;
+}
+
+.onlineBadge {
+  color: #10b981;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.actions {
+  width: 100%;
+}
+
+.signOutBtn {
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--text-color, #111827);
+  color: var(--bg-color, #ffffff);
+  border: none;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s ease, transform 0.1s ease;
+
+  &:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}

frontend/src/pages/Welcome/Welcome.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './Welcome.module.scss';
+
+interface User {
+  id: number;
+  name?: string;
+  email: string;
+}
+
+export default function Welcome() {
+  const [user, setUser] = useState<User | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const stored = localStorage.getItem('zemo_user');
+    if (!stored) {
+      navigate('/login', { replace: true });
+      return;
+    }
+    try {
+      setUser(JSON.parse(stored));
+    } catch {
+      localStorage.removeItem('zemo_user');
+      navigate('/login', { replace: true });
+    }
+  }, [navigate]);
+
+  function handleSignOut() {
+    localStorage.removeItem('zemo_user');
+    navigate('/login', { replace: true });
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  const displayName = user.name && user.name.trim().length > 0 ? user.name : user.email.split('@')[0];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.welcomeCard}>
+        <div className={styles.avatarCircle}>
+          {displayName.charAt(0).toUpperCase()}
+        </div>
+
+        <div className={styles.header}>
+          <span className={styles.badge}>Active Session</span>
+          <h1>Welcome, {displayName}!</h1>
+          <p className={styles.subtitle}>
+            You have successfully connected to <strong>ZemoLibrary</strong>.
+          </p>
+        </div>
+
+        <div className={styles.detailsBox}>
+          <div className={styles.detailRow}>
+            <span className={styles.detailLabel}>Account Name</span>
+            <span className={styles.detailValue}>{user.name || 'Not provided'}</span>
+          </div>
+          <div className={styles.detailRow}>
+            <span className={styles.detailLabel}>Email Address</span>
+            <span className={styles.detailValue}>{user.email}</span>
+          </div>
+          <div className={styles.detailRow}>
+            <span className={styles.detailLabel}>User ID</span>
+            <span className={styles.detailValue}>#{user.id}</span>
+          </div>
+          <div className={styles.detailRow}>
+            <span className={styles.detailLabel}>Server Status</span>
+            <span className={styles.onlineBadge}>● Online (app.zemoserver.dev)</span>
+          </div>
+        </div>
+
+        <div className={styles.actions}>
+          <button type="button" className={styles.signOutBtn} onClick={handleSignOut}>
+            Sign Out
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/config/api.ts","./src/context/themecontext.tsx","./src/pages/errorpage/errorpage.tsx","./src/pages/login/login.tsx","./src/services/apiclient.ts"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/config/api.ts","./src/context/themecontext.tsx","./src/pages/errorpage/errorpage.tsx","./src/pages/login/login.tsx","./src/pages/welcome/welcome.tsx","./src/services/apiclient.ts"],"version":"5.9.3"}