feat: SSL wildcard certificate picker from NPM
- NPM client: ListCertificates endpoint - API: GET /api/settings/npm-certificates (wildcard-only filter) - Settings UI: EntityPicker for selecting wildcard certs - Deployer: applies certificate_id + ssl_forced to proxy hosts - Uses HTTPS subdomain URLs when SSL cert is configured
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl } from '$lib/api';
|
||||
import type { Settings } from '$lib/types';
|
||||
import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl, listNpmCertificates } from '$lib/api';
|
||||
import type { EntityPickerItem } from '$lib/types';
|
||||
import FormField from '$lib/components/FormField.svelte';
|
||||
import EntityPicker from '$lib/components/EntityPicker.svelte';
|
||||
import { toasts } from '$lib/stores/toast';
|
||||
import { t } from '$lib/i18n';
|
||||
import { IconLoader, IconCopy, IconRefresh } from '$lib/components/icons';
|
||||
import { IconLoader, IconCopy, IconRefresh, IconShield, IconX } from '$lib/components/icons';
|
||||
import Skeleton from '$lib/components/Skeleton.svelte';
|
||||
|
||||
let loading = $state(true);
|
||||
@@ -20,6 +21,12 @@
|
||||
let baseVolumePath = $state('');
|
||||
let notificationUrl = $state('');
|
||||
|
||||
let sslCertificateId = $state(0);
|
||||
let sslCertName = $state('');
|
||||
let certPickerOpen = $state(false);
|
||||
let certPickerItems = $state<EntityPickerItem[]>([]);
|
||||
let loadingCerts = $state(false);
|
||||
|
||||
let errors = $state<Record<string, string>>({});
|
||||
|
||||
function validateDomain(value: string): string {
|
||||
@@ -70,6 +77,7 @@
|
||||
subdomainPattern = settings.subdomain_pattern ?? '';
|
||||
pollingInterval = settings.polling_interval ?? '';
|
||||
baseVolumePath = settings.base_volume_path ?? '';
|
||||
sslCertificateId = settings.ssl_certificate_id ?? 0;
|
||||
notificationUrl = settings.notification_url ?? '';
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.loadFailed'));
|
||||
@@ -92,7 +100,8 @@
|
||||
await updateSettings({
|
||||
domain: domain.trim(), server_ip: serverIp.trim(), network: network.trim(),
|
||||
subdomain_pattern: subdomainPattern.trim(), polling_interval: pollingInterval.trim(),
|
||||
base_volume_path: baseVolumePath.trim(), notification_url: notificationUrl.trim()
|
||||
base_volume_path: baseVolumePath.trim(), notification_url: notificationUrl.trim(),
|
||||
ssl_certificate_id: sslCertificateId
|
||||
});
|
||||
toasts.success($t('settingsGeneral.saved'));
|
||||
} catch (err) {
|
||||
@@ -115,7 +124,60 @@
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => { loadSettings(); loadWebhookUrlValue(); });
|
||||
async function openCertPicker() {
|
||||
loadingCerts = true;
|
||||
certPickerOpen = true;
|
||||
try {
|
||||
const certs = await listNpmCertificates();
|
||||
certPickerItems = certs.map((cert): EntityPickerItem => ({
|
||||
value: String(cert.id),
|
||||
label: cert.nice_name || `Certificate #${cert.id}`,
|
||||
description: cert.domain_names.join(', ')
|
||||
}));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.noCertificatesFound'));
|
||||
certPickerOpen = false;
|
||||
} finally {
|
||||
loadingCerts = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCertSelect(value: string) {
|
||||
const id = parseInt(value, 10);
|
||||
sslCertificateId = id;
|
||||
const item = certPickerItems.find((i) => i.value === value);
|
||||
sslCertName = item?.label ?? '';
|
||||
certPickerOpen = false;
|
||||
}
|
||||
|
||||
function clearCertificate() {
|
||||
sslCertificateId = 0;
|
||||
sslCertName = '';
|
||||
}
|
||||
|
||||
// When loading settings, try to resolve cert name if an ID is set.
|
||||
async function resolveCertName() {
|
||||
if (sslCertificateId <= 0) return;
|
||||
try {
|
||||
const certs = await listNpmCertificates();
|
||||
const match = certs.find((c) => c.id === sslCertificateId);
|
||||
if (match) {
|
||||
sslCertName = match.nice_name || `Certificate #${match.id}`;
|
||||
} else {
|
||||
sslCertName = `Certificate #${sslCertificateId}`;
|
||||
}
|
||||
} catch {
|
||||
sslCertName = `Certificate #${sslCertificateId}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await loadSettings();
|
||||
await resolveCertName();
|
||||
loadWebhookUrlValue();
|
||||
}
|
||||
|
||||
$effect(() => { init(); });
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -144,6 +206,42 @@
|
||||
<FormField label="Base Volume Path" name="baseVolumePath" bind:value={baseVolumePath} placeholder="/data" helpText="Prepended to relative volume sources (e.g., /data + my-app/uploads = /data/my-app/uploads)" />
|
||||
<FormField label={$t('settingsGeneral.notificationUrl')} name="notificationUrl" bind:value={notificationUrl} placeholder="https://notify.example.com/webhook" error={errors.notificationUrl ?? ''} helpText={$t('settingsGeneral.notificationUrlHelp')} />
|
||||
</div>
|
||||
<!-- SSL Certificate -->
|
||||
<div class="mt-6 border-t border-[var(--border-primary)] pt-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium text-[var(--text-primary)]">{$t('settingsGeneral.sslCertificate')}</label>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.sslCertificateHelp')}</p>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={openCertPicker}
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-[var(--border-primary)] px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors"
|
||||
>
|
||||
<IconShield size={16} />
|
||||
{#if loadingCerts}
|
||||
{$t('settingsGeneral.loadingCertificates')}
|
||||
{:else if sslCertificateId > 0 && sslCertName}
|
||||
{sslCertName}
|
||||
{:else}
|
||||
{$t('settingsGeneral.noCertificate')}
|
||||
{/if}
|
||||
</button>
|
||||
{#if sslCertificateId > 0}
|
||||
<button
|
||||
type="button"
|
||||
onclick={clearCertificate}
|
||||
class="inline-flex items-center gap-1 rounded-lg border border-[var(--border-primary)] px-2 py-2 text-sm text-[var(--text-tertiary)] hover:text-[var(--color-danger)] hover:bg-[var(--surface-card-hover)] transition-colors"
|
||||
title={$t('settingsGeneral.clearCertificate')}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button onclick={handleSave} disabled={saving} class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-[var(--color-brand-700)] disabled:opacity-50 active:animate-press">
|
||||
{#if saving}<IconLoader size={16} />{/if}
|
||||
@@ -189,3 +287,12 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<EntityPicker
|
||||
bind:open={certPickerOpen}
|
||||
items={certPickerItems}
|
||||
current={String(sslCertificateId)}
|
||||
title={$t('settingsGeneral.selectCertificate')}
|
||||
onselect={handleCertSelect}
|
||||
onclose={() => { certPickerOpen = false; }}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user