Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edit Registier link

Browse Source
This commit is contained in:
FlorianSpeicher
2025-06-11 14:59:52 +02:00
parent 29aa84d0f1
commit 0e9dd03e56
1 changed files with 111 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
01-frontend/src/helper/navbar/LoginDialog.tsx
View File

@@ -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,37 +9,114 @@ type LoginDialogProps = {
setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string }>>;
};
const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, loginData, setLoginData }) => (
<Dialog open={open} onClose={onClose}>
<DialogTitle>Login</DialogTitle>
<DialogContent>
<TextField
margin="dense"
label="E-Mail"
type="email"
fullWidth
value={loginData.email}
onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
/>
<TextField
autoFocus
margin="dense"
label="Passwort"
type="password"
fullWidth
value={loginData.password}
onChange={e => setLoginData(prev => ({ ...prev, password: e.target.value }))}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="secondary">
Abbrechen
</Button>
<Button onClick={onSubmit} color="primary" variant="contained">
Login
</Button>
</DialogActions>
</Dialog>
);
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>{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"
type="email"
fullWidth
value={loginData.email}
onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
/>
<TextField
autoFocus
margin="dense"
label="Passwort"
type="password"
fullWidth
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;