Edit Registier link
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button } from "@mui/material";
|
||||
import React from "react";
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Box, Link } from "@mui/material";
|
||||
import React, { useState } from "react";
|
||||
|
||||
type LoginDialogProps = {
|
||||
open: boolean;
|
||||
@@ -9,10 +9,49 @@ type LoginDialogProps = {
|
||||
setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string }>>;
|
||||
};
|
||||
|
||||
const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, loginData, setLoginData }) => (
|
||||
const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, loginData, setLoginData }) => {
|
||||
const [showRegister, setShowRegister] = useState(false);
|
||||
const [registerData, setRegisterData] = useState({ email: "", password: "", confirmPassword: "" });
|
||||
|
||||
const handleRegister = () => {
|
||||
setShowRegister(false);
|
||||
setRegisterData({ email: "", password: "", confirmPassword: "" });
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose}>
|
||||
<DialogTitle>Login</DialogTitle>
|
||||
<DialogTitle>{showRegister ? "Registrieren" : "Login"}</DialogTitle>
|
||||
<DialogContent>
|
||||
{showRegister ? (
|
||||
<>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="E-Mail"
|
||||
type="email"
|
||||
fullWidth
|
||||
value={registerData.email}
|
||||
onChange={e => setRegisterData(prev => ({ ...prev, email: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="Passwort"
|
||||
type="password"
|
||||
fullWidth
|
||||
value={registerData.password}
|
||||
onChange={e => setRegisterData(prev => ({ ...prev, password: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="Passwort wiederholen"
|
||||
type="password"
|
||||
fullWidth
|
||||
value={registerData.confirmPassword}
|
||||
onChange={e => setRegisterData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="E-Mail"
|
||||
@@ -30,16 +69,54 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, logi
|
||||
value={loginData.password}
|
||||
onChange={e => setLoginData(prev => ({ ...prev, password: e.target.value }))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="secondary">
|
||||
Abbrechen
|
||||
</Button>
|
||||
{showRegister ? (
|
||||
<>
|
||||
<Button onClick={handleRegister} color="primary" variant="contained">
|
||||
Registrieren
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button onClick={onSubmit} color="primary" variant="contained">
|
||||
Login
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</DialogActions>
|
||||
{showRegister ? (
|
||||
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
onClick={() => setShowRegister(false)}
|
||||
color="primary"
|
||||
underline="hover"
|
||||
>
|
||||
Zurück zum Login
|
||||
</Link>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
onClick={() => setShowRegister(true)}
|
||||
color="primary"
|
||||
underline="hover"
|
||||
>
|
||||
Noch kein Konto? Registrieren
|
||||
</Link>
|
||||
</Box>
|
||||
)}
|
||||
</Dialog>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginDialog;
|
||||
Reference in New Issue
Block a user