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

Added Login backend connection.

Browse Source
This commit is contained in:
FlorianSpeicher
2025-06-12 22:56:35 +02:00
parent cb99839e39
commit f029c7b9b3
13 changed files with 487 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
01-frontend/src/helper/AccountProvider.tsx
View File

@@ -1,17 +1,5 @@
import { createContext, ReactNode, useContext, useState } from "react";
type User = {
password: string;
email: string;
customerId: number;
// weitere Felder nach Bedarf
};
type AccountContextType = {
user: User | null;
login: (userData: User) => void;
logout: () => void;
};
import { AccountContextType, User } from "../components/Account";
const AccountContext = createContext<AccountContextType | undefined>(undefined);

70
01-frontend/src/helper/NavBar.css Normal file
View File

@@ -0,0 +1,70 @@
/* Navbar styles */
.navbar {
background-color: #1976d2; /* Material-UI Primary Color */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
height: 3rem;
}
/* Logo styles */
.navbar-logo {
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: white;
text-decoration: none;
margin-right: auto;
}
/* Menu styles */
.navbar-menu {
display: flex;
align-items: center;
margin-left: auto;
}
/* Search styles */
.search {
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.15);
}
.search:hover {
background-color: rgba(255, 255, 255, 0.25);
}
.search-icon-wrapper {
padding: 8px;
height: 100%;
position: absolute;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.search-input {
color: inherit;
width: 100%;
padding: 8px 8px 8px 40px;
font-size: 1rem;
}
/* User avatar styles */
.navbar-user {
margin-left: 16px;
}
/* Typography styles */
.navbar-typography {
font-family: 'monospace';
font-weight: 700;
letter-spacing: .3rem;
color: inherit;
text-decoration: none;
}
/* Button styles */
.navbar-button {
margin: 2;
color: white;
display: block;
}

216
01-frontend/src/helper/NavBar.tsx Normal file
View File

@@ -0,0 +1,216 @@
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import AdbIcon from '@mui/icons-material/Adb';
import { alpha, InputBase, styled } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import { useNavigate } from 'react-router-dom';
const pages = ['Categories', 'Checkout', 'Contact'];
const settings = ['Account', 'Orders', 'Logout'];
const Search = styled('div')(({ theme }) => ({
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
}));
const SearchIconWrapper = styled('div')(({ theme }) => ({
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: 'inherit',
width: '100%',
'& .MuiInputBase-input': {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {
width: '20ch',
},
},
},
}));
export default function NavBar() {
const navigate = useNavigate();
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget);
};
const handleCloseNavMenu = (link: string) => {
setAnchorElNav(null);
navigate(`/${link.toLowerCase()}`);
};
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
return (
<AppBar>
<Container maxWidth="xl">
<Toolbar disableGutters>
<AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
<Typography
variant="h6"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: 'none', md: 'flex' },
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
Digitaler Produktionsshop
</Typography>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Search…"
inputProps={{ 'aria-label': 'search' }}
/>
</Search>
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{ display: { xs: 'block', md: 'none' } }}
>
{pages.map((page) => (
<MenuItem key={page} onClick={() => handleCloseNavMenu(page)}>
<Typography sx={{ textAlign: 'center' }}>{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
<Typography
variant="h5"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: 'flex', md: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
DPS
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
key={page}
onClick={() => handleCloseNavMenu(page)}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page}
</Button>
))}
</Box>
<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Florian Speicher" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
);
}

7
01-frontend/src/helper/adminpanel/FSModelInfo.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { Typography } from "@mui/material";
export default function FSModelInfo() {
return (
<Typography>Under Construction</Typography>
);
}

17
01-frontend/src/helper/adminpanel/OrdersInfo.tsx
View File

@@ -19,7 +19,7 @@ const mockOrders: OrderType[] = [
{
id: "1001",
date: "2025-05-20",
status: "active",
status: "CANCELLED",
items: [
{ name: "Tomatensamen", quantity: 2, price: 3.99 },
{ name: "Blumenerde", quantity: 1, price: 7.49 }
@@ -30,7 +30,7 @@ const mockOrders: OrderType[] = [
{
id: "1000",
date: "2025-05-10",
status: "inactive",
status: "ISSUES",
items: [{ name: "Gießkanne", quantity: 1, price: 12.99 }],
total: 12.99,
address: "Musterstraße 1, 12345 Musterstadt"
@@ -38,7 +38,7 @@ const mockOrders: OrderType[] = [
{
id: "1002",
date: "2025-05-15",
status: "running",
status: "DELIVERED",
items: [{ name: "Pflanzendünger", quantity: 1, price: 8.99 }],
total: 8.99,
address: "Musterstraße 1, 12345 Musterstadt"
@@ -46,10 +46,18 @@ const mockOrders: OrderType[] = [
{
id: "1003",
date: "2025-05-18",
status: "cancelled",
status: "ORDERED",
items: [{ name: "Blumentopf", quantity: 2, price: 5.99 }],
total: 11.98,
address: "Musterstraße 1, 12345 Musterstadt"
},
{
id: "1004",
date: "2025-05-18",
status: "IN_PROGRESS",
items: [{ name: "TimWall", quantity: 2, price: 5.99 }],
total: 12.99,
address: "Musterstraße 1, 12345 Musterstadt"
}
];
@@ -61,6 +69,7 @@ export default function OrdersInfo() {
const [orders, setOrders] = useState<OrderType[]>(mockOrders);
const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleDragEnd = (event: any) => {
const { active, over } = event;
if (!over || active.id === over.id) return;

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

@@ -1,22 +1,71 @@
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, TextField } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import i18next from "i18next";
import React, { useState } from "react";
import AccountType from "../../components/Account";
import { submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung
import { useAccount } from "../AccountProvider";
type LoginDialogProps = {
open: boolean;
onClose: () => void;
onSubmit: () => void;
onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
loginData: { email: string; password: string };
setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string, customerId: number }>>;
};
const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, loginData, setLoginData }) => {
const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, setLoginData, onSubmit }) => {
const { login } = useAccount();
const [showRegister, setShowRegister] = useState(false);
const [registerData, setRegisterData] = useState({ email: "", password: "", confirmPassword: "" });
const [registerData, setRegisterData] = useState<AccountType>({ email: "", password: "", id: 0, customer: { id: 0, name: "", surname: "", address: "", country: "", zip: "" }, langI18n: i18next.language, admin: false });
const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung
const handleRegister = () => {
setShowRegister(false);
setRegisterData({ email: "", password: "", confirmPassword: "" });
onClose();
// useQuery für Login
const { refetch: refetchLogin, isLoading: isLoadingLogin, error: errorLogin } = useQuery({
queryKey: ["submitLogin", loginData],
queryFn: () => submitLogin(loginData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
// useQuery für Registrierung
const { refetch: refetchRegister, isLoading: isLoadingRegister, error: errorRegister } = useQuery({
queryKey: ["submitRegister", registerData],
queryFn: () => submitRegister(registerData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const handleLogin = async () => {
try {
setShowErrorLogin(false); // Fehlermeldung zurücksetzen
const response = await refetchLogin(); // Anfrage auslösen
if (response.status === "success") {
const userData = response.data; // Extrahiere die Benutzerdaten aus der Antwort
login({ email: userData.email, customerId: userData.token, password: userData.password }); // Speichere die Benutzerdaten im AccountProvider
setShowRegister(false); // Zurück zum Login wechseln
onSubmit(); // Dialog schließen
} else {
setShowErrorLogin(true); // Fehlermeldung anzeigen
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setShowErrorLogin(true); // Fehlermeldung anzeigen
}
};
const handleRegister = async () => {
try {
setShowErrorRegister(false); // Fehlermeldung zurücksetzen
await refetchRegister(); // Beispiel für den Refetch-Aufruf
// Erfolgslogik hier
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setShowErrorRegister(true); // Fehlermeldung anzeigen
}
};
return (
@@ -43,11 +92,58 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, logi
/>
<TextField
margin="dense"
label="Passwort wiederholen"
type="password"
label="Vorname"
type="text"
fullWidth
value={registerData.confirmPassword}
onChange={e => setRegisterData(prev => ({ ...prev, confirmPassword: e.target.value }))}
value={registerData.customer.name}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, name: e.target.value },
}))}
/>
<TextField
margin="dense"
label="Nachname"
type="text"
fullWidth
value={registerData.customer.surname}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, surname: e.target.value },
}))}
/>
<TextField
margin="dense"
label="Adresse"
type="text"
fullWidth
value={registerData.customer.address}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, address: e.target.value },
}))}
/>
<TextField
margin="dense"
label="Land"
type="text"
fullWidth
value={registerData.customer.country}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, country: e.target.value },
}))}
/>
<TextField
margin="dense"
label="PLZ"
type="text"
fullWidth
value={registerData.customer.zip}
onChange={e => setRegisterData(prev => ({
...prev,
customer: { ...prev.customer, zip: e.target.value },
}))}
/>
</>
) : (
@@ -61,7 +157,6 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, logi
onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
/>
<TextField
autoFocus
margin="dense"
label="Passwort"
type="password"
@@ -73,23 +168,23 @@ const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, onSubmit, logi
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="secondary">
Abbrechen
</Button>
<Button onClick={onClose}>Abbrechen</Button>
{showRegister ? (
<>
<Button onClick={handleRegister} color="primary" variant="contained">
Registrieren
</Button>
</>
<Button onClick={handleRegister} disabled={isLoadingRegister}>
{isLoadingRegister ? "Lädt..." : "Registrieren"}
</Button>
) : (
<>
<Button onClick={onSubmit} color="primary" variant="contained">
Login
</Button>
</>
<Button onClick={handleLogin} disabled={isLoadingLogin}>
{isLoadingLogin ? "Lädt..." : "Login"}
</Button>
)}
</DialogActions>
{showErrorLogin && errorLogin && (
<Box color="error.main">Login fehlgeschlagen</Box>
)}
{showErrorRegister && errorRegister !== null && (
<Box color="error.main">Registrierung fehlgeschlagen</Box>
)}
{showRegister ? (
<Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
<Link

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

@@ -83,7 +83,7 @@ export default function NavBar() {
const handleLoginSubmit = () => {
login(loginData);
setLoginOpen(false);
setLoginData({ password: '', email: '', customerId: 0 });
setLoginData(loginData);
};
// useQuery, um die Item-Namen zu laden

50
01-frontend/src/helper/query/Queries.tsx
View File

@@ -1,6 +1,6 @@
// api/queries.js
import AccountType, { CustomerType } from "../../components/Account";
import AccountType, { CustomerType, SubmitLogin } from "../../components/Account";
import { SubmitOrder } from "../../components/Order";
import RatingSubmitType from "../../components/RatingSubmit";
@@ -44,24 +44,6 @@ export const fetchRatingList = async (itemId: string) => {
return data;
};
export const submitLogin = async (ratingData: RatingSubmitType) => {
const response = await fetch('http://localhost:8085/account?uuid=' + ratingData.articleId + '&rating=' + ratingData.rating * 2, {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: ratingData.content,
});
if (!response.ok) {
throw new Error('Fehler beim Senden der Bewertung');
}
const data = await response.json();
console.log("Rating Submitted:", data);
return data;
}
export const submitOrder = async (data: SubmitOrder) => {
const response = await fetch('http://localhost:8085/order', {
method: 'POST',
@@ -108,4 +90,32 @@ export const submitCustomer = async (data: CustomerType) => {
}
return await response.json();
}
}
export const submitLogin = async (loginData: SubmitLogin) => {
const response = await fetch("http://localhost:8085/session?email=" + loginData.email + "&password=" + loginData.password, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(loginData),
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};
export const submitRegister = async (registerData: AccountType) => {
const response = await fetch("http://localhost:8085/account", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(registerData),
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};