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:
@@ -4,6 +4,7 @@ import type {
|
||||
DeployLog,
|
||||
InspectResult,
|
||||
Instance,
|
||||
NpmCertificate,
|
||||
Project,
|
||||
ProjectDetail,
|
||||
Registry,
|
||||
@@ -258,6 +259,10 @@ export function regenerateWebhookUrl(): Promise<{ url: string }> {
|
||||
return post<{ url: string }>('/api/settings/webhook-url/regenerate');
|
||||
}
|
||||
|
||||
export function listNpmCertificates(): Promise<NpmCertificate[]> {
|
||||
return get<NpmCertificate[]>('/api/settings/npm-certificates');
|
||||
}
|
||||
|
||||
// ── Auth ─────────────────────────────────────────────────────────────
|
||||
|
||||
export function login(username: string, password: string): Promise<{ token: string; expires_at: string }> {
|
||||
|
||||
@@ -207,7 +207,14 @@
|
||||
"regenerating": "Regenerating...",
|
||||
"regenerated": "Webhook URL regenerated",
|
||||
"regenerateFailed": "Failed to regenerate webhook URL",
|
||||
"regenerateWarning": "Warning: regenerating will invalidate the current URL. Update your CI pipelines."
|
||||
"regenerateWarning": "Warning: regenerating will invalidate the current URL. Update your CI pipelines.",
|
||||
"sslCertificate": "SSL Certificate",
|
||||
"sslCertificateHelp": "Wildcard certificate from NPM for auto-SSL on proxy hosts",
|
||||
"selectCertificate": "Select Certificate",
|
||||
"noCertificate": "None (no SSL)",
|
||||
"clearCertificate": "Clear",
|
||||
"loadingCertificates": "Loading certificates...",
|
||||
"noCertificatesFound": "No wildcard certificates found in NPM"
|
||||
},
|
||||
"settingsRegistries": {
|
||||
"title": "Container Registries",
|
||||
|
||||
@@ -207,7 +207,14 @@
|
||||
"regenerating": "Перегенерация...",
|
||||
"regenerated": "URL вебхука перегенерирован",
|
||||
"regenerateFailed": "Не удалось перегенерировать URL вебхука",
|
||||
"regenerateWarning": "Внимание: перегенерация сделает текущий URL недействительным. Обновите ваши CI-пайплайны."
|
||||
"regenerateWarning": "Внимание: перегенерация сделает текущий URL недействительным. Обновите ваши CI-пайплайны.",
|
||||
"sslCertificate": "SSL-сертификат",
|
||||
"sslCertificateHelp": "Wildcard-сертификат из NPM для автоматического SSL на прокси-хостах",
|
||||
"selectCertificate": "Выбрать сертификат",
|
||||
"noCertificate": "Нет (без SSL)",
|
||||
"clearCertificate": "Очистить",
|
||||
"loadingCertificates": "Загрузка сертификатов...",
|
||||
"noCertificatesFound": "Wildcard-сертификаты в NPM не найдены"
|
||||
},
|
||||
"settingsRegistries": {
|
||||
"title": "Реестры контейнеров",
|
||||
|
||||
@@ -105,9 +105,19 @@ export interface Settings {
|
||||
webhook_secret: string;
|
||||
polling_interval: string;
|
||||
base_volume_path: string;
|
||||
ssl_certificate_id: number;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
/** An SSL certificate from Nginx Proxy Manager. */
|
||||
export interface NpmCertificate {
|
||||
id: number;
|
||||
nice_name: string;
|
||||
domain_names: string[];
|
||||
expires_on: string;
|
||||
provider: string;
|
||||
}
|
||||
|
||||
/** Standard API envelope returned by all backend endpoints. */
|
||||
export interface ApiEnvelope<T> {
|
||||
success: boolean;
|
||||
|
||||
@@ -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