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

Moved Login dialog to own file

Browse Source
This commit is contained in:
FlorianSpeicher
2025-06-11 14:32:05 +02:00
parent c476da6969
commit ceabb9d9b0
3 changed files with 68 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
01-frontend/src/helper/navbar/LoginDialog.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button } from "@mui/material";
import React from "react";
type LoginDialogProps = {
open: boolean;
onClose: () => void;
onSubmit: () => void;
loginData: { email: string; password: string };
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>
);
export default LoginDialog;

18
01-frontend/src/helper/navbar/LoginPopUp.tsx
View File

@@ -1,18 +0,0 @@
export default function LoginPopUp() {
return (
<div className="login-popup">
<h2>Login</h2>
<form>
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" id="username" name="username" required />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" id="password" name="password" required />
</div>
<button type="submit">Login</button>
</form>
</div>
);
}

57
01-frontend/src/helper/navbar/NavBar.tsx
View File

@@ -1,7 +1,7 @@
import AdbIcon from '@mui/icons-material/Adb';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import { Autocomplete, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
import { Autocomplete, TextField } from '@mui/material';
import AppBar from '@mui/material/AppBar';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
@@ -18,9 +18,10 @@ import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import Item from '../../components/Item';
import ThemeToggle from '../../theme/ThemeToggle';
import { fetchItemList } from '../query/Queries';
import './NavBar.css';
import { useAccount } from '../AccountProvider';
import { fetchItemList } from '../query/Queries';
import LoginDialog from './LoginDialog';
import './NavBar.css';
export default function NavBar() {
const { t } = useTranslation();
@@ -28,7 +29,7 @@ export default function NavBar() {
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
const { login } = useAccount();
const { user, login, logout } = useAccount();
const [loginOpen, setLoginOpen] = React.useState(false);
const [loginData, setLoginData] = React.useState({ password: '', email: '' });
@@ -37,10 +38,17 @@ export default function NavBar() {
const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
const pageKeys = ['components', 'checkout', 'contact', 'admin'];
const settingKeys = ['account', 'orders', 'login'];
const pages = pageKeys.map(key => ({ key, label: t(key) }));
const settings = settingKeys.map(key => ({ key, label: t(key) }));
const settings = user
? [
{ key: 'account', label: t('account') },
{ key: 'orders', label: t('orders') },
{ key: 'logout', label: t('logout') }
]
: [
{ key: 'login', label: t('login') }
];
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
@@ -59,6 +67,8 @@ export default function NavBar() {
setAnchorElUser(null);
if (link === 'login') {
setLoginOpen(true);
} else if (link === 'logout') {
logout();
} else {
navigate(`/${link.toLowerCase()}`)
}
@@ -220,36 +230,13 @@ export default function NavBar() {
</Box>
</Toolbar>
</AppBar>
<Dialog open={loginOpen} onClose={() => setLoginOpen(false)}>
<DialogTitle>Login</DialogTitle>
<DialogContent>
<TextField
margin="dense"
label="E-Mail"
type="email"
fullWidth
value={loginData.email}
onChange={e => setLoginData({ ...loginData, email: e.target.value })}
<LoginDialog
open={loginOpen}
onClose={() => setLoginOpen(false)}
onSubmit={handleLoginSubmit}
loginData={loginData}
setLoginData={setLoginData}
/>
<TextField
autoFocus
margin="dense"
label="Passwort"
type="password"
fullWidth
value={loginData.password}
onChange={e => setLoginData({ ...loginData, password: e.target.value })}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setLoginOpen(false)} color="secondary">
Abbrechen
</Button>
<Button onClick={handleLoginSubmit} color="primary" variant="contained">
Login
</Button>
</DialogActions>
</Dialog>
</>
);
}