feat: extract groombook/web from monorepo
- Copy apps/web/ with all src, components, pages, portal - Inline packages/types/ as local packages/types module - Add tsconfig path aliases for @groombook/types - Port Dockerfile and CI workflow - Image name: ghcr.io/groombook/web Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
groombook-engineer[bot]
@@ -0,0 +1,791 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useBranding } from "../BrandingContext.js";
|
||||
|
||||
interface AuthProviderConfig {
|
||||
id: number;
|
||||
providerId: string;
|
||||
displayName: string;
|
||||
issuerUrl: string;
|
||||
internalBaseUrl: string | null;
|
||||
clientId: string;
|
||||
clientSecret: string;
|
||||
scopes: string;
|
||||
enabled: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface AuthProviderForm {
|
||||
providerId: string;
|
||||
displayName: string;
|
||||
issuerUrl: string;
|
||||
internalBaseUrl: string;
|
||||
clientId: string;
|
||||
clientSecret: string;
|
||||
scopes: string;
|
||||
}
|
||||
|
||||
const REDACTED = "••••••••";
|
||||
|
||||
const ALLOWED_LOGO_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
|
||||
|
||||
interface CurrentUser {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
isSuperUser: boolean;
|
||||
}
|
||||
|
||||
interface SettingsForm {
|
||||
businessName: string;
|
||||
primaryColor: string;
|
||||
accentColor: string;
|
||||
logoKey: string | null;
|
||||
logoUrl: string | null;
|
||||
logoBase64: string | null; // legacy
|
||||
logoMimeType: string | null; // legacy
|
||||
}
|
||||
|
||||
export function SettingsPage() {
|
||||
const { refresh } = useBranding();
|
||||
const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
|
||||
|
||||
// Auth provider state
|
||||
const [authConfig, setAuthConfig] = useState<AuthProviderConfig | null>(null);
|
||||
const [authForm, setAuthForm] = useState<AuthProviderForm>({
|
||||
providerId: "authentik",
|
||||
displayName: "",
|
||||
issuerUrl: "",
|
||||
internalBaseUrl: "",
|
||||
clientId: "",
|
||||
clientSecret: "",
|
||||
scopes: "openid profile email",
|
||||
});
|
||||
const [authSecretTouched, setAuthSecretTouched] = useState(false);
|
||||
const [authLoaded, setAuthLoaded] = useState(false);
|
||||
const [authSaving, setAuthSaving] = useState(false);
|
||||
const [authMessage, setAuthMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
const [testingConnection, setTestingConnection] = useState(false);
|
||||
const [testResult, setTestResult] = useState<{ ok: boolean; error?: string } | null>(null);
|
||||
const [showInternalBaseUrl, setShowInternalBaseUrl] = useState(false);
|
||||
const [confirmReset, setConfirmReset] = useState(false);
|
||||
|
||||
const [form, setForm] = useState<SettingsForm>({
|
||||
businessName: "",
|
||||
primaryColor: "#4f8a6f",
|
||||
accentColor: "#8b7355",
|
||||
logoKey: null,
|
||||
logoUrl: null,
|
||||
logoBase64: null,
|
||||
logoMimeType: null,
|
||||
});
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/admin/settings")
|
||||
.then((r) => r.json())
|
||||
.then(async (data) => {
|
||||
// The logo is now proxied through the API server so the browser
|
||||
// never receives an S3 URL — use the proxy path directly as the src.
|
||||
setForm({
|
||||
businessName: data.businessName ?? "GroomBook",
|
||||
primaryColor: data.primaryColor ?? "#4f8a6f",
|
||||
accentColor: data.accentColor ?? "#8b7355",
|
||||
logoKey: data.logoKey ?? null,
|
||||
logoUrl: data.logoKey ? "/api/admin/settings/logo" : null,
|
||||
logoBase64: data.logoBase64 ?? null,
|
||||
logoMimeType: data.logoMimeType ?? null,
|
||||
});
|
||||
setLoaded(true);
|
||||
})
|
||||
.catch(() => setLoaded(true));
|
||||
}, []);
|
||||
|
||||
// Load current user (for isSuperUser check) and auth provider config
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetch("/api/staff/me").then((r) => r.json()).catch(() => null),
|
||||
fetch("/api/admin/auth-provider").then(async (r) => {
|
||||
if (r.ok) return r.json();
|
||||
if (r.status === 404) return null;
|
||||
throw new Error(`HTTP ${r.status}`);
|
||||
}).catch(() => null),
|
||||
]).then(([user, auth]) => {
|
||||
setCurrentUser(user as CurrentUser | null);
|
||||
if (auth) {
|
||||
setAuthConfig(auth as AuthProviderConfig);
|
||||
setAuthForm({
|
||||
providerId: (auth as AuthProviderConfig).providerId,
|
||||
displayName: (auth as AuthProviderConfig).displayName,
|
||||
issuerUrl: (auth as AuthProviderConfig).issuerUrl,
|
||||
internalBaseUrl: (auth as AuthProviderConfig).internalBaseUrl ?? "",
|
||||
clientId: (auth as AuthProviderConfig).clientId,
|
||||
clientSecret: (auth as AuthProviderConfig).clientSecret,
|
||||
scopes: (auth as AuthProviderConfig).scopes,
|
||||
});
|
||||
}
|
||||
setAuthLoaded(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleLogoChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (file.size > 512 * 1024) {
|
||||
setMessage({ type: "error", text: "Logo must be under 512KB." });
|
||||
return;
|
||||
}
|
||||
|
||||
const validTypes = ["image/png", "image/jpeg", "image/gif", "image/webp"];
|
||||
if (!validTypes.includes(file.type)) {
|
||||
setMessage({ type: "error", text: "Logo must be PNG, JPEG, GIF, or WebP." });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Upload directly through the API server to avoid mixed-content issues
|
||||
// with pre-signed URLs that use the internal HTTP endpoint
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
const uploadRes = await fetch("/api/admin/settings/logo/upload", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
if (!uploadRes.ok) {
|
||||
const err = await uploadRes.json().catch(() => null);
|
||||
throw new Error(err?.error ?? "Failed to upload logo");
|
||||
}
|
||||
const { logoKey } = await uploadRes.json();
|
||||
setForm((f) => ({ ...f, logoKey, logoUrl: `/api/admin/settings/logo?t=${Date.now()}`, logoBase64: null, logoMimeType: null }));
|
||||
setMessage({ type: "success", text: "Logo uploaded." });
|
||||
refresh();
|
||||
} catch (err: unknown) {
|
||||
setMessage({ type: "error", text: err instanceof Error ? err.message : "Logo upload failed" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
const res = await fetch("/api/admin/settings", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null);
|
||||
throw new Error(err?.error ?? "Failed to save settings");
|
||||
}
|
||||
setMessage({ type: "success", text: "Settings saved." });
|
||||
refresh();
|
||||
} catch (err: unknown) {
|
||||
setMessage({ type: "error", text: err instanceof Error ? err.message : "Save failed" });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Auth provider handlers
|
||||
const handleTestConnection = async () => {
|
||||
setTestingConnection(true);
|
||||
setTestResult(null);
|
||||
try {
|
||||
const res = await fetch("/api/admin/auth-provider/test", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
issuerUrl: authForm.issuerUrl,
|
||||
...(authForm.internalBaseUrl ? { internalBaseUrl: authForm.internalBaseUrl } : {}),
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
setTestResult(data);
|
||||
} catch {
|
||||
setTestResult({ ok: false, error: "Network error. Please try again." });
|
||||
} finally {
|
||||
setTestingConnection(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAuthSave = async () => {
|
||||
setAuthSaving(true);
|
||||
setAuthMessage(null);
|
||||
try {
|
||||
const payload: Record<string, string> = {
|
||||
providerId: authForm.providerId,
|
||||
displayName: authForm.displayName,
|
||||
issuerUrl: authForm.issuerUrl,
|
||||
clientId: authForm.clientId,
|
||||
scopes: authForm.scopes,
|
||||
};
|
||||
if (authForm.internalBaseUrl) {
|
||||
payload.internalBaseUrl = authForm.internalBaseUrl;
|
||||
}
|
||||
// Only send clientSecret if user changed it from the redacted value
|
||||
if (authSecretTouched) {
|
||||
payload.clientSecret = authForm.clientSecret;
|
||||
}
|
||||
const res = await fetch("/api/admin/auth-provider", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null);
|
||||
throw new Error(err?.error ?? "Failed to save auth provider");
|
||||
}
|
||||
const saved = await res.json() as AuthProviderConfig;
|
||||
setAuthConfig(saved);
|
||||
setAuthForm({
|
||||
providerId: saved.providerId,
|
||||
displayName: saved.displayName,
|
||||
issuerUrl: saved.issuerUrl,
|
||||
internalBaseUrl: saved.internalBaseUrl ?? "",
|
||||
clientId: saved.clientId,
|
||||
clientSecret: saved.clientSecret,
|
||||
scopes: saved.scopes,
|
||||
});
|
||||
setAuthSecretTouched(false);
|
||||
setAuthMessage({ type: "success", text: "Auth provider saved." });
|
||||
} catch (err: unknown) {
|
||||
setAuthMessage({ type: "error", text: err instanceof Error ? err.message : "Save failed" });
|
||||
} finally {
|
||||
setAuthSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetToEnvDefaults = async () => {
|
||||
if (!confirmReset) {
|
||||
setConfirmReset(true);
|
||||
return;
|
||||
}
|
||||
setConfirmReset(false);
|
||||
try {
|
||||
const res = await fetch("/api/admin/auth-provider", { method: "DELETE" });
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null);
|
||||
throw new Error(err?.error ?? "Failed to reset auth provider");
|
||||
}
|
||||
setAuthConfig(null);
|
||||
setAuthForm({
|
||||
providerId: "authentik",
|
||||
displayName: "",
|
||||
issuerUrl: "",
|
||||
internalBaseUrl: "",
|
||||
clientId: "",
|
||||
clientSecret: "",
|
||||
scopes: "openid profile email",
|
||||
});
|
||||
setAuthSecretTouched(false);
|
||||
setAuthMessage({ type: "success", text: "Auth provider reset to environment defaults." });
|
||||
} catch (err: unknown) {
|
||||
setAuthMessage({ type: "error", text: err instanceof Error ? err.message : "Reset failed" });
|
||||
}
|
||||
};
|
||||
|
||||
if (!loaded) return <p>Loading settings...</p>;
|
||||
|
||||
const logoSrc = form.logoUrl ?? (form.logoBase64 && form.logoMimeType && ALLOWED_LOGO_TYPES.has(form.logoMimeType) ? `data:${form.logoMimeType};base64,${form.logoBase64}` : null);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 600 }}>
|
||||
<h1>Branding & Appearance</h1>
|
||||
<p style={{ color: "#6b7280", marginBottom: "1.5rem" }}>
|
||||
Customize your business name, logo, and color scheme.
|
||||
</p>
|
||||
|
||||
{/* Business Name */}
|
||||
<div style={{ marginBottom: "1.25rem" }}>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4 }}>
|
||||
Business Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.businessName}
|
||||
onChange={(e) => setForm((f) => ({ ...f, businessName: e.target.value }))}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "0.5rem 0.75rem",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Logo Upload */}
|
||||
<div style={{ marginBottom: "1.25rem" }}>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4 }}>
|
||||
Logo
|
||||
</label>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
|
||||
{logoSrc ? (
|
||||
<img
|
||||
src={logoSrc}
|
||||
alt="Logo preview"
|
||||
style={{ width: 64, height: 64, objectFit: "contain", borderRadius: 8, border: "1px solid #e5e7eb" }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
width: 64, height: 64, borderRadius: 8,
|
||||
border: "2px dashed #d1d5db", display: "flex",
|
||||
alignItems: "center", justifyContent: "center",
|
||||
color: "#9ca3af", fontSize: 12,
|
||||
}}>
|
||||
No logo
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
style={{
|
||||
padding: "0.4rem 0.75rem",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: 6,
|
||||
background: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
Upload Logo
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||||
onChange={handleLogoChange}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
{logoSrc && (
|
||||
<button
|
||||
onClick={async () => {
|
||||
try {
|
||||
const res = await fetch("/api/admin/settings/logo", { method: "DELETE" });
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null);
|
||||
throw new Error(err?.error ?? "Failed to delete logo");
|
||||
}
|
||||
setForm((f) => ({ ...f, logoKey: null, logoUrl: null, logoBase64: null, logoMimeType: null }));
|
||||
setMessage({ type: "success", text: "Logo removed." });
|
||||
refresh();
|
||||
} catch (err: unknown) {
|
||||
setMessage({ type: "error", text: err instanceof Error ? err.message : "Delete failed" });
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
padding: "0.4rem 0.75rem",
|
||||
border: "1px solid #fca5a5",
|
||||
borderRadius: 6,
|
||||
background: "#fff",
|
||||
color: "#dc2626",
|
||||
cursor: "pointer",
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
<p style={{ fontSize: 12, color: "#9ca3af", marginTop: 4 }}>
|
||||
PNG, SVG, JPEG, or WebP. Max 512KB.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Pickers */}
|
||||
<div style={{ display: "flex", gap: "1.5rem", marginBottom: "1.5rem" }}>
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4 }}>
|
||||
Primary Color
|
||||
</label>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<input
|
||||
type="color"
|
||||
value={form.primaryColor}
|
||||
onChange={(e) => setForm((f) => ({ ...f, primaryColor: e.target.value }))}
|
||||
style={{ width: 40, height: 40, border: "none", cursor: "pointer" }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={form.primaryColor}
|
||||
onChange={(e) => setForm((f) => ({ ...f, primaryColor: e.target.value }))}
|
||||
style={{
|
||||
width: 90,
|
||||
padding: "0.4rem 0.5rem",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: 6,
|
||||
fontSize: 13,
|
||||
fontFamily: "monospace",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4 }}>
|
||||
Accent Color
|
||||
</label>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<input
|
||||
type="color"
|
||||
value={form.accentColor}
|
||||
onChange={(e) => setForm((f) => ({ ...f, accentColor: e.target.value }))}
|
||||
style={{ width: 40, height: 40, border: "none", cursor: "pointer" }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={form.accentColor}
|
||||
onChange={(e) => setForm((f) => ({ ...f, accentColor: e.target.value }))}
|
||||
style={{
|
||||
width: 90,
|
||||
padding: "0.4rem 0.5rem",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: 6,
|
||||
fontSize: 13,
|
||||
fontFamily: "monospace",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div style={{
|
||||
padding: "1rem",
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: 8,
|
||||
marginBottom: "1.5rem",
|
||||
background: "#fafafa",
|
||||
}}>
|
||||
<p style={{ fontWeight: 600, marginBottom: 8, fontSize: 13, color: "#6b7280" }}>Preview</p>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
padding: "0.5rem 1rem",
|
||||
background: "#fff",
|
||||
borderRadius: 6,
|
||||
border: "1px solid #e5e7eb",
|
||||
}}>
|
||||
{logoSrc && (
|
||||
<img src={logoSrc} alt="" style={{ width: 28, height: 28, objectFit: "contain" }} />
|
||||
)}
|
||||
<strong style={{ color: form.primaryColor }}>{form.businessName}</strong>
|
||||
<span style={{
|
||||
marginLeft: "auto",
|
||||
padding: "0.25rem 0.75rem",
|
||||
borderRadius: 4,
|
||||
color: "#fff",
|
||||
background: form.primaryColor,
|
||||
fontSize: 13,
|
||||
}}>
|
||||
Button
|
||||
</span>
|
||||
<span style={{
|
||||
padding: "0.25rem 0.75rem",
|
||||
borderRadius: 4,
|
||||
color: "#fff",
|
||||
background: form.accentColor,
|
||||
fontSize: 13,
|
||||
}}>
|
||||
Accent
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save */}
|
||||
{message && (
|
||||
<div style={{
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: 6,
|
||||
marginBottom: "1rem",
|
||||
fontSize: 14,
|
||||
background: message.type === "success" ? "#ecfdf5" : "#fef2f2",
|
||||
color: message.type === "success" ? "#065f46" : "#991b1b",
|
||||
border: `1px solid ${message.type === "success" ? "#a7f3d0" : "#fecaca"}`,
|
||||
}}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || !form.businessName.trim()}
|
||||
style={{
|
||||
padding: "0.5rem 1.5rem",
|
||||
borderRadius: 6,
|
||||
border: "none",
|
||||
background: form.primaryColor,
|
||||
color: "#fff",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
cursor: saving ? "wait" : "pointer",
|
||||
opacity: saving ? 0.7 : 1,
|
||||
}}
|
||||
>
|
||||
{saving ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
|
||||
{/* Auth Provider Section — super users only */}
|
||||
{currentUser?.isSuperUser && (
|
||||
<>
|
||||
<hr style={{ margin: "2rem 0", border: "none", borderTop: "1px solid #e5e7eb" }} />
|
||||
<h2>Authentication Provider</h2>
|
||||
<p style={{ color: "#6b7280", marginBottom: "1rem" }}>
|
||||
Configure the SSO provider for sign-in. Changes require a service restart.
|
||||
</p>
|
||||
|
||||
{/* Warning banner */}
|
||||
<div style={{
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: 6,
|
||||
marginBottom: "1rem",
|
||||
fontSize: 13,
|
||||
background: "#fef3c7",
|
||||
color: "#92400e",
|
||||
border: "1px solid #fde68a",
|
||||
}}>
|
||||
⚠️ Changing auth settings will require a service restart. Active sessions will be preserved.
|
||||
</div>
|
||||
|
||||
{/* Environment config banner */}
|
||||
{!authConfig && authLoaded && (
|
||||
<div style={{
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: 6,
|
||||
marginBottom: "1rem",
|
||||
fontSize: 13,
|
||||
background: "#eff6ff",
|
||||
color: "#1e40af",
|
||||
border: "1px solid #bfdbfe",
|
||||
}}>
|
||||
Currently using environment configuration (no DB config set).
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!authLoaded && <p style={{ color: "#6b7280", fontSize: 14 }}>Loading auth provider...</p>}
|
||||
|
||||
{authLoaded && (
|
||||
<>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.875rem", marginBottom: "1rem" }}>
|
||||
{/* Provider ID */}
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4, fontSize: 13 }}>Provider ID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={authForm.providerId}
|
||||
onChange={(e) => setAuthForm((f) => ({ ...f, providerId: e.target.value }))}
|
||||
placeholder="e.g. authentik, okta"
|
||||
style={{ width: "100%", padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Display Name */}
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4, fontSize: 13 }}>Display Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={authForm.displayName}
|
||||
onChange={(e) => setAuthForm((f) => ({ ...f, displayName: e.target.value }))}
|
||||
placeholder="e.g. Company SSO"
|
||||
style={{ width: "100%", padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Issuer URL */}
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4, fontSize: 13 }}>
|
||||
Issuer URL
|
||||
</label>
|
||||
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
|
||||
<input
|
||||
type="url"
|
||||
value={authForm.issuerUrl}
|
||||
onChange={(e) => setAuthForm((f) => ({ ...f, issuerUrl: e.target.value }))}
|
||||
placeholder="https://your-idp.example.com"
|
||||
style={{ flex: 1, padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
<button
|
||||
onClick={handleTestConnection}
|
||||
disabled={testingConnection || !authForm.issuerUrl.trim() || !authForm.clientId.trim()}
|
||||
style={{
|
||||
padding: "0.5rem 0.875rem",
|
||||
borderRadius: 6,
|
||||
border: "1px solid #d1d5db",
|
||||
background: "#fff",
|
||||
cursor: testingConnection || !authForm.issuerUrl.trim() || !authForm.clientId.trim() ? "not-allowed" : "pointer",
|
||||
fontSize: 13,
|
||||
opacity: testingConnection || !authForm.issuerUrl.trim() || !authForm.clientId.trim() ? 0.6 : 1,
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{testingConnection ? "Testing..." : "Test Connection"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Test result */}
|
||||
{testResult && (
|
||||
<div style={{
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: 6,
|
||||
fontSize: 13,
|
||||
background: testResult.ok ? "#ecfdf5" : "#fef2f2",
|
||||
color: testResult.ok ? "#065f46" : "#991b1b",
|
||||
border: `1px solid ${testResult.ok ? "#a7f3d0" : "#fecaca"}`,
|
||||
}}>
|
||||
{testResult.ok ? "✓ Connection successful" : `✗ ${testResult.error}`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Internal Base URL — collapsible */}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setShowInternalBaseUrl((v) => !v)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
fontSize: 13,
|
||||
color: "#4b5563",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{showInternalBaseUrl ? "▾" : "▸"} Internal Base URL
|
||||
<span style={{ fontSize: 11, color: "#9ca3af", fontWeight: 400 }}>(optional — hairpin NAT)</span>
|
||||
</button>
|
||||
{showInternalBaseUrl && (
|
||||
<input
|
||||
type="url"
|
||||
value={authForm.internalBaseUrl}
|
||||
onChange={(e) => setAuthForm((f) => ({ ...f, internalBaseUrl: e.target.value }))}
|
||||
placeholder="http://host.docker.internal:9080"
|
||||
style={{ marginTop: 4, width: "100%", padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Client ID */}
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4, fontSize: 13 }}>Client ID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={authForm.clientId}
|
||||
onChange={(e) => setAuthForm((f) => ({ ...f, clientId: e.target.value }))}
|
||||
style={{ width: "100%", padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Client Secret */}
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4, fontSize: 13 }}>Client Secret</label>
|
||||
<input
|
||||
type="password"
|
||||
value={authSecretTouched ? authForm.clientSecret : (authForm.clientSecret === REDACTED ? "" : authForm.clientSecret)}
|
||||
onChange={(e) => {
|
||||
setAuthSecretTouched(true);
|
||||
setAuthForm((f) => ({ ...f, clientSecret: e.target.value }));
|
||||
}}
|
||||
placeholder={authConfig ? "(unchanged)" : "Required"}
|
||||
style={{ width: "100%", padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
{authConfig && !authSecretTouched && (
|
||||
<p style={{ fontSize: 12, color: "#9ca3af", marginTop: 2 }}>Leave blank to keep existing secret.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scopes */}
|
||||
<div>
|
||||
<label style={{ display: "block", fontWeight: 600, marginBottom: 4, fontSize: 13 }}>Scopes</label>
|
||||
<input
|
||||
type="text"
|
||||
value={authForm.scopes}
|
||||
onChange={(e) => setAuthForm((f) => ({ ...f, scopes: e.target.value }))}
|
||||
style={{ width: "100%", padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 6, fontSize: 14 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Auth messages */}
|
||||
{authMessage && (
|
||||
<div style={{
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: 6,
|
||||
marginBottom: "1rem",
|
||||
fontSize: 14,
|
||||
background: authMessage.type === "success" ? "#ecfdf5" : "#fef2f2",
|
||||
color: authMessage.type === "success" ? "#065f46" : "#991b1b",
|
||||
border: `1px solid ${authMessage.type === "success" ? "#a7f3d0" : "#fecaca"}`,
|
||||
}}>
|
||||
{authMessage.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
<div style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
|
||||
<button
|
||||
onClick={handleAuthSave}
|
||||
disabled={authSaving || !authForm.providerId.trim() || !authForm.issuerUrl.trim() || !authForm.clientId.trim()}
|
||||
style={{
|
||||
padding: "0.5rem 1.25rem",
|
||||
borderRadius: 6,
|
||||
border: "none",
|
||||
background: "#4f8a6f",
|
||||
color: "#fff",
|
||||
fontWeight: 600,
|
||||
fontSize: 14,
|
||||
cursor: authSaving || !authForm.providerId.trim() || !authForm.issuerUrl.trim() || !authForm.clientId.trim() ? "not-allowed" : "pointer",
|
||||
opacity: authSaving ? 0.7 : 1,
|
||||
}}
|
||||
>
|
||||
{authSaving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleResetToEnvDefaults}
|
||||
style={{
|
||||
padding: "0.5rem 1.25rem",
|
||||
borderRadius: 6,
|
||||
border: confirmReset ? "1px solid #dc2626" : "1px solid #d1d5db",
|
||||
background: confirmReset ? "#fef2f2" : "#fff",
|
||||
color: confirmReset ? "#dc2626" : "#6b7280",
|
||||
fontWeight: 500,
|
||||
fontSize: 14,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{confirmReset ? "Confirm Reset to Env Defaults?" : "Reset to Environment Defaults"}
|
||||
</button>
|
||||
{confirmReset && (
|
||||
<button
|
||||
onClick={() => setConfirmReset(false)}
|
||||
style={{
|
||||
padding: "0.5rem 0.75rem",
|
||||
borderRadius: 6,
|
||||
border: "1px solid #d1d5db",
|
||||
background: "#fff",
|
||||
color: "#6b7280",
|
||||
fontSize: 14,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user