-
+ creatingInvitation = true;
+ try {
+ const projectKey = await getUnlockedProjectKey(project);
+ if (!projectKey) {
+ toast.error("Unlock this browser before creating invitations");
+ return;
+ }
+
+ const keyPair = await AsymmetricCrypto.generateKeyPair();
+ const passphrase = invitePassphrase || generateInviteCode();
+ const passphraseKey =
+ await SymmetricCrypto.deriveBase64KeyFromPassphrase(passphrase);
+ const encryptedPrivateKey = await SymmetricCrypto.encrypt(
+ keyPair.privateKey,
+ passphraseKey,
+ );
+ const exportedProjectKey = await SymmetricCrypto.exportAesKey(projectKey);
+ const encryptedProjectKey = await AsymmetricCrypto.encrypt(
+ exportedProjectKey,
+ keyPair.publicKey,
+ );
+ const invitation = await InvitationsApi.createInvitation(jwt, {
+ projectId: project.id,
+ temporaryPublicKey: keyPair.publicKey,
+ temporaryPrivateKey: encryptedPrivateKey,
+ temporarySecretsKey: encryptedProjectKey,
+ role,
+ });
+ track("invitation_created", { kind: "link", role });
+
+ invitePassphrase = passphrase;
+ lastCreatedInvitation = invitation;
+ addPeopleStep = "done";
+ void loadPendingInvitations(jwt, project);
+ } catch {
+ toast.error("Failed to create invitation");
+ } finally {
+ creatingInvitation = false;
+ }
+ }
+
+ async function createSuggestedInvitation(role: "read" | "write" | "admin") {
+ const jwt = auth.jwtToken;
+ const project = activeProject;
+ const user = selectedSuggestedUser;
+ if (!jwt || !project || !user?.publicKey || creatingInvitation) return;
+
+ creatingInvitation = true;
+ try {
+ const projectKey = await getUnlockedProjectKey(project);
+ if (!projectKey) {
+ toast.error("Unlock this browser before creating invitations");
+ return;
+ }
+ const exportedProjectKey = await SymmetricCrypto.exportAesKey(projectKey);
+ const encryptedProjectKey = await AsymmetricCrypto.encrypt(
+ exportedProjectKey,
+ user.publicKey,
+ );
+ await ProjectsApi.addEncryptedSecretsKey(
+ jwt,
+ project.id,
+ user.id,
+ encryptedProjectKey,
+ );
+ await InvitationsApi.createPersonalInvitation(jwt, project.id, {
+ invitedUserId: user.id,
+ role,
+ });
+ track("invitation_created", { kind: "direct", role });
+ addPeopleStep = "done";
+ void loadPendingInvitations(jwt, project);
+ } catch {
+ toast.error("Failed to send invitation");
+ } finally {
+ creatingInvitation = false;
+ }
+ }
+
+ async function updateSelectedMemberRole(role: "read" | "write" | "admin") {
+ const jwt = auth.jwtToken;
+ if (!jwt || !activeProject || !selectedMember || updatingMember) return;
+ updatingMember = true;
+ try {
+ await ProjectsApi.updateMemberRole(jwt, {
+ projectId: activeProject.id,
+ memberId: selectedMember.id,
+ role,
+ });
+ activeProject = {
+ ...activeProject,
+ members: activeProject.members.map((member) =>
+ member.id === selectedMember.id ? { ...member, role } : member,
+ ),
+ };
+ projects =
+ projects?.map((project) =>
+ project.id === activeProject?.id ? activeProject : project,
+ ) ?? null;
+ } catch {
+ toast.error("Failed to update member role");
+ } finally {
+ updatingMember = false;
+ }
+ }
+
+ async function removeSelectedMember() {
+ const jwt = auth.jwtToken;
+ if (!jwt || !activeProject || !selectedMember || updatingMember) return;
+ updatingMember = true;
+ try {
+ await ProjectsApi.removeMember(jwt, {
+ projectId: activeProject.id,
+ memberId: selectedMember.id,
+ });
+ activeProject = {
+ ...activeProject,
+ members: activeProject.members.filter(
+ (member) => member.id !== selectedMember.id,
+ ),
+ };
+ projects =
+ projects?.map((project) =>
+ project.id === activeProject?.id ? activeProject : project,
+ ) ?? null;
+ selectedMemberId = null;
+ } catch {
+ toast.error("Failed to remove member");
+ } finally {
+ updatingMember = false;
+ }
+ }
+
+ async function deleteActiveProject() {
+ const jwt = auth.jwtToken;
+ if (!jwt || !activeProject || leavingOrDeleting) return;
+ leavingOrDeleting = true;
+ try {
+ await ProjectsApi.deleteProject(jwt, activeProject.id);
+ const remaining =
+ projects?.filter((project) => project.id !== activeProject?.id) ?? [];
+ projects = remaining;
+ showDeleteConfirm = false;
+ const nextProject = remaining[0];
+ await goto(
+ nextProject
+ ? resolve("/app/project/[projectId]", { projectId: nextProject.id })
+ : resolve("/app/project"),
+ { replaceState: true },
+ );
+ if (nextProject) {
+ lastLoadKey = "";
+ await loadShell(nextProject.id);
+ }
+ } catch {
+ toast.error("Failed to delete project");
+ } finally {
+ leavingOrDeleting = false;
+ }
+ }
+
+ async function leaveActiveProject() {
+ const jwt = auth.jwtToken;
+ const userId = auth.userData?.id;
+ if (!jwt || !activeProject || !userId || leavingOrDeleting) return;
+ leavingOrDeleting = true;
+ try {
+ const leavingProjectId = activeProject.id;
+ await ProjectsApi.removeMember(jwt, {
+ projectId: leavingProjectId,
+ memberId: userId,
+ });
+ const remaining =
+ projects?.filter((project) => project.id !== leavingProjectId) ?? [];
+ projects = remaining;
+ showDeleteConfirm = false;
+ const nextProject = remaining[0];
+ await goto(
+ nextProject
+ ? resolve("/app/project/[projectId]", { projectId: nextProject.id })
+ : resolve("/app/project"),
+ { replaceState: true },
+ );
+ if (nextProject) {
+ lastLoadKey = "";
+ await loadShell(nextProject.id);
+ }
+ } catch {
+ toast.error("Failed to leave project");
+ } finally {
+ leavingOrDeleting = false;
+ }
+ }
+
+ async function copyInviteField(field: "link" | "code", value: string) {
+ if (!value) return;
+ await navigator.clipboard.writeText(value);
+ inviteCopiedField = field;
+ setTimeout(() => {
+ if (inviteCopiedField === field) inviteCopiedField = null;
+ }, 2000);
+ }
+
+ function displayMemberName(member: Project["members"][number]) {
+ return member.id === auth.userData?.id
+ ? "You"
+ : member.displayName || member.email || member.id;
+ }
+
+ function displayInitial(member: Project["members"][number]) {
+ return (member.displayName || member.email || "U").charAt(0).toUpperCase();
+ }
+
+ function switchProject(targetProjectId: string) {
+ // Navigate first when there are unsaved edits so the unsaved-changes guard can stop the
+ // switch before the editor swaps to the next project.
+ if (secretsEditorNavGuard.isDirty) {
+ void goto(
+ resolve("/app/project/[projectId]", { projectId: targetProjectId }),
+ );
+ return;
+ }
+ void loadShell(targetProjectId, { navigateAfterLoad: true });
+ }
+
+ function onMobileProjectChange(event: Event) {
+ const select = event.currentTarget as HTMLSelectElement;
+ const value = select.value;
+ select.value = displayedProjectId;
+ if (value === "__add_project__") {
+ openCreateDialog();
+ return;
+ }
+ if (value && value !== displayedProjectId) switchProject(value);
+ }
+
+ function onProjectLinkClick(event: MouseEvent, targetProjectId: string) {
+ if (
+ targetProjectId === displayedProjectId ||
+ targetProjectId === pendingProjectId
+ ) {
+ event.preventDefault();
+ return;
+ }
+ if (
+ event.metaKey ||
+ event.ctrlKey ||
+ event.shiftKey ||
+ event.altKey ||
+ event.button !== 0
+ )
+ return;
+ event.preventDefault();
+ switchProject(targetProjectId);
+ }
+
+
+{#snippet connectionIcon(className: string)}
+
+{/snippet}
+
+{#snippet wizardStepper(current: number, total: number)}
+
+ {#each Array.from({ length: total }, (_, index) => index + 1) as step (step)}
+
+ {/each}
- {#if tab === "history"}
-
- {:else if tab === "settings"}
-
+{/snippet}
+
+{#snippet hoverTip(text: string, extra = "")}
+
+ {text}
+
+{/snippet}
+
+{#snippet userMenuContent(mobile: boolean)}
+ {#if mobile}
+
+
+ {auth.userData?.displayName || auth.userData?.email || "User"}
+
+ {#if auth.userData?.email}
+
+ {auth.userData.email}
+
+ {/if}
+
+
+ {/if}
+ {#if editingDisplayName}
+
+
+
+
+ {
+ if (event.key === "Enter") void saveDisplayName();
+ if (event.key === "Escape") cancelDisplayNameEdit();
+ }}
+ />
+
+
+
+
+ {:else}
+
{/if}
+
+
+{/snippet}
+
+
{
+ if (event.key !== "Escape") return;
+ if (showUserMenu) closeUserMenu();
+ else if (showCreateDialog) closeCreateDialog();
+ else if (showIntegrationDialog) closeIntegrationDialog();
+ else if (showAddPeopleDialog) closeAddPeopleDialog();
+ else if (selectedMember) closeMemberDialog();
+ }}
+/>
+
+
+
+
+
+
+ {#if isSearching}
+
+
+
+
+
+
+
+
+ {#if !searchableProjectsLoading}
+
+ {searchResults.length} result{searchResults.length !== 1
+ ? "s"
+ : ""}
+
+ {/if}
+
+
+
+
+
+ Results for
+ "{searchQuery}"{#if !searchableProjectsLoading}({searchResults.length}){/if}
+
+
+
+
+ {#if searchableProjectsLoading}
+
+ {:else if searchResults.length === 0}
+
+
+
No projects found
+
+ Try a different search term
+
+
+ {:else}
+
+ {/if}
+
+
+
Cryptly
+
+
+
+
+
+
+
+
+ {#if showUserMenu}
+
+
+ {@render userMenuContent(true)}
+
+ {/if}
+
+
+
+
+
+ {#each mobileTabs as tab (tab.id)}
+ {@const Icon = tab.icon}
+
+ {/each}
+
+
+
+
+ {#if activeProject}
+
+
+
+ {/if}
+
+
+
+ {#each tabs as tab (tab.id)}
+ {@const Icon = tab.icon}
+
+
+ {#if tab.id === "integrations" && ftux.step === "integrations"}
+
+ Connect GitHub
+ repositories to automatically sync your secrets.
+
+ {/if}
+
+ {/each}
+ {#if tabUnderline.ready}
+
+ {/if}
+
+
+ {#if loading && !activeProject}
+
+ {:else if loadError && !activeProject}
+
+
+
+ We couldn't finish loading
+
+
{loadError}
+
+
+
+
+
+ {:else}
+
+
+ {
+ const jwt = auth.jwtToken;
+ if (jwt && activeProject) void loadHistory(jwt, activeProject);
+ }}
+ onConnectIntegrations={() => setActiveTab("integrations")}
+ />
+
+ {#if activeTab === "history"}
+
+ {#if historyLoading}
+
+ Loading history...
+
+ {:else if historyLocked}
+
+
+
+ Unlock your safe to view history
+
+
{historyLoadMessage}
+
+ Your account session is still active. Enter your Cryptly
+ passphrase in the unlock dialog to continue.
+
+
+
+
+
{historyLoadMessage}
+
+
+
+
+
No history available yet.
+
Make changes to see version history.
+
+
+
+ {#each historyVersions as version (version.id)}
+ {@const isSelected = selectedHistory?.id === version.id}
+ {@const volume = version.additions + version.deletions}
+ {@const addRatio = version.additions / Math.max(volume, 1)}
+ {@const barWidthPct =
+ (volume /
+ Math.max(
+ ...historyVersions.map(
+ (v) => v.additions + v.deletions,
+ ),
+ 1,
+ )) *
+ 100}
+
+ {/each}
+
+
+ {#if selectedHistory}
+
+ {#key selectedHistory.id}
+
+ {/key}
+
+ {:else}
+
+
+ Select a version to see changes
+
+
+ {/if}
+
+
+
+
+ {#if historyMode}
+ {@const activeSuggestion = historySearchSuggestions.find(
+ (item) => item.mode === historyMode,
+ )}
+
+ {:else}
+
+ {/if}
+
{
+ historySuggestionIndex = 0;
+ if (historyQuery.trim().length === 0) {
+ historyMode = null;
+ historySuggestionsOpen = false;
+ } else if (!historyMode) {
+ historySuggestionsOpen = true;
+ }
+ }}
+ onfocus={() => {
+ if (historyQuery.trim() && !historyMode)
+ historySuggestionsOpen = true;
+ }}
+ />
+
+ {#if historyQuery || historyMode}
+
+ {:else}
+ /
+ {/if}
+
+
+ {#if historyQuery.trim() && historySuggestionsOpen && !historyMode}
+
+
+ What do you mean by "{historyQuery.trim()}"?
+
+
+ {#each historySearchSuggestions as suggestion, index (suggestion.mode)}
+ {@const SuggestionIcon = suggestion.icon}
+ {@const isHighlighted =
+ index === historySuggestionIndex}
+
+ {/each}
+
+
+
+
+ ↑
+ ↓
+ navigate
+
+
+ ↵
+ apply
+
+
+ esc
+ dismiss
+
+
+
+
+ {/if}
+
+
+
+
+ {#if selectedHistoryDay}
+
+ {/if}
+ {#each [{ key: "all", label: "All" }, { key: "24h", label: "-24h" }, { key: "7d", label: "-7d" }, { key: "30d", label: "-30d" }] as range (range.key)}
+
+ {/each}
+
+
+
+
+ {#each visibleHistoryAuthors as author (author.id)}
+
+ {/each}
+
+ {#if overflowHistoryAuthors.length > 0}
+
+
+ {#if historyAuthorsOverflowOpen}
+
+
+
+ {#each overflowHistoryAuthors as author (author.id)}
+
+ {/each}
+
+
+ {/if}
+
+ {/if}
+
+
+
+
+ {#if filteredHistory.length === 0}
+
+ No results
+
+ {:else}
+ {#each filteredHistory as version (version.id)}
+ {@const isSelected = selectedHistory?.id === version.id}
+ {@const volume = version.additions + version.deletions}
+ {@const addRatio =
+ version.additions / Math.max(volume, 1)}
+ {@const barWidthPct = (volume / maxHistoryVolume) * 100}
+
+ {/each}
+ {/if}
+
+
+
+ (selectedHistoryDay = key)}
+ />
+
+
+
+
+
+ ↑
+ ↓
+ ·
+ j
+ k
+ navigate
+
+
+ /
+ search
+
+
+
{filteredHistory.length}/{historyVersions.length}
+
+
+ {#if selectedHistory}
+
+
+
+
+ {selectedHistory.author?.displayName ||
+ "System"}
+ {#if selectedHistory.author?.id === auth.userData?.id}
+ · you
+ {/if}
+ edited
+
+ {getCompactRelativeTime(selectedHistory.createdAt)}
+
+
+
+ {formatFullDate(selectedHistory.createdAt)}
+
+
+
+
+
+ {selectedHistory.additions}
+
+
+
+ {selectedHistory.deletions}
+
+
+
+
+ {#key selectedHistory.id}
+
+ {/key}
+
+ {:else}
+
+ Pick an entry to view its changes
+
+ {/if}
+
+ {:else if activeTab === "members"}
+
+
+
+
+
Members
+
+ Manage who has access to {activeProject?.name}
+
+
+ {#if isAdmin}
+
+ {/if}
+
+
+
+
+
Members
+
+
+ {#each activeProject?.members ?? [] as member (member.id)}
+ {@const meta =
+ roleMeta[member.role as keyof typeof roleMeta] ??
+ roleMeta.read}
+ {@const RoleIcon = meta.icon}
+
+ {/each}
+
+
+ {#if isAdmin && activeInvites.length > 0}
+
+
+
+
Active invites
+
+
+ {#each activeInvites as invite (`${invite.type}-${invite.data.id}`)}
+
+
+ {#if invite.type === "personal"}
+ {#if invite.data.invitedUser.avatarUrl}
+
+ {:else}
+
{(invite.data.invitedUser.displayName || "U")
+ .charAt(0)
+ .toUpperCase()}
+ {/if}
+ {:else}
+
+ {/if}
+
+
+
+ {invite.type === "personal"
+ ? invite.data.invitedUser.displayName
+ : "Invite link"}
+
+
+ {#if invite.type === "personal"}
+ {invite.data.role} · {getRelativeTime(
+ invite.data.createdAt,
+ )}
+ {:else}
+ ID: {invite.data.id.slice(-8)}
+ {/if}
+
+
+
+ {#if invite.type === "link"}
+ {@const inviteId = invite.data.id}
+
+ {/if}
+
+
+
+ {/each}
+
+
+ {/if}
+
+ {:else if activeTab === "integrations"}
+
+
+
+
Sync externally
+
+ Integrate your {activeProject?.name} secrets with Github Actions.
+
+
+
+ {#if integrations.length > 0}
+
+ {#each integrations as integration (integration.id)}
+ {@const repoHref =
+ integration.repositoryData?.owner &&
+ integration.repositoryData?.name
+ ? `https://github.com/${integration.repositoryData.owner}/${integration.repositoryData.name}`
+ : null}
+
+
+ {#if integration.repositoryData?.avatarUrl}
+
+ {:else}
+
+ {/if}
+
+
+
+ {integration.repositoryData?.name ?? "Unknown"}
+
+
+ {integration.repositoryData?.owner ?? ""}
+
+
+
+ {#if repoHref}
+
+
+ Open
+
+ {/if}
+ {#if isAdmin}
+
+ {:else}
+
+ {@render connectionIcon("size-4")}
+
+ {/if}
+
+
+ {/each}
+
+ {/if}
+ {#if isAdmin && !integrationsLoading}
+
+ {:else if !integrationsLoading && integrations.length === 0}
+
+ No repositories connected yet
+
+ {/if}
+
+ {#if !integrationsLoading && integrations.length === 0 && suggestedIntegrations.length > 0}
+
+
+
+ Suggested
+
+
+ We found these repositories on your GitHub account based on
+ your Cryptly project name.
+
+
+ {#each suggestedIntegrations as repo (repo.id)}
+
+ {/each}
+
+
+ {/if}
+ {#if integrations.length > 0}
+
+
+
+ Hit
+
+ Push
+
+ in the
+
+
+ Editor
+
+ to sync your secrets with GitHub Actions.
+
+
+ {/if}
+
+ {:else if activeTab === "settings"}
+
+
+
+
Settings
+
+ Manage settings for {activeProject?.name}
+
+
+
+
+
+
+
Rename project
+
+ {#if !isAdmin}
+
+
+ Only Admins can rename
+ projects.
+
+
+ {:else if showRenameForm}
+
+
+
{
+ if (event.key === "Enter") {
+ event.preventDefault();
+ void renameProject();
+ }
+ }}
+ />
+
+
+
+
+
+ {:else}
+
+
+
+
+ {activeProject?.name}
+
+
+
+
+
+ {/if}
+
+
+
+
+
+
Reveal on
+
+ {#if !isAdmin}
+
+
+ Only Admins can change
+ project reveal settings.
+
+
+ {:else if revealEditing}
+
+
+
+
+
+
+
+ {:else}
+ {@const revealMeta =
+ REVEAL_ON_OPTIONS.find(
+ (option) => option.key === revealOnSetting,
+ ) ?? REVEAL_ON_OPTIONS[1]}
+ {@const RevealIcon = revealMeta.icon}
+
+
+
+
+
+ {revealMeta.label}
+
+
+ {revealMeta.description}
+
+
+
+
+
+ {/if}
+
+
+
+
+
+
Danger zone
+
+ {#if showDeleteConfirm}
+
+
+ {isAdmin
+ ? "Are you sure you want to delete this project?"
+ : "Are you sure you want to leave this project?"}
+
+
+ {isAdmin
+ ? "This action cannot be undone. This will permanently delete the project and remove all members' access."
+ : "You will lose access to this project and its secrets. You'll need a new invitation to rejoin."}
+
+
+
+
+
+
+ {:else}
+
+
+
+
+ {isAdmin ? "Delete project" : "Leave project"}
+
+
+ {isAdmin
+ ? "Permanently delete this project for all members"
+ : "Remove yourself from this project"}
+
+
+
+
+
+ {/if}
+
+
+ {/if}
+ {/if}
+
+
+
+
+
+
+ {#if selectedMember.avatarUrl}
+
+ {:else}
+
{displayInitial(selectedMember)}
+ {/if}
+
+
+
+ {displayMemberName(selectedMember)}
+
+
Member details
+
+ {#if selectedMember.id !== auth.userData?.id && isAdmin}
+
+
+
Role
+
+ {#each Object.entries(roleMeta) as [role, meta] (role)}
+ {@const RoleChoiceIcon = meta.icon}
+
+ {/each}
+
+
+
+
+
Actions
+
+
+
+
+
+ {:else}
+ {@const modalRole =
+ roleMeta[selectedMember.role as keyof typeof roleMeta] ??
+ roleMeta.read}
+
+ {modalRole.label}
+
+ {/if}
+
+
+ {#if addPeopleStep !== "type" && addPeopleStep !== "done"}
+
+ {/if}
+
+
+ {#if addPeopleStep !== "done"}
+
+
+ {addPeopleStep === "type"
+ ? "Add people"
+ : addPeopleStep === "suggested-user"
+ ? "Choose a person"
+ : "Choose a role"}
+
+ {@render wizardStepper(addPeopleStepNumber, addPeopleTotalSteps)}
+
+ Step {addPeopleStepNumber} of {addPeopleTotalSteps}
+
+
+ {/if}
+
+ {#if addPeopleStep === "type"}
+
+
+
+
+
+ {:else if addPeopleStep === "suggested-user"}
+
+ {#if suggestedUsersLoading && suggestedUsers.length === 0}
+
+ Loading...
+
+ {:else if suggestedUsers.length === 0}
+
+ No suggested users found.
+
+ {:else}
+
+ {#each suggestedUsers as user (user.id)}
+
+ {/each}
+
+ {/if}
+
+ {:else if addPeopleStep === "role"}
+
+ {#each Object.entries(roleMeta) as [role, meta] (role)}
+ {@const InviteRoleIcon = meta.icon}
+
+ {/each}
+
+ {:else}
+
+
+
+ {addPeopleType === "invite-link"
+ ? "Invite ready"
+ : "Invitation sent"}
+
+
+ {addPeopleType === "invite-link"
+ ? "The invited person needs both the link and the code to join."
+ : `${selectedSuggestedUser?.displayName ?? "The selected person"} has been invited to the project.`}
+
+
+ {#if addPeopleType === "invite-link"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You won't be able to see the code again after closing this dialog.
+
+
+ {/if}
+
+
+ {/if}
+
+ {#if selectedInstallationEntityId}
+
+ {/if}
+
+
+
+
+ {selectedInstallationEntityId
+ ? "Choose repository"
+ : "Choose installation"}
+
+ {@render wizardStepper(selectedInstallationEntityId ? 2 : 1, 2)}
+
Step {selectedInstallationEntityId ? 2 : 1} of 2
+
+
+ {#if !selectedInstallationEntityId}
+
+ {#if installations.length === 0}
+
+
+ No GitHub installations found.
+
+
+
+ {:else}
+
+ {#each installations as installation (installation.id)}
+
+ {/each}
+
+
+ {/if}
+
+ {:else}
+
+ {#if suggestionsLoading}
+
+
+
+ Loading repositories...
+
+
+ {:else}
+
+
+ {#each repositoriesForSelectedInstallation as repo (repo.id)}
+
+ {:else}
+
+ No repositories found.
+
+ {/each}
+
+ {/if}
+
+ {/if}
+
-
- Projects
- /
- {projectName}
-
-
- {@render children?.()}
-