Basic frontend

2025-11-10 14:51:15 +00:00
parent 3751ee0076
commit 93aeda8e83
27 changed files with 1828 additions and 2 deletions
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { authService, ForgotPasswordData } from '../services/membershipService';
+
+const ForgotPassword: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setMessage('');
+
+    try {
+      const data: ForgotPasswordData = { email };
+      await authService.forgotPassword(data);
+      setMessage('If an account with this email exists, a password reset link has been sent.');
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'An error occurred. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      <div className="auth-card">
+        <h2>Forgot Password</h2>
+        <p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
+          Enter your email address and we'll send you a link to reset your password.
+        </p>
+
+        {error && <div className="alert alert-error">{error}</div>}
+        {message && <div className="alert alert-success">{message}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="email">Email Address</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              placeholder="Enter your email address"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={loading}
+            style={{ width: '100%', marginTop: '16px' }}
+          >
+            {loading ? 'Sending...' : 'Send Reset Link'}
+          </button>
+        </form>
+
+        <div className="form-footer">
+          <Link to="/login" style={{ color: '#0066cc', textDecoration: 'none' }}>
+            Back to login
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;