feat: port original frontend UI to Notify Bridge
Port the full polished frontend from Immich Watcher: - Sidebar layout with collapsible nav, mobile bottom nav - Login/setup pages with gradient mesh background, animations - 11 reusable components: Card, Modal, ConfirmModal, Snackbar, IconPicker, JinjaEditor, MdiIcon, PageHeader, Loading, Hint, IconButton - Auth state with getAuth() reactive pattern, token refresh - Theme: light/dark/system with media query listener - i18n: EN/RU with nested JSON, auto-detect locale - Snackbar notification store Branding changes: - "Immich Watcher" -> "Notify Bridge" - /servers -> /providers in nav and routes - Login icon: mdiEye -> mdiLan Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,133 @@
|
||||
<script lang="ts">
|
||||
import { t } from '$lib/i18n/index.svelte.ts';
|
||||
import { api } from '$lib/api.ts';
|
||||
|
||||
let providerType = $state('immich');
|
||||
let name = $state('');
|
||||
let url = $state('');
|
||||
let apiKey = $state('');
|
||||
let externalDomain = $state('');
|
||||
let error = $state('');
|
||||
let testing = $state(false);
|
||||
let testResult = $state<{ ok: boolean; message: string } | null>(null);
|
||||
let saving = $state(false);
|
||||
|
||||
async function testConnection() {
|
||||
if (!url || !apiKey) {
|
||||
error = 'URL and API Key are required';
|
||||
return;
|
||||
}
|
||||
testing = true;
|
||||
testResult = null;
|
||||
error = '';
|
||||
try {
|
||||
// Save first to get an ID, then test
|
||||
const provider = await api.post<any>('/providers', {
|
||||
type: providerType,
|
||||
name: name || 'Immich',
|
||||
config: { url, api_key: apiKey, external_domain: externalDomain || undefined },
|
||||
});
|
||||
testResult = await api.post<{ ok: boolean; message: string }>(`/providers/${provider.id}/test`);
|
||||
if (!testResult.ok) {
|
||||
// Clean up failed provider
|
||||
await api.delete(`/providers/${provider.id}`);
|
||||
} else {
|
||||
// Success — redirect to providers list
|
||||
window.location.href = '/providers';
|
||||
return;
|
||||
}
|
||||
} catch (e: any) {
|
||||
error = e.message || 'Test failed';
|
||||
} finally {
|
||||
testing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!url || !apiKey) {
|
||||
error = 'URL and API Key are required';
|
||||
return;
|
||||
}
|
||||
saving = true;
|
||||
error = '';
|
||||
try {
|
||||
await api.post('/providers', {
|
||||
type: providerType,
|
||||
name: name || 'Immich',
|
||||
config: { url, api_key: apiKey, external_domain: externalDomain || undefined },
|
||||
});
|
||||
window.location.href = '/providers';
|
||||
} catch (e: any) {
|
||||
error = e.message || 'Save failed';
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-2xl mx-auto">
|
||||
<div class="mb-6">
|
||||
<a href="/providers" class="text-sm text-muted-foreground hover:text-foreground">← Back to Providers</a>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold mb-6">{t('provider.addProvider')}</h1>
|
||||
|
||||
<div class="bg-card rounded-xl border border-border p-6 space-y-5">
|
||||
<!-- Provider Type -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-1">Provider Type</label>
|
||||
<select bind:value={providerType} class="w-full px-3 py-2 border border-border rounded-[var(--radius)] bg-background">
|
||||
<option value="immich">{t('provider.immich')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-1">Name</label>
|
||||
<input type="text" bind:value={name} placeholder="My Immich Server" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" />
|
||||
</div>
|
||||
|
||||
{#if providerType === 'immich'}
|
||||
<!-- Immich URL -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-1">Server URL <span class="text-destructive">*</span></label>
|
||||
<input type="url" bind:value={url} placeholder="http://192.168.1.100:2283" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
|
||||
</div>
|
||||
|
||||
<!-- API Key -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-1">API Key <span class="text-destructive">*</span></label>
|
||||
<input type="password" bind:value={apiKey} placeholder="Your Immich API key" autocomplete="off" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
|
||||
</div>
|
||||
|
||||
<!-- External Domain -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-1">External Domain <span class="text-muted-foreground font-normal">(optional)</span></label>
|
||||
<input type="url" bind:value={externalDomain} placeholder="https://photos.example.com" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" />
|
||||
<p class="text-xs text-muted-foreground mt-1">Public-facing URL for notification links. Falls back to server URL.</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<p class="text-sm text-destructive">{error}</p>
|
||||
{/if}
|
||||
|
||||
{#if testResult}
|
||||
<div class="p-3 rounded-lg {testResult.ok ? 'bg-success-bg text-success-fg' : 'bg-error-bg text-error-fg'}">
|
||||
{testResult.message}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-3 pt-2">
|
||||
<button onclick={testConnection} disabled={testing || saving} class="px-5 py-2.5 bg-primary text-primary-foreground rounded-[var(--radius)] font-medium hover:opacity-90 transition-opacity disabled:opacity-50">
|
||||
{testing ? 'Testing...' : 'Test & Save'}
|
||||
</button>
|
||||
<button onclick={handleSave} disabled={testing || saving} class="px-5 py-2.5 bg-muted text-foreground rounded-[var(--radius)] font-medium hover:bg-accent transition-colors disabled:opacity-50">
|
||||
{saving ? 'Saving...' : 'Save without testing'}
|
||||
</button>
|
||||
<a href="/providers" class="px-5 py-2.5 bg-muted text-muted-foreground rounded-[var(--radius)] font-medium hover:bg-accent transition-colors">
|
||||
{t('common.cancel')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user