import React, { useEffect, useState } from "react"; import axios from "axios"; import { Button } from "@/prime-react"; import { Dialog } from "@/prime-react"; import { Dropdown } from "@/prime-react"; import { InputText } from "@/prime-react"; import { Message } from "@/prime-react"; import { ProgressSpinner } from "@/prime-react"; import { Calendar } from "@/prime-react"; import { Tag } from "@/prime-react"; import RefreshButton from "./shared/RefreshButton"; // State stays a LOCAL "YYYY-MM-DDTHH:MM" string so save() is unchanged; PrimeReact's Calendar // speaks Date objects, so these convert between the two. Both directions are built from local // parts on purpose — new Date("2026-08-19T10:00") is fine, but the naive date-only form // new Date("2026-08-19") parses as UTC midnight and lands a day early in Hong Kong. const pad = (n) => String(n).padStart(2, "0"); const toLocalInput = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`; const fromLocalInput = (s) => { if (!s) return null; const [date, time = "00:00"] = s.split("T"); const [y, m, d] = date.split("-").map(Number); const [hh, mm] = time.split(":").map(Number); return (y && m && d) ? new Date(y, m - 1, d, hh || 0, mm || 0) : null; }; const STATUS_SEVERITY = { active: "success", disabled: "warning", expired: "danger", }; const JoinLink = () => { const [links, setLinks] = useState([]); const [baseUrl, setBaseUrl] = useState(""); const [loading, setLoading] = useState(true); const [createOpen, setCreateOpen] = useState(false); const [label, setLabel] = useState(""); const [expiresAt, setExpiresAt] = useState(""); // "YYYY-MM-DDTHH:MM" or "" // Issuing a role-carrying link IS the grant, which is how a RESTRICTED role reaches someone // without a separate admin step — so restricted roles are offered here on purpose. const [userTypeId, setUserTypeId] = useState(null); const [serviceId, setServiceId] = useState(null); const [types, setTypes] = useState([]); const [services, setServices] = useState([]); const [creating, setCreating] = useState(false); const [createError, setCreateError] = useState(null); const [createInfo, setCreateInfo] = useState(null); const [confirmState, setConfirmState] = useState({ visible: false, action: null, // "regenerate" | "delete" id: null, running: false, error: null, info: null, }); const [copyStatus, setCopyStatus] = useState({}); // id => "copied" const load = async () => { setLoading(true); try { const [res, t, sv] = await Promise.all([ axios.get("/join_link/list"), axios.get("/user_type/list"), axios.get("/service/list"), ]); setLinks(res.data?.links || []); setBaseUrl(res.data?.base_url || ""); setTypes((t.data || []).filter(x => x.enabled)); setServices(sv.data || []); } catch (err) { console.error(err); } finally { setLoading(false); } }; useEffect(() => { load(); }, []); const fullUrl = (token) => `${baseUrl}/?token=${token}`; const openCreate = () => { setLabel(""); setExpiresAt(""); setUserTypeId(null); setServiceId(null); setCreateError(null); setCreateInfo(null); setCreateOpen(true); }; // A service link must name the role the invitee joins as — service_participant records it and // the column is NOT NULL — and the role has to be one that service actually accepts. const serviceOptions = services.filter(sv => !userTypeId || (sv.user_type_ids || []).includes(userTypeId)); const needsRole = Boolean(serviceId) && !userTypeId; const create = async () => { setCreating(true); setCreateError(null); try { await axios.post("/join_link/create", { label, user_type_id: userTypeId, service_id: serviceId, expires_at: expiresAt ? new Date(expiresAt).toISOString() : null, }); setCreateInfo("Link created."); await load(); setTimeout(() => setCreateOpen(false), 600); } catch (err) { setCreateError(err.response?.data?.message || "Could not create link."); } finally { setCreating(false); } }; const toggle = async (id) => { try { await axios.post("/join_link/toggle", { id }); await load(); } catch (err) { console.error(err); } }; const copy = async (id, url) => { try { await navigator.clipboard.writeText(url); setCopyStatus({ ...copyStatus, [id]: "copied" }); setTimeout(() => { setCopyStatus(prev => { const { [id]: _, ...rest } = prev; return rest; }); }, 1600); } catch {} }; const openConfirm = (action, id) => { setConfirmState({ visible: true, action, id, running: false, error: null, info: null }); }; const closeConfirm = () => { if (confirmState.running) return; setConfirmState({ visible: false, action: null, id: null, running: false, error: null, info: null }); }; const runConfirm = async () => { const { action, id } = confirmState; const endpoint = action === "regenerate" ? "/join_link/regenerate" : "/join_link/delete"; const successLabel = action === "regenerate" ? "New link generated. Share the new URL." : "Link deleted."; setConfirmState(s => ({ ...s, running: true, error: null, info: null })); try { await axios.post(endpoint, { id }); setConfirmState(s => ({ ...s, running: false, info: successLabel })); await load(); setTimeout(() => setConfirmState({ visible: false, action: null, id: null, running: false, error: null, info: null }), 700); } catch (err) { setConfirmState(s => ({ ...s, running: false, error: err.response?.data?.message || "Action failed.", })); } }; const confirmMeta = { regenerate: { header: "Regenerate link", message: "Generate a new token for this link? The old URL will stop working immediately.", confirm: "Regenerate", icon: "pi pi-refresh", danger: false, }, delete: { header: "Delete link", message: "Permanently delete this link? Anyone holding it will no longer be able to join.", confirm: "Delete", icon: "pi pi-trash", danger: true, }, }; return (
{loading ? (
) : links.length === 0 ? (
No join links yet. Click New link to create one.
) : (
{links.map(link => { const url = fullUrl(link.token); const isCopied = copyStatus[link.id] === "copied"; return (
{link.label}
{link.accepted_count} {link.accepted_count === 1 ? "join" : "joins"} {link.expires_at && ` · expires ${new Date(link.expires_at).toLocaleDateString("en-HK")}`}
{ e.target.select(); copy(link.id, url); }} />
); })}
)} !creating && setCreateOpen(false)} closable={!creating} closeOnEscape={!creating} header="Create a join link" style={{ width: "28rem" }}>
setLabel(e.target.value)} placeholder="e.g. Instagram bio" disabled={creating} autoFocus />
{ setUserTypeId(e.value ?? null); setServiceId(null); }} /> Whoever follows this link is granted that role on arrival. This is the way to hand out a restricted role — issuing the link is the grant.
setServiceId(e.value ?? null)} /> {!userTypeId ? "A service link has to say which role the invitee joins as, so pick one above first." : (serviceOptions.length === 0 ? "No service accepts that role — check the service's Join as list." : "They are enrolled on this service the moment they follow the link. This is how somebody reaches an invite-only service.")}
{/* Was , which renders the OPERATING SYSTEM's picker — unstyleable browser chrome whose internal segment padding never lines up with the fields beside it. Calendar is real DOM, so org.scss dresses it (.p-datepicker) to match the kit. */} setExpiresAt(e.value ? toLocalInput(e.value) : "")} showTime hourFormat="24" showIcon dateFormat="yy-mm-dd" // An expiry in the past would create a link that is dead on arrival. minDate={new Date()} placeholder="Never expires" disabled={creating} inputClassName="pt-input" style={{ flex: 1 }} /> {expiresAt && (
Leave blank for no expiry. Uses your local timezone.
{createError && } {createInfo && }
{confirmState.action && (

{confirmMeta[confirmState.action].message}

{confirmState.error && } {confirmState.info && }
)}
); }; export default JoinLink;