first implementation
This commit is contained in:
parent
79458bcba4
commit
870804e7b9
GPG key ID:
883EDBAA726BD96C
24 changed files with 5485 additions and 184 deletions
529
frontend/app/admin/invites/page.tsx
Normal file
529
frontend/app/admin/invites/page.tsx
Normal file
|
|
@ -0,0 +1,529 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Permission } from "../../auth-context";
|
||||
import { api } from "../../api";
|
||||
import { sharedStyles } from "../../styles/shared";
|
||||
import { Header } from "../../components/Header";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
|
||||
interface InviteRecord {
|
||||
id: number;
|
||||
identifier: string;
|
||||
godfather_id: number;
|
||||
godfather_email: string;
|
||||
status: string;
|
||||
used_by_id: number | null;
|
||||
used_by_email: string | null;
|
||||
created_at: string;
|
||||
spent_at: string | null;
|
||||
revoked_at: string | null;
|
||||
}
|
||||
|
||||
interface PaginatedResponse<T> {
|
||||
records: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
per_page: number;
|
||||
total_pages: number;
|
||||
}
|
||||
|
||||
interface UserOption {
|
||||
id: number;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export default function AdminInvitesPage() {
|
||||
const [data, setData] = useState<PaginatedResponse<InviteRecord> | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [statusFilter, setStatusFilter] = useState<string>("");
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [newGodfatherId, setNewGodfatherId] = useState("");
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
const [users, setUsers] = useState<UserOption[]>([]);
|
||||
const { user, isLoading, isAuthorized } = useRequireAuth({
|
||||
requiredPermission: Permission.VIEW_AUDIT, // Admins have this
|
||||
fallbackRedirect: "/",
|
||||
});
|
||||
|
||||
const fetchUsers = useCallback(async () => {
|
||||
try {
|
||||
const data = await api.get<UserOption[]>("/api/admin/users");
|
||||
setUsers(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch users:", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchInvites = useCallback(async (page: number, status: string) => {
|
||||
setError(null);
|
||||
try {
|
||||
let url = `/api/admin/invites?page=${page}&per_page=10`;
|
||||
if (status) {
|
||||
url += `&status=${status}`;
|
||||
}
|
||||
const data = await api.get<PaginatedResponse<InviteRecord>>(url);
|
||||
setData(data);
|
||||
} catch (err) {
|
||||
setData(null);
|
||||
setError(err instanceof Error ? err.message : "Failed to load invites");
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && isAuthorized) {
|
||||
fetchUsers();
|
||||
fetchInvites(page, statusFilter);
|
||||
}
|
||||
}, [user, page, statusFilter, isAuthorized, fetchUsers, fetchInvites]);
|
||||
|
||||
const handleCreateInvite = async () => {
|
||||
if (!newGodfatherId) {
|
||||
setCreateError("Please enter a godfather user ID");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCreating(true);
|
||||
setCreateError(null);
|
||||
|
||||
try {
|
||||
await api.post("/api/admin/invites", {
|
||||
godfather_id: parseInt(newGodfatherId),
|
||||
});
|
||||
setNewGodfatherId("");
|
||||
fetchInvites(1, statusFilter);
|
||||
setPage(1);
|
||||
} catch (err) {
|
||||
setCreateError(err instanceof Error ? err.message : "Failed to create invite");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevoke = async (inviteId: number) => {
|
||||
try {
|
||||
await api.post(`/api/admin/invites/${inviteId}/revoke`);
|
||||
fetchInvites(page, statusFilter);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to revoke invite");
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleString();
|
||||
};
|
||||
|
||||
const getStatusBadgeStyle = (status: string) => {
|
||||
switch (status) {
|
||||
case "ready":
|
||||
return styles.statusReady;
|
||||
case "spent":
|
||||
return styles.statusSpent;
|
||||
case "revoked":
|
||||
return styles.statusRevoked;
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<div style={styles.loader}>Loading...</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isAuthorized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<Header currentPage="admin-invites" />
|
||||
|
||||
<div style={styles.content}>
|
||||
<div style={styles.pageContainer}>
|
||||
{/* Create Invite Section */}
|
||||
<div style={styles.createCard}>
|
||||
<h2 style={styles.createTitle}>Create Invite</h2>
|
||||
<div style={styles.createForm}>
|
||||
<div style={styles.inputGroup}>
|
||||
<label style={styles.inputLabel}>Godfather (user who can share this invite)</label>
|
||||
<select
|
||||
value={newGodfatherId}
|
||||
onChange={(e) => setNewGodfatherId(e.target.value)}
|
||||
style={styles.select}
|
||||
>
|
||||
<option value="">Select a user...</option>
|
||||
{users.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.email}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{users.length === 0 && (
|
||||
<span style={styles.inputHint}>
|
||||
No users loaded yet. Create at least one invite to populate the list.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{createError && <div style={styles.createError}>{createError}</div>}
|
||||
<button
|
||||
onClick={handleCreateInvite}
|
||||
disabled={isCreating || !newGodfatherId}
|
||||
style={{
|
||||
...styles.createButton,
|
||||
...(!newGodfatherId ? styles.createButtonDisabled : {}),
|
||||
}}
|
||||
>
|
||||
{isCreating ? "Creating..." : "Create Invite"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Invites Table */}
|
||||
<div style={styles.tableCard}>
|
||||
<div style={styles.tableHeader}>
|
||||
<h2 style={styles.tableTitle}>All Invites</h2>
|
||||
<div style={styles.filterGroup}>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
setStatusFilter(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
style={styles.filterSelect}
|
||||
>
|
||||
<option value="">All statuses</option>
|
||||
<option value="ready">Ready</option>
|
||||
<option value="spent">Spent</option>
|
||||
<option value="revoked">Revoked</option>
|
||||
</select>
|
||||
<span style={styles.totalCount}>
|
||||
{data?.total ?? 0} invites
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.tableWrapper}>
|
||||
<table style={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={styles.th}>Code</th>
|
||||
<th style={styles.th}>Godfather</th>
|
||||
<th style={styles.th}>Status</th>
|
||||
<th style={styles.th}>Used By</th>
|
||||
<th style={styles.th}>Created</th>
|
||||
<th style={styles.th}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{error && (
|
||||
<tr>
|
||||
<td colSpan={6} style={styles.errorRow}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
{!error && data?.records.map((record) => (
|
||||
<tr key={record.id} style={styles.tr}>
|
||||
<td style={styles.tdCode}>{record.identifier}</td>
|
||||
<td style={styles.td}>{record.godfather_email}</td>
|
||||
<td style={styles.td}>
|
||||
<span style={{ ...styles.statusBadge, ...getStatusBadgeStyle(record.status) }}>
|
||||
{record.status}
|
||||
</span>
|
||||
</td>
|
||||
<td style={styles.td}>
|
||||
{record.used_by_email || "-"}
|
||||
</td>
|
||||
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
|
||||
<td style={styles.td}>
|
||||
{record.status === "ready" && (
|
||||
<button
|
||||
onClick={() => handleRevoke(record.id)}
|
||||
style={styles.revokeButton}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{!error && (!data || data.records.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan={6} style={styles.emptyRow}>No invites yet</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{data && data.total_pages > 1 && (
|
||||
<div style={styles.pagination}>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
style={styles.pageBtn}
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<span style={styles.pageInfo}>
|
||||
{page} / {data.total_pages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(data.total_pages, p + 1))}
|
||||
disabled={page === data.total_pages}
|
||||
style={styles.pageBtn}
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const pageStyles: Record<string, React.CSSProperties> = {
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: "2rem",
|
||||
overflowY: "auto",
|
||||
},
|
||||
pageContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "2rem",
|
||||
maxWidth: "1000px",
|
||||
margin: "0 auto",
|
||||
},
|
||||
createCard: {
|
||||
background: "rgba(99, 102, 241, 0.08)",
|
||||
border: "1px solid rgba(99, 102, 241, 0.2)",
|
||||
borderRadius: "16px",
|
||||
padding: "1.5rem",
|
||||
},
|
||||
createTitle: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "1rem",
|
||||
fontWeight: 600,
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
margin: "0 0 1rem 0",
|
||||
},
|
||||
createForm: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
},
|
||||
inputGroup: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.5rem",
|
||||
},
|
||||
inputLabel: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.8rem",
|
||||
color: "rgba(255, 255, 255, 0.5)",
|
||||
},
|
||||
input: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.9rem",
|
||||
padding: "0.75rem",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: "8px",
|
||||
color: "#fff",
|
||||
maxWidth: "300px",
|
||||
},
|
||||
select: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.9rem",
|
||||
padding: "0.75rem",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: "8px",
|
||||
color: "#fff",
|
||||
maxWidth: "400px",
|
||||
cursor: "pointer",
|
||||
},
|
||||
createError: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.85rem",
|
||||
color: "#f87171",
|
||||
},
|
||||
createButton: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: 500,
|
||||
padding: "0.75rem 1.5rem",
|
||||
background: "rgba(99, 102, 241, 0.3)",
|
||||
color: "#fff",
|
||||
border: "1px solid rgba(99, 102, 241, 0.5)",
|
||||
borderRadius: "8px",
|
||||
cursor: "pointer",
|
||||
alignSelf: "flex-start",
|
||||
},
|
||||
createButtonDisabled: {
|
||||
opacity: 0.5,
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
inputHint: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.75rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
tableCard: {
|
||||
background: "rgba(255, 255, 255, 0.03)",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
borderRadius: "20px",
|
||||
padding: "1.5rem",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
tableHeader: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem",
|
||||
},
|
||||
tableTitle: {
|
||||
fontFamily: "'Instrument Serif', Georgia, serif",
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: 400,
|
||||
color: "#fff",
|
||||
margin: 0,
|
||||
},
|
||||
filterGroup: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "1rem",
|
||||
},
|
||||
filterSelect: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.85rem",
|
||||
padding: "0.5rem 1rem",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: "8px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
},
|
||||
totalCount: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
},
|
||||
tableWrapper: {
|
||||
overflowX: "auto",
|
||||
},
|
||||
table: {
|
||||
width: "100%",
|
||||
borderCollapse: "collapse",
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
},
|
||||
th: {
|
||||
textAlign: "left",
|
||||
padding: "0.75rem 1rem",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 600,
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
},
|
||||
tr: {
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.04)",
|
||||
},
|
||||
td: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
},
|
||||
tdCode: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
color: "#fff",
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
},
|
||||
tdDate: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.75rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
},
|
||||
statusBadge: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.7rem",
|
||||
fontWeight: 500,
|
||||
padding: "0.25rem 0.5rem",
|
||||
borderRadius: "4px",
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
statusReady: {
|
||||
background: "rgba(99, 102, 241, 0.2)",
|
||||
color: "rgba(129, 140, 248, 0.9)",
|
||||
},
|
||||
statusSpent: {
|
||||
background: "rgba(34, 197, 94, 0.2)",
|
||||
color: "rgba(34, 197, 94, 0.9)",
|
||||
},
|
||||
statusRevoked: {
|
||||
background: "rgba(239, 68, 68, 0.2)",
|
||||
color: "rgba(239, 68, 68, 0.9)",
|
||||
},
|
||||
revokeButton: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.75rem",
|
||||
padding: "0.4rem 0.75rem",
|
||||
background: "rgba(239, 68, 68, 0.15)",
|
||||
color: "rgba(239, 68, 68, 0.9)",
|
||||
border: "1px solid rgba(239, 68, 68, 0.3)",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
},
|
||||
emptyRow: {
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
errorRow: {
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "#f87171",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
pagination: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "1rem",
|
||||
marginTop: "1rem",
|
||||
paddingTop: "1rem",
|
||||
borderTop: "1px solid rgba(255, 255, 255, 0.06)",
|
||||
},
|
||||
pageBtn: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "1rem",
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: "8px",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s",
|
||||
},
|
||||
pageInfo: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.5)",
|
||||
},
|
||||
};
|
||||
|
||||
const styles = { ...sharedStyles, ...pageStyles };
|
||||
|
||||
|
|
@ -22,8 +22,8 @@ async function request<T>(
|
|||
): Promise<T> {
|
||||
const url = `${API_URL}${endpoint}`;
|
||||
|
||||
const headers: HeadersInit = {
|
||||
...options.headers,
|
||||
const headers: Record<string, string> = {
|
||||
...(options.headers as Record<string, string>),
|
||||
};
|
||||
|
||||
if (options.body && typeof options.body === "string") {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ export const Permission = {
|
|||
INCREMENT_COUNTER: "increment_counter",
|
||||
USE_SUM: "use_sum",
|
||||
VIEW_AUDIT: "view_audit",
|
||||
MANAGE_INVITES: "manage_invites",
|
||||
VIEW_OWN_INVITES: "view_own_invites",
|
||||
} as const;
|
||||
|
||||
export type PermissionType = typeof Permission[keyof typeof Permission];
|
||||
|
|
@ -25,7 +27,7 @@ interface AuthContextType {
|
|||
user: User | null;
|
||||
isLoading: boolean;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
register: (email: string, password: string) => Promise<void>;
|
||||
register: (email: string, password: string, inviteIdentifier: string) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
hasPermission: (permission: PermissionType) => boolean;
|
||||
hasRole: (role: string) => boolean;
|
||||
|
|
@ -65,9 +67,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
|||
}
|
||||
};
|
||||
|
||||
const register = async (email: string, password: string) => {
|
||||
const register = async (email: string, password: string, inviteIdentifier: string) => {
|
||||
try {
|
||||
const userData = await api.post<User>("/api/auth/register", { email, password });
|
||||
const userData = await api.post<User>("/api/auth/register", {
|
||||
email,
|
||||
password,
|
||||
invite_identifier: inviteIdentifier,
|
||||
});
|
||||
setUser(userData);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
|
|||
import { useAuth } from "../auth-context";
|
||||
import { sharedStyles } from "../styles/shared";
|
||||
|
||||
type PageId = "counter" | "sum" | "profile" | "audit";
|
||||
type PageId = "counter" | "sum" | "profile" | "invites" | "audit" | "admin-invites";
|
||||
|
||||
interface HeaderProps {
|
||||
currentPage: PageId;
|
||||
|
|
@ -15,18 +15,26 @@ interface NavItem {
|
|||
label: string;
|
||||
href: string;
|
||||
regularOnly?: boolean;
|
||||
adminOnly?: boolean;
|
||||
}
|
||||
|
||||
const NAV_ITEMS: NavItem[] = [
|
||||
const REGULAR_NAV_ITEMS: NavItem[] = [
|
||||
{ id: "counter", label: "Counter", href: "/" },
|
||||
{ id: "sum", label: "Sum", href: "/sum" },
|
||||
{ id: "invites", label: "My Invites", href: "/invites", regularOnly: true },
|
||||
{ id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
|
||||
];
|
||||
|
||||
const ADMIN_NAV_ITEMS: NavItem[] = [
|
||||
{ id: "audit", label: "Audit", href: "/audit", adminOnly: true },
|
||||
{ id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
|
||||
];
|
||||
|
||||
export function Header({ currentPage }: HeaderProps) {
|
||||
const { user, logout, hasRole } = useAuth();
|
||||
const router = useRouter();
|
||||
const isRegularUser = hasRole("regular");
|
||||
const isAdminUser = hasRole("admin");
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
|
|
@ -35,12 +43,23 @@ export function Header({ currentPage }: HeaderProps) {
|
|||
|
||||
if (!user) return null;
|
||||
|
||||
// For audit page (admin), show only the current page label
|
||||
if (currentPage === "audit") {
|
||||
// For admin pages, show admin navigation
|
||||
if (isAdminUser && (currentPage === "audit" || currentPage === "admin-invites")) {
|
||||
return (
|
||||
<div style={sharedStyles.header}>
|
||||
<div style={sharedStyles.nav}>
|
||||
<span style={sharedStyles.navCurrent}>Audit</span>
|
||||
{ADMIN_NAV_ITEMS.map((item, index) => (
|
||||
<span key={item.id}>
|
||||
{index > 0 && <span style={sharedStyles.navDivider}>•</span>}
|
||||
{item.id === currentPage ? (
|
||||
<span style={sharedStyles.navCurrent}>{item.label}</span>
|
||||
) : (
|
||||
<a href={item.href} style={sharedStyles.navLink}>
|
||||
{item.label}
|
||||
</a>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div style={sharedStyles.userInfo}>
|
||||
<span style={sharedStyles.userEmail}>{user.email}</span>
|
||||
|
|
@ -53,7 +72,7 @@ export function Header({ currentPage }: HeaderProps) {
|
|||
}
|
||||
|
||||
// For regular pages, build nav with links
|
||||
const visibleItems = NAV_ITEMS.filter(
|
||||
const visibleItems = REGULAR_NAV_ITEMS.filter(
|
||||
(item) => !item.regularOnly || isRegularUser
|
||||
);
|
||||
|
||||
|
|
|
|||
330
frontend/app/invites/page.tsx
Normal file
330
frontend/app/invites/page.tsx
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { api } from "../api";
|
||||
import { sharedStyles } from "../styles/shared";
|
||||
import { Header } from "../components/Header";
|
||||
import { useRequireAuth } from "../hooks/useRequireAuth";
|
||||
|
||||
interface Invite {
|
||||
id: number;
|
||||
identifier: string;
|
||||
status: string;
|
||||
used_by_email: string | null;
|
||||
created_at: string;
|
||||
spent_at: string | null;
|
||||
}
|
||||
|
||||
export default function InvitesPage() {
|
||||
const { user, isLoading, isAuthorized } = useRequireAuth({
|
||||
requiredRole: "regular",
|
||||
fallbackRedirect: "/audit",
|
||||
});
|
||||
const [invites, setInvites] = useState<Invite[]>([]);
|
||||
const [isLoadingInvites, setIsLoadingInvites] = useState(true);
|
||||
const [copiedId, setCopiedId] = useState<number | null>(null);
|
||||
|
||||
const fetchInvites = useCallback(async () => {
|
||||
try {
|
||||
const data = await api.get<Invite[]>("/api/invites");
|
||||
setInvites(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load invites:", err);
|
||||
} finally {
|
||||
setIsLoadingInvites(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && isAuthorized) {
|
||||
fetchInvites();
|
||||
}
|
||||
}, [user, isAuthorized, fetchInvites]);
|
||||
|
||||
const getInviteUrl = (identifier: string) => {
|
||||
if (typeof window !== "undefined") {
|
||||
return `${window.location.origin}/signup/${identifier}`;
|
||||
}
|
||||
return `/signup/${identifier}`;
|
||||
};
|
||||
|
||||
const copyToClipboard = async (invite: Invite) => {
|
||||
const url = getInviteUrl(invite.identifier);
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
setCopiedId(invite.id);
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy:", err);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading || isLoadingInvites) {
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<div style={styles.loader}>Loading...</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isAuthorized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const readyInvites = invites.filter((i) => i.status === "ready");
|
||||
const spentInvites = invites.filter((i) => i.status === "spent");
|
||||
const revokedInvites = invites.filter((i) => i.status === "revoked");
|
||||
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<Header currentPage="invites" />
|
||||
|
||||
<div style={styles.content}>
|
||||
<div style={styles.pageCard}>
|
||||
<div style={styles.cardHeader}>
|
||||
<h1 style={styles.cardTitle}>My Invites</h1>
|
||||
<p style={styles.cardSubtitle}>
|
||||
Share your invite codes with friends to let them join
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{invites.length === 0 ? (
|
||||
<div style={styles.emptyState}>
|
||||
<p style={styles.emptyText}>You don't have any invites yet.</p>
|
||||
<p style={styles.emptyHint}>
|
||||
Contact an admin if you need invite codes to share.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={styles.sections}>
|
||||
{/* Ready Invites */}
|
||||
{readyInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={styles.sectionTitle}>
|
||||
Available ({readyInvites.length})
|
||||
</h2>
|
||||
<p style={styles.sectionHint}>
|
||||
Share these links with people you want to invite
|
||||
</p>
|
||||
<div style={styles.inviteList}>
|
||||
{readyInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCard}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<div style={styles.inviteActions}>
|
||||
<button
|
||||
onClick={() => copyToClipboard(invite)}
|
||||
style={styles.copyButton}
|
||||
>
|
||||
{copiedId === invite.id ? "Copied!" : "Copy Link"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Spent Invites */}
|
||||
{spentInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={styles.sectionTitle}>
|
||||
Used ({spentInvites.length})
|
||||
</h2>
|
||||
<div style={styles.inviteList}>
|
||||
{spentInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCardSpent}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<div style={styles.inviteeMeta}>
|
||||
<span style={styles.statusBadgeSpent}>Used</span>
|
||||
<span style={styles.inviteeEmail}>
|
||||
by {invite.used_by_email}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Revoked Invites */}
|
||||
{revokedInvites.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<h2 style={styles.sectionTitle}>
|
||||
Revoked ({revokedInvites.length})
|
||||
</h2>
|
||||
<div style={styles.inviteList}>
|
||||
{revokedInvites.map((invite) => (
|
||||
<div key={invite.id} style={styles.inviteCardRevoked}>
|
||||
<div style={styles.inviteCode}>{invite.identifier}</div>
|
||||
<span style={styles.statusBadgeRevoked}>Revoked</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const pageStyles: Record<string, React.CSSProperties> = {
|
||||
pageCard: {
|
||||
background: "rgba(255, 255, 255, 0.03)",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
borderRadius: "24px",
|
||||
padding: "2.5rem",
|
||||
width: "100%",
|
||||
maxWidth: "600px",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
cardHeader: {
|
||||
marginBottom: "2rem",
|
||||
},
|
||||
cardTitle: {
|
||||
fontFamily: "'Instrument Serif', Georgia, serif",
|
||||
fontSize: "2rem",
|
||||
fontWeight: 400,
|
||||
color: "#fff",
|
||||
margin: 0,
|
||||
letterSpacing: "-0.02em",
|
||||
},
|
||||
cardSubtitle: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
color: "rgba(255, 255, 255, 0.5)",
|
||||
marginTop: "0.5rem",
|
||||
fontSize: "0.95rem",
|
||||
},
|
||||
emptyState: {
|
||||
textAlign: "center",
|
||||
padding: "2rem 0",
|
||||
},
|
||||
emptyText: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
color: "rgba(255, 255, 255, 0.6)",
|
||||
fontSize: "1rem",
|
||||
margin: 0,
|
||||
},
|
||||
emptyHint: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
fontSize: "0.85rem",
|
||||
marginTop: "0.5rem",
|
||||
},
|
||||
sections: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "2rem",
|
||||
},
|
||||
section: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.75rem",
|
||||
},
|
||||
sectionTitle: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: 600,
|
||||
color: "rgba(255, 255, 255, 0.8)",
|
||||
margin: 0,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
},
|
||||
sectionHint: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.8rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
margin: 0,
|
||||
},
|
||||
inviteList: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.75rem",
|
||||
},
|
||||
inviteCard: {
|
||||
background: "rgba(99, 102, 241, 0.1)",
|
||||
border: "1px solid rgba(99, 102, 241, 0.3)",
|
||||
borderRadius: "12px",
|
||||
padding: "1rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
inviteCardSpent: {
|
||||
background: "rgba(34, 197, 94, 0.08)",
|
||||
border: "1px solid rgba(34, 197, 94, 0.2)",
|
||||
borderRadius: "12px",
|
||||
padding: "1rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
inviteCardRevoked: {
|
||||
background: "rgba(239, 68, 68, 0.08)",
|
||||
border: "1px solid rgba(239, 68, 68, 0.2)",
|
||||
borderRadius: "12px",
|
||||
padding: "1rem",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
opacity: 0.7,
|
||||
},
|
||||
inviteCode: {
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
fontSize: "0.95rem",
|
||||
color: "#fff",
|
||||
letterSpacing: "0.02em",
|
||||
},
|
||||
inviteActions: {
|
||||
display: "flex",
|
||||
gap: "0.5rem",
|
||||
},
|
||||
copyButton: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 500,
|
||||
padding: "0.5rem 1rem",
|
||||
background: "rgba(99, 102, 241, 0.3)",
|
||||
color: "#fff",
|
||||
border: "1px solid rgba(99, 102, 241, 0.5)",
|
||||
borderRadius: "8px",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s",
|
||||
},
|
||||
inviteeMeta: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
},
|
||||
statusBadgeSpent: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.7rem",
|
||||
fontWeight: 500,
|
||||
padding: "0.25rem 0.5rem",
|
||||
background: "rgba(34, 197, 94, 0.2)",
|
||||
color: "rgba(34, 197, 94, 0.9)",
|
||||
borderRadius: "4px",
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
statusBadgeRevoked: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.7rem",
|
||||
fontWeight: 500,
|
||||
padding: "0.25rem 0.5rem",
|
||||
background: "rgba(239, 68, 68, 0.2)",
|
||||
color: "rgba(239, 68, 68, 0.9)",
|
||||
borderRadius: "4px",
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
inviteeEmail: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.8rem",
|
||||
color: "rgba(255, 255, 255, 0.6)",
|
||||
},
|
||||
};
|
||||
|
||||
const styles = { ...sharedStyles, ...pageStyles };
|
||||
|
||||
|
|
@ -12,6 +12,7 @@ interface ProfileData {
|
|||
telegram: string | null;
|
||||
signal: string | null;
|
||||
nostr_npub: string | null;
|
||||
godfather_email: string | null;
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
|
|
@ -122,6 +123,7 @@ export default function ProfilePage() {
|
|||
signal: "",
|
||||
nostr_npub: "",
|
||||
});
|
||||
const [godfatherEmail, setGodfatherEmail] = useState<string | null>(null);
|
||||
const [errors, setErrors] = useState<FieldErrors>({});
|
||||
const [isLoadingProfile, setIsLoadingProfile] = useState(true);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
|
@ -150,6 +152,7 @@ export default function ProfilePage() {
|
|||
const formValues = toFormData(data);
|
||||
setFormData(formValues);
|
||||
setOriginalData(formValues);
|
||||
setGodfatherEmail(data.godfather_email);
|
||||
} catch (err) {
|
||||
console.error("Profile load error:", err);
|
||||
setToast({ message: "Failed to load profile", type: "error" });
|
||||
|
|
@ -302,6 +305,22 @@ export default function ProfilePage() {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
{/* Godfather - shown if user was invited */}
|
||||
{godfatherEmail && (
|
||||
<div style={styles.field}>
|
||||
<label style={styles.label}>
|
||||
Invited By
|
||||
<span style={styles.readOnlyBadge}>Read only</span>
|
||||
</label>
|
||||
<div style={styles.godfatherBox}>
|
||||
<span style={styles.godfatherEmail}>{godfatherEmail}</span>
|
||||
</div>
|
||||
<span style={styles.hint}>
|
||||
The user who invited you to join.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={styles.divider} />
|
||||
|
||||
<p style={styles.sectionLabel}>Contact Details</p>
|
||||
|
|
@ -483,6 +502,17 @@ const pageStyles: Record<string, React.CSSProperties> = {
|
|||
color: "rgba(255, 255, 255, 0.5)",
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
godfatherBox: {
|
||||
padding: "0.875rem 1rem",
|
||||
background: "rgba(99, 102, 241, 0.08)",
|
||||
border: "1px solid rgba(99, 102, 241, 0.2)",
|
||||
borderRadius: "12px",
|
||||
},
|
||||
godfatherEmail: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "1rem",
|
||||
color: "rgba(129, 140, 248, 0.9)",
|
||||
},
|
||||
inputError: {
|
||||
border: "1px solid rgba(239, 68, 68, 0.5)",
|
||||
boxShadow: "0 0 0 2px rgba(239, 68, 68, 0.1)",
|
||||
|
|
|
|||
37
frontend/app/signup/[code]/page.tsx
Normal file
37
frontend/app/signup/[code]/page.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import { useAuth } from "../../auth-context";
|
||||
|
||||
export default function SignupWithCodePage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const code = params.code as string;
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
// Already logged in, redirect to home
|
||||
router.replace("/");
|
||||
} else {
|
||||
// Redirect to signup with code as query param
|
||||
router.replace(`/signup?code=${encodeURIComponent(code)}`);
|
||||
}
|
||||
}, [user, code, router]);
|
||||
|
||||
return (
|
||||
<main style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%)",
|
||||
color: "rgba(255,255,255,0.6)",
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
}}>
|
||||
Redirecting...
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,20 +1,85 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useEffect, Suspense } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useAuth } from "../auth-context";
|
||||
import { api } from "../api";
|
||||
import { authFormStyles as styles } from "../styles/auth-form";
|
||||
|
||||
export default function SignupPage() {
|
||||
interface InviteCheckResponse {
|
||||
valid: boolean;
|
||||
status?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
function SignupContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const initialCode = searchParams.get("code") || "";
|
||||
|
||||
const [inviteCode, setInviteCode] = useState(initialCode);
|
||||
const [inviteValid, setInviteValid] = useState<boolean | null>(null);
|
||||
const [inviteError, setInviteError] = useState("");
|
||||
const [isCheckingInvite, setIsCheckingInvite] = useState(false);
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { register } = useAuth();
|
||||
|
||||
const { user, register } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
// Redirect if already logged in
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
router.push("/");
|
||||
}
|
||||
}, [user, router]);
|
||||
|
||||
// Check invite code on mount if provided in URL
|
||||
useEffect(() => {
|
||||
if (initialCode) {
|
||||
checkInvite(initialCode);
|
||||
}
|
||||
}, [initialCode]);
|
||||
|
||||
const checkInvite = async (code: string) => {
|
||||
if (!code.trim()) {
|
||||
setInviteValid(null);
|
||||
setInviteError("");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCheckingInvite(true);
|
||||
setInviteError("");
|
||||
|
||||
try {
|
||||
const response = await api.get<InviteCheckResponse>(
|
||||
`/api/invites/${encodeURIComponent(code.trim())}/check`
|
||||
);
|
||||
|
||||
if (response.valid) {
|
||||
setInviteValid(true);
|
||||
setInviteError("");
|
||||
} else {
|
||||
setInviteValid(false);
|
||||
setInviteError(response.error || "Invalid invite code");
|
||||
}
|
||||
} catch {
|
||||
setInviteValid(false);
|
||||
setInviteError("Failed to verify invite code");
|
||||
} finally {
|
||||
setIsCheckingInvite(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInviteSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
checkInvite(inviteCode);
|
||||
};
|
||||
|
||||
const handleSignupSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
|
|
@ -31,7 +96,7 @@ export default function SignupPage() {
|
|||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
await register(email, password);
|
||||
await register(email, password, inviteCode.trim());
|
||||
router.push("/");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Registration failed");
|
||||
|
|
@ -40,16 +105,88 @@ export default function SignupPage() {
|
|||
}
|
||||
};
|
||||
|
||||
// Show loading or redirect if user is already logged in
|
||||
if (user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Step 1: Enter invite code
|
||||
if (!inviteValid) {
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<div style={styles.container}>
|
||||
<div style={styles.card}>
|
||||
<div style={styles.header}>
|
||||
<h1 style={styles.title}>Join with Invite</h1>
|
||||
<p style={styles.subtitle}>Enter your invite code to get started</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleInviteSubmit} style={styles.form}>
|
||||
{inviteError && <div style={styles.error}>{inviteError}</div>}
|
||||
|
||||
<div style={styles.field}>
|
||||
<label htmlFor="inviteCode" style={styles.label}>Invite Code</label>
|
||||
<input
|
||||
id="inviteCode"
|
||||
type="text"
|
||||
value={inviteCode}
|
||||
onChange={(e) => {
|
||||
setInviteCode(e.target.value);
|
||||
setInviteError("");
|
||||
setInviteValid(null);
|
||||
}}
|
||||
style={styles.input}
|
||||
placeholder="word-word-00"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<span style={{ ...styles.link, fontSize: "0.8rem", marginTop: "0.5rem", display: "block" }}>
|
||||
Ask your inviter for this code
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
...styles.button,
|
||||
opacity: isCheckingInvite ? 0.7 : 1,
|
||||
}}
|
||||
disabled={isCheckingInvite || !inviteCode.trim()}
|
||||
>
|
||||
{isCheckingInvite ? "Checking..." : "Continue"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p style={styles.footer}>
|
||||
Already have an account?{" "}
|
||||
<a href="/login" style={styles.link}>
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// Step 2: Enter email and password
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<div style={styles.container}>
|
||||
<div style={styles.card}>
|
||||
<div style={styles.header}>
|
||||
<h1 style={styles.title}>Create account</h1>
|
||||
<p style={styles.subtitle}>Get started with your journey</p>
|
||||
<p style={styles.subtitle}>
|
||||
Using invite: <code style={{
|
||||
background: "rgba(255,255,255,0.1)",
|
||||
padding: "0.2rem 0.5rem",
|
||||
borderRadius: "4px",
|
||||
fontSize: "0.85rem"
|
||||
}}>{inviteCode}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} style={styles.form}>
|
||||
<form onSubmit={handleSignupSubmit} style={styles.form}>
|
||||
{error && <div style={styles.error}>{error}</div>}
|
||||
|
||||
<div style={styles.field}>
|
||||
|
|
@ -62,6 +199,7 @@ export default function SignupPage() {
|
|||
style={styles.input}
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -104,13 +242,42 @@ export default function SignupPage() {
|
|||
</form>
|
||||
|
||||
<p style={styles.footer}>
|
||||
Already have an account?{" "}
|
||||
<a href="/login" style={styles.link}>
|
||||
Sign in
|
||||
</a>
|
||||
<button
|
||||
onClick={() => {
|
||||
setInviteValid(null);
|
||||
setInviteError("");
|
||||
}}
|
||||
style={{
|
||||
...styles.link,
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
Use a different invite code
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SignupPage() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<main style={styles.main}>
|
||||
<div style={styles.container}>
|
||||
<div style={styles.card}>
|
||||
<div style={{ textAlign: "center", color: "rgba(255,255,255,0.6)" }}>
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
}>
|
||||
<SignupContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue