fix idp on started

2026-06-24 17:34:55 +03:00
parent e60d55f6bd
commit b6987f4aea
10 changed files with 556 additions and 225 deletions
--- a/apps/frontend/components/id/settings-field-row.tsx
+++ b/apps/frontend/components/id/settings-field-row.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { ToggleLeft, ToggleRight } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { SystemSetting } from '@/lib/api';
+import { getSettingMeta } from '@/lib/system-settings-catalog';
+
+function parseBoolean(value: string) {
+  return ['true', '1', 'yes'].includes(value.trim().toLowerCase());
+}
+
+interface SettingsFieldRowProps {
+  setting: SystemSetting;
+  onChange: (value: string) => void;
+}
+
+export function SettingsFieldRow({ setting, onChange }: SettingsFieldRowProps) {
+  const meta = getSettingMeta(setting.key);
+  const label = meta?.label ?? setting.key;
+  const type = meta?.type ?? 'text';
+
+  return (
+    <div className="flex flex-col gap-3 border-b border-[#e8eaef] py-4 last:border-b-0 last:pb-0 first:pt-0 md:flex-row md:items-center md:justify-between">
+      <div className="min-w-0 flex-1">
+        <div className="font-semibold">{label}</div>
+        <p className="mt-1 text-sm text-[#667085]">{meta?.hint ?? setting.description ?? setting.key}</p>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        {type === 'boolean' ? (
+          <button
+            type="button"
+            aria-label={label}
+            onClick={() => onChange(parseBoolean(setting.value) ? 'false' : 'true')}
+          >
+            {parseBoolean(setting.value) ? (
+              <ToggleRight className="h-9 w-9 text-green-600" />
+            ) : (
+              <ToggleLeft className="h-9 w-9 text-[#a8adbc]" />
+            )}
+          </button>
+        ) : type === 'select' ? (
+          <select
+            className="h-10 min-w-[220px] rounded-xl border border-[#e4e7ec] bg-white px-3 text-sm outline-none focus:border-[#98a2b3]"
+            value={setting.value}
+            onChange={(event) => onChange(event.target.value)}
+          >
+            {(meta?.options ?? []).map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <>
+            <Input
+              type={setting.isSecret ? 'password' : type === 'number' ? 'number' : 'text'}
+              value={setting.value}
+              className={setting.isSecret ? 'w-full min-w-[240px] bg-white md:w-[280px]' : 'w-full min-w-[180px] bg-white md:w-[220px]'}
+              onChange={(event) => onChange(event.target.value)}
+            />
+            {meta?.unit ? <span className="text-sm text-[#667085]">{meta.unit}</span> : null}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}