Redesign login as landing page, remove self-registration, add nav+placeholders

- LoginPage: centred landing layout with logo placeholder box and business
  name headline (BUSINESS_NAME constant); registration link removed
- useAuth: post-login redirect goes to / (dashboard) directly
- Nav: Home | Apps | Settings | Logout (consistent on all protected pages)
- AppsPage, SettingsPage: white placeholder pages with headline
- App.tsx: /apps and /settings private routes; removed /register,
  /register-success, /login-success; catch-all → /
- Deleted: RegisterPage, RegisterSuccessPage, LoginSuccessPage
- Backend /api/auth/register kept for future admin-side user creation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -1,11 +1,10 @@
 import { Routes, Route, Navigate } from "react-router-dom";
+import { useAuth } from "./hooks/useAuth";
 import LoginPage from "./pages/LoginPage";
-import RegisterPage from "./pages/RegisterPage";
 import DashboardPage from "./pages/DashboardPage";
 import ProfilePage from "./pages/ProfilePage";
-import LoginSuccessPage from "./pages/LoginSuccessPage";
+import AppsPage from "./pages/AppsPage";
-import RegisterSuccessPage from "./pages/RegisterSuccessPage";
+import SettingsPage from "./pages/SettingsPage";
-import { useAuth } from "./hooks/useAuth";
 
 function PrivateRoute({ children }: { children: React.ReactNode }) {
   const { token } = useAuth();
@@ -16,32 +15,14 @@ export default function App() {
   return (
     <Routes>
       <Route path="/login" element={<LoginPage />} />
-      <Route path="/register" element={<RegisterPage />} />
+
-      <Route path="/register-success" element={<RegisterSuccessPage />} />
+      <Route path="/" element={<PrivateRoute><DashboardPage /></PrivateRoute>} />
-      <Route
+      <Route path="/apps" element={<PrivateRoute><AppsPage /></PrivateRoute>} />
-        path="/login-success"
+      <Route path="/settings" element={<PrivateRoute><SettingsPage /></PrivateRoute>} />
-        element={
+      <Route path="/profile" element={<PrivateRoute><ProfilePage /></PrivateRoute>} />
-          <PrivateRoute>
+
-            <LoginSuccessPage />
+      {/* Catch-all */}
-          </PrivateRoute>
+      <Route path="*" element={<Navigate to="/" replace />} />
-        }
-      />
-      <Route
-        path="/"
-        element={
-          <PrivateRoute>
-            <DashboardPage />
-          </PrivateRoute>
-        }
-      />
-      <Route
-        path="/profile"
-        element={
-          <PrivateRoute>
-            <ProfilePage />
-          </PrivateRoute>
-        }
-      />
     </Routes>
   );
 }

frontend/src/components/Nav.tsx

@@ -5,10 +5,20 @@ export default function Nav() {
   const { logout } = useAuth();
 
   return (
-    <nav style={{ display: "flex", gap: 16, padding: "12px 24px", borderBottom: "1px solid #ccc" }}>
+    <nav style={{
-      <Link to="/">Dashboard</Link>
+      display: "flex",
-      <Link to="/profile">Profile</Link>
+      alignItems: "center",
-      <button onClick={logout} style={{ marginLeft: "auto", cursor: "pointer" }}>
+      gap: 16,
+      padding: "12px 24px",
+      borderBottom: "1px solid #ccc",
+    }}>
+      <Link to="/">Home</Link>
+      <Link to="/apps">Apps</Link>
+      <Link to="/settings">Settings</Link>
+      <button
+        onClick={logout}
+        style={{ marginLeft: "auto", cursor: "pointer" }}
+      >
         Logout
       </button>
     </nav>

frontend/src/hooks/useAuth.ts

@@ -10,7 +10,7 @@ export function useAuth() {
     const t = await apiLogin(email, password);
     localStorage.setItem("token", t);
     setToken(t);
-    navigate("/login-success");
+    navigate("/");
   };
 
   const logout = () => {

frontend/src/pages/AppsPage.tsx

@@ -0,0 +1,12 @@
+import Nav from "../components/Nav";
+
+export default function AppsPage() {
+  return (
+    <>
+      <Nav />
+      <div style={{ padding: 32 }}>
+        <h1>Apps</h1>
+      </div>
+    </>
+  );
+}

frontend/src/pages/LoginPage.tsx

@@ -1,8 +1,13 @@
 import axios from "axios";
 import { useState } from "react";
-import { Link } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
 
+// ── Customise these two constants for each deployment ────────────────────────
+const BUSINESS_NAME = "Your Business Name";
+// Replace the src with the actual logo URL or import, or swap the placeholder
+// div below for an <img> tag once a logo is available.
+// ─────────────────────────────────────────────────────────────────────────────
+
 export default function LoginPage() {
   const { login } = useAuth();
   const [email, setEmail] = useState("");
@@ -25,28 +30,63 @@ export default function LoginPage() {
   };
 
   return (
-    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24 }}>
+    <div style={{
-      <h1>Sign in</h1>
+      minHeight: "100vh",
-      <form onSubmit={handleSubmit}>
+      display: "flex",
-        <div>
+      alignItems: "center",
-          <label>Email</label>
+      justifyContent: "center",
-          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+    }}>
+      <div style={{ width: 360, padding: 32 }}>
+
+        {/* Logo placeholder — swap for <img src="..." alt="Logo" /> */}
+        <div style={{
+          width: 96,
+          height: 96,
+          margin: "0 auto 24px",
+          border: "2px dashed #aaa",
+          borderRadius: 8,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#aaa",
+          fontSize: 12,
+        }}>
+          Logo
         </div>
-        <div>
+
-          <label>Password</label>
+        <h1 style={{ textAlign: "center", marginBottom: 24 }}>{BUSINESS_NAME}</h1>
+
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: 12 }}>
+            <label style={{ display: "block", marginBottom: 4 }}>Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
+            />
+          </div>
+          <div style={{ marginBottom: 12 }}>
+            <label style={{ display: "block", marginBottom: 4 }}>Password</label>
             <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
+              style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
             />
           </div>
-        {error && <p style={{ color: "red" }}>{error}</p>}
+          {error && <p style={{ color: "red", margin: "8px 0" }}>{error}</p>}
-        <button type="submit">Login</button>
+          <button
+            type="submit"
+            style={{ width: "100%", padding: "8px 0", marginTop: 8, cursor: "pointer" }}
+          >
+            Sign in
+          </button>
         </form>
-      <p>
+
-        No account? <Link to="/register">Register</Link>
+      </div>
-      </p>
     </div>
   );
 }

frontend/src/pages/LoginSuccessPage.tsx

@@ -1,8 +0,0 @@
-export default function LoginSuccessPage() {
-  return (
-    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24, textAlign: "center" }}>
-      <h1>Login successful</h1>
-      <p>You are now logged in.</p>
-    </div>
-  );
-}

frontend/src/pages/RegisterPage.tsx

@@ -1,64 +0,0 @@
-import axios from "axios";
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { register } from "../api/client";
-
-export default function RegisterPage() {
-  const navigate = useNavigate();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [fullName, setFullName] = useState("");
-  const [error, setError] = useState("");
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    try {
-      await register(email, password, fullName);
-      navigate("/register-success");
-    } catch (err) {
-      if (axios.isAxiosError(err)) {
-        const detail = err.response?.data?.detail;
-        if (Array.isArray(detail)) {
-          setError(detail.map((d: { msg: string }) => d.msg).join(" / "));
-        } else if (typeof detail === "string") {
-          setError(detail);
-        } else {
-          setError("Registration failed.");
-        }
-      } else {
-        setError("Registration failed.");
-      }
-    }
-  };
-
-  return (
-    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24 }}>
-      <h1>Create account</h1>
-      <form onSubmit={handleSubmit}>
-        <div>
-          <label>Full name</label>
-          <input value={fullName} onChange={(e) => setFullName(e.target.value)} />
-        </div>
-        <div>
-          <label>Email</label>
-          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
-        </div>
-        <div>
-          <label>Password</label>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </div>
-        {error && <p style={{ color: "red" }}>{error}</p>}
-        <button type="submit">Register</button>
-      </form>
-      <p>
-        Already have an account? <Link to="/login">Sign in</Link>
-      </p>
-    </div>
-  );
-}

frontend/src/pages/RegisterSuccessPage.tsx

@@ -1,11 +0,0 @@
-import { Link } from "react-router-dom";
-
-export default function RegisterSuccessPage() {
-  return (
-    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24, textAlign: "center" }}>
-      <h1>Registration successful</h1>
-      <p>Your account has been created.</p>
-      <Link to="/login">Sign in</Link>
-    </div>
-  );
-}

frontend/src/pages/SettingsPage.tsx

@@ -0,0 +1,12 @@
+import Nav from "../components/Nav";
+
+export default function SettingsPage() {
+  return (
+    <>
+      <Nav />
+      <div style={{ padding: 32 }}>
+        <h1>Settings</h1>
+      </div>
+    </>
+  );
+}