From d46191789dd495db658bd3dd1885ff3cffe09fdb Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Mon, 13 Apr 2026 18:29:48 +0200
Subject: [PATCH] Redesign login as landing page, remove self-registration, add
 nav+placeholders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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                       | 41 +++--------
 frontend/src/components/Nav.tsx            | 18 +++--
 frontend/src/hooks/useAuth.ts              |  2 +-
 frontend/src/pages/AppsPage.tsx            | 12 ++++
 frontend/src/pages/LoginPage.tsx           | 84 ++++++++++++++++------
 frontend/src/pages/LoginSuccessPage.tsx    |  8 ---
 frontend/src/pages/RegisterPage.tsx        | 64 -----------------
 frontend/src/pages/RegisterSuccessPage.tsx | 11 ---
 frontend/src/pages/SettingsPage.tsx        | 12 ++++
 9 files changed, 112 insertions(+), 140 deletions(-)
 create mode 100644 frontend/src/pages/AppsPage.tsx
 delete mode 100644 frontend/src/pages/LoginSuccessPage.tsx
 delete mode 100644 frontend/src/pages/RegisterPage.tsx
 delete mode 100644 frontend/src/pages/RegisterSuccessPage.tsx
 create mode 100644 frontend/src/pages/SettingsPage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f60c84e..9666424 100644
--- a/frontend/src/App.tsx
+++ b/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 RegisterSuccessPage from "./pages/RegisterSuccessPage";
-import { useAuth } from "./hooks/useAuth";
+import AppsPage from "./pages/AppsPage";
+import SettingsPage from "./pages/SettingsPage";
 
 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="/login-success"
-        element={
-          <PrivateRoute>
-            <LoginSuccessPage />
-          </PrivateRoute>
-        }
-      />
-      <Route
-        path="/"
-        element={
-          <PrivateRoute>
-            <DashboardPage />
-          </PrivateRoute>
-        }
-      />
-      <Route
-        path="/profile"
-        element={
-          <PrivateRoute>
-            <ProfilePage />
-          </PrivateRoute>
-        }
-      />
+
+      <Route path="/" element={<PrivateRoute><DashboardPage /></PrivateRoute>} />
+      <Route path="/apps" element={<PrivateRoute><AppsPage /></PrivateRoute>} />
+      <Route path="/settings" element={<PrivateRoute><SettingsPage /></PrivateRoute>} />
+      <Route path="/profile" element={<PrivateRoute><ProfilePage /></PrivateRoute>} />
+
+      {/* Catch-all */}
+      <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );
 }
diff --git a/frontend/src/components/Nav.tsx b/frontend/src/components/Nav.tsx
index 4b0cb47..1e770fe 100644
--- a/frontend/src/components/Nav.tsx
+++ b/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" }}>
-      <Link to="/">Dashboard</Link>
-      <Link to="/profile">Profile</Link>
-      <button onClick={logout} style={{ marginLeft: "auto", cursor: "pointer" }}>
+    <nav style={{
+      display: "flex",
+      alignItems: "center",
+      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>
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index dafaa24..07d36f2 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/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 = () => {
diff --git a/frontend/src/pages/AppsPage.tsx b/frontend/src/pages/AppsPage.tsx
new file mode 100644
index 0000000..afd799d
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index e8812a0..b81d970 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/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 }}>
-      <h1>Sign in</h1>
-      <form onSubmit={handleSubmit}>
-        <div>
-          <label>Email</label>
-          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+    <div style={{
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    }}>
+      <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>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </div>
-        {error && <p style={{ color: "red" }}>{error}</p>}
-        <button type="submit">Login</button>
-      </form>
-      <p>
-        No account? <Link to="/register">Register</Link>
-      </p>
+
+        <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", margin: "8px 0" }}>{error}</p>}
+          <button
+            type="submit"
+            style={{ width: "100%", padding: "8px 0", marginTop: 8, cursor: "pointer" }}
+          >
+            Sign in
+          </button>
+        </form>
+
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/LoginSuccessPage.tsx b/frontend/src/pages/LoginSuccessPage.tsx
deleted file mode 100644
index 7fe96e4..0000000
--- a/frontend/src/pages/LoginSuccessPage.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
deleted file mode 100644
index e35f998..0000000
--- a/frontend/src/pages/RegisterPage.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/frontend/src/pages/RegisterSuccessPage.tsx b/frontend/src/pages/RegisterSuccessPage.tsx
deleted file mode 100644
index fc20265..0000000
--- a/frontend/src/pages/RegisterSuccessPage.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
new file mode 100644
index 0000000..d0e9a74
--- /dev/null
+++ b/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>
+    </>
+  );
+}