);
}
diff --git a/src/components/guard/FilesSection.tsx b/src/components/guard/FilesSection.tsx
index 8a463cac..a2f3e6f2 100644
--- a/src/components/guard/FilesSection.tsx
+++ b/src/components/guard/FilesSection.tsx
@@ -1,27 +1,26 @@
-interface FilesSectionProps {
- search: string;
- onSearchChange: (search: string) => void;
- children: React.ReactNode;
-}
-
export function FilesSection({
search,
onSearchChange,
children,
-}: FilesSectionProps) {
+}: {
+ search: string;
+ onSearchChange: (search: string) => void;
+ children: React.ReactNode;
+}) {
return (
-
-
Your Files
+
+
Your sheets
-
+
+
+
{children}
diff --git a/src/components/guard/GuardLandingPage.tsx b/src/components/guard/GuardLandingPage.tsx
new file mode 100644
index 00000000..2cbf98b6
--- /dev/null
+++ b/src/components/guard/GuardLandingPage.tsx
@@ -0,0 +1,72 @@
+import { Link } from "@tanstack/react-router";
+
+export function GuardLandingPage() {
+ return (
+
+
+
+ Guard protects Google Spreadsheets with SSO join links — only
+ signed-in university users get access, and you stay in control of who
+ can edit.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Create sheet
+
+ Create a new protected spreadsheet from scratch
+
+
+
+
+
+
+
+
Copy sheet
+
+ Make a protected copy of an existing spreadsheet
+
+
+
+
+
+
+
+
Your sheets
+
+ View join links, roles, and access for your sheets
+
+
+
+
+
+ );
+}
diff --git a/src/components/guard/GuardTabs.tsx b/src/components/guard/GuardTabs.tsx
new file mode 100644
index 00000000..5035653f
--- /dev/null
+++ b/src/components/guard/GuardTabs.tsx
@@ -0,0 +1,23 @@
+import { Link, ValidateLinkOptions } from "@tanstack/react-router";
+
+export function GuardTabs() {
+ return (
+
+ Info
+ Create Sheet
+ Copy Sheet
+ Your Sheets
+
+ );
+}
+
+function TabLink(props: ValidateLinkOptions) {
+ return (
+
+ );
+}
diff --git a/src/components/guard/Instructions.tsx b/src/components/guard/Instructions.tsx
index 574ac36e..0c776c6c 100644
--- a/src/components/guard/Instructions.tsx
+++ b/src/components/guard/Instructions.tsx
@@ -1,10 +1,7 @@
import { useState } from "react";
+import { cn } from "@/lib/ui/cn";
-interface ServiceAccountEmailProps {
- email: string;
-}
-
-export function ServiceAccountEmail({ email }: ServiceAccountEmailProps) {
+export function ServiceAccountEmail({ email }: { email: string }) {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
@@ -20,77 +17,27 @@ export function ServiceAccountEmail({ email }: ServiceAccountEmailProps) {
};
return (
-
- {copied ? "✓ Copied!" : email}
-
+ {copied ? "Copied!" : email || "…"}
+
);
}
-interface CreateInstructionsProps {
- serviceEmail: string;
-}
-
-export function CreateInstructions({ serviceEmail }: CreateInstructionsProps) {
- return (
-
-
-
- We will create a new Google Spreadsheet using the title you provide.
-
-
- The service account
-
- You will get a join link to share with respondents, they will get
- access after signing in via SSO.
-
-
-
-
- 💡 Spreadsheet must be owned by the service account so only it can add
- editors. Otherwise, anyone can add editors and you lose control over
- who has access to the spreadsheet.
-
-
-
- );
-}
-
-interface CopyInstructionsProps {
- serviceEmail: string;
-}
-
-export function CopyInstructions({ serviceEmail }: CopyInstructionsProps) {
+export function CopyInstructions({ serviceEmail }: { serviceEmail: string }) {
return (
-
-
-
- Open your spreadsheet and give Editor access to{" "}
-
- Paste the spreadsheet URL below.
- We will create a copy of your file owned by the service account
-
- You will get a join link to share with respondents, they will get
- access after signing in via SSO.
-
- Your original file remains unchanged and under your control.
-
-
-
- 💡 The protected copy is owned by the service account so only it can
- add editors. This ensures you have full control over who has access.
-
-
+
+
+ Give Editor access to the service account{" "}
+
);
}
diff --git a/src/components/guard/JoinsList.tsx b/src/components/guard/JoinsList.tsx
index 8b8b5f1e..cafbaf2d 100644
--- a/src/components/guard/JoinsList.tsx
+++ b/src/components/guard/JoinsList.tsx
@@ -1,7 +1,8 @@
-import { useState, useMemo } from "react";
-import { filterByFields } from "./utils";
-import { MESSAGES } from "./consts";
+import { useToast } from "@/components/toast";
+import { cn } from "@/lib/ui/cn";
+import { useMemo, useState } from "react";
import { FileRole } from "./hooks";
+import { filterByFields } from "./utils";
type JoinItem = {
user_id: string;
@@ -11,32 +12,44 @@ type JoinItem = {
role: string;
};
-interface JoinsListProps {
- joins: JoinItem[];
- search: string;
- onBan: (userId: string) => Promise
;
- onUpdateRole: (userId: string, role: string) => Promise;
-}
-
export function JoinsList({
joins,
search,
onBan,
onUpdateRole,
-}: JoinsListProps) {
+}: {
+ joins: JoinItem[];
+ search: string;
+ onBan: (userId: string) => Promise;
+ onUpdateRole: (userId: string, role: string) => Promise;
+}) {
const filtered = useMemo(
() => filterByFields(joins, search, ["gmail", "innomail"]),
[joins, search],
);
if (!joins || joins.length === 0) {
- return No joins yet.
;
+ return (
+
+
+
No one has joined yet
+
Share the join link to grant access
+
+ No joins match your search
+
+ );
}
return (
-
+
{filtered.map((join) => (
-
Promise;
onUpdateRole: (userId: string, role: string) => Promise;
-}
-
-function JoinItem({ join, onBan, onUpdateRole }: JoinItemProps) {
+}) {
return (
-
+
- {/*
- joined at {formatDate(join.joined_at)}
-
*/}
-
+
onUpdateRole(join.user_id, role)}
/>
- onBan(join.user_id)} />
+ onBan(join.user_id)}
+ />
);
}
function Email({ email }: { email: string }) {
+ const [local, domain] = email.split("@");
return (
-
- {email.split("@")[0]}
- @{email.split("@")[1]}
+
+ {local}
+ @{domain}
);
}
@@ -92,57 +108,65 @@ export function RolesSwitch({
}) {
const [pending, setPending] = useState(false);
const isWriter = currentRole === FileRole.writer;
- const handleSwitch = async () => {
- if (pending) return;
- const nextRole = isWriter ? FileRole.reader : FileRole.writer;
+
+ const handleSwitch = async (role: FileRole) => {
+ if (pending || role === currentRole) return;
setPending(true);
try {
- await onSwitch(nextRole);
+ await onSwitch(role);
} finally {
setPending(false);
}
};
return (
-
-
+ handleSwitch(FileRole.writer)}
+ disabled={pending}
>
Writer
-
-
+ handleSwitch(FileRole.reader)}
+ disabled={pending}
>
Reader
-
- {/* {pending && (
- Switching...
- )} */}
-
+
+
);
}
-function BanButton({ onClick }: { onClick: () => Promise
}) {
+function BanButton({
+ onClick,
+ email,
+}: {
+ onClick: () => Promise;
+ email: string;
+}) {
+ const { showConfirm } = useToast();
const [pending, setPending] = useState(false);
const handleClick = async () => {
- if (!confirm(MESSAGES.banConfirm)) return;
+ const confirmed = await showConfirm({
+ title: "Ban user",
+ message: `Ban ${email}? They will lose access to this sheet and will not be able to join again until unbanned.`,
+ confirmText: "Ban",
+ cancelText: "Cancel",
+ type: "error",
+ });
+ if (!confirmed) return;
+
setPending(true);
try {
await onClick();
@@ -153,12 +177,16 @@ function BanButton({ onClick }: { onClick: () => Promise }) {
return (
- {pending ? "Banning..." : "Ban"}
+ {pending ? (
+
);
}
diff --git a/src/components/guard/ModeToggle.tsx b/src/components/guard/ModeToggle.tsx
deleted file mode 100644
index 95f8172e..00000000
--- a/src/components/guard/ModeToggle.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { MODE_LABELS } from "./consts";
-
-interface ModeToggleProps {
- mode: "create" | "copy";
- onChange: (mode: "create" | "copy") => void;
-}
-
-export function ModeToggle({ mode, onChange }: ModeToggleProps) {
- return (
-
- onChange("create")}
- className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
- mode === "create"
- ? "bg-primary text-white"
- : "text-base-content/70 hover:bg-base-200/5"
- }`}
- >
- {MODE_LABELS.create}
-
- onChange("copy")}
- className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
- mode === "copy"
- ? "bg-primary text-white"
- : "text-base-content/70 hover:bg-base-200/5"
- }`}
- >
- {MODE_LABELS.copy}
-
-
- );
-}
diff --git a/src/components/guard/SetupContainer.tsx b/src/components/guard/SetupContainer.tsx
deleted file mode 100644
index 89aba0d9..00000000
--- a/src/components/guard/SetupContainer.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-import { useState, useEffect } from "react";
-import { guardTypes } from "@/api/guard";
-import { formatApiErrorMessage } from "@/api/helpers/create-query-client";
-import { useGuardMutations, FileRole } from "./hooks";
-import { extractSpreadsheetId, loadGmail, saveGmail } from "./utils";
-import { ModeToggle } from "./ModeToggle";
-import { CreateInstructions, CopyInstructions } from "./Instructions";
-import { SetupResult } from "./SetupResult";
-import { DEFAULT_MODE } from "./consts";
-import { RolesSwitch } from "./JoinsList";
-
-interface SetupContainerProps {
- serviceEmail: string;
-}
-
-export function SetupContainer({ serviceEmail }: SetupContainerProps) {
- const [mode, setMode] = useState<"create" | "copy">(DEFAULT_MODE);
- const [spreadsheetId, setSpreadsheetId] = useState("");
- const [title, setTitle] = useState("");
- const [gmail, setGmail] = useState("");
- const [respondentRole, setRespondentRole] = useState(
- FileRole.writer,
- );
- const [error, setError] = useState("");
- const [setupResult, setSetupResult] = useState<{
- title: string;
- fileId: string;
- fileType: string;
- guardingMethod: string;
- roleDisplay: string;
- joinLink: string;
- } | null>(null);
-
- const mutations = useGuardMutations();
-
- // Load gmail from localStorage on mount
- useEffect(() => {
- const savedGmail = loadGmail();
- if (savedGmail) {
- setGmail(savedGmail);
- }
- }, []);
-
- const validateSpreadsheetId = (input: string): string => {
- if (!input.trim()) return "";
-
- const extractedId = extractSpreadsheetId(input);
-
- if (!extractedId) {
- return "Invalid Google Spreadsheet URL";
- }
-
- if (extractedId.length < 10) {
- return "Spreadsheet ID seems too short";
- }
-
- return "";
- };
-
- const handleSubmit = async () => {
- setError("");
-
- if (!gmail.trim()) {
- setError("Gmail is required");
- return;
- }
-
- // Basic email validation
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (!emailRegex.test(gmail.trim())) {
- setError("Please enter a valid Gmail address");
- return;
- }
-
- if (mode === "create") {
- if (!title.trim()) {
- setError("Title is required");
- return;
- }
-
- // Save gmail to localStorage
- saveGmail(gmail.trim());
-
- mutations.createFile.mutate(
- {
- body: {
- file_type: guardTypes.CreateFileRequestFile_type.spreadsheet,
- title: title.trim(),
- default_role: respondentRole,
- owner_gmail: gmail.trim(),
- },
- },
- {
- onSuccess: (data) => {
- setSetupResult({
- title: data.title,
- fileId: data.file_id,
- fileType: "spreadsheet",
- guardingMethod: mode,
- roleDisplay: data.default_role,
- joinLink: data.join_link,
- });
- setTitle("");
- mutations.invalidateFiles();
- },
- onError: (error) => {
- setError(formatApiErrorMessage(error));
- },
- },
- );
- return;
- }
-
- // Copy mode
- if (!spreadsheetId.trim()) {
- setError("Spreadsheet URL is required");
- return;
- }
-
- const validationError = validateSpreadsheetId(spreadsheetId);
- if (validationError) {
- setError(validationError);
- return;
- }
-
- const extractedId = extractSpreadsheetId(spreadsheetId);
- if (!extractedId) {
- setError("Failed to extract Spreadsheet ID");
- return;
- }
-
- const copyRole =
- respondentRole === FileRole.writer
- ? guardTypes.CopyFileRequestDefault_role.writer
- : guardTypes.CopyFileRequestDefault_role.reader;
-
- // Save gmail to localStorage
- saveGmail(gmail.trim());
-
- mutations.copyFile.mutate(
- {
- body: {
- file_id: extractedId,
- default_role: copyRole,
- owner_gmail: gmail.trim(),
- },
- },
- {
- onSuccess: (data) => {
- setSetupResult({
- title: data.title,
- fileId: data.file_id,
- fileType: data.file_type,
- guardingMethod: mode,
- roleDisplay: data.default_role,
- joinLink: data.join_link,
- });
- setSpreadsheetId("");
- mutations.invalidateFiles();
- },
- onError: (error) => {
- setError(formatApiErrorMessage(error));
- },
- },
- );
- };
-
- const handleBlur = () => {
- if (mode === "copy" && spreadsheetId.trim()) {
- const validationError = validateSpreadsheetId(spreadsheetId);
- setError(validationError);
- }
- };
-
- const isSubmitting =
- mode === "create"
- ? mutations.createFile.isPending
- : mutations.copyFile.isPending;
-
- return (
-
-
-
- {mode === "create" ? (
-
- ) : (
-
- )}
-
-
-
- {setupResult && (
-
setSetupResult(null)}
- />
- )}
-
- {/*
*/}
-
- ✅ Setup Complete!
-
-
+
-
+
Setup complete
+
New file was created under{" "}
-
-
- You can edit spreadsheet or share join link with the students!
+
+ Edit the spreadsheet or share the join link with students.
-
-
-
+
+
+
+ Open spreadsheet
+
{onDismiss ? (
Dismiss
diff --git a/src/components/guard/consts.ts b/src/components/guard/consts.ts
index feb34201..ada4c1e0 100644
--- a/src/components/guard/consts.ts
+++ b/src/components/guard/consts.ts
@@ -1,26 +1,14 @@
export const GMAIL_STORAGE_KEY = "guard_gmail";
-export const DEFAULT_MODE = "create" as const;
-
export const ROLE_LABELS = {
writer: "Writer",
reader: "Reader",
} as const;
-export const MODE_LABELS = {
- create: "Create Protected Spreadsheet",
- copy: "Copy Existing Spreadsheet",
-} as const;
-
export const MESSAGES = {
setupSuccess: "Setup Complete!",
copySuccess: "Copied!",
- deleteConfirm: "Are you sure you want to delete this file?",
- banConfirm: "Are you sure you want to ban this user?",
- unbanConfirm: "Are you sure you want to unban this user?",
cleanupRecommended:
"Cleanup recommended: unverified users have access to this file.",
noAccess: "No access to the document",
} as const;
-
-export const MAX_LIST_HEIGHT = "max-h-[400px]";
diff --git a/src/components/guard/hooks.ts b/src/components/guard/hooks.ts
index 7fb78f30..2d43040f 100644
--- a/src/components/guard/hooks.ts
+++ b/src/components/guard/hooks.ts
@@ -25,7 +25,7 @@ export function useServiceAccountEmail() {
const query = $guard.useQuery("get", "/google/service-account-email");
return {
serviceEmail: query.data?.email || "",
- isLoading: query.isLoading,
+ isPending: query.isPending,
};
}
@@ -37,7 +37,7 @@ export function useGuardFiles() {
return {
files: query.data || [],
- isLoading: query.isLoading,
+ isPending: query.isPending,
error: query.error,
};
}
@@ -59,7 +59,7 @@ export function useGuardFile(slug: string | null) {
return {
file: query.data,
- isLoading: query.isLoading,
+ isPending: query.isPending,
};
}
diff --git a/src/components/guard/index.ts b/src/components/guard/index.ts
index 10bedccc..81c96758 100644
--- a/src/components/guard/index.ts
+++ b/src/components/guard/index.ts
@@ -1,19 +1,16 @@
-export { GuardPage } from "./GuardPage";
-export { SetupContainer } from "./SetupContainer";
+export { GuardLandingPage } from "./GuardLandingPage";
+export { GuardTabs } from "./GuardTabs";
+export { CreateSheetPage } from "./CreateSheetPage";
+export { CopySheetPage } from "./CopySheetPage";
+export { FilesPage } from "./FilesPage";
export { SetupResult } from "./SetupResult";
export { FilesSection } from "./FilesSection";
export { FilesList } from "./FilesList";
export { FileDetails } from "./FileDetails";
export { JoinsList } from "./JoinsList";
export { BannedList } from "./BannedList";
-export { ModeToggle } from "./ModeToggle";
-export { CleanupAlert } from "./CleanupAlert";
export { CopyLinkButton } from "./CopyLinkButton";
-export {
- CreateInstructions,
- CopyInstructions,
- ServiceAccountEmail,
-} from "./Instructions";
+export { CopyInstructions, ServiceAccountEmail } from "./Instructions";
export { EditTitleButton } from "./EditTitleButton";
export * from "./hooks";
export * from "./utils";