components/Settings.tsx - master - KDP/ADOS

components/Settings.tsx
151 строка8 KB
Krylov Dmitry
Рыба
01 янв 2026, 20:44
01 янв 2026, 20:44f51b546

import React, { useState } from 'react';
import { DevOpsSettings } from '../types';

interface SettingsProps {
  currentSettings: DevOpsSettings;
  onSave: (settings: DevOpsSettings) => void;
}

const Settings: React.FC<SettingsProps> = ({ currentSettings, onSave }) => {
  const [formData, setFormData] = useState<DevOpsSettings>(currentSettings);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  return (
    <div className="max-w-md mx-auto space-y-6 pb-12">
      <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-200">
        <h2 className="text-xl font-bold mb-6 flex items-center gap-2 text-slate-800">
          <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          Настройки подключения
        </h2>
        
        <form onSubmit={handleSubmit} className="space-y-4 text-left">
          <div className="bg-amber-50 p-4 rounded-2xl border border-amber-100 mb-6">
            <h4 className="text-amber-800 font-bold text-xs uppercase mb-2 flex items-center gap-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              Решение проблем (CORS)
            </h4>
            <p className="text-[11px] text-amber-700 leading-snug">
              Локальные серверы Azure DevOps часто блокируют запросы из браузера. На Android используйте расширение <strong>"Allow CORS"</strong>. На iOS убедитесь, что сервер разрешает CORS в настройках IIS.
            </p>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Адрес сервера</label>
            <input
              type="url"
              className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
              placeholder="https://tfs.company.com"
              value={formData.serverUrl}
              onChange={e => setFormData({ ...formData, serverUrl: e.target.value })}
              required
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Коллекция</label>
              <input
                type="text"
                className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm"
                placeholder="DefaultCollection"
                value={formData.collection}
                onChange={e => setFormData({ ...formData, collection: e.target.value })}
                required
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Проект</label>
              <input
                type="text"
                className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm"
                placeholder="MyProject"
                value={formData.project}
                onChange={e => setFormData({ ...formData, project: e.target.value })}
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3 pt-2">
            <div>
              <label className="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Домен</label>
              <input
                type="text"
                className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm"
                placeholder="CORP"
                value={formData.domain}
                onChange={e => setFormData({ ...formData, domain: e.target.value })}
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Логин</label>
              <input
                type="text"
                className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm"
                placeholder="ivanov.i"
                value={formData.username}
                onChange={e => setFormData({ ...formData, username: e.target.value })}
                required
              />
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Пароль</label>
            <input
              type="password"
              className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm"
              placeholder="Доменный пароль"
              value={formData.password}
              onChange={e => setFormData({ ...formData, password: e.target.value })}
              required
            />
          </div>

          <button
            type="submit"
            className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl transition-all shadow-lg shadow-blue-200 mt-4 active:scale-[0.98]"
          >
            Сохранить и проверить
          </button>
        </form>
      </div>

      <div className="bg-slate-800 p-6 rounded-3xl text-white shadow-xl text-left">
        <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
          <svg className="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
          Установка на телефон
        </h3>
        <div className="space-y-4">
          <div className="flex gap-3">
            <div className="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold flex-shrink-0">1</div>
            <p className="text-sm opacity-90">Откройте этот сайт в <strong>Chrome</strong> (Android) или <strong>Safari</strong> (iOS).</p>
          </div>
          <div className="flex gap-3">
            <div className="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold flex-shrink-0">2</div>
            <div className="text-sm opacity-90">
              <p><strong>iOS:</strong> Нажмите «Поделиться» → «На экран «Домой».</p>
              <p className="mt-1"><strong>Android:</strong> Нажмите 3 точки → «Установить приложение».</p>
            </div>
          </div>
          <div className="flex gap-3">
            <div className="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold flex-shrink-0">3</div>
            <p className="text-sm opacity-90">Иконка появится на рабочем столе как у обычного приложения.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;