Add files via upload

components/PasswordReset.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { Box, Button, TextField, Typography, Snackbar, Alert } from '@mui/material';
+import { auth } from '../utils/firebaseConfig';
+import { sendPasswordResetEmail } from 'firebase/auth';
+
+const PasswordReset = () => {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handlePasswordReset = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await sendPasswordResetEmail(auth, email);
+      setSuccess(true);
+    } catch (err: unknown) {
+      setError('Failed to send password reset email. Please check the email address and try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box sx={{ mt: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        Reset Password
+      </Typography>
+      <TextField
+        label="Email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+        fullWidth
+        margin="normal"
+      />
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={handlePasswordReset}
+        disabled={loading}
+        sx={{ mt: 2 }}
+      >
+        {loading ? 'Sending...' : 'Send Password Reset Email'}
+      </Button>
+      <Snackbar open={success} autoHideDuration={6000} onClose={() => setSuccess(false)}>
+        <Alert onClose={() => setSuccess(false)} severity="success" sx={{ width: '100%' }}>
+          Password reset email sent successfully!
+        </Alert>
+      </Snackbar>
+      {error && (
+        <Typography color="error" sx={{ mt: 2 }}>
+          {error}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export default PasswordReset;