feat: passwordless SMS-only auth (login + registration)

- Single unified flow: phone → SMS code → (if new: enter name)
- POST /api/auth/complete — verifies OTP, logs in or registers
- Removed password from login/register completely
- New users get random password_hash (not used for auth)
- Removed password change section from ProfileModal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/ProfileModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import { X, Camera, Trash2, Save, Lock, LogOut } from 'lucide-react';
+import { X, Camera, Trash2, Save, LogOut } from 'lucide-react';
 import { useStore } from '../store';
 import { useNavigate } from 'react-router-dom';
 import { wsClient } from '../api/ws';
@@ -36,8 +36,6 @@ export default function ProfileModal({ onClose }: Props) {
   const [bio, setBio] = useState(user?.bio || '');
   const [phone, setPhone] = useState(applyPhoneMask(user?.phone || ''));
   const [position, setPosition] = useState(user?.position || '');
-  const [password, setPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
   const [saving, setSaving] = useState(false);
   const [uploadingAvatar, setUploadingAvatar] = useState(false);
   const [error, setError] = useState('');
@@ -50,16 +48,9 @@ export default function ProfileModal({ onClose }: Props) {
     setSuccess('');
     try {
       const body: any = { displayName, bio, phone, position: position || null, username: username !== user?.username ? username : undefined };
-      if (newPassword) {
-        if (!password) { setError('Введите текущий пароль'); setSaving(false); return; }
-        body.password = password;
-        body.newPassword = newPassword;
-      }
       const { data } = await api.put('/api/auth/me', body);
       setUser({ ...user!, ...data });
       localStorage.setItem('jc_user', JSON.stringify({ ...user!, ...data }));
-      setPassword('');
-      setNewPassword('');
       setSuccess('Сохранено');
       setTimeout(() => setSuccess(''), 3000);
     } catch (err: any) {
@@ -208,28 +199,6 @@ export default function ProfileModal({ onClose }: Props) {
             </div>
           </div>
 
-          {/* Password */}
-          <div className="space-y-3 border-t border-gray-100 pt-4">
-            <div className="flex items-center gap-2 text-sm font-medium text-gray-600">
-              <Lock className="w-4 h-4" />
-              Сменить пароль
-            </div>
-            <input
-              type="password"
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-              className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
-              placeholder="Текущий пароль"
-            />
-            <input
-              type="password"
-              value={newPassword}
-              onChange={e => setNewPassword(e.target.value)}
-              className="w-full px-3 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-200"
-              placeholder="Новый пароль"
-            />
-          </div>
-
           {error && <p className="text-red-500 text-sm">{error}</p>}
           {success && <p className="text-green-500 text-sm">{success}</p>}
         </div>

frontend/src/pages/Login.tsx

@@ -25,26 +25,21 @@ function applyPhoneMask(raw: string): string {
   return r;
 }
 
+// step 'phone' → enter phone, request code
+// step 'code'  → enter code (existing user → login)
+// step 'name'  → new user: enter name to complete registration
+type Step = 'phone' | 'code' | 'name';
+
 export default function LoginPage({ onLogin }: Props) {
   const navigate = useNavigate();
-  const [tab, setTab] = useState<'login' | 'register'>('login');
-
-  // Login state
-  const [loginPhone, setLoginPhone] = useState('');
-  const [loginPassword, setLoginPassword] = useState('');
-
-  // Register state — step 1: phone, step 2: code + name + password
-  const [regStep, setRegStep] = useState<1 | 2>(1);
-  const [regPhone, setRegPhone] = useState('');
-  const [regCode, setRegCode] = useState('');
-  const [regName, setRegName] = useState('');
-  const [regPassword, setRegPassword] = useState('');
+  const [step, setStep] = useState<Step>('phone');
+  const [phone, setPhone] = useState('');
+  const [code, setCode] = useState('');
+  const [name, setName] = useState('');
   const [countdown, setCountdown] = useState(0);
-
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
 
-  // Countdown timer for resend
   useEffect(() => {
     if (countdown <= 0) return;
     const t = setTimeout(() => setCountdown(c => c - 1), 1000);
@@ -53,28 +48,14 @@ export default function LoginPage({ onLogin }: Props) {
 
   const inputCls = 'w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition';
 
-  async function handleLogin(e: React.FormEvent) {
-    e.preventDefault();
+  async function sendCode(e?: React.FormEvent) {
+    e?.preventDefault();
     setError('');
     setLoading(true);
     try {
-      const { data } = await api.post('/api/auth/login', { phone: loginPhone, password: loginPassword });
-      onLogin(data.token, data.user);
-      navigate('/');
-    } catch (err: any) {
-      setError(err.response?.data?.error || 'Ошибка входа');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleSendCode(e: React.FormEvent) {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
-    try {
-      await api.post('/api/auth/send-code', { phone: regPhone });
-      setRegStep(2);
+      await api.post('/api/auth/send-code', { phone });
+      setStep('code');
+      setCode('');
       setCountdown(60);
     } catch (err: any) {
       setError(err.response?.data?.error || 'Ошибка отправки SMS');
@@ -83,154 +64,105 @@ export default function LoginPage({ onLogin }: Props) {
     }
   }
 
-  async function handleResendCode() {
-    if (countdown > 0) return;
-    setError('');
-    setLoading(true);
-    try {
-      await api.post('/api/auth/send-code', { phone: regPhone });
-      setCountdown(60);
-    } catch (err: any) {
-      setError(err.response?.data?.error || 'Ошибка отправки SMS');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleRegister(e: React.FormEvent) {
+  async function verifyCode(e: React.FormEvent, displayName?: string) {
     e.preventDefault();
     setError('');
     setLoading(true);
     try {
-      const { data } = await api.post('/api/auth/register', {
-        phone: regPhone, code: regCode, displayName: regName, password: regPassword,
-      });
+      const { data } = await api.post('/api/auth/complete', { phone, code, displayName });
       onLogin(data.token, data.user);
       navigate('/');
     } catch (err: any) {
-      setError(err.response?.data?.error || 'Ошибка регистрации');
+      if (err.response?.data?.isNew) {
+        // New user — ask for name
+        setStep('name');
+        setError('');
+      } else {
+        setError(err.response?.data?.error || 'Ошибка');
+      }
     } finally {
       setLoading(false);
     }
   }
 
-  function switchTab(t: 'login' | 'register') {
-    setTab(t);
-    setError('');
-    setRegStep(1);
-    setRegCode('');
-  }
-
   return (
     <div className="bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4" style={{ minHeight: '100dvh' }}>
       <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-8">
         {/* Logo */}
-        <div className="text-center mb-6">
-          <div className="w-20 h-20 mx-auto mb-4">
-            <img src="/icon-192.png" alt="JaniChat" className="w-20 h-20 rounded-2xl shadow-lg" />
-          </div>
+        <div className="text-center mb-8">
+          <img src="/icon-192.png" alt="JaniChat" className="w-20 h-20 mx-auto mb-4 rounded-2xl shadow-lg" />
           <h1 className="text-2xl font-bold text-gray-900">JaniChat</h1>
+          <p className="text-gray-400 text-sm mt-1">
+            {step === 'phone' && 'Введите номер телефона'}
+            {step === 'code' && 'Введите код из SMS'}
+            {step === 'name' && 'Как вас зовут?'}
+          </p>
         </div>
 
-        {/* Tabs */}
-        <div className="flex bg-gray-100 rounded-xl p-1 mb-6">
-          <button onClick={() => switchTab('login')}
-            className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors ${tab === 'login' ? 'bg-white shadow text-gray-900' : 'text-gray-500'}`}>
-            Вход
-          </button>
-          <button onClick={() => switchTab('register')}
-            className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors ${tab === 'register' ? 'bg-white shadow text-gray-900' : 'text-gray-500'}`}>
-            Регистрация
-          </button>
-        </div>
-
-        {/* ── LOGIN ── */}
-        {tab === 'login' && (
-          <form onSubmit={handleLogin} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Номер телефона</label>
-              <input type="tel" inputMode="numeric" value={loginPhone}
-                onChange={e => setLoginPhone(applyPhoneMask(e.target.value))}
-                className={inputCls} placeholder="+7 (___) ___-__-__" autoComplete="tel" required />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Пароль</label>
-              <input type="password" value={loginPassword}
-                onChange={e => setLoginPassword(e.target.value)}
-                className={inputCls} placeholder="Введите пароль" autoComplete="current-password" required />
-            </div>
+        {/* ── Step 1: Phone ── */}
+        {step === 'phone' && (
+          <form onSubmit={sendCode} className="space-y-4">
+            <input
+              type="tel" inputMode="numeric" value={phone}
+              onChange={e => setPhone(applyPhoneMask(e.target.value))}
+              className={inputCls} placeholder="+7 (___) ___-__-__"
+              autoComplete="tel" autoFocus required
+            />
             {error && <div className="bg-red-50 text-red-600 text-sm px-4 py-3 rounded-xl">{error}</div>}
             <button type="submit" disabled={loading}
               className="w-full bg-blue-500 hover:bg-blue-600 disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition">
-              {loading ? '...' : 'Войти'}
+              {loading ? 'Отправка...' : 'Получить код'}
             </button>
           </form>
         )}
 
-        {/* ── REGISTER step 1: phone ── */}
-        {tab === 'register' && regStep === 1 && (
-          <form onSubmit={handleSendCode} className="space-y-4">
-            <p className="text-sm text-gray-500 text-center">Введите номер — отправим код подтверждения</p>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Номер телефона</label>
-              <input type="tel" inputMode="numeric" value={regPhone}
-                onChange={e => setRegPhone(applyPhoneMask(e.target.value))}
-                className={inputCls} placeholder="+7 (___) ___-__-__" autoComplete="tel" required />
-            </div>
-            {error && <div className="bg-red-50 text-red-600 text-sm px-4 py-3 rounded-xl">{error}</div>}
-            <button type="submit" disabled={loading}
-              className="w-full bg-blue-500 hover:bg-blue-600 disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition">
-              {loading ? 'Отправка...' : 'Получить код по SMS'}
-            </button>
-          </form>
-        )}
-
-        {/* ── REGISTER step 2: code + details ── */}
-        {tab === 'register' && regStep === 2 && (
-          <form onSubmit={handleRegister} className="space-y-4">
-            <div className="text-center text-sm text-gray-500">
-              Код отправлен на <span className="font-medium text-gray-800">{regPhone}</span>
-              <button type="button" onClick={() => { setRegStep(1); setError(''); }}
+        {/* ── Step 2: Code ── */}
+        {step === 'code' && (
+          <form onSubmit={verifyCode} className="space-y-4">
+            <div className="text-center text-sm text-gray-500 mb-2">
+              Код отправлен на <span className="font-medium text-gray-800">{phone}</span>
+              <button type="button" onClick={() => { setStep('phone'); setError(''); }}
                 className="block mx-auto text-blue-500 text-xs mt-1 hover:underline">
                 Изменить номер
               </button>
             </div>
-
-            {/* Code input */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Код из SMS</label>
-              <input type="text" inputMode="numeric" maxLength={4} value={regCode}
-                onChange={e => setRegCode(e.target.value.replace(/\D/g, '').slice(0, 4))}
-                className={`${inputCls} text-center text-2xl tracking-[0.5em] font-bold`}
-                placeholder="_ _ _ _" autoComplete="one-time-code" required />
-              <div className="text-center mt-1">
-                {countdown > 0
-                  ? <span className="text-xs text-gray-400">Повторная отправка через {countdown} сек.</span>
-                  : <button type="button" onClick={handleResendCode} disabled={loading}
-                      className="text-xs text-blue-500 hover:underline">
-                      Отправить ещё раз
-                    </button>
-                }
-              </div>
+            <input
+              type="text" inputMode="numeric" maxLength={4} value={code}
+              onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 4))}
+              className={`${inputCls} text-center text-3xl tracking-[0.6em] font-bold`}
+              placeholder="••••" autoComplete="one-time-code" autoFocus required
+            />
+            <div className="text-center">
+              {countdown > 0
+                ? <span className="text-xs text-gray-400">Повторная отправка через {countdown} сек.</span>
+                : <button type="button" onClick={() => sendCode()} disabled={loading}
+                    className="text-xs text-blue-500 hover:underline">
+                    Отправить ещё раз
+                  </button>
+              }
             </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Ваше имя</label>
-              <input type="text" value={regName}
-                onChange={e => setRegName(e.target.value)}
-                className={inputCls} placeholder="Имя Фамилия" autoComplete="name" required />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Пароль</label>
-              <input type="password" value={regPassword}
-                onChange={e => setRegPassword(e.target.value)}
-                className={inputCls} placeholder="Минимум 6 символов" autoComplete="new-password" required />
-            </div>
-
             {error && <div className="bg-red-50 text-red-600 text-sm px-4 py-3 rounded-xl">{error}</div>}
-            <button type="submit" disabled={loading || regCode.length < 4}
+            <button type="submit" disabled={loading || code.length < 4}
               className="w-full bg-blue-500 hover:bg-blue-600 disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition">
-              {loading ? '...' : 'Зарегистрироваться'}
+              {loading ? '...' : 'Продолжить'}
+            </button>
+          </form>
+        )}
+
+        {/* ── Step 3: Name (new user only) ── */}
+        {step === 'name' && (
+          <form onSubmit={e => verifyCode(e, name)} className="space-y-4">
+            <p className="text-sm text-gray-500 text-center">Вы регистрируетесь впервые</p>
+            <input
+              type="text" value={name}
+              onChange={e => setName(e.target.value)}
+              className={inputCls} placeholder="Ваше имя"
+              autoComplete="name" autoFocus required
+            />
+            {error && <div className="bg-red-50 text-red-600 text-sm px-4 py-3 rounded-xl">{error}</div>}
+            <button type="submit" disabled={loading || !name.trim()}
+              className="w-full bg-blue-500 hover:bg-blue-600 disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition">
+              {loading ? '...' : 'Создать аккаунт'}
             </button>
           </form>
         )}