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>
This commit is contained in:
curo1305
2026-04-13 18:29:48 +02:00
parent 343f12259c
commit d46191789d
9 changed files with 112 additions and 140 deletions
+12
View File
@@ -0,0 +1,12 @@
import Nav from "../components/Nav";
export default function AppsPage() {
return (
<>
<Nav />
<div style={{ padding: 32 }}>
<h1>Apps</h1>
</div>
</>
);
}
+62 -22
View File
@@ -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>
);
}
-8
View File
@@ -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>
);
}
-64
View File
@@ -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>
);
}
@@ -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>
);
}
+12
View File
@@ -0,0 +1,12 @@
import Nav from "../components/Nav";
export default function SettingsPage() {
return (
<>
<Nav />
<div style={{ padding: 32 }}>
<h1>Settings</h1>
</div>
</>
);
}