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:
@@ -0,0 +1,12 @@
|
||||
import Nav from "../components/Nav";
|
||||
|
||||
export default function AppsPage() {
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<div style={{ padding: 32 }}>
|
||||
<h1>Apps</h1>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import Nav from "../components/Nav";
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<>
|
||||
<Nav />
|
||||
<div style={{ padding: 32 }}>
|
||||
<h1>Settings</h1>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user