Initial commit: Pulse web app

src/pages/ForgotPassword.jsx

@@ -0,0 +1,138 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { Mail, ArrowLeft, Zap, CheckCircle } from 'lucide-react'
+import api from '../api/client'
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [sent, setSent] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      await api.post('/auth/forgot-password', { email })
+      setSent(true)
+    } catch (err) {
+      setError(err.response?.data?.error || 'Ошибка отправки')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (sent) {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4 gradient-mesh bg-surface-50">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="w-full max-w-md"
+        >
+          <div className="card p-10 text-center">
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: 'spring', stiffness: 200 }}
+              className="w-20 h-20 rounded-3xl bg-green-100 flex items-center justify-center mx-auto mb-6"
+            >
+              <CheckCircle className="w-10 h-10 text-green-600" />
+            </motion.div>
+            <h1 className="text-2xl font-display font-bold text-gray-900 mb-2">
+              Письмо отправлено! 📬
+            </h1>
+            <p className="text-gray-500 mb-6">
+              Если аккаунт с email <strong>{email}</strong> существует, мы отправили ссылку для сброса пароля.
+            </p>
+            <Link to="/login" className="btn btn-primary">
+              Вернуться ко входу
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 gradient-mesh bg-surface-50">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md"
+      >
+        <div className="text-center mb-8">
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ type: 'spring', delay: 0.1 }}
+            className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-primary-500 to-primary-700 mb-6 shadow-xl shadow-primary-500/30"
+          >
+            <Mail className="w-10 h-10 text-white" />
+          </motion.div>
+          <h1 className="text-3xl font-display font-bold text-gray-900">
+            Забыли пароль?
+          </h1>
+          <p className="text-gray-500 mt-2">
+            Введи email и мы отправим ссылку для сброса
+          </p>
+        </div>
+
+        <div className="card p-8">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {error && (
+              <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                className="p-4 rounded-2xl bg-red-50 text-red-600 text-sm font-medium"
+              >
+                {error}
+              </motion.div>
+            )}
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-700 mb-2">
+                Email
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="input"
+                placeholder="your@email.com"
+                required
+                autoFocus
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn btn-primary w-full text-lg"
+            >
+              {loading ? 'Отправляем...' : 'Отправить ссылку'}
+            </button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <Link 
+              to="/login" 
+              className="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-medium text-sm"
+            >
+              <ArrowLeft size={16} />
+              Вернуться ко входу
+            </Link>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center gap-2 mt-6 text-gray-400">
+          <Zap size={16} />
+          <span className="text-sm font-medium">Pulse</span>
+        </div>
+      </motion.div>
+    </div>
+  )
+}