| 1 | import { data, useFetcher } from "react-router"; |
| 2 | |
| 3 | import type { Route } from "./+types/security-settings"; |
| 4 | import { page } from "../../lib/meta"; |
| 5 | import { ActivationPrompt, CARD } from "../../components/security-suite"; |
| 6 | import { WorkspaceSecurityHeading, WorkspaceSecurityTabs } from "../../components/workspace-security-tabs"; |
| 7 | import { Button } from "../../components/ui/button"; |
| 8 | import { Switch } from "../../components/ui/switch"; |
| 9 | import { securitySuite } from "../../lib/services.server"; |
| 10 | import { assertSameOrigin, getViewer, managesSecurity, requireUser, roleIn, unwrap } from "../../lib/session.server"; |
| 11 | import { planPrice } from "../../lib/security-suite.server"; |
| 12 | |
| 13 | export function meta({ params, ...args }: Route.MetaArgs) { |
| 14 | return page(args, { title: `Security settings · ${params.owner} · g1t` }); |
| 15 | } |
| 16 | |
| 17 | export async function loader({ params, context }: Route.LoaderArgs) { |
| 18 | const viewer = getViewer(context); |
| 19 | const role = roleIn(viewer, params.owner); |
| 20 | if (!role) throw data(null, { status: 404 }); |
| 21 | const [view, price] = await Promise.all([securitySuite.workspaceSettings(params.owner, viewer), planPrice(params.owner, viewer)]); |
| 22 | return { view: unwrap(view), price, owner: managesSecurity(viewer, params.owner) }; |
| 23 | } |
| 24 | |
| 25 | export async function action({ params, context, request }: Route.ActionArgs) { |
| 26 | assertSameOrigin(request); |
| 27 | const user = requireUser(context, request); |
| 28 | const form = await request.formData(); |
| 29 | const saved = await securitySuite.setWorkspaceSettings(user, params.owner, { |
| 30 | delegatedBypass: form.get("delegatedBypass") === "on", |
| 31 | validityChecks: form.get("validityChecks") === "on", |
| 32 | }); |
| 33 | return saved.ok ? { ok: true } : { ok: false, error: saved.error.message }; |
| 34 | } |
| 35 | |
| 36 | function Row({ name, title, about, checked, disabled }: { name: string; title: string; about: string; checked: boolean; disabled: boolean }) { |
| 37 | return ( |
| 38 | <label className={`${CARD} flex items-start justify-between gap-4 p-4 ${disabled ? "opacity-60" : ""}`}> |
| 39 | <span> |
| 40 | <span className="block text-sm font-medium">{title}</span> |
| 41 | <span className="mt-1 block text-sm text-muted">{about}</span> |
| 42 | </span> |
| 43 | <Switch name={name} defaultChecked={checked} disabled={disabled} className="mt-0.5" /> |
| 44 | </label> |
| 45 | ); |
| 46 | } |
| 47 | |
| 48 | export default function WorkspaceSecuritySettings({ loaderData, params }: Route.ComponentProps) { |
| 49 | const { view, price, owner } = loaderData; |
| 50 | const fetcher = useFetcher<{ ok: boolean; error?: string }>(); |
| 51 | const disabled = !owner; |
| 52 | return ( |
| 53 | <div> |
| 54 | <WorkspaceSecurityHeading title="Security settings" about="How push protection treats bypasses, and whether g1t asks secrets' issuers if they still work, in every repository of the workspace." /> |
| 55 | <WorkspaceSecurityTabs owner={params.owner} /> |
| 56 | {!view.activated && ( |
| 57 | <div className="mb-4"> |
| 58 | <ActivationPrompt workspace={params.owner} feature="Delegated bypass and validity checks" monthlyCents={price} isOwner={owner} /> |
| 59 | </div> |
| 60 | )} |
| 61 | <fetcher.Form method="post" className="space-y-3"> |
| 62 | <Row |
| 63 | name="delegatedBypass" |
| 64 | title="Delegated bypass" |
| 65 | about="Someone who pushes a blocked secret asks to push it anyway, and an owner or the repository's admins approve or deny the request, told in their notifications. Off: they bypass it themselves, with a reason." |
| 66 | checked={view.settings.delegatedBypass} |
| 67 | disabled={disabled} |
| 68 | /> |
| 69 | <Row |
| 70 | name="validityChecks" |
| 71 | title="Validity checks" |
| 72 | about="Ask each secret's issuer whether it still works (GitHub, GitLab, Stripe, Slack, npm, OpenAI, Anthropic and SendGrid tokens), weekly and on request, and mark the alert active or inactive. The check is the issuer's own read-only call, over HTTPS; the secret goes nowhere else." |
| 73 | checked={view.settings.validityChecks} |
| 74 | disabled={disabled} |
| 75 | /> |
| 76 | <div className="flex items-center gap-3 pt-1"> |
| 77 | <Button type="submit" disabled={disabled || fetcher.state !== "idle"}> |
| 78 | {fetcher.state !== "idle" ? "Saving…" : "Save"} |
| 79 | </Button> |
| 80 | {!owner && <span className="text-sm text-muted">Only an owner can change these.</span>} |
| 81 | {fetcher.data?.ok && <span className="text-sm text-success">Saved.</span>} |
| 82 | {fetcher.data?.error && <span className="text-sm text-danger">{fetcher.data.error}</span>} |
| 83 | </div> |
| 84 | </fetcher.Form> |
| 85 | <p className="mt-4 text-xs text-faint">On private repositories both come with the g1t plan; on public ones they are free.</p> |
| 86 | </div> |
| 87 | ); |
| 88 | } |