feat: implement SyncSettings component
This commit is contained in:
parent
6fb16442cb
commit
931bc6bf29
|
|
@ -0,0 +1,471 @@
|
||||||
|
<script>
|
||||||
|
export let api = null
|
||||||
|
|
||||||
|
let settings = null
|
||||||
|
let loading = false
|
||||||
|
let errorMsg = ''
|
||||||
|
let resultMsg = ''
|
||||||
|
let resultKind = ''
|
||||||
|
|
||||||
|
let serverUrl = ''
|
||||||
|
let username = ''
|
||||||
|
let password = ''
|
||||||
|
let syncInterval = 0
|
||||||
|
let autoSync = false
|
||||||
|
let showDisconnectConfirm = false
|
||||||
|
let showResetKeyConfirm = false
|
||||||
|
let connectionOk = null
|
||||||
|
|
||||||
|
function wailsCall(method, ...args) {
|
||||||
|
try {
|
||||||
|
if (window['go'] && window['go']['main'] && window['go']['main']['App']) {
|
||||||
|
const fn = window['go']['main']['App'][method]
|
||||||
|
if (typeof fn === 'function') return fn(...args)
|
||||||
|
}
|
||||||
|
} catch (e) { console.error('Wails error:', method, e) }
|
||||||
|
return Promise.reject(new Error('Wails not connected: ' + method))
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
settings = await wailsCall('SyncStatus')
|
||||||
|
if (settings) {
|
||||||
|
serverUrl = settings.serverUrl || ''
|
||||||
|
syncInterval = settings.syncInterval || 0
|
||||||
|
autoSync = settings.syncInterval > 0
|
||||||
|
}
|
||||||
|
} catch (e) { settings = null }
|
||||||
|
}
|
||||||
|
|
||||||
|
load()
|
||||||
|
|
||||||
|
async function testConnection() {
|
||||||
|
loading = true
|
||||||
|
errorMsg = ''
|
||||||
|
resultKind = ''
|
||||||
|
connectionOk = null
|
||||||
|
try {
|
||||||
|
await wailsCall('SyncTestConnection', serverUrl, username, password)
|
||||||
|
connectionOk = true
|
||||||
|
resultMsg = 'connection ok'
|
||||||
|
} catch (e) {
|
||||||
|
connectionOk = false
|
||||||
|
resultMsg = 'connection failed: ' + String(e)
|
||||||
|
}
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
async function configureSync() {
|
||||||
|
loading = true
|
||||||
|
errorMsg = ''
|
||||||
|
resultKind = ''
|
||||||
|
try {
|
||||||
|
await wailsCall('SyncConfigure', serverUrl, username, password)
|
||||||
|
resultMsg = 'configured'
|
||||||
|
username = ''
|
||||||
|
password = ''
|
||||||
|
await load()
|
||||||
|
} catch (e) {
|
||||||
|
errorMsg = String(e)
|
||||||
|
}
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncResultWarning(result) {
|
||||||
|
const conflicts = Array.isArray(result?.conflicts) ? result.conflicts : []
|
||||||
|
const applyErrors = Array.isArray(result?.applyErrors) ? result.applyErrors : []
|
||||||
|
const parts = []
|
||||||
|
if (conflicts.length > 0) {
|
||||||
|
parts.push(conflicts.length + ' conflict(s)')
|
||||||
|
}
|
||||||
|
if (applyErrors.length > 0) {
|
||||||
|
parts.push(applyErrors.length + ' error(s)')
|
||||||
|
}
|
||||||
|
return parts.join(' · ')
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runSyncNow() {
|
||||||
|
loading = true
|
||||||
|
errorMsg = ''
|
||||||
|
resultKind = ''
|
||||||
|
try {
|
||||||
|
const r = await wailsCall('SyncNow')
|
||||||
|
const summary = 'pushed ' + (r?.pushed || 0) + ', pulled ' + (r?.pulled || 0)
|
||||||
|
const warning = syncResultWarning(r)
|
||||||
|
resultMsg = warning ? summary + ' · ' + warning : summary
|
||||||
|
resultKind = warning ? 'warning' : ''
|
||||||
|
await load()
|
||||||
|
} catch (e) {
|
||||||
|
errorMsg = String(e)
|
||||||
|
}
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveInterval() {
|
||||||
|
loading = true
|
||||||
|
errorMsg = ''
|
||||||
|
resultKind = ''
|
||||||
|
try {
|
||||||
|
await wailsCall('SyncSetInterval', syncInterval)
|
||||||
|
resultMsg = 'settings saved'
|
||||||
|
resultKind = ''
|
||||||
|
} catch (e) {
|
||||||
|
errorMsg = String(e)
|
||||||
|
}
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setAutoSync() {
|
||||||
|
const minutes = autoSync ? 5 : 0
|
||||||
|
syncInterval = minutes
|
||||||
|
loading = true
|
||||||
|
errorMsg = ''
|
||||||
|
resultKind = ''
|
||||||
|
try {
|
||||||
|
await wailsCall('SyncSetInterval', minutes)
|
||||||
|
resultMsg = autoSync ? 'auto-sync enabled' : 'auto-sync disabled'
|
||||||
|
resultKind = ''
|
||||||
|
} catch (e) {
|
||||||
|
errorMsg = String(e)
|
||||||
|
}
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmDisconnect() {
|
||||||
|
showDisconnectConfirm = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doDisconnect() {
|
||||||
|
showDisconnectConfirm = false
|
||||||
|
loading = true
|
||||||
|
resultKind = ''
|
||||||
|
try {
|
||||||
|
await wailsCall('SyncDisconnect')
|
||||||
|
resultMsg = 'disconnected'
|
||||||
|
await load()
|
||||||
|
} catch (e) { errorMsg = String(e) }
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmResetKey() {
|
||||||
|
showResetKeyConfirm = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doResetKey() {
|
||||||
|
showResetKeyConfirm = false
|
||||||
|
loading = true
|
||||||
|
resultKind = ''
|
||||||
|
try {
|
||||||
|
await wailsCall('ResetSyncKey')
|
||||||
|
resultMsg = 'key reset'
|
||||||
|
await load()
|
||||||
|
} catch (e) { errorMsg = String(e) }
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusLabel(s) {
|
||||||
|
if (!s) return 'not configured'
|
||||||
|
const labels = {
|
||||||
|
'connected': 'connected',
|
||||||
|
'disconnected': 'disconnected',
|
||||||
|
'disabled': 'not configured',
|
||||||
|
'error': 'error',
|
||||||
|
'revoked': 'revoked',
|
||||||
|
}
|
||||||
|
return labels[s] || s
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="settings-section">
|
||||||
|
<h2>Sync</h2>
|
||||||
|
<p class="section-desc">Synchronize your vault across devices.</p>
|
||||||
|
|
||||||
|
{#if errorMsg}
|
||||||
|
<div class="error-msg">{errorMsg}</div>
|
||||||
|
{/if}
|
||||||
|
{#if resultMsg && !errorMsg}
|
||||||
|
<div class="result-msg" class:warning={resultKind === 'warning'}>{resultMsg}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if settings && settings.configured}
|
||||||
|
<div class="settings-card">
|
||||||
|
<div class="sync-info">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Status</span>
|
||||||
|
<span class="info-value" class:status-ok={settings.statusLabel === 'connected'} class:status-err={settings.statusLabel === 'error' || settings.statusLabel === 'revoked'}>
|
||||||
|
{statusLabel(settings.statusLabel)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{#if settings.serverUrl}
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Server URL</span>
|
||||||
|
<span class="info-value mono">{settings.serverUrl}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if settings.deviceName}
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Device Name</span>
|
||||||
|
<span class="info-value">{settings.deviceName}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if settings.deviceId}
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Device ID</span>
|
||||||
|
<span class="info-value mono">{settings.deviceId}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if settings.lastSyncAt}
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Last Sync</span>
|
||||||
|
<span class="info-value">{settings.lastSyncAt}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if settings.lastError}
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">Last Error</span>
|
||||||
|
<span class="info-value error">{settings.lastError}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sync-actions">
|
||||||
|
<button class="btn btn-primary" on:click={runSyncNow} disabled={loading}>
|
||||||
|
Sync Now
|
||||||
|
</button>
|
||||||
|
<button class="btn" on:click={confirmDisconnect} disabled={loading}>
|
||||||
|
Disconnect
|
||||||
|
</button>
|
||||||
|
<button class="btn" on:click={confirmResetKey} disabled={loading}>
|
||||||
|
Reset Key
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sync-interval">
|
||||||
|
<label>
|
||||||
|
<span class="label-text">Sync Interval (minutes)</span>
|
||||||
|
<div class="interval-row">
|
||||||
|
<input type="number" bind:value={syncInterval} min="0" placeholder="0" />
|
||||||
|
<button class="btn btn-sm" on:click={saveInterval} disabled={loading}>Save</button>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="auto-sync-toggle">
|
||||||
|
<label class="toggle-label">
|
||||||
|
<input type="checkbox" bind:checked={autoSync} on:change={setAutoSync} disabled={loading} />
|
||||||
|
<span class="label-text">Auto-sync</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="settings-card">
|
||||||
|
<div class="sync-setup">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<span class="label-text">Server URL</span>
|
||||||
|
<input type="text" placeholder="https://example.com" bind:value={serverUrl} />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<span class="label-text">Username</span>
|
||||||
|
<input type="text" bind:value={username} />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<span class="label-text">Password</span>
|
||||||
|
<input type="password" bind:value={password} />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="sync-setup-actions">
|
||||||
|
<button class="btn" on:click={testConnection} disabled={loading || !serverUrl}>
|
||||||
|
Test Connection
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary" on:click={configureSync}
|
||||||
|
disabled={loading || !serverUrl || !username || !password}>
|
||||||
|
Connect
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if connectionOk !== null}
|
||||||
|
<div class="connection-result" class:ok={connectionOk} class:fail={!connectionOk}>
|
||||||
|
{connectionOk ? 'Test OK' : 'Connection failed'}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if showDisconnectConfirm}
|
||||||
|
<button class="modal-overlay" on:click={() => showDisconnectConfirm = false}>
|
||||||
|
<div class="modal">
|
||||||
|
<h3>Disconnect from Sync Server</h3>
|
||||||
|
<p class="modal-desc">This will disconnect this device from the sync server and revoke the device token. You can reconnect later.</p>
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button class="btn btn-danger" on:click={doDisconnect}>Disconnect</button>
|
||||||
|
<button class="btn" on:click={() => showDisconnectConfirm = false}>Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if showResetKeyConfirm}
|
||||||
|
<button class="modal-overlay" on:click={() => showResetKeyConfirm = false}>
|
||||||
|
<div class="modal">
|
||||||
|
<h3>Reset Sync Key</h3>
|
||||||
|
<p class="modal-desc">This will remove the stored device token. You will need to re-pair this device with the server.</p>
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button class="btn btn-danger" on:click={doResetKey}>Reset Key</button>
|
||||||
|
<button class="btn" on:click={() => showResetKeyConfirm = false}>Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.settings-section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
.settings-section h2 {
|
||||||
|
margin: 0 0 0.25rem 0;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--text, #e0e0e0);
|
||||||
|
}
|
||||||
|
.section-desc {
|
||||||
|
color: var(--text-dim, #888);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.settings-card {
|
||||||
|
background: var(--surface-alt, #1e1e30);
|
||||||
|
border: 1px solid var(--border, #2a2a3e);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
border-bottom: 1px solid var(--border, #2a2a3e);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.info-row:last-child { border-bottom: none; }
|
||||||
|
.info-label {
|
||||||
|
width: 180px;
|
||||||
|
min-width: 180px;
|
||||||
|
color: var(--text-dim, #888);
|
||||||
|
}
|
||||||
|
.info-value { color: var(--text, #e0e0e0); word-break: break-all; }
|
||||||
|
.info-value.mono { font-family: monospace; font-size: 0.85rem; }
|
||||||
|
.info-value.error { color: #ff6b6b; }
|
||||||
|
.status-ok { color: #34d399; font-weight: 600; }
|
||||||
|
.status-err { color: #ff6b6b; }
|
||||||
|
.sync-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.sync-interval {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.interval-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.interval-row input {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.auto-sync-toggle {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.toggle-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.toggle-label input[type="checkbox"] {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
accent-color: #6c5ce7;
|
||||||
|
}
|
||||||
|
.sync-setup .form-group { margin-bottom: 1rem; }
|
||||||
|
.sync-setup .form-group:last-of-type { margin-bottom: 0; }
|
||||||
|
.sync-setup-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.connection-result {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.connection-result.ok {
|
||||||
|
background: rgba(52, 211, 153, 0.1);
|
||||||
|
border: 1px solid rgba(52, 211, 153, 0.3);
|
||||||
|
color: #34d399;
|
||||||
|
}
|
||||||
|
.connection-result.fail {
|
||||||
|
background: rgba(255, 107, 107, 0.1);
|
||||||
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
||||||
|
color: #ff6b6b;
|
||||||
|
}
|
||||||
|
.error-msg {
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
background: rgba(255, 107, 107, 0.1);
|
||||||
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.result-msg {
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
background: rgba(52, 211, 153, 0.1);
|
||||||
|
border: 1px solid rgba(52, 211, 153, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #34d399;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.result-msg.warning {
|
||||||
|
background: rgba(245, 158, 11, 0.1);
|
||||||
|
border-color: rgba(245, 158, 11, 0.3);
|
||||||
|
color: #f59e0b;
|
||||||
|
}
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0,0,0,0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
color: inherit;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
background: var(--surface, #1e1e2e);
|
||||||
|
border: 1px solid var(--border, #2a2a3e);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
max-width: 420px;
|
||||||
|
width: 90%;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.modal h3 { margin: 0 0 0.75rem 0; }
|
||||||
|
.modal-desc { color: var(--text-dim, #888); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }
|
||||||
|
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue