Files
rentierroulette/src/components/ForgotPassword.tsx
2025-11-06 21:51:00 +01:00

62 lines
2.0 KiB
TypeScript

import * as React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import OutlinedInput from '@mui/material/OutlinedInput';
interface ForgotPasswordProps {
open: boolean;
handleClose: () => void;
}
export default function ForgotPassword({ open, handleClose }: ForgotPasswordProps) {
return (
<Dialog
open={open}
onClose={handleClose}
slotProps={{
paper: {
component: 'form',
onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
handleClose();
},
sx: { backgroundImage: 'none' },
},
}}
>
<DialogTitle>Gruppencode vergessen</DialogTitle>
<DialogContent
sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}
>
<DialogContentText>
Gib deine E-Mail Adresse ein und wir senden dir eine E-Mail mit deinem Gruppencode zu.
</DialogContentText>
<OutlinedInput
autoFocus
required
margin="dense"
id="email"
name="email"
label="E-Mail Adresse"
placeholder="ren@tier.de"
type="email"
fullWidth
/>
</DialogContent>
<DialogActions sx={{ pb: 3, px: 3 }}>
<Button onClick={handleClose}>Cancel</Button>
<Button variant="contained" type="submit">
Continue
</Button>
</DialogActions>
</Dialog>
);
}