counterweight
37de6f70e0
- Install prettier - Configure .prettierrc.json and .prettierignore - Add npm scripts: format, format:check - Add Makefile target: format-frontend - Format all frontend files
309 lines
9.3 KiB
TypeScript
309 lines
9.3 KiB
TypeScript
"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";
|
|
import { components } from "../generated/api";
|
|
import constants from "../../../shared/constants.json";
|
|
|
|
// Use generated type from OpenAPI schema
|
|
type Invite = components["schemas"]["UserInviteResponse"];
|
|
|
|
export default function InvitesPage() {
|
|
const { user, isLoading, isAuthorized } = useRequireAuth({
|
|
requiredRole: constants.roles.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 { READY, SPENT, REVOKED } = constants.inviteStatuses;
|
|
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 };
|