fix idp on started

apps/frontend/components/id/messaging-settings-section.tsx

@@ -1,12 +1,17 @@
 'use client';
 
-import { Loader2, Mail, MessageSquare, Save, Send, ToggleLeft, ToggleRight } from 'lucide-react';
+import { Loader2, Mail, MessageSquare, Save, Send } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { PhoneInput, phoneCountries } from '@/components/ui/phone-input';
-import { apiFetch, buildSystemSettingPayload, SystemSetting } from '@/lib/api';
-import { getSettingMeta, isSettingVisible, MESSAGING_SETTING_KEYS } from '@/lib/system-settings-catalog';
+import { apiFetch, SystemSetting } from '@/lib/api';
+import {
+  EMAIL_SETTING_KEYS,
+  isSettingVisible,
+  SMS_SETTING_KEYS
+} from '@/lib/system-settings-catalog';
+import { SettingsFieldRow } from '@/components/id/settings-field-row';
 
 function parseBoolean(value: string) {
   return ['true', '1', 'yes'].includes(value.trim().toLowerCase());
@@ -15,9 +20,9 @@ function parseBoolean(value: string) {
 interface MessagingSettingsSectionProps {
   settings: SystemSetting[];
   token: string | null;
-  savingKey: string | null;
+  savingGroup: string | null;
   onUpdateValue: (key: string, value: string) => void;
-  onSave: (setting: SystemSetting) => Promise<void>;
+  onSaveGroup: (groupKey: string, groupSettings: SystemSetting[]) => Promise<void>;
   showToast: (message: string) => void;
 }
 
@@ -46,12 +51,60 @@ function shouldShowMessagingField(setting: SystemSetting, settings: SystemSettin
   return true;
 }
 
+function MessagingBlock({
+  title,
+  description,
+  groupKey,
+  blockSettings,
+  allSettings,
+  savingGroup,
+  onUpdateValue,
+  onSaveGroup
+}: {
+  title: string;
+  description: string;
+  groupKey: string;
+  blockSettings: SystemSetting[];
+  allSettings: SystemSetting[];
+  savingGroup: string | null;
+  onUpdateValue: (key: string, value: string) => void;
+  onSaveGroup: (groupKey: string, groupSettings: SystemSetting[]) => Promise<void>;
+}) {
+  const visibleSettings = blockSettings.filter((setting) => shouldShowMessagingField(setting, allSettings));
+  const saving = savingGroup === groupKey;
+
+  return (
+    <div className="rounded-[24px] bg-[#f4f5f8] p-5">
+      <div className="mb-4 flex flex-col gap-3 border-b border-[#e0e3ea] pb-4 md:flex-row md:items-start md:justify-between">
+        <div>
+          <h4 className="text-lg font-medium">{title}</h4>
+          <p className="mt-1 text-sm text-[#667085]">{description}</p>
+        </div>
+        <Button disabled={saving || visibleSettings.length === 0} onClick={() => void onSaveGroup(groupKey, blockSettings)}>
+          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+          Сохранить блок
+        </Button>
+      </div>
+
+      <div>
+        {visibleSettings.map((setting) => (
+          <SettingsFieldRow
+            key={setting.key}
+            setting={setting}
+            onChange={(value) => onUpdateValue(setting.key, value)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export function MessagingSettingsSection({
   settings,
   token,
-  savingKey,
+  savingGroup,
   onUpdateValue,
-  onSave,
+  onSaveGroup,
   showToast
 }: MessagingSettingsSectionProps) {
   const [testEmail, setTestEmail] = useState('');
@@ -59,8 +112,12 @@ export function MessagingSettingsSection({
   const [testPhoneCountry, setTestPhoneCountry] = useState(phoneCountries[0]);
   const [testingChannel, setTestingChannel] = useState<'email' | 'sms' | null>(null);
 
-  const messagingSettings = useMemo(
-    () => settings.filter((item) => MESSAGING_SETTING_KEYS.includes(item.key)),
+  const emailSettings = useMemo(
+    () => settings.filter((item) => EMAIL_SETTING_KEYS.includes(item.key)),
+    [settings]
+  );
+  const smsSettings = useMemo(
+    () => settings.filter((item) => SMS_SETTING_KEYS.includes(item.key)),
     [settings]
   );
 
@@ -90,8 +147,12 @@ export function MessagingSettingsSection({
     }
   }
 
-  const emailEnabled = parseBoolean(getSettingValue(messagingSettings, 'EMAIL_ENABLED'));
-  const smsEnabled = parseBoolean(getSettingValue(messagingSettings, 'SMS_ENABLED'));
+  const emailEnabled = parseBoolean(getSettingValue(emailSettings, 'EMAIL_ENABLED'));
+  const smsEnabled = parseBoolean(getSettingValue(smsSettings, 'SMS_ENABLED'));
+  const emailReady =
+    emailEnabled ||
+    (Boolean(getSettingValue(emailSettings, 'EMAIL_SMTP_HOST')) &&
+      Boolean(getSettingValue(emailSettings, 'EMAIL_FROM_ADDRESS')));
 
   return (
     <section className="mb-10">
@@ -100,67 +161,33 @@ export function MessagingSettingsSection({
         <div>
           <h3 className="text-xl font-medium">Email и SMS провайдеры</h3>
           <p className="mt-1 text-sm text-[#667085]">
-            Настройте SMTP и SMS — OTP-коды при входе и регистрации будут отправляться автоматически.
+            Измените параметры блока и нажмите «Сохранить блок» — все поля блока сохранятся одним действием.
           </p>
         </div>
       </div>
 
-      <div className="space-y-3">
-        {messagingSettings.filter((setting) => shouldShowMessagingField(setting, messagingSettings)).map((setting) => {
-          const meta = getSettingMeta(setting.key);
-          const label = meta?.label ?? setting.key;
-          const type = meta?.type ?? 'text';
+      <div className="space-y-4">
+        <MessagingBlock
+          title="Email (SMTP)"
+          description="Отправка OTP-кодов на почту через SMTP-провайдера."
+          groupKey="messaging-email"
+          blockSettings={emailSettings}
+          allSettings={settings}
+          savingGroup={savingGroup}
+          onUpdateValue={onUpdateValue}
+          onSaveGroup={onSaveGroup}
+        />
 
-          return (
-            <div key={setting.key} className="rounded-[24px] bg-[#f4f5f8] p-5">
-              <div className="flex flex-col gap-4 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 flex-wrap items-center gap-3">
-                  {type === 'boolean' ? (
-                    <button
-                      type="button"
-                      aria-label={label}
-                      onClick={() => onUpdateValue(setting.key, 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 rounded-xl border border-[#e4e7ec] bg-white px-3 text-sm outline-none focus:border-[#98a2b3]"
-                      value={setting.value}
-                      onChange={(event) => onUpdateValue(setting.key, event.target.value)}
-                    >
-                      {(meta?.options ?? []).map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
-                  ) : (
-                    <div className="flex items-center gap-2">
-                      <Input
-                        type={setting.isSecret ? 'password' : type === 'number' ? 'number' : 'text'}
-                        value={setting.value}
-                        className={setting.isSecret ? 'w-[240px] bg-white' : 'w-[220px] bg-white'}
-                        onChange={(event) => onUpdateValue(setting.key, event.target.value)}
-                      />
-                      {meta?.unit ? <span className="text-sm text-[#667085]">{meta.unit}</span> : null}
-                    </div>
-                  )}
-
-                  <Button disabled={savingKey === setting.key} onClick={() => void onSave(setting)}>
-                    {savingKey === setting.key ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-                    Сохранить
-                  </Button>
-                </div>
-              </div>
-            </div>
-          );
-        })}
+        <MessagingBlock
+          title="SMS"
+          description="Отправка OTP-кодов по SMS через sms.ru или smsc.ru."
+          groupKey="messaging-sms"
+          blockSettings={smsSettings}
+          allSettings={settings}
+          savingGroup={savingGroup}
+          onUpdateValue={onUpdateValue}
+          onSaveGroup={onSaveGroup}
+        />
       </div>
 
       <div className="mt-6 grid gap-4 md:grid-cols-2">
@@ -170,7 +197,7 @@ export function MessagingSettingsSection({
             Тест email
           </div>
           <p className="mt-2 text-sm text-[#667085]">
-            {emailEnabled ? 'Отправит тестовый OTP-код через SMTP.' : 'Сначала включите Email и сохраните настройки SMTP.'}
+            {emailReady ? 'Отправит тестовый OTP-код через SMTP.' : 'Сначала сохраните блок Email (SMTP).'}
           </p>
           <Input
             className="mt-4 bg-[#f9fafb]"
@@ -179,7 +206,7 @@ export function MessagingSettingsSection({
             value={testEmail}
             onChange={(event) => setTestEmail(event.target.value)}
           />
-          <Button className="mt-3" disabled={!emailEnabled || testingChannel === 'email'} onClick={() => void sendTest('email')}>
+          <Button className="mt-3" disabled={!emailReady || testingChannel === 'email'} onClick={() => void sendTest('email')}>
             {testingChannel === 'email' ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
             Отправить тест
           </Button>
@@ -191,7 +218,7 @@ export function MessagingSettingsSection({
             Тест SMS
           </div>
           <p className="mt-2 text-sm text-[#667085]">
-            {smsEnabled ? 'Отправит тестовый OTP-код через SMS-провайдера.' : 'Сначала включите SMS и сохраните ключ API.'}
+            {smsEnabled ? 'Отправит тестовый OTP-код через SMS-провайдера.' : 'Сначала сохраните блок SMS.'}
           </p>
           <div className="mt-4">
             <PhoneInput