mirror of
https://github.com/Nystik-gh/ignis.git
synced 2026-06-17 04:35:53 +00:00
headless-sync vault setup
This commit is contained in:
Nystik
@@ -3,3 +3,4 @@ export { default as MessageDialog } from "./components/layout/MessageDialog.svel
|
||||
export { default as ConfirmDialog } from "./components/layout/ConfirmDialog.svelte";
|
||||
export { default as PromptDialog } from "./components/layout/PromptDialog.svelte";
|
||||
export { default as PluginInstallDialog } from "./components/layout/PluginInstallDialog.svelte";
|
||||
export { default as SyncSetupModal } from "./views/SyncSetupModal.svelte";
|
||||
|
||||
154
src/ui/views/SyncSetupModal.svelte
Normal file
154
src/ui/views/SyncSetupModal.svelte
Normal file
@@ -0,0 +1,154 @@
|
||||
<script>
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
import Modal from "../components/layout/Modal.svelte";
|
||||
import VaultList from "./sync/VaultList.svelte";
|
||||
import CreateVaultForm from "./sync/CreateVaultForm.svelte";
|
||||
|
||||
export let vaultId;
|
||||
export let onSuccess = null;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let modalRef;
|
||||
let view = "list";
|
||||
let vaults = [];
|
||||
let loading = true;
|
||||
let error = "";
|
||||
|
||||
onMount(() => {
|
||||
fetchVaults();
|
||||
});
|
||||
|
||||
async function fetchVaults() {
|
||||
loading = true;
|
||||
error = "";
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/ext/headless-sync/remote-vaults");
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Request failed: ${res.status}`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
vaults = data.vaults;
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function onLink(e) {
|
||||
const { vault, vaultPassword, deviceName, mode } = e.detail;
|
||||
error = "";
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/ext/headless-sync/setup", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
vaultId,
|
||||
remoteVault: vault.id,
|
||||
remoteVaultName: vault.name,
|
||||
vaultPassword,
|
||||
deviceName,
|
||||
mode,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Request failed: ${res.status}`);
|
||||
}
|
||||
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
}
|
||||
|
||||
modalRef.dismiss();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
function onCreated() {
|
||||
view = "list";
|
||||
fetchVaults();
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
dispatch("close");
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
title={view === "list" ? "Set up Headless Sync" : "Create new remote vault"}
|
||||
width="550px"
|
||||
bind:this={modalRef}
|
||||
on:close={onClose}
|
||||
on:escape={onClose}
|
||||
>
|
||||
<div class="sync-setup-body">
|
||||
{#if view === "list"}
|
||||
<p class="sync-setup-desc">
|
||||
Link this vault to an Obsidian Sync remote vault for server-side synchronization.
|
||||
</p>
|
||||
|
||||
{#if error}
|
||||
<div class="sync-setup-error">
|
||||
<p>Failed to load remote vaults: {error}</p>
|
||||
<button class="retry-btn" on:click={fetchVaults}>Retry</button>
|
||||
</div>
|
||||
{:else}
|
||||
<VaultList {vaults} {loading} on:link={onLink} on:create={() => (view = "create")} />
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="sync-setup-desc">
|
||||
Create a new remote vault on Obsidian Sync.
|
||||
</p>
|
||||
|
||||
<CreateVaultForm on:created={onCreated} on:back={() => (view = "list")} />
|
||||
{/if}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.sync-setup-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sync-setup-desc {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0 0 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sync-setup-error {
|
||||
color: var(--text-error);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.sync-setup-error p {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
font-family: var(--font-interface);
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
color: var(--text-normal);
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
</style>
|
||||
185
src/ui/views/sync/CreateVaultForm.svelte
Normal file
185
src/ui/views/sync/CreateVaultForm.svelte
Normal file
@@ -0,0 +1,185 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Button from "../../components/input/Button.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let name = "";
|
||||
let region = "";
|
||||
let encryption = "e2ee";
|
||||
let password = "";
|
||||
let creating = false;
|
||||
let error = "";
|
||||
|
||||
async function onSubmit() {
|
||||
error = "";
|
||||
|
||||
if (!name.trim()) {
|
||||
error = "Vault name is required";
|
||||
return;
|
||||
}
|
||||
|
||||
if (encryption === "e2ee" && !password) {
|
||||
error = "Encryption password is required for end-to-end encryption";
|
||||
return;
|
||||
}
|
||||
|
||||
creating = true;
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/ext/headless-sync/create-remote-vault", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: name.trim(),
|
||||
encryption,
|
||||
password: password || undefined,
|
||||
region: region || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Request failed: ${res.status}`);
|
||||
}
|
||||
|
||||
dispatch("created");
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
creating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onBack() {
|
||||
dispatch("back");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="create-form">
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Vault name</div>
|
||||
<div class="form-desc">Helps you remember what this vault is for</div>
|
||||
</div>
|
||||
<input type="text" placeholder="My awesome vault" bind:value={name} />
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Region</div>
|
||||
<div class="form-desc">Select the server region closest to you</div>
|
||||
</div>
|
||||
<select bind:value={region}>
|
||||
<option value="">Automatic</option>
|
||||
<option value="europe">Europe</option>
|
||||
<option value="north-america">North America</option>
|
||||
<option value="asia">Asia</option>
|
||||
<option value="oceania">Oceania</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Encryption</div>
|
||||
<div class="form-desc">
|
||||
End-to-end encryption requires a password you must remember.
|
||||
<span class="form-warning">This cannot be changed later.</span>
|
||||
</div>
|
||||
</div>
|
||||
<select bind:value={encryption}>
|
||||
<option value="e2ee">End-to-end encryption</option>
|
||||
<option value="standard">Standard encryption</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if encryption === "e2ee"}
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Encryption password</div>
|
||||
<div class="form-desc">
|
||||
<span class="form-warning">If you forget this password, any remote data will remain unusable forever.</span>
|
||||
This does not affect your local data.
|
||||
</div>
|
||||
</div>
|
||||
<input type="password" placeholder="Your password" bind:value={password} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="form-error">{error}</div>
|
||||
{/if}
|
||||
|
||||
<div class="form-footer">
|
||||
<Button variant="secondary" on:click={onBack}>Back</Button>
|
||||
<Button variant="primary" disabled={creating} on:click={onSubmit}>
|
||||
{creating ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.form-row + .form-row {
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.form-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.form-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.form-warning {
|
||||
color: var(--text-error);
|
||||
}
|
||||
|
||||
input, select {
|
||||
font-family: var(--font-interface);
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
background: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
min-width: 200px;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--text-error);
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
</style>
|
||||
94
src/ui/views/sync/VaultList.svelte
Normal file
94
src/ui/views/sync/VaultList.svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import VaultRow from "./VaultRow.svelte";
|
||||
import Button from "../../components/input/Button.svelte";
|
||||
|
||||
export let vaults = [];
|
||||
export let loading = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function onLink(e) {
|
||||
dispatch("link", e.detail);
|
||||
}
|
||||
|
||||
function onCreate() {
|
||||
dispatch("create");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="vault-list">
|
||||
<h3 class="vault-list-heading">Your remote vaults</h3>
|
||||
|
||||
<div class="vault-list-items">
|
||||
{#if loading}
|
||||
<div class="vault-list-spinner-area">
|
||||
<div class="vault-list-spinner"></div>
|
||||
</div>
|
||||
{:else if vaults.length === 0}
|
||||
<p class="vault-list-empty">No remote vaults found. Create one to get started.</p>
|
||||
{:else}
|
||||
{#each vaults as vault (vault.id)}
|
||||
<VaultRow {vault} on:link={onLink} />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="vault-list-footer">
|
||||
<Button variant="primary" disabled={loading} on:click={onCreate}>
|
||||
Create new vault
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.vault-list-heading {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.vault-list-empty {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.vault-list-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
min-height: 180px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.vault-list-spinner-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.vault-list-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--background-modifier-border);
|
||||
border-top-color: var(--text-muted);
|
||||
border-radius: 50%;
|
||||
animation: ignis-vault-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ignis-vault-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.vault-list-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
229
src/ui/views/sync/VaultRow.svelte
Normal file
229
src/ui/views/sync/VaultRow.svelte
Normal file
@@ -0,0 +1,229 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { Pencil } from "lucide-svelte";
|
||||
import Button from "../../components/input/Button.svelte";
|
||||
|
||||
export let vault;
|
||||
export let linked = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let expanded = false;
|
||||
let vaultPassword = "";
|
||||
let deviceName = "ignis-headless";
|
||||
let mode = "bidirectional";
|
||||
let linking = false;
|
||||
|
||||
function toggleExpand() {
|
||||
expanded = !expanded;
|
||||
}
|
||||
|
||||
async function onLink() {
|
||||
linking = true;
|
||||
|
||||
dispatch("link", {
|
||||
vault,
|
||||
vaultPassword: vaultPassword || undefined,
|
||||
deviceName,
|
||||
mode,
|
||||
});
|
||||
}
|
||||
|
||||
export function setLinking(val) {
|
||||
linking = val;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="vault-row" class:expanded>
|
||||
<div class="vault-row-main">
|
||||
<div class="vault-row-info">
|
||||
<div class="vault-row-name">{vault.name}</div>
|
||||
<div class="vault-row-region">{vault.region || "Unknown region"}</div>
|
||||
</div>
|
||||
<div class="vault-row-actions">
|
||||
{#if linked}
|
||||
<button class="icon-btn" title="Edit sync config" on:click={toggleExpand}>
|
||||
<Pencil size="14" />
|
||||
</button>
|
||||
{:else}
|
||||
<Button
|
||||
variant="secondary"
|
||||
on:click={toggleExpand}
|
||||
>
|
||||
{expanded ? "Cancel" : "Connect"}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if expanded}
|
||||
<div class="vault-row-options">
|
||||
<div class="option-row">
|
||||
<div class="option-label">
|
||||
<div class="option-name">Vault password</div>
|
||||
<div class="option-desc">Required if the vault uses end-to-end encryption</div>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Leave empty if not encrypted"
|
||||
bind:value={vaultPassword}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="option-row">
|
||||
<div class="option-label">
|
||||
<div class="option-name">Device name</div>
|
||||
<div class="option-desc">Identifies this server in sync version history</div>
|
||||
</div>
|
||||
<input type="text" bind:value={deviceName} />
|
||||
</div>
|
||||
|
||||
<div class="option-row">
|
||||
<div class="option-label">
|
||||
<div class="option-name">Sync mode</div>
|
||||
</div>
|
||||
<select bind:value={mode}>
|
||||
<option value="bidirectional">Bidirectional</option>
|
||||
<option value="pull-only">Pull only (remote to server)</option>
|
||||
<option value="mirror-remote">Mirror remote (exact copy)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="option-footer">
|
||||
{#if expanded && !linked}
|
||||
<Button variant="secondary" on:click={toggleExpand}>Cancel</Button>
|
||||
{/if}
|
||||
<Button variant="primary" disabled={linking} on:click={onLink}>
|
||||
{linking ? "Linking..." : "Link Vault"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.vault-row {
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vault-row-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.vault-row-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vault-row-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.vault-row-region {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.vault-row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.vault-row-actions :global(.btn.secondary) {
|
||||
padding: 4px 12px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background: var(--interactive-normal);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.vault-row-actions :global(.btn.secondary:hover:not(:disabled)) {
|
||||
background: var(--interactive-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--text-normal);
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.vault-row-options {
|
||||
padding: 0.5rem 1rem 1rem;
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
background: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 0;
|
||||
}
|
||||
|
||||
.option-row + .option-row {
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.option-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.option-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.option-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
input, select {
|
||||
font-family: var(--font-interface);
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
background: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.option-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user