Basic frontend
This commit is contained in:
James Pattinson
316
frontend/src/pages/Dashboard.tsx
Normal file
316
frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,316 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { authService, userService, membershipService, paymentService, User, Membership, Payment } from '../services/membershipService';
|
||||
import MembershipSetup from '../components/MembershipSetup';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [memberships, setMemberships] = useState<Membership[]>([]);
|
||||
const [payments, setPayments] = useState<Payment[]>([]);
|
||||
const [allPayments, setAllPayments] = useState<Payment[]>([]);
|
||||
const [allMemberships, setAllMemberships] = useState<Membership[]>([]);
|
||||
const [allUsers, setAllUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showMembershipSetup, setShowMembershipSetup] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authService.isAuthenticated()) {
|
||||
navigate('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [userData, membershipData, paymentData] = await Promise.all([
|
||||
userService.getCurrentUser(),
|
||||
membershipService.getMyMemberships(),
|
||||
paymentService.getMyPayments()
|
||||
]);
|
||||
|
||||
setUser(userData);
|
||||
setMemberships(membershipData);
|
||||
setPayments(paymentData);
|
||||
|
||||
// Load admin data if user is admin
|
||||
if (userData.role === 'admin' || userData.role === 'super_admin') {
|
||||
const [allPaymentsData, allMembershipsData, allUsersData] = await Promise.all([
|
||||
paymentService.getAllPayments(),
|
||||
membershipService.getAllMemberships(),
|
||||
userService.getAllUsers()
|
||||
]);
|
||||
setAllPayments(allPaymentsData);
|
||||
setAllMemberships(allMembershipsData);
|
||||
setAllUsers(allUsersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
authService.logout();
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const handleMembershipSetup = () => {
|
||||
setShowMembershipSetup(true);
|
||||
};
|
||||
|
||||
const handleMembershipCreated = () => {
|
||||
setShowMembershipSetup(false);
|
||||
loadData(); // Reload data to show the new membership
|
||||
};
|
||||
|
||||
const handleCancelMembershipSetup = () => {
|
||||
setShowMembershipSetup(false);
|
||||
};
|
||||
|
||||
const getUserName = (userId: number): string => {
|
||||
const user = allUsers.find(u => u.id === userId);
|
||||
return user ? `${user.first_name} ${user.last_name}` : `User #${userId}`;
|
||||
};
|
||||
|
||||
const handleApprovePayment = async (paymentId: number, membershipId?: number) => {
|
||||
try {
|
||||
// Approve the payment
|
||||
await paymentService.updatePayment(paymentId, { status: 'completed' });
|
||||
|
||||
// If there's an associated membership, activate it
|
||||
if (membershipId) {
|
||||
await membershipService.updateMembership(membershipId, { status: 'active' });
|
||||
}
|
||||
|
||||
// Reload data
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
console.error('Failed to approve payment:', error);
|
||||
alert('Failed to approve payment. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusClass = (status: string) => {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'active':
|
||||
return 'status-active';
|
||||
case 'pending':
|
||||
return 'status-pending';
|
||||
case 'expired':
|
||||
case 'cancelled':
|
||||
return 'status-expired';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="container">Loading...</div>;
|
||||
}
|
||||
|
||||
if (showMembershipSetup) {
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar">
|
||||
<h1>SASA Membership Portal</h1>
|
||||
<button onClick={handleLogout}>Log Out</button>
|
||||
</nav>
|
||||
<div className="container">
|
||||
<MembershipSetup
|
||||
onMembershipCreated={handleMembershipCreated}
|
||||
onCancel={handleCancelMembershipSetup}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const activeMembership = memberships.find(m => m.status === 'active') || memberships[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar">
|
||||
<h1>SASA Membership Portal</h1>
|
||||
<button onClick={handleLogout}>Log Out</button>
|
||||
</nav>
|
||||
|
||||
<div className="container">
|
||||
<h2 style={{ marginTop: '20px', marginBottom: '20px' }}>Welcome, {user?.first_name}!</h2>
|
||||
|
||||
<div className="dashboard-grid">
|
||||
{/* Profile Card */}
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Your Profile</h3>
|
||||
<p><strong>Name:</strong> {user?.first_name} {user?.last_name}</p>
|
||||
<p><strong>Email:</strong> {user?.email}</p>
|
||||
{user?.phone && <p><strong>Phone:</strong> {user.phone}</p>}
|
||||
{user?.address && <p><strong>Address:</strong> {user.address}</p>}
|
||||
<p><strong>Member since:</strong> {user && formatDate(user.created_at)}</p>
|
||||
</div>
|
||||
|
||||
{/* Membership Card */}
|
||||
{activeMembership ? (
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Your Membership</h3>
|
||||
<h4 style={{ color: '#0066cc', marginBottom: '8px' }}>{activeMembership.tier.name}</h4>
|
||||
<p><strong>Status:</strong> <span className={`status-badge ${getStatusClass(activeMembership.status)}`}>{activeMembership.status.toUpperCase()}</span></p>
|
||||
<p><strong>Annual Fee:</strong> £{activeMembership.tier.annual_fee.toFixed(2)}</p>
|
||||
<p><strong>Start Date:</strong> {formatDate(activeMembership.start_date)}</p>
|
||||
<p><strong>Renewal Date:</strong> {formatDate(activeMembership.end_date)}</p>
|
||||
<p><strong>Auto Renew:</strong> {activeMembership.auto_renew ? 'Yes' : 'No'}</p>
|
||||
<div style={{ marginTop: '12px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
|
||||
<strong>Benefits:</strong>
|
||||
<p style={{ marginTop: '4px', fontSize: '14px' }}>{activeMembership.tier.benefits}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Set Up Your Membership</h3>
|
||||
<p>Choose from our membership tiers to get started with SASA benefits.</p>
|
||||
<p style={{ marginTop: '12px', color: '#666' }}>Available tiers include Personal, Aircraft Owners, and Corporate memberships.</p>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleMembershipSetup}
|
||||
style={{ marginTop: '16px' }}
|
||||
>
|
||||
Set Up Membership
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Payment History */}
|
||||
<div className="card" style={{ marginTop: '20px' }}>
|
||||
<h3 style={{ marginBottom: '16px' }}>Payment History</h3>
|
||||
{payments.length > 0 ? (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #ddd' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Date</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Amount</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Method</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{payments.map(payment => (
|
||||
<tr key={payment.id} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '12px' }}>{payment.payment_date ? formatDate(payment.payment_date) : 'Pending'}</td>
|
||||
<td style={{ padding: '12px' }}>£{payment.amount.toFixed(2)}</td>
|
||||
<td style={{ padding: '12px' }}>{payment.payment_method}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span className={`status-badge ${getStatusClass(payment.status)}`}>
|
||||
{payment.status.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<p style={{ color: '#666' }}>No payment history available.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Admin Section */}
|
||||
{(user?.role === 'admin' || user?.role === 'super_admin') && (
|
||||
<div className="card" style={{ marginTop: '20px' }}>
|
||||
<h3 style={{ marginBottom: '16px' }}>Admin Panel - Pending Approvals</h3>
|
||||
|
||||
{/* Pending Payments */}
|
||||
{allPayments.filter(p => p.status === 'pending').length > 0 && (
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<h4 style={{ marginBottom: '12px' }}>Pending Payments</h4>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #ddd' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>User</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Amount</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Method</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Membership</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allPayments.filter(p => p.status === 'pending').map(payment => {
|
||||
const membership = allMemberships.find(m => m.id === payment.membership_id);
|
||||
return (
|
||||
<tr key={payment.id} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '12px' }}>{getUserName(payment.user_id)}</td>
|
||||
<td style={{ padding: '12px' }}>£{payment.amount.toFixed(2)}</td>
|
||||
<td style={{ padding: '12px' }}>{payment.payment_method}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{membership ? `${membership.tier.name} (${membership.status})` : 'N/A'}
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => handleApprovePayment(payment.id, payment.membership_id || undefined)}
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Memberships */}
|
||||
{allMemberships.filter(m => m.status === 'pending').length > 0 && (
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '12px' }}>Pending Memberships</h4>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #ddd' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>User</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Tier</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Start Date</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allMemberships.filter(m => m.status === 'pending').map(membership => (
|
||||
<tr key={membership.id} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '12px' }}>{getUserName(membership.user_id)}</td>
|
||||
<td style={{ padding: '12px' }}>{membership.tier.name}</td>
|
||||
<td style={{ padding: '12px' }}>{formatDate(membership.start_date)}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span className={`status-badge ${getStatusClass(membership.status)}`}>
|
||||
{membership.status.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{allPayments.filter(p => p.status === 'pending').length === 0 &&
|
||||
allMemberships.filter(m => m.status === 'pending').length === 0 && (
|
||||
<p style={{ color: '#666' }}>No pending approvals at this time.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
73
frontend/src/pages/ForgotPassword.tsx
Normal file
73
frontend/src/pages/ForgotPassword.tsx
Normal file
@@ -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;
|
||||
101
frontend/src/pages/Login.tsx
Normal file
101
frontend/src/pages/Login.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { authService, LoginData } from '../services/membershipService';
|
||||
|
||||
const Login: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState<LoginData>({
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await authService.login(formData);
|
||||
navigate('/dashboard');
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Login failed. Please check your credentials.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<h2>Welcome Back</h2>
|
||||
<p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
|
||||
Log in to your membership account
|
||||
</p>
|
||||
|
||||
{error && <div className="alert alert-error">{error}</div>}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
disabled={loading}
|
||||
style={{ width: '100%', marginTop: '16px' }}
|
||||
>
|
||||
{loading ? 'Logging in...' : 'Log In'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="form-footer">
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Link to="/forgot-password" style={{ color: '#0066cc', textDecoration: 'none' }}>
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => navigate('/register')}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
Join as New User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
144
frontend/src/pages/Register.tsx
Normal file
144
frontend/src/pages/Register.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { authService, RegisterData } from '../services/membershipService';
|
||||
|
||||
const Register: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState<RegisterData>({
|
||||
email: '',
|
||||
password: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
phone: '',
|
||||
address: ''
|
||||
});
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await authService.register(formData);
|
||||
alert('Registration successful! Please check your email. You can now log in.');
|
||||
navigate('/login');
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Registration failed. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<h2>Create Your Account</h2>
|
||||
<p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
|
||||
Join Swansea Airport Stakeholders Alliance
|
||||
</p>
|
||||
|
||||
{error && <div className="alert alert-error">{error}</div>}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="first_name">First Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
value={formData.first_name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="last_name">Last Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
value={formData.last_name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email Address *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Password *</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
<small style={{ color: '#666', fontSize: '12px' }}>
|
||||
Minimum 8 characters
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="phone">Phone (optional)</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="address">Address (optional)</label>
|
||||
<textarea
|
||||
id="address"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
disabled={loading}
|
||||
style={{ width: '100%', marginTop: '16px' }}
|
||||
>
|
||||
{loading ? 'Creating Account...' : 'Create Account'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="form-footer">
|
||||
Already have an account? <a href="/login">Log in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
128
frontend/src/pages/ResetPassword.tsx
Normal file
128
frontend/src/pages/ResetPassword.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { authService, ResetPasswordData } from '../services/membershipService';
|
||||
|
||||
const ResetPassword: React.FC = () => {
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [token, setToken] = useState('');
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
const tokenParam = searchParams.get('token');
|
||||
if (tokenParam) {
|
||||
setToken(tokenParam);
|
||||
} else {
|
||||
setError('Invalid reset link. Please request a new password reset.');
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
setMessage('');
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError('Passwords do not match.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
setError('Password must be at least 8 characters long.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data: ResetPasswordData = { token, new_password: newPassword };
|
||||
await authService.resetPassword(data);
|
||||
setMessage('Password has been reset successfully. You can now log in with your new password.');
|
||||
setTimeout(() => {
|
||||
navigate('/login');
|
||||
}, 3000);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'An error occurred. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<h2>Invalid Reset Link</h2>
|
||||
<p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
|
||||
This password reset link is invalid or has expired. Please request a new password reset.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => navigate('/forgot-password')}
|
||||
className="btn btn-primary"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
Request New Reset Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<h2>Reset Password</h2>
|
||||
<p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
|
||||
Enter your new password below. Make sure it's at least 8 characters long.
|
||||
</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="newPassword">New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="confirmPassword">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
disabled={loading}
|
||||
style={{ width: '100%', marginTop: '16px' }}
|
||||
>
|
||||
{loading ? 'Resetting...' : 'Reset Password'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResetPassword;
|
||||
Reference in New Issue
Block a user