major changes to docker and npm config
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,19 @@
|
||||
FROM node:22-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine AS runner
|
||||
|
||||
WORKDIR /usr/share/nginx/html
|
||||
COPY --from=builder /app/dist .
|
||||
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -0,0 +1,73 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs['recommended-latest'],
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="/icon_borrow-system-frontend_dark.png"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ausleihsystem</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location = /backend {
|
||||
return 301 /backend/;
|
||||
}
|
||||
|
||||
location /backend/ {
|
||||
proxy_pass http://borrow_system-backend_v2:8004/;
|
||||
}
|
||||
|
||||
location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
|
||||
expires 1y;
|
||||
access_log off;
|
||||
add_header Cache-Control "public, immutable";
|
||||
try_files $uri =404;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "2.1.2-dev",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/react": "^3.28.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@lottiefiles/dotlottie-react": "^0.19.0",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"@tanstack/react-query": "^5.90.5",
|
||||
"i18next": "^25.6.0",
|
||||
"jotai": "^2.15.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lucide-react": "^0.539.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"primeicons": "^7.0.0",
|
||||
"primereact": "^10.9.6",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-i18next": "^16.2.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.8.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"split-lines": "^3.0.0",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.11",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"tw-animate-css": "^1.3.5",
|
||||
"vite-plugin-svgr": "^4.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.32.0",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/react": "^19.1.9",
|
||||
"@types/react-dom": "^19.1.7",
|
||||
"@vitejs/plugin-react": "^4.7.0",
|
||||
"eslint": "^9.32.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.3.0",
|
||||
"prettier": "^3.9.10",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.39.0",
|
||||
"vite": "^7.1.0",
|
||||
"vite-tsconfig-paths": "^5.1.4"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,73 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||
"SF Pro Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
"Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol", sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* Display für größere Überschriften */
|
||||
@font-face {
|
||||
font-family: "SF Pro Display";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProDisplay-Regular.woff2")
|
||||
format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Display";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProDisplay-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Display";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProDisplay-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Text für Fließtext */
|
||||
@font-face {
|
||||
font-family: "SF Pro Text";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProText-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Text";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProText-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Text";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProText-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Global anwenden mit Fallbacks */
|
||||
:root {
|
||||
--font-sans: "SF Pro Text", "SF Pro Display", -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import "./App.css";
|
||||
import { LoginPage } from "@/pages/LoginPage";
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
import { HomePage } from "@/pages/HomePage";
|
||||
import { ProtectedRoutes } from "./utils/ProtectedRoutes";
|
||||
import { useEffect, useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useAtom } from "jotai";
|
||||
import { setIsLoggedInAtom } from "@/states/Atoms";
|
||||
import { UserContext, type User } from "./states/Context";
|
||||
import { triggerLogoutAtom } from "@/states/Atoms";
|
||||
import { MyLoansPage } from "./pages/MyLoansPage";
|
||||
import Landingpage from "./pages/Landingpage";
|
||||
import { changeLanguage } from "i18next";
|
||||
import { Flex } from "@chakra-ui/react";
|
||||
import { Footer } from "./components/footer/Footer";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
import { ContactPage } from "./pages/ContactPage";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
function App() {
|
||||
const [user, setUser] = useState<User | undefined>(undefined);
|
||||
const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
|
||||
const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
|
||||
|
||||
useEffect(() => {
|
||||
if (Cookies.get("token")) {
|
||||
const verifyToken = async () => {
|
||||
const response = await fetch(`${API_BASE}/verify`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
setTriggerLogout(false);
|
||||
const data = await response.json();
|
||||
setUser({
|
||||
username: data.user.username,
|
||||
is_admin: data.user.is_admin,
|
||||
first_name: data.user.first_name,
|
||||
last_name: data.user.last_name,
|
||||
role: data.user.role,
|
||||
});
|
||||
setIsLoggedIn(true);
|
||||
} else {
|
||||
Cookies.remove("token");
|
||||
setIsLoggedIn(false);
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
verifyToken();
|
||||
}
|
||||
|
||||
// set initial language
|
||||
if (!Cookies.get("language")) {
|
||||
const getBrowserLanguage = () => {
|
||||
const lang = navigator.languages?.[0] || navigator.language || "en";
|
||||
return lang.split("-")[0].toLowerCase();
|
||||
};
|
||||
|
||||
changeLanguage(getBrowserLanguage());
|
||||
Cookies.set("language", getBrowserLanguage());
|
||||
}
|
||||
|
||||
if (Cookies.get("language")) {
|
||||
changeLanguage(Cookies.get("language") || "en");
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Flex direction="column" minH="100dvh">
|
||||
<Flex as="main" flex="1" direction="column">
|
||||
<UserContext.Provider value={user}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route element={<ProtectedRoutes />}>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/my-loans" element={<MyLoansPage />} />
|
||||
<Route path="/landingpage" element={<Landingpage />} />
|
||||
<Route path="/contact" element={<ContactPage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</UserContext.Provider>
|
||||
</Flex>
|
||||
<Footer />
|
||||
</Flex>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,67 @@
|
||||
import { Alert, Stack, VStack, Spinner, Text, Heading } from "@chakra-ui/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
import Cookies from "js-cookie";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const DeactivatedServices = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [deactivatedServices, setDeactivatedServices] = useState<
|
||||
{ function_name: string }[]
|
||||
>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDeactivatedServices = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/api/users/deactivated-services`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token") || ""}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setDeactivatedServices(data);
|
||||
} else {
|
||||
console.error("Failed to fetch deactivated services");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching deactivated services:", error);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
fetchDeactivatedServices();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{deactivatedServices.length >= 1 && (
|
||||
<Stack gap="2">
|
||||
<Heading size={"xl"}>{t("deactivated-services")}</Heading>
|
||||
{isLoading && (
|
||||
<VStack colorPalette="teal">
|
||||
<Spinner color="colorPalette.600" />
|
||||
<Text color="colorPalette.600">{t("loading")}</Text>
|
||||
</VStack>
|
||||
)}
|
||||
{deactivatedServices.length >= 1 &&
|
||||
deactivatedServices.map((item) => (
|
||||
<Alert.Root key={item.function_name} status="warning">
|
||||
<Alert.Indicator />
|
||||
<Alert.Title>
|
||||
{item.function_name} {t("is-deactivated")}
|
||||
</Alert.Title>
|
||||
</Alert.Root>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,331 @@
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Image,
|
||||
Heading,
|
||||
Stack,
|
||||
Text,
|
||||
HStack,
|
||||
IconButton,
|
||||
Menu,
|
||||
Box,
|
||||
Avatar,
|
||||
} from "@chakra-ui/react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useAtom } from "jotai";
|
||||
import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
CircleUserRound,
|
||||
LifeBuoy,
|
||||
LogOut,
|
||||
CalendarPlus,
|
||||
MoreVertical,
|
||||
Languages,
|
||||
Table,
|
||||
ContactRound,
|
||||
} from "lucide-react";
|
||||
import { useUserContext } from "@/states/Context";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { UserDialogue } from "./UserDialogue";
|
||||
|
||||
export const Header = () => {
|
||||
const navigate = useNavigate();
|
||||
const userData = useUserContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
|
||||
const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
|
||||
|
||||
const [userDialog, setUserDialog] = useState(false);
|
||||
|
||||
const username = userData.first_name ? userData.first_name : "N/A";
|
||||
const fullname = userData.first_name + " " + userData.last_name;
|
||||
const randomColor = [
|
||||
"gray",
|
||||
"red",
|
||||
"orange",
|
||||
"yellow",
|
||||
"green",
|
||||
"teal",
|
||||
"blue",
|
||||
"cyan",
|
||||
"purple",
|
||||
"pink",
|
||||
];
|
||||
|
||||
const logout = () => {
|
||||
Cookies.remove("token");
|
||||
setIsLoggedIn(false);
|
||||
setTriggerLogout(true);
|
||||
navigate("/login", { replace: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
as="header"
|
||||
gap={3}
|
||||
className="mb-6"
|
||||
position="relative"
|
||||
pr={{ base: 10, md: 0 }} // Platz für den Mobile-Button rechts
|
||||
marginBottom={1}
|
||||
>
|
||||
{/* Mobile: Drei-Punkte-Button, vertikal zentriert im Header */}
|
||||
<Box
|
||||
display={{ base: "block", md: "none" }}
|
||||
position="absolute"
|
||||
top="50%"
|
||||
right="0"
|
||||
transform="translateY(-50%)"
|
||||
zIndex={2}
|
||||
>
|
||||
<Menu.Root>
|
||||
<Menu.Trigger asChild>
|
||||
<IconButton
|
||||
aria-label="Aktionen"
|
||||
variant="solid"
|
||||
colorScheme="teal"
|
||||
size="md"
|
||||
borderRadius="full"
|
||||
boxShadow="md"
|
||||
>
|
||||
<MoreVertical size={20} />
|
||||
</IconButton>
|
||||
</Menu.Trigger>
|
||||
<Menu.Positioner>
|
||||
<Menu.Content>
|
||||
<Menu.Item
|
||||
value="create-loan"
|
||||
onSelect={() => navigate("/", { replace: true })}
|
||||
children={
|
||||
<HStack gap={3}>
|
||||
<CalendarPlus size={16} />
|
||||
<Text as="span">{t("create-loan")}</Text>
|
||||
</HStack>
|
||||
}
|
||||
/>
|
||||
<Menu.Item
|
||||
value="my-loans"
|
||||
onSelect={() => navigate("/my-loans", { replace: true })}
|
||||
children={
|
||||
<HStack gap={3}>
|
||||
<CircleUserRound size={16} />
|
||||
<Text as="span">{t("my-loans")}</Text>
|
||||
</HStack>
|
||||
}
|
||||
/>
|
||||
<Menu.Item
|
||||
value="landingpage"
|
||||
onSelect={() => navigate("/landingpage", { replace: true })}
|
||||
children={
|
||||
<HStack gap={3}>
|
||||
<Table size={16} />
|
||||
<Text as="span">{t("landingpage")}</Text>
|
||||
</HStack>
|
||||
}
|
||||
/>
|
||||
<Menu.Item
|
||||
value="change-language"
|
||||
onSelect={() => {
|
||||
const currentLang = Cookies.get("language") || "en";
|
||||
const newLang = currentLang === "en" ? "de" : "en";
|
||||
Cookies.set("language", newLang);
|
||||
window.location.reload();
|
||||
}}
|
||||
children={
|
||||
<HStack gap={3}>
|
||||
<Languages size={16} />
|
||||
<Text as="span">{t("change-language")}</Text>
|
||||
</HStack>
|
||||
}
|
||||
/>
|
||||
<Menu.Item
|
||||
value="help"
|
||||
onSelect={() =>
|
||||
window.open(
|
||||
"https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki/?action=_pages",
|
||||
"_blank",
|
||||
"noopener,noreferrer",
|
||||
)
|
||||
}
|
||||
children={
|
||||
<HStack gap={3}>
|
||||
<LifeBuoy size={16} />
|
||||
<Text as="span">{t("help")}</Text>
|
||||
</HStack>
|
||||
}
|
||||
/>
|
||||
<Menu.Item
|
||||
value="contact"
|
||||
onSelect={() => navigate("/contact", { replace: true })}
|
||||
children={
|
||||
<HStack gap={3}>
|
||||
<ContactRound size={16} />
|
||||
<Text as="span">{t("contact")}</Text>
|
||||
</HStack>
|
||||
}
|
||||
/>
|
||||
<Menu.Separator />
|
||||
<Menu.Item
|
||||
value="logout"
|
||||
onSelect={logout}
|
||||
children={
|
||||
<HStack gap={3} color="red.500">
|
||||
<LogOut size={16} />
|
||||
<Text as="span">{t("logout")}</Text>
|
||||
</HStack>
|
||||
}
|
||||
/>
|
||||
</Menu.Content>
|
||||
</Menu.Positioner>
|
||||
</Menu.Root>
|
||||
</Box>
|
||||
|
||||
<Flex
|
||||
direction={{ base: "column", md: "row" }}
|
||||
align={{ base: "stretch", md: "center" }}
|
||||
justify="space-between"
|
||||
gap={4}
|
||||
>
|
||||
{/* Left: Title + user info */}
|
||||
<Stack gap={1}>
|
||||
{/* Titelzeile ohne Mobile-Menu (wurde nach oben verlegt) */}
|
||||
<Flex align="center" justify="space-between" gap={2}>
|
||||
<Image
|
||||
src="/icon_borrow-system-frontend_dark.png"
|
||||
alt="borrow-system logo"
|
||||
boxSize="10"
|
||||
objectFit="contain"
|
||||
flexShrink={0}
|
||||
/>
|
||||
<Heading
|
||||
size="2xl"
|
||||
className="tracking-tight text-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{t("app-title")}
|
||||
</Heading>
|
||||
</Flex>
|
||||
|
||||
<HStack gap={3} align="center" flexWrap="wrap">
|
||||
<Text fontSize="md" className="text-slate-600 dark:text-slate-400">
|
||||
{t("greeting")}
|
||||
<strong>{username}</strong>!
|
||||
</Text>
|
||||
</HStack>
|
||||
</Stack>
|
||||
|
||||
{/* Avatar: visible on mobile, hidden on desktop (desktop version is in the actions bar) */}
|
||||
<HStack display={{ base: "flex", md: "none" }}>
|
||||
<Avatar.Root>
|
||||
<button
|
||||
onClick={() => setUserDialog(true)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<Avatar.Fallback name={fullname} />
|
||||
</button>
|
||||
</Avatar.Root>
|
||||
</HStack>
|
||||
|
||||
{/* Right: Actions */}
|
||||
{/* Desktop actions */}
|
||||
<HStack
|
||||
gap={2}
|
||||
align="center"
|
||||
justify="flex-end"
|
||||
flexWrap="wrap"
|
||||
display={{ base: "none", md: "flex" }}
|
||||
>
|
||||
{/* Desktop avatar, aligned with action buttons */}
|
||||
<Avatar.Root
|
||||
colorPalette={randomColor[Math.floor(Math.random() * 10)]}
|
||||
>
|
||||
<button
|
||||
onClick={() => setUserDialog(true)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<Avatar.Fallback name={fullname} />
|
||||
</button>
|
||||
</Avatar.Root>
|
||||
|
||||
<Button
|
||||
colorScheme="teal"
|
||||
onClick={() => navigate("/", { replace: true })}
|
||||
>
|
||||
<HStack gap={2}>
|
||||
<CalendarPlus size={18} />
|
||||
<Text as="span">{t("create-loan")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
|
||||
<Button onClick={() => navigate("/my-loans", { replace: true })}>
|
||||
<HStack gap={2}>
|
||||
<CircleUserRound size={18} />
|
||||
<Text as="span">{t("my-loans")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
|
||||
<Button onClick={() => navigate("/landingpage", { replace: true })}>
|
||||
<HStack gap={2}>
|
||||
<Table size={18} />
|
||||
<Text as="span">{t("landingpage")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
const currentLang = Cookies.get("language") || "en";
|
||||
const newLang = currentLang === "en" ? "de" : "en";
|
||||
Cookies.set("language", newLang);
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
<HStack gap={2}>
|
||||
<Languages size={18} />
|
||||
<Text as="span">{t("change-language")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
|
||||
<a
|
||||
href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki/?action=_pages"
|
||||
target="_blank"
|
||||
>
|
||||
<Button variant="ghost">
|
||||
<HStack gap={2}>
|
||||
<LifeBuoy size={18} />
|
||||
<Text as="span">{t("help")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<Button
|
||||
variant={"outline"}
|
||||
onClick={() => navigate("/contact", { replace: true })}
|
||||
>
|
||||
<HStack gap={2}>
|
||||
<ContactRound size={18} />
|
||||
<Text as="span">{t("contact")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
|
||||
<Button onClick={logout} variant="outline" colorScheme="red">
|
||||
<HStack gap={2}>
|
||||
<LogOut size={18} />
|
||||
<Text as="span">{t("logout")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* User Info Dialoge */}
|
||||
{userDialog && (
|
||||
<UserDialogue
|
||||
setUserDialog={setUserDialog}
|
||||
fullname={fullname}
|
||||
randomColor={randomColor}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,293 @@
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Stack,
|
||||
Text,
|
||||
CloseButton,
|
||||
Dialog,
|
||||
Portal,
|
||||
HStack,
|
||||
Box,
|
||||
Avatar,
|
||||
Card,
|
||||
Grid,
|
||||
} from "@chakra-ui/react";
|
||||
import { PasswordInput } from "@/components/ui/password-input";
|
||||
import { RotateCcwKey } from "lucide-react";
|
||||
import MyAlert from "./myChakra/MyAlert";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
import { useUserContext } from "@/states/Context";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
type UserDialogueProps = {
|
||||
setUserDialog: (value: boolean) => void;
|
||||
fullname: string;
|
||||
randomColor: string[];
|
||||
};
|
||||
|
||||
export const UserDialogue = (props: UserDialogueProps) => {
|
||||
const userData = useUserContext();
|
||||
const { t } = useTranslation();
|
||||
// Error handling states
|
||||
const [isMsg, setIsMsg] = useState(false);
|
||||
const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
|
||||
const [msgTitle, setMsgTitle] = useState("");
|
||||
const [msgDescription, setMsgDescription] = useState("");
|
||||
|
||||
const [isMsgNAAS, setIsMsgNAAS] = useState(false);
|
||||
const [msgStatusNAAS, setMsgStatusNAAS] = useState<"error" | "success">(
|
||||
"error",
|
||||
);
|
||||
const [msgTitleNAAS, setMsgTitleNAAS] = useState("");
|
||||
const [msgDescriptionNAAS, setMsgDescriptionNAAS] = useState("");
|
||||
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
|
||||
// Dialog control
|
||||
const [isPwOpen, setPwOpen] = useState(false);
|
||||
const [naasDialog, setNaasDialog] = useState(false);
|
||||
const [naas, setNaas] = useState("");
|
||||
|
||||
const openNAAS = async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/no`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
setNaas(data.reason);
|
||||
setNaasDialog(true);
|
||||
} catch (error) {
|
||||
setMsgStatusNAAS("error");
|
||||
setMsgTitleNAAS(t("naas-error"));
|
||||
setMsgDescriptionNAAS(t("naas-error-desc"));
|
||||
setIsMsgNAAS(true);
|
||||
|
||||
console.log(msgStatusNAAS, msgTitleNAAS, msgDescriptionNAAS);
|
||||
}
|
||||
};
|
||||
|
||||
const changePassword = async () => {
|
||||
if (newPassword !== confirmPassword) {
|
||||
setMsgTitle(t("err_pw_change"));
|
||||
setMsgDescription(t("pw_mismatch"));
|
||||
setMsgStatus("error");
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE}/api/users/change-password`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
body: JSON.stringify({ oldPassword, newPassword }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
setMsgTitle(t("err_pw_change"));
|
||||
setMsgDescription(t("pw_mismatch"));
|
||||
setMsgStatus("error");
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setMsgTitle(t("pw_success"));
|
||||
setMsgDescription(t("pw_success_desc"));
|
||||
setMsgStatus("success");
|
||||
setIsMsg(true);
|
||||
|
||||
setOldPassword("");
|
||||
setNewPassword("");
|
||||
setConfirmPassword("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
position="fixed"
|
||||
inset={0}
|
||||
zIndex={1000}
|
||||
align="center"
|
||||
justify="center"
|
||||
bg="blackAlpha.400"
|
||||
backdropFilter="blur(6px)"
|
||||
>
|
||||
<Card.Root maxW="sm" w="full" mx={4}>
|
||||
<Card.Header>
|
||||
<Card.Title>
|
||||
<Flex justify="center" align="center" w="100%">
|
||||
<Avatar.Root
|
||||
size={"2xl"}
|
||||
colorPalette={props.randomColor[Math.floor(Math.random() * 10)]}
|
||||
>
|
||||
<Avatar.Fallback name={props.fullname} />
|
||||
</Avatar.Root>
|
||||
</Flex>
|
||||
</Card.Title>
|
||||
<Card.Description>{t("user-info-desc")}</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<Stack gap="4" w="full">
|
||||
<Box as="dl">
|
||||
<Grid
|
||||
templateColumns="auto 1fr"
|
||||
rowGap={2}
|
||||
columnGap={4}
|
||||
alignItems="start"
|
||||
>
|
||||
<Text as="dt" fontWeight="bold" textAlign="left">
|
||||
{t("first-name")}:
|
||||
</Text>
|
||||
<Text as="dd">{userData.first_name}</Text>
|
||||
|
||||
<Text as="dt" fontWeight="bold" textAlign="left">
|
||||
{t("last-name")}:
|
||||
</Text>
|
||||
<Text as="dd">{userData.last_name}</Text>
|
||||
|
||||
<Text as="dt" fontWeight="bold" textAlign="left">
|
||||
{t("username")}:
|
||||
</Text>
|
||||
<Text as="dd">{userData.username}</Text>
|
||||
|
||||
<Text as="dt" fontWeight="bold" textAlign="left">
|
||||
{t("role")}:
|
||||
</Text>
|
||||
<Text as="dd">{userData.role}</Text>
|
||||
|
||||
<Text as="dt" fontWeight="bold" textAlign="left">
|
||||
{t("admin-status")}:
|
||||
</Text>
|
||||
<Text as="dd">{userData.is_admin ? t("yes") : t("no")}</Text>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Button variant="solid" onClick={() => setPwOpen(true)}>
|
||||
<HStack gap={2}>
|
||||
<RotateCcwKey size={18} />
|
||||
<Text as="span">{t("change-password")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card.Body>
|
||||
<Card.Footer>
|
||||
<Stack w="100%" gap={3}>
|
||||
{isMsgNAAS && (
|
||||
<MyAlert
|
||||
status={msgStatusNAAS}
|
||||
title={msgTitleNAAS}
|
||||
description={msgDescriptionNAAS}
|
||||
/>
|
||||
)}
|
||||
<HStack justify="flex-end" gap={2} wrap="wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => props.setUserDialog(false)}
|
||||
>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => openNAAS()}>
|
||||
{t("try-naas")}
|
||||
</Button>
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
|
||||
{/* Passwort-Dialog */}
|
||||
<Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
|
||||
<Portal>
|
||||
<Dialog.Backdrop />
|
||||
<Dialog.Positioner>
|
||||
<Dialog.Content maxW="md">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>{t("change-password")}</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
changePassword();
|
||||
}}
|
||||
>
|
||||
<Dialog.Body>
|
||||
<Stack gap={3}>
|
||||
<PasswordInput
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
placeholder={t("old-password")}
|
||||
/>
|
||||
<PasswordInput
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder={t("new-password")}
|
||||
/>
|
||||
<PasswordInput
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder={t("confirm-password")}
|
||||
/>
|
||||
</Stack>
|
||||
</Dialog.Body>
|
||||
<Dialog.Footer>
|
||||
<Stack w="100%" gap={3}>
|
||||
{isMsg && (
|
||||
<MyAlert
|
||||
status={msgStatus}
|
||||
title={msgTitle}
|
||||
description={msgDescription}
|
||||
/>
|
||||
)}
|
||||
<HStack justify="flex-end" gap={2}>
|
||||
<Dialog.ActionTrigger asChild>
|
||||
<Button variant="outline">{t("cancel")}</Button>
|
||||
</Dialog.ActionTrigger>
|
||||
<Button type="submit" colorScheme="teal">
|
||||
{t("save")}
|
||||
</Button>
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Dialog.Footer>
|
||||
</form>
|
||||
<Dialog.CloseTrigger asChild>
|
||||
<CloseButton size="sm" />
|
||||
</Dialog.CloseTrigger>
|
||||
</Dialog.Content>
|
||||
</Dialog.Positioner>
|
||||
</Portal>
|
||||
</Dialog.Root>
|
||||
|
||||
<HStack wrap="wrap" gap="4">
|
||||
<Dialog.Root
|
||||
placement={"center"}
|
||||
open={naasDialog}
|
||||
motionPreset="slide-in-bottom"
|
||||
>
|
||||
<Portal>
|
||||
<Dialog.Backdrop />
|
||||
<Dialog.Positioner>
|
||||
<Dialog.Content>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>{t("naas-header")}</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
<Dialog.Body>
|
||||
<p>{naas}</p>
|
||||
</Dialog.Body>
|
||||
<Dialog.CloseTrigger asChild>
|
||||
<CloseButton onClick={() => setNaasDialog(false)} size="sm" />
|
||||
</Dialog.CloseTrigger>
|
||||
</Dialog.Content>
|
||||
</Dialog.Positioner>
|
||||
</Portal>
|
||||
</Dialog.Root>
|
||||
</HStack>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
|
||||
|
||||
export const unlockAnimation = () => {
|
||||
return (
|
||||
<DotLottieReact
|
||||
src="https://lottie.host/f839baa1-9c64-44c4-9386-f0e4c87ab208/2Iw1m4k86d.lottie"
|
||||
autoplay
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const approvalAnimation = () => {
|
||||
return (
|
||||
<DotLottieReact
|
||||
src="https://lottie.host/b7257009-9e3f-43e2-8112-a176f4696e4c/iQxxqAVOGX.lottie"
|
||||
autoplay
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const logoutAnimation = () => {
|
||||
return (
|
||||
<DotLottieReact
|
||||
src="https://lottie.host/4975758c-de38-4d15-9f74-927709751d32/v8FtKpnD1y.lottie"
|
||||
autoplay
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import { useVersionInfoQuery } from "./versionInfo.query";
|
||||
|
||||
export const Footer = () => {
|
||||
const { data: info } = useVersionInfoQuery();
|
||||
|
||||
return (
|
||||
<Box
|
||||
as="footer"
|
||||
py={4}
|
||||
textAlign="center"
|
||||
width="100%"
|
||||
flexShrink={0}
|
||||
fontSize="sm"
|
||||
>
|
||||
Made with ❤️ by Theis Gaedigk - Class of 2019 at MCS-Bochum
|
||||
<br />
|
||||
Frontend-Version: {info ? info["frontend-info"].version : "N/A"} |
|
||||
Backend-Version: {info ? info["backend-info"].version : "N/A"}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
|
||||
export const useVersionInfoQuery = () =>
|
||||
useQuery({
|
||||
queryKey: ["versionInfo"],
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`${API_BASE}/`, {
|
||||
method: "GET",
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} else {
|
||||
console.error(
|
||||
"Failed to fetch version info (versionInfo.query.ts): ",
|
||||
response.statusText
|
||||
);
|
||||
return {
|
||||
"backend-info": {
|
||||
version: "N/A",
|
||||
},
|
||||
"frontend-info": {
|
||||
version: "N/A",
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import { Alert } from "@chakra-ui/react";
|
||||
|
||||
type MyAlertProps = {
|
||||
status: "error" | "success";
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
const MyAlert: React.FC<MyAlertProps> = ({ title, description, status }) => {
|
||||
return (
|
||||
<Alert.Root status={status}>
|
||||
<Alert.Indicator />
|
||||
<Alert.Content>
|
||||
<Alert.Title>{title}</Alert.Title>
|
||||
<Alert.Description>{description}</Alert.Description>
|
||||
</Alert.Content>
|
||||
</Alert.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyAlert;
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client"
|
||||
|
||||
import type { IconButtonProps, SpanProps } from "@chakra-ui/react"
|
||||
import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react"
|
||||
import { ThemeProvider, useTheme } from "next-themes"
|
||||
import type { ThemeProviderProps } from "next-themes"
|
||||
import * as React from "react"
|
||||
import { LuMoon, LuSun } from "react-icons/lu"
|
||||
|
||||
export interface ColorModeProviderProps extends ThemeProviderProps {}
|
||||
|
||||
export function ColorModeProvider(props: ColorModeProviderProps) {
|
||||
return (
|
||||
<ThemeProvider attribute="class" disableTransitionOnChange {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export type ColorMode = "light" | "dark"
|
||||
|
||||
export interface UseColorModeReturn {
|
||||
colorMode: ColorMode
|
||||
setColorMode: (colorMode: ColorMode) => void
|
||||
toggleColorMode: () => void
|
||||
}
|
||||
|
||||
export function useColorMode(): UseColorModeReturn {
|
||||
const { resolvedTheme, setTheme, forcedTheme } = useTheme()
|
||||
const colorMode = forcedTheme || resolvedTheme
|
||||
const toggleColorMode = () => {
|
||||
setTheme(resolvedTheme === "dark" ? "light" : "dark")
|
||||
}
|
||||
return {
|
||||
colorMode: colorMode as ColorMode,
|
||||
setColorMode: setTheme,
|
||||
toggleColorMode,
|
||||
}
|
||||
}
|
||||
|
||||
export function useColorModeValue<T>(light: T, dark: T) {
|
||||
const { colorMode } = useColorMode()
|
||||
return colorMode === "dark" ? dark : light
|
||||
}
|
||||
|
||||
export function ColorModeIcon() {
|
||||
const { colorMode } = useColorMode()
|
||||
return colorMode === "dark" ? <LuMoon /> : <LuSun />
|
||||
}
|
||||
|
||||
interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
|
||||
|
||||
export const ColorModeButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
ColorModeButtonProps
|
||||
>(function ColorModeButton(props, ref) {
|
||||
const { toggleColorMode } = useColorMode()
|
||||
return (
|
||||
<ClientOnly fallback={<Skeleton boxSize="9" />}>
|
||||
<IconButton
|
||||
onClick={toggleColorMode}
|
||||
variant="ghost"
|
||||
aria-label="Toggle color mode"
|
||||
size="sm"
|
||||
ref={ref}
|
||||
{...props}
|
||||
css={{
|
||||
_icon: {
|
||||
width: "5",
|
||||
height: "5",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ColorModeIcon />
|
||||
</IconButton>
|
||||
</ClientOnly>
|
||||
)
|
||||
})
|
||||
|
||||
export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
|
||||
function LightMode(props, ref) {
|
||||
return (
|
||||
<Span
|
||||
color="fg"
|
||||
display="contents"
|
||||
className="chakra-theme light"
|
||||
colorPalette="gray"
|
||||
colorScheme="light"
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
|
||||
function DarkMode(props, ref) {
|
||||
return (
|
||||
<Span
|
||||
color="fg"
|
||||
display="contents"
|
||||
className="chakra-theme dark"
|
||||
colorPalette="gray"
|
||||
colorScheme="dark"
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
@@ -0,0 +1,159 @@
|
||||
"use client"
|
||||
|
||||
import type {
|
||||
ButtonProps,
|
||||
GroupProps,
|
||||
InputProps,
|
||||
StackProps,
|
||||
} from "@chakra-ui/react"
|
||||
import {
|
||||
Box,
|
||||
HStack,
|
||||
IconButton,
|
||||
Input,
|
||||
InputGroup,
|
||||
Stack,
|
||||
mergeRefs,
|
||||
useControllableState,
|
||||
} from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
import { LuEye, LuEyeOff } from "react-icons/lu"
|
||||
|
||||
export interface PasswordVisibilityProps {
|
||||
/**
|
||||
* The default visibility state of the password input.
|
||||
*/
|
||||
defaultVisible?: boolean
|
||||
/**
|
||||
* The controlled visibility state of the password input.
|
||||
*/
|
||||
visible?: boolean
|
||||
/**
|
||||
* Callback invoked when the visibility state changes.
|
||||
*/
|
||||
onVisibleChange?: (visible: boolean) => void
|
||||
/**
|
||||
* Custom icons for the visibility toggle button.
|
||||
*/
|
||||
visibilityIcon?: { on: React.ReactNode; off: React.ReactNode }
|
||||
}
|
||||
|
||||
export interface PasswordInputProps
|
||||
extends InputProps,
|
||||
PasswordVisibilityProps {
|
||||
rootProps?: GroupProps
|
||||
}
|
||||
|
||||
export const PasswordInput = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
PasswordInputProps
|
||||
>(function PasswordInput(props, ref) {
|
||||
const {
|
||||
rootProps,
|
||||
defaultVisible,
|
||||
visible: visibleProp,
|
||||
onVisibleChange,
|
||||
visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const [visible, setVisible] = useControllableState({
|
||||
value: visibleProp,
|
||||
defaultValue: defaultVisible || false,
|
||||
onChange: onVisibleChange,
|
||||
})
|
||||
|
||||
const inputRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
return (
|
||||
<InputGroup
|
||||
endElement={
|
||||
<VisibilityTrigger
|
||||
disabled={rest.disabled}
|
||||
onPointerDown={(e) => {
|
||||
if (rest.disabled) return
|
||||
if (e.button !== 0) return
|
||||
e.preventDefault()
|
||||
setVisible(!visible)
|
||||
}}
|
||||
>
|
||||
{visible ? visibilityIcon.off : visibilityIcon.on}
|
||||
</VisibilityTrigger>
|
||||
}
|
||||
{...rootProps}
|
||||
>
|
||||
<Input
|
||||
{...rest}
|
||||
ref={mergeRefs(ref, inputRef)}
|
||||
type={visible ? "text" : "password"}
|
||||
/>
|
||||
</InputGroup>
|
||||
)
|
||||
})
|
||||
|
||||
const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
function VisibilityTrigger(props, ref) {
|
||||
return (
|
||||
<IconButton
|
||||
tabIndex={-1}
|
||||
ref={ref}
|
||||
me="-2"
|
||||
aspectRatio="square"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
height="calc(100% - {spacing.2})"
|
||||
aria-label="Toggle password visibility"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
interface PasswordStrengthMeterProps extends StackProps {
|
||||
max?: number
|
||||
value: number
|
||||
}
|
||||
|
||||
export const PasswordStrengthMeter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
PasswordStrengthMeterProps
|
||||
>(function PasswordStrengthMeter(props, ref) {
|
||||
const { max = 4, value, ...rest } = props
|
||||
|
||||
const percent = (value / max) * 100
|
||||
const { label, colorPalette } = getColorPalette(percent)
|
||||
|
||||
return (
|
||||
<Stack align="flex-end" gap="1" ref={ref} {...rest}>
|
||||
<HStack width="full" {...rest}>
|
||||
{Array.from({ length: max }).map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
height="1"
|
||||
flex="1"
|
||||
rounded="sm"
|
||||
data-selected={index < value ? "" : undefined}
|
||||
layerStyle="fill.subtle"
|
||||
colorPalette="gray"
|
||||
_selected={{
|
||||
colorPalette,
|
||||
layerStyle: "fill.solid",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
{label && <HStack textStyle="xs">{label}</HStack>}
|
||||
</Stack>
|
||||
)
|
||||
})
|
||||
|
||||
function getColorPalette(percent: number) {
|
||||
switch (true) {
|
||||
case percent < 33:
|
||||
return { label: "Low", colorPalette: "red" }
|
||||
case percent < 66:
|
||||
return { label: "Medium", colorPalette: "orange" }
|
||||
default:
|
||||
return { label: "High", colorPalette: "green" }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
|
||||
import {
|
||||
ColorModeProvider,
|
||||
type ColorModeProviderProps,
|
||||
} from "./color-mode"
|
||||
|
||||
export function Provider(props: ColorModeProviderProps) {
|
||||
return (
|
||||
<ChakraProvider value={defaultSystem}>
|
||||
<ColorModeProvider {...props} />
|
||||
</ChakraProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Toaster as ChakraToaster,
|
||||
Portal,
|
||||
Spinner,
|
||||
Stack,
|
||||
Toast,
|
||||
createToaster,
|
||||
} from "@chakra-ui/react"
|
||||
|
||||
export const toaster = createToaster({
|
||||
placement: "bottom-end",
|
||||
pauseOnPageIdle: true,
|
||||
})
|
||||
|
||||
export const Toaster = () => {
|
||||
return (
|
||||
<Portal>
|
||||
<ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
|
||||
{(toast) => (
|
||||
<Toast.Root width={{ md: "sm" }}>
|
||||
{toast.type === "loading" ? (
|
||||
<Spinner size="sm" color="blue.solid" />
|
||||
) : (
|
||||
<Toast.Indicator />
|
||||
)}
|
||||
<Stack gap="1" flex="1" maxWidth="100%">
|
||||
{toast.title && <Toast.Title>{toast.title}</Toast.Title>}
|
||||
{toast.description && (
|
||||
<Toast.Description>{toast.description}</Toast.Description>
|
||||
)}
|
||||
</Stack>
|
||||
{toast.action && (
|
||||
<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
|
||||
)}
|
||||
{toast.closable && <Toast.CloseTrigger />}
|
||||
</Toast.Root>
|
||||
)}
|
||||
</ChakraToaster>
|
||||
</Portal>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface TooltipProps extends ChakraTooltip.RootProps {
|
||||
showArrow?: boolean
|
||||
portalled?: boolean
|
||||
portalRef?: React.RefObject<HTMLElement | null>
|
||||
content: React.ReactNode
|
||||
contentProps?: ChakraTooltip.ContentProps
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
|
||||
function Tooltip(props, ref) {
|
||||
const {
|
||||
showArrow,
|
||||
children,
|
||||
disabled,
|
||||
portalled = true,
|
||||
content,
|
||||
contentProps,
|
||||
portalRef,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
if (disabled) return children
|
||||
|
||||
return (
|
||||
<ChakraTooltip.Root {...rest}>
|
||||
<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
|
||||
<Portal disabled={!portalled} container={portalRef}>
|
||||
<ChakraTooltip.Positioner>
|
||||
<ChakraTooltip.Content ref={ref} {...contentProps}>
|
||||
{showArrow && (
|
||||
<ChakraTooltip.Arrow>
|
||||
<ChakraTooltip.ArrowTip />
|
||||
</ChakraTooltip.Arrow>
|
||||
)}
|
||||
{content}
|
||||
</ChakraTooltip.Content>
|
||||
</ChakraTooltip.Positioner>
|
||||
</Portal>
|
||||
</ChakraTooltip.Root>
|
||||
)
|
||||
},
|
||||
)
|
||||
@@ -0,0 +1,4 @@
|
||||
export const API_BASE =
|
||||
(import.meta as any).env?.VITE_BACKEND_URL ||
|
||||
import.meta.env.VITE_BACKEND_URL ||
|
||||
"http://localhost:8002";
|
||||
@@ -0,0 +1,70 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||
"SF Pro Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
"Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol", sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SF Pro Display";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProDisplay-Regular.woff2")
|
||||
format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Display";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProDisplay-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Display";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProDisplay-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "SF Pro Text";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProText-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Text";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProText-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SF Pro Text";
|
||||
src: url("/src/assets/fonts/sf-pro/SFProText-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-sans: "SF Pro Text", "SF Pro Display", -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Provider } from "@/components/ui/provider";
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App.tsx";
|
||||
import i18n from "./utils/i18n"; // import i18n configuration DO NOT REMOVE
|
||||
|
||||
// Prevent unused variable tree shaking
|
||||
let i18nUnused = i18n;
|
||||
console.log(i18nUnused);
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<Provider>
|
||||
<App />
|
||||
</Provider>
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,111 @@
|
||||
import {
|
||||
Field,
|
||||
Textarea,
|
||||
Button,
|
||||
Alert,
|
||||
Container,
|
||||
Text,
|
||||
VStack,
|
||||
Spinner,
|
||||
} from "@chakra-ui/react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
import Cookies from "js-cookie";
|
||||
import { Header } from "@/components/Header";
|
||||
|
||||
interface Alert {
|
||||
type: "info" | "warning" | "success" | "error" | "neutral";
|
||||
headline: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export const ContactPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const [message, setMessage] = useState("");
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [alert, setAlert] = useState<Alert | null>(null);
|
||||
|
||||
const sendMessage = async () => {
|
||||
setIsSending(true);
|
||||
if (message.trim() === "") {
|
||||
setAlert({
|
||||
type: "error",
|
||||
headline: t("contactPage_messageErrorHeadline"),
|
||||
text: t("contactPage_messageErrorText2"),
|
||||
});
|
||||
setIsSending(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Logic to send the message
|
||||
const result = await fetch(`${API_BASE}/api/users/contact`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token") || ""}`,
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify({ message }),
|
||||
});
|
||||
|
||||
if (result.ok) {
|
||||
setAlert({
|
||||
type: "success",
|
||||
headline: t("contactPage_successHeadline"),
|
||||
text: t("contactPage_successText"),
|
||||
});
|
||||
setMessage("");
|
||||
} else if (result.status === 503) {
|
||||
setAlert({
|
||||
type: "error",
|
||||
headline: t("serviceDeactivatedHeadline"),
|
||||
text: t("contactPage_serviceDeactivatedText"),
|
||||
});
|
||||
} else {
|
||||
setAlert({
|
||||
type: "error",
|
||||
headline: t("contactPage_errorHeadline"),
|
||||
text: t("contactPage_errorText"),
|
||||
});
|
||||
}
|
||||
setIsSending(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container className="px-6 sm:px-8 pt-10">
|
||||
<Header />
|
||||
<Field.Root invalid={message === ""}>
|
||||
<Field.Label>
|
||||
<Text>{t("contactPage_messageDescription")}</Text>
|
||||
<Field.RequiredIndicator />
|
||||
</Field.Label>
|
||||
<Textarea
|
||||
placeholder={t("contactPage_messagePlaceholder")}
|
||||
variant="subtle"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
/>
|
||||
{message === "" && (
|
||||
<Field.ErrorText>{t("contactPage_messageErrorText")}</Field.ErrorText>
|
||||
)}
|
||||
</Field.Root>
|
||||
{alert && (
|
||||
<Alert.Root status={alert.type}>
|
||||
<Alert.Indicator />
|
||||
<Alert.Content>
|
||||
<Alert.Title>{alert.headline}</Alert.Title>
|
||||
<Alert.Description>{alert.text}</Alert.Description>
|
||||
</Alert.Content>
|
||||
</Alert.Root>
|
||||
)}
|
||||
{isSending && (
|
||||
<VStack colorPalette="teal">
|
||||
<Spinner color="colorPalette.600" />
|
||||
<Text color="colorPalette.600">{t("loading")}</Text>
|
||||
</VStack>
|
||||
)}
|
||||
<Button onClick={sendMessage}>{t("contactPage_sendButton")}</Button>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,224 @@
|
||||
import {
|
||||
Container,
|
||||
Stack,
|
||||
Text,
|
||||
Button,
|
||||
Input,
|
||||
Spinner,
|
||||
VStack,
|
||||
Table,
|
||||
InputGroup,
|
||||
Span,
|
||||
} from "@chakra-ui/react";
|
||||
import { useAtom } from "jotai";
|
||||
import { getBorrowableItems } from "@/utils/Fetcher";
|
||||
import { useState } from "react";
|
||||
import MyAlert from "@/components/myChakra/MyAlert";
|
||||
import { borrowAbleItemsAtom } from "@/states/Atoms";
|
||||
import { createLoan } from "@/utils/Fetcher";
|
||||
import { Header } from "@/components/Header";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { approvalAnimation } from "@/components/dotLottie";
|
||||
import { DeactivatedServices } from "@/components/DeactivatedServices";
|
||||
|
||||
export interface User {
|
||||
username: string;
|
||||
role: number;
|
||||
}
|
||||
|
||||
export const HomePage = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [showAnimation, setShowAnimation] = useState(false);
|
||||
|
||||
const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
const [isLoadingA, setIsLoadingA] = useState(false);
|
||||
const [selectedItems, setSelectedItems] = useState<number[]>([]);
|
||||
|
||||
const MAX_CHARACTERS = 500;
|
||||
const [note, setNote] = useState("");
|
||||
|
||||
// Error handling states
|
||||
const [isMsg, setIsMsg] = useState(false);
|
||||
const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
|
||||
const [msgTitle, setMsgTitle] = useState("");
|
||||
const [msgDescription, setMsgDescription] = useState("");
|
||||
|
||||
const handleCheckboxChange = (itemId: number) => {
|
||||
setSelectedItems((prevSelected) =>
|
||||
prevSelected.includes(itemId)
|
||||
? prevSelected.filter((id) => id !== itemId)
|
||||
: [...prevSelected, itemId],
|
||||
);
|
||||
};
|
||||
|
||||
const showApprovalAnimation = (seconds: number) => {
|
||||
const milliseconds = seconds * 1000;
|
||||
|
||||
setShowAnimation(true);
|
||||
window.setTimeout(() => {
|
||||
setShowAnimation(false);
|
||||
}, milliseconds);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showAnimation && (
|
||||
<div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
|
||||
<div>{approvalAnimation()}</div>
|
||||
</div>
|
||||
)}
|
||||
<Container className="px-6 sm:px-8 pt-10">
|
||||
<Header />
|
||||
<DeactivatedServices />
|
||||
{isMsg && (
|
||||
<MyAlert
|
||||
status={msgStatus}
|
||||
title={msgTitle}
|
||||
description={msgDescription}
|
||||
/>
|
||||
)}
|
||||
<Stack as="main">
|
||||
<Text>{t("timezone-info")}</Text>
|
||||
<label htmlFor="startDate">
|
||||
<strong>
|
||||
<Text>{t("start-date")}</Text>
|
||||
</strong>
|
||||
</label>
|
||||
<Input
|
||||
id="startDate"
|
||||
placeholder={t("start-date")}
|
||||
type="datetime-local"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
/>
|
||||
<label htmlFor="endDate">
|
||||
<strong>
|
||||
<Text>{t("end-date")}</Text>
|
||||
</strong>
|
||||
</label>
|
||||
<Input
|
||||
id="endDate"
|
||||
placeholder={t("end-date")}
|
||||
type="datetime-local"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
setIsLoadingA(true);
|
||||
if (!startDate || !endDate) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("missing-fields"));
|
||||
setMsgDescription(t("missing-fields-desc"));
|
||||
setIsMsg(true);
|
||||
setIsLoadingA(false);
|
||||
return;
|
||||
}
|
||||
await getBorrowableItems(startDate, endDate).then((response) => {
|
||||
setIsLoadingA(false);
|
||||
if (response && response.status === "error") {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(response.title || t("error"));
|
||||
setMsgDescription(response.description || t("unknown-error"));
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
setBorrowableItems(response.data);
|
||||
setIsMsg(false);
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("get-borrowable-items")}
|
||||
</Button>
|
||||
{borrowableItems.length > 0 && (
|
||||
<Table.ScrollArea borderWidth="1px" rounded="md">
|
||||
<Table.Root size="sm" stickyHeader>
|
||||
<Table.Header>
|
||||
<Table.Row bg="bg.subtle">
|
||||
<Table.ColumnHeader></Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{borrowableItems.map((item) => (
|
||||
<Table.Row key={item.id}>
|
||||
<Table.Cell>
|
||||
<input
|
||||
onChange={() => handleCheckboxChange(item.id)}
|
||||
type="checkbox"
|
||||
name={item.id}
|
||||
id={item.id}
|
||||
/>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{item.item_name}</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
<Table.Row>
|
||||
<Table.Cell colSpan={2}>
|
||||
<InputGroup
|
||||
endElement={
|
||||
<Span color="fg.muted" textStyle="xs">
|
||||
{note.length} / {MAX_CHARACTERS}
|
||||
</Span>
|
||||
}
|
||||
>
|
||||
<Input
|
||||
placeholder={t("optional-note")}
|
||||
value={note}
|
||||
maxLength={MAX_CHARACTERS}
|
||||
onChange={(e) => {
|
||||
setNote(
|
||||
e.currentTarget.value.slice(0, MAX_CHARACTERS),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Table.ScrollArea>
|
||||
)}
|
||||
{selectedItems.length >= 1 && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setIsLoadingA(true);
|
||||
createLoan(selectedItems, startDate, endDate, note).then(
|
||||
(response) => {
|
||||
setIsLoadingA(false);
|
||||
if (response.status === "error") {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(response.title || t("error"));
|
||||
setMsgDescription(
|
||||
response.description || t("unknown-error"),
|
||||
);
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
showApprovalAnimation(3);
|
||||
setMsgStatus("success");
|
||||
setMsgTitle(t("success"));
|
||||
setMsgDescription(t("loan-success"));
|
||||
setIsMsg(true);
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t("create-loan")}
|
||||
</Button>
|
||||
)}
|
||||
{isLoadingA && (
|
||||
<VStack colorPalette="teal">
|
||||
<Spinner color="colorPalette.600" />
|
||||
<Text color="colorPalette.600">{t("loading")}</Text>
|
||||
</VStack>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,276 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Spinner,
|
||||
Text,
|
||||
VStack,
|
||||
Table,
|
||||
Heading,
|
||||
HStack,
|
||||
Card,
|
||||
SimpleGrid,
|
||||
Button,
|
||||
Container,
|
||||
} from "@chakra-ui/react";
|
||||
import MyAlert from "@/components/myChakra/MyAlert";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
import Cookies from "js-cookie";
|
||||
import { Header } from "@/components/Header";
|
||||
|
||||
export const formatDateTime = (value: string | null | undefined) => {
|
||||
if (!value) return "N/A";
|
||||
const m = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
|
||||
if (!m) return "N/A";
|
||||
const [, y, M, d, h, min] = m;
|
||||
return `${d}.${M}.${y} ${h}:${min} Uhr`;
|
||||
};
|
||||
|
||||
type Loan = {
|
||||
id: number;
|
||||
username: string;
|
||||
start_date: string;
|
||||
end_date: string;
|
||||
returned_date: string | null;
|
||||
take_date: string | null;
|
||||
loaned_items_name: string[] | string;
|
||||
note: string | null;
|
||||
};
|
||||
|
||||
type Device = {
|
||||
id: number;
|
||||
item_name: string;
|
||||
can_borrow_role: string;
|
||||
in_safe: number;
|
||||
entry_created_at: string;
|
||||
last_borrowed_person: string | null;
|
||||
currently_borrowing: string | null;
|
||||
};
|
||||
|
||||
const Landingpage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [loans, setLoans] = useState<Loan[]>([]);
|
||||
const [devices, setDevices] = useState<Device[]>([]);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const [errorStatus, setErrorStatus] = useState<"error" | "success">("error");
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const [errorDsc, setErrorDsc] = useState("");
|
||||
|
||||
const setError = (
|
||||
status: "error" | "success",
|
||||
message: string,
|
||||
description: string,
|
||||
) => {
|
||||
setIsError(false);
|
||||
setErrorStatus(status);
|
||||
setErrorMessage(message);
|
||||
setErrorDsc(description);
|
||||
setIsError(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const loanRes = await fetch(`${API_BASE}/api/loans/all-loans`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
});
|
||||
if (loanRes.status === 503) {
|
||||
setError(
|
||||
"error",
|
||||
t("serviceDeactivatedHeadline"),
|
||||
t("loan_page_serviceDeactivatedText"),
|
||||
);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loanData = await loanRes.json();
|
||||
if (Array.isArray(loanData)) {
|
||||
setLoans(loanData);
|
||||
} else {
|
||||
setError(
|
||||
"error",
|
||||
t("error-by-loading"),
|
||||
t("unexpected-date-format_loan"),
|
||||
);
|
||||
}
|
||||
|
||||
const deviceRes = await fetch(`${API_BASE}/api/loans/all-items`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
});
|
||||
const deviceData = await deviceRes.json();
|
||||
if (Array.isArray(deviceData)) {
|
||||
setDevices(deviceData);
|
||||
} else {
|
||||
setError(
|
||||
"error",
|
||||
t("error-by-loading"),
|
||||
t("unexpected-date-format_device"),
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
setError("error", t("error-by-loading"), t("error-fetching-loans"));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Container className="px-6 sm:px-8 pt-10">
|
||||
<Header />
|
||||
|
||||
<Heading as="h2" size="md" mb={4}>
|
||||
{t("all-loans")}
|
||||
</Heading>
|
||||
|
||||
{isError && (
|
||||
<MyAlert
|
||||
status={errorStatus}
|
||||
description={errorDsc}
|
||||
title={errorMessage}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<VStack colorPalette="teal">
|
||||
<Spinner color="colorPalette.600" />
|
||||
<Text color="colorPalette.600">{t("loading")}</Text>
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{!isLoading && (
|
||||
<Table.Root size="sm" striped>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader>
|
||||
<strong>#</strong>
|
||||
</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>
|
||||
<strong>{t("username")}</strong>
|
||||
</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>
|
||||
<strong>{t("start-date")}</strong>
|
||||
</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>
|
||||
<strong>{t("end-date")}</strong>
|
||||
</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>
|
||||
<strong>{t("rented-items")}</strong>
|
||||
</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>
|
||||
<strong>{t("take-date")}</strong>
|
||||
</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>
|
||||
<strong>{t("return-date")}</strong>
|
||||
</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>
|
||||
<strong>{t("note")}</strong>
|
||||
</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{loans.map((loan) => (
|
||||
<Table.Row key={loan.id}>
|
||||
<Table.Cell>{loan.id}</Table.Cell>
|
||||
<Table.Cell>{loan.username}</Table.Cell>
|
||||
<Table.Cell>{formatDateTime(loan.start_date)}</Table.Cell>
|
||||
<Table.Cell>{formatDateTime(loan.end_date)}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{Array.isArray(loan.loaned_items_name)
|
||||
? loan.loaned_items_name.join(", ")
|
||||
: loan.loaned_items_name}
|
||||
</Table.Cell>
|
||||
<Table.Cell>{formatDateTime(loan.take_date)}</Table.Cell>
|
||||
<Table.Cell>{formatDateTime(loan.returned_date)}</Table.Cell>
|
||||
<Table.Cell>{loan.note}</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
)}
|
||||
|
||||
{!isLoading && loans.length === 0 && !isError && (
|
||||
<Text color="gray.500" mt={2}>
|
||||
{t("no-loans-found")}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Heading as="h2" size="md" mb={4}>
|
||||
{t("all-devices")}
|
||||
</Heading>
|
||||
|
||||
{/* Responsive Grid mit gleich hohen Karten */}
|
||||
<SimpleGrid minChildWidth="200px" gap={2} alignItems="stretch">
|
||||
{devices.map((device) => (
|
||||
<Card.Root
|
||||
key={device.id}
|
||||
size="sm"
|
||||
bg={device.in_safe ? "green" : "red"}
|
||||
h="full"
|
||||
minH="100px"
|
||||
>
|
||||
<Card.Header>
|
||||
<Heading size="md">
|
||||
<strong>{device.item_name}</strong>
|
||||
</Heading>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<Text>
|
||||
<strong>{t("role")}</strong>: {device.can_borrow_role}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>{t("last-borrowed-person")}</strong>:{" "}
|
||||
{device.last_borrowed_person || "N/A"}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>{t("currently-borrowed-by")}</strong>:{" "}
|
||||
{device.currently_borrowing || "N/A"}
|
||||
</Text>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<HStack mt={3} gap={3} align="center" role="group" aria-label="Legende">
|
||||
<Text fontWeight="medium" color="fg.muted">
|
||||
{t("legend")}:
|
||||
</Text>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
colorPalette="green"
|
||||
pointerEvents="none"
|
||||
cursor="default"
|
||||
borderRadius="full"
|
||||
>
|
||||
<HStack gap={2}>
|
||||
<Text>{t("in-locker")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
colorPalette="red"
|
||||
pointerEvents="none"
|
||||
cursor="default"
|
||||
borderRadius="full"
|
||||
>
|
||||
<HStack gap={2}>
|
||||
<Text>{t("not-in-locker")}</Text>
|
||||
</HStack>
|
||||
</Button>
|
||||
</HStack>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landingpage;
|
||||
@@ -0,0 +1,159 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import MyAlert from "../components/myChakra/MyAlert";
|
||||
import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
|
||||
import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
|
||||
import { useAtom } from "jotai";
|
||||
import Cookies from "js-cookie";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { PasswordInput } from "@/components/ui/password-input";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
import { unlockAnimation } from "@/components/dotLottie";
|
||||
import { logoutAnimation } from "@/components/dotLottie";
|
||||
|
||||
export const LoginPage = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
|
||||
const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
|
||||
const [showAnimation, setShowAnimation] = useState(false);
|
||||
const [showLogout, setShowLogout] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const from = location.state?.from?.pathname || "/";
|
||||
|
||||
useEffect(() => {
|
||||
if (triggerLogout) {
|
||||
setShowLogout(true);
|
||||
window.setTimeout(() => {
|
||||
setShowLogout(false);
|
||||
}, 4500);
|
||||
}
|
||||
|
||||
if (!isLoggedIn) return;
|
||||
|
||||
// Existing sessions should redirect immediately, fresh logins wait for animation.
|
||||
if (!showAnimation) {
|
||||
navigate(from, { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
const timeoutId = window.setTimeout(() => {
|
||||
navigate(from, { replace: true });
|
||||
window.location.reload(); // keeps user context in sync after login
|
||||
}, 3000);
|
||||
|
||||
return () => window.clearTimeout(timeoutId);
|
||||
}, [isLoggedIn, showAnimation, navigate, from]);
|
||||
|
||||
const loginFnc = async (username: string, password: string) => {
|
||||
const response = await fetch(`${API_BASE}/api/users/login`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
return {
|
||||
success: false,
|
||||
message: data.message ?? t("login-failed"),
|
||||
description: data.description ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
setShowAnimation(true);
|
||||
|
||||
Cookies.set("token", data.token);
|
||||
setIsLoggedIn(true);
|
||||
return { success: true };
|
||||
};
|
||||
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isError, setIsError] = useState(false);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const [errorDsc, setErrorDsc] = useState("");
|
||||
|
||||
const handleLogin = async () => {
|
||||
const result = await loginFnc(username, password);
|
||||
if (!result.success) {
|
||||
setErrorMsg(result.message);
|
||||
setErrorDsc(result.description);
|
||||
setIsError(true);
|
||||
return;
|
||||
}
|
||||
setTriggerLogout(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showAnimation && (
|
||||
<div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
|
||||
<div>{unlockAnimation()}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showLogout && (
|
||||
<div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
|
||||
<div>{logoutAnimation()}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<Card.Root maxW="sm">
|
||||
<Card.Header>
|
||||
<Card.Title>{t("login")}</Card.Title>
|
||||
<Card.Description>{t("enter-credentials")}</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<Stack gap="4" w="full">
|
||||
<Field.Root>
|
||||
<Field.Label>{t("username")}</Field.Label>
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
</Field.Root>
|
||||
<Field.Root>
|
||||
<Field.Label>{t("password")}</Field.Label>
|
||||
<PasswordInput
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
</Card.Body>
|
||||
<Card.Footer justifyContent="flex-end">
|
||||
{isError && (
|
||||
<MyAlert
|
||||
status="error"
|
||||
title={errorMsg}
|
||||
description={errorDsc}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={() => handleLogin()}
|
||||
variant="solid"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</Card.Footer>
|
||||
<Card.Footer justifyContent="flex-end">
|
||||
{triggerLogout && (
|
||||
<MyAlert
|
||||
status="success"
|
||||
title={t("logout-success")}
|
||||
description={t("logout-success-desc")}
|
||||
/>
|
||||
)}
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,396 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import MyAlert from "@/components/myChakra/MyAlert";
|
||||
import {
|
||||
Container,
|
||||
VStack,
|
||||
Spinner,
|
||||
Text,
|
||||
Table,
|
||||
Button,
|
||||
CloseButton,
|
||||
Dialog,
|
||||
Portal,
|
||||
Code,
|
||||
Box,
|
||||
} from "@chakra-ui/react";
|
||||
import { Header } from "@/components/Header";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
|
||||
export const MyLoansPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [loans, setLoans] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [delLoanCode, setDelLoanCode] = useState<number | null>(null);
|
||||
|
||||
// Error handling states
|
||||
const [isMsg, setIsMsg] = useState(false);
|
||||
const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
|
||||
const [msgTitle, setMsgTitle] = useState("");
|
||||
const [msgDescription, setMsgDescription] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!Cookies.get("token")) {
|
||||
navigate("/login", { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchLoans = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await fetch(`${API_BASE}/api/loans/loans`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
if (res.status === 503) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("serviceDeactivatedHeadline"));
|
||||
setMsgDescription(t("loan_page_serviceDeactivatedText"));
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("error-fetching-loans"));
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
setLoans(data);
|
||||
} catch (e) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("network-error-fetching-loans"));
|
||||
setIsMsg(true);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLoans();
|
||||
}, [navigate]);
|
||||
|
||||
const deleteLoan = async (loanId: number) => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/loans/delete-loan/${loanId}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
if (res.status === 507) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("error-deleting-loan-507"));
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("error-deleting-loan"));
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoans((prev) => prev.filter((loan) => loan.id !== loanId));
|
||||
setMsgStatus("success");
|
||||
setMsgTitle(t("success"));
|
||||
setMsgDescription(t("loan-deletion-success"));
|
||||
setIsMsg(true);
|
||||
} catch (e) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("network-error-deleting-loan"));
|
||||
setIsMsg(true);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (iso: string | null) => {
|
||||
if (!iso) return "-";
|
||||
const date = new Date(iso);
|
||||
if (isNaN(date.getTime())) return iso;
|
||||
return date.toLocaleString("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const dateAndTime = (isISO: boolean) => {
|
||||
const date = new Date();
|
||||
|
||||
if (isISO) {
|
||||
return date.toISOString();
|
||||
}
|
||||
|
||||
if (!isISO) {
|
||||
return date;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTakeAction = async (loanCode: string) => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${API_BASE}/api/loans/set-take-date/${loanCode}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("error-take-loan"));
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the loan in state
|
||||
setLoans((prev) =>
|
||||
prev.map((loan) =>
|
||||
loan.loan_code === loanCode
|
||||
? { ...loan, take_date: dateAndTime(true) }
|
||||
: loan,
|
||||
),
|
||||
);
|
||||
setMsgStatus("success");
|
||||
setMsgTitle(t("success"));
|
||||
setMsgDescription(t("take-loan-success"));
|
||||
setIsMsg(true);
|
||||
} catch (e) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("network-error"));
|
||||
setIsMsg(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReturnAction = async (loanCode: string) => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${API_BASE}/api/loans/set-return-date/${loanCode}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token")}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("error-return-loan"));
|
||||
setIsMsg(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the loan in state
|
||||
setLoans((prev) =>
|
||||
prev.map((loan) =>
|
||||
loan.loan_code === loanCode
|
||||
? { ...loan, returned_date: dateAndTime(true) }
|
||||
: loan,
|
||||
),
|
||||
);
|
||||
setMsgStatus("success");
|
||||
setMsgTitle(t("success"));
|
||||
setMsgDescription(t("return-loan-success"));
|
||||
setIsMsg(true);
|
||||
} catch (e) {
|
||||
setMsgStatus("error");
|
||||
setMsgTitle(t("error"));
|
||||
setMsgDescription(t("network-error"));
|
||||
setIsMsg(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container className="px-6 sm:px-8 pt-10">
|
||||
<Header />
|
||||
{isMsg && (
|
||||
<MyAlert
|
||||
status={msgStatus}
|
||||
title={msgTitle}
|
||||
description={msgDescription}
|
||||
/>
|
||||
)}
|
||||
{isLoading && (
|
||||
<VStack colorPalette="teal">
|
||||
<Spinner color="colorPalette.600" />
|
||||
<Text color="colorPalette.600">{t("loading")}</Text>
|
||||
</VStack>
|
||||
)}
|
||||
{loans && (
|
||||
<Box
|
||||
overflowX="auto"
|
||||
width="100%"
|
||||
// Optional: add bottom padding to avoid scrollbar overlap
|
||||
pb={2}
|
||||
>
|
||||
<Table.Root
|
||||
size="sm"
|
||||
variant="outline"
|
||||
// minWidth ensures we don't cram all columns on tiny screens;
|
||||
// horizontal scrolling will appear instead.
|
||||
style={{ tableLayout: "fixed", width: "100%", minWidth: "800px" }}
|
||||
>
|
||||
<Table.ColumnGroup>
|
||||
{/* Ausleihcode */}
|
||||
<Table.Column style={{ width: "14%" }} />
|
||||
{/* Startdatum */}
|
||||
<Table.Column style={{ width: "14%" }} />
|
||||
{/* Enddatum */}
|
||||
<Table.Column style={{ width: "14%" }} />
|
||||
{/* Geräte (flexibler) */}
|
||||
<Table.Column style={{ width: "28%" }} />
|
||||
{/* Ausleihdatum */}
|
||||
<Table.Column style={{ width: "14%" }} />
|
||||
{/* Rückgabedatum */}
|
||||
<Table.Column style={{ width: "14%" }} />
|
||||
{/* Notiz */}
|
||||
<Table.Column style={{ width: "14%" }} />
|
||||
{/* Aktionen */}
|
||||
<Table.Column style={{ width: "8%" }} />
|
||||
</Table.ColumnGroup>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("note")}</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{loans.map((loan) => (
|
||||
<Table.Row key={loan.id}>
|
||||
<Table.Cell>
|
||||
<Text title={loan.loan_code}>
|
||||
<Code variant="solid">{`${loan.loan_code}`}</Code>
|
||||
</Text>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{formatDate(loan.start_date)}</Table.Cell>
|
||||
<Table.Cell>{formatDate(loan.end_date)}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Text>
|
||||
{Array.isArray(loan.loaned_items_name)
|
||||
? loan.loaned_items_name.join(", ")
|
||||
: "-"}
|
||||
</Text>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{loan.take_date ? (
|
||||
formatDate(loan.take_date)
|
||||
) : (
|
||||
<Button
|
||||
size="xs"
|
||||
colorPalette="teal"
|
||||
onClick={() => handleTakeAction(loan.loan_code)}
|
||||
>
|
||||
{t("take")}
|
||||
</Button>
|
||||
)}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{loan.returned_date ? (
|
||||
formatDate(loan.returned_date)
|
||||
) : (
|
||||
<Button
|
||||
size="xs"
|
||||
colorPalette="blue"
|
||||
onClick={() => handleReturnAction(loan.loan_code)}
|
||||
disabled={!loan.take_date}
|
||||
>
|
||||
{t("return")}
|
||||
</Button>
|
||||
)}
|
||||
</Table.Cell>
|
||||
<Table.Cell>{loan.note}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Dialog.Root role="alertdialog">
|
||||
<Dialog.Trigger asChild>
|
||||
<Button
|
||||
onClick={() => setDelLoanCode(loan.loan_code)}
|
||||
aria-label="Ausleihe löschen"
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</Dialog.Trigger>
|
||||
<Portal>
|
||||
<Dialog.Backdrop />
|
||||
<Dialog.Positioner>
|
||||
<Dialog.Content>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>{t("sure")}</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
<Dialog.Body>
|
||||
<Text>
|
||||
{t("sure-delete-loan-0")}
|
||||
<strong>
|
||||
<Code>{delLoanCode}</Code>
|
||||
</strong>{" "}
|
||||
{t("sure-delete-loan-1")}
|
||||
<br />
|
||||
{t("sure-delete-loan-2")}
|
||||
</Text>
|
||||
</Dialog.Body>
|
||||
<Dialog.Footer>
|
||||
<Dialog.ActionTrigger asChild>
|
||||
<Button variant="outline">
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</Dialog.ActionTrigger>
|
||||
<Button
|
||||
colorPalette="red"
|
||||
onClick={() => deleteLoan(loan.id)}
|
||||
>
|
||||
<strong>{t("delete")}</strong>
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
<Dialog.CloseTrigger asChild>
|
||||
<CloseButton size="sm" />
|
||||
</Dialog.CloseTrigger>
|
||||
</Dialog.Content>
|
||||
</Dialog.Positioner>
|
||||
</Portal>
|
||||
</Dialog.Root>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Box>
|
||||
)}
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import { atom } from "jotai";
|
||||
|
||||
interface Meta {
|
||||
"backend-info": {
|
||||
version: String;
|
||||
};
|
||||
"frontend-info": {
|
||||
version: String;
|
||||
};
|
||||
}
|
||||
|
||||
export const testAtom = atom<number>(0);
|
||||
export const setIsLoggedInAtom = atom<boolean>(false);
|
||||
export const triggerLogoutAtom = atom<boolean>(false);
|
||||
export const borrowAbleItemsAtom = atom<any[]>([]);
|
||||
export const infoAtom = atom<Meta | undefined>(undefined);
|
||||
@@ -0,0 +1,22 @@
|
||||
import { createContext } from "react";
|
||||
import { useContext } from "react";
|
||||
|
||||
export interface User {
|
||||
username: string;
|
||||
is_admin: boolean;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
role: number;
|
||||
}
|
||||
|
||||
export const UserContext = createContext<User | undefined>(undefined);
|
||||
|
||||
export function useUserContext() {
|
||||
const user = useContext(UserContext);
|
||||
|
||||
if (user === undefined) {
|
||||
throw new Error("useUserContext must be used with a UserContext");
|
||||
}
|
||||
|
||||
return user;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
# How to use Atoms
|
||||
Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components.
|
||||
|
||||
You can also name it global state.
|
||||
|
||||
## Creating an Atom
|
||||
to create an atom you have to declare an atom like this:
|
||||
|
||||
```ts
|
||||
import { atom } from 'jotai';
|
||||
|
||||
export const NAME_OF_YOUR_ATOM = atom<type_of_your_atom>(initial_value);
|
||||
```
|
||||
|
||||
In this project we declare all atoms in the `states/Atoms.tsx`file. Which you can find above this README file.
|
||||
|
||||
## Using an Atom
|
||||
To use an atom in your component, you can use the `useAtom` hook provided by Jotai. Here's an example of how to use an atom in a React component:
|
||||
|
||||
```tsx
|
||||
import { useAtom } from 'jotai';
|
||||
import { NAME_OF_YOUR_ATOM } from '@/states/Atoms';
|
||||
|
||||
const MyComponent = () => {
|
||||
const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Current value: {value}</p>
|
||||
<button onClick={() => setValue(newValue)}>Update Value</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
As you can see, you can use `useAtom` like `useState` but the state is global. In this example `value` is the current state of the atom, and `setValue` is a function to update the state, which is also known as the setter function.
|
||||
@@ -0,0 +1,99 @@
|
||||
import Cookies from "js-cookie";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
|
||||
export const getBorrowableItems = async (
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/loans/borrowable-items`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get("token") || ""}`,
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify({ startDate, endDate }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 503) {
|
||||
return {
|
||||
data: null,
|
||||
status: "error",
|
||||
title: "Service deactivated",
|
||||
description:
|
||||
"The loan service is currently deactivated. Please try again later.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
data: null,
|
||||
status: "error",
|
||||
title: "Server error",
|
||||
description:
|
||||
"An error occurred on the server. Sometimes reloading the page helps. Otherwise, please contact the administrator.",
|
||||
};
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
data: data,
|
||||
status: "success",
|
||||
title: null,
|
||||
description: null,
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
data: null,
|
||||
status: "error",
|
||||
title: "Netzwerkfehler",
|
||||
description:
|
||||
"Es konnte keine Verbindung zum Server hergestellt werden. Bitte überprüfe deine Internetverbindung.",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const createLoan = async (
|
||||
itemIds: number[],
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
note: string | null,
|
||||
) => {
|
||||
const response = await fetch(`${API_BASE}/api/loans/createLoan`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${Cookies.get("token") || ""}`,
|
||||
},
|
||||
body: JSON.stringify({ items: itemIds, startDate, endDate, note }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 503) {
|
||||
return {
|
||||
data: null,
|
||||
status: "error",
|
||||
title: "Service deactivated",
|
||||
description:
|
||||
"The loan service is currently deactivated. Please try again later.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
data: null,
|
||||
status: "error",
|
||||
title: "Server error",
|
||||
description:
|
||||
"Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
|
||||
};
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return {
|
||||
data: data,
|
||||
status: "success",
|
||||
title: null,
|
||||
description: null,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Navigate, Outlet, useLocation } from "react-router-dom";
|
||||
import Cookies from "js-cookie";
|
||||
import { useContext } from "react";
|
||||
import { UserContext } from "@/states/Context";
|
||||
|
||||
export const ProtectedRoutes = () => {
|
||||
const user = useContext(UserContext);
|
||||
const location = useLocation();
|
||||
const hasToken = Boolean(Cookies.get("token"));
|
||||
|
||||
if (hasToken && !user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return user ? (
|
||||
<Outlet />
|
||||
) : (
|
||||
<Navigate to="/login" replace state={{ from: location }} />
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
import i18n from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
import enLang from "./locales/en/en.json";
|
||||
import deLang from "./locales/de/de.json";
|
||||
|
||||
// the translations
|
||||
// (tip move them in a JSON file and import them,
|
||||
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
|
||||
const resources = {
|
||||
en: {
|
||||
translation: enLang,
|
||||
},
|
||||
de: {
|
||||
translation: deLang,
|
||||
},
|
||||
};
|
||||
|
||||
i18n
|
||||
.use(initReactI18next) // passes i18n down to react-i18next
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: "en", // use en if detected lng is not available
|
||||
lng: Cookies.get("language") || "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
|
||||
// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
|
||||
// if you're using a language detector, do not define the lng option
|
||||
|
||||
interpolation: {
|
||||
escapeValue: false, // react already safes from xss
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"greeting": "Willkommen zurück, ",
|
||||
"err_pw_change": "Passwortänderung fehlgeschlagen",
|
||||
"pw_mismatch": "Bitte überprüfen Sie Ihre Eingaben",
|
||||
"pw_success": "Passwort erfolgreich geändert",
|
||||
"pw_success_desc": "Ihr Passwort wurde erfolgreich geändert.",
|
||||
"create-loan": "Ausleihe erstellen",
|
||||
"my-loans": "Meine Ausleihen",
|
||||
"change-password": "Passwort ändern",
|
||||
"help": "Hilfe",
|
||||
"source-code": "Quellcode",
|
||||
"logout": "Abmelden",
|
||||
"old-password": "Altes Passwort",
|
||||
"new-password": "Neues Passwort",
|
||||
"confirm-password": "Neues Passwort wiederholen",
|
||||
"cancel": "Abbrechen",
|
||||
"save": "Speichern",
|
||||
"start-date": "Startdatum",
|
||||
"end-date": "Enddatum",
|
||||
"missing-fields": "Fehlende Eingaben",
|
||||
"missing-fields-desc": "Bitte Start- und Enddatum angeben.",
|
||||
"error": "Fehler",
|
||||
"unknown-error": "Unbekannter Frontend Fehler",
|
||||
"get-borrowable-items": "Verfügbare Gegenstände abrufen",
|
||||
"loading": "Laden...",
|
||||
"item": "Gegenstand",
|
||||
"success": "Erfolg",
|
||||
"loan-success": "Ausleihe erfolgreich erstellt",
|
||||
"error-by-loading": "Fehler beim Laden",
|
||||
"unexpected-date-format_loan": "Unerwartetes Datumsformat erhalten. (Ausleihen)",
|
||||
"unexpected-date-format_device": "Unerwartetes Datumsformat erhalten. (Gerät)",
|
||||
"error-fetching-loans": "Die Ausleihen konnten nicht abgerufen werden.",
|
||||
"all-loans": "Alle Ausleihen",
|
||||
"username": "Benutzername",
|
||||
"rented-items": "Ausgeliehene Gegenstände",
|
||||
"return-date": "Rückgabedatum",
|
||||
"take-date": "Abholdatum",
|
||||
"no-loans-found": "Keine Ausleihen vorhanden.",
|
||||
"all-devices": "Alle Geräte",
|
||||
"rent-role": "Ausleihrolle",
|
||||
"legend": "Legende",
|
||||
"in-locker": "Im Schließfach",
|
||||
"not-in-locker": "Nicht im Schließfach",
|
||||
"login-failed": "Anmeldung fehlgeschlagen",
|
||||
"login": "Anmelden",
|
||||
"enter-credentials": "Bitte unten Ihre Anmeldedaten eingeben.",
|
||||
"password": "Passwort",
|
||||
"logout-success": "Erfolgreich abgemeldet",
|
||||
"logout-success-desc": "Sie wurden erfolgreich abgemeldet.",
|
||||
"network-error-fetching-loans": "Netzwerkfehler beim Laden der Ausleihen.",
|
||||
"error-deleting-loan": "Die Ausleihe konnte nicht gelöscht werden.",
|
||||
"loan-deletion-success": "Die Ausleihe wurde erfolgreich gelöscht.",
|
||||
"network-error-deleting-loan": "Netzwerkfehler beim Löschen der Ausleihe.",
|
||||
"loan-code": "Ausleihcode",
|
||||
"devices": "Geräte",
|
||||
"actions": "Aktionen",
|
||||
"sure": "Sind Sie sicher?",
|
||||
"sure-delete-loan-0": "Möchten Sie die Ausleihe mit dem ",
|
||||
"sure-delete-loan-1": " Ausleihcode wirklich löschen?",
|
||||
"sure-delete-loan-2": "Für den Admin bleibt sie weiterhin sichtbar.",
|
||||
"delete": "Löschen",
|
||||
"change-language": "Sprache ändern",
|
||||
"timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden. Das gesamte System ist auf die deutsche Zeitzone eingestellt.",
|
||||
"optional-note": "Optionale Notiz",
|
||||
"note": "Notiz",
|
||||
"user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und das Passwort ändern. Falls Sie weitere Änderungen benötigen, wenden Sie sich bitte an einen Administrator.",
|
||||
"role": "Rolle",
|
||||
"admin-status": "Admin-Status",
|
||||
"first-name": "Vorname",
|
||||
"last-name": "Nachname",
|
||||
"app-title": "Ausleihsystem",
|
||||
"last-borrowed-person": "Zuletzt ausgeliehen von",
|
||||
"currently-borrowed-by": "Derzeit ausgeliehen von",
|
||||
"back": "Zurückgehen",
|
||||
"landingpage": "Übersichtsseite",
|
||||
"contactPage_successHeadline": "Nachricht erfolgreich gesendet",
|
||||
"contactPage_successText": "Vielen Dank, dass Sie uns kontaktiert haben. Wir werden uns so schnell wie möglich bei Ihnen melden.",
|
||||
"contactPage_errorHeadline": "Fehler beim Senden der Nachricht",
|
||||
"contactPage_errorText": "Beim Senden Ihrer Nachricht ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
|
||||
"contactPage_sendButton": "Nachricht senden",
|
||||
"contactPage_messageLabel": "Nachricht",
|
||||
"contactPage_messagePlaceholder": "Geben Sie hier Ihre Nachricht ein...",
|
||||
"contactPage_messageErrorText": "Dieses Feld darf nicht leer sein.",
|
||||
"contact": "Kontakt",
|
||||
"take": "Abholen",
|
||||
"return": "Zurückgeben",
|
||||
"serverError": "Serverfehler. Bitte versuchen Sie es später erneut, oder laden Sie die Seite neu.",
|
||||
"take-loan-success": "Ausleihe erfolgreich abgeholt",
|
||||
"return-loan-success": "Ausleihe erfolgreich zurückgegeben",
|
||||
"network-error": "Netzwerkfehler. Kontaktieren Sie den Administrator.",
|
||||
"contactPage_messageDescription": "Bitte geben Sie hier Ihre Nachricht ein. Der Systemadministrator (Theis Gaedigk) wird sich so schnell wie möglich bei Ihnen melden.",
|
||||
"naas": "No-as-a-service",
|
||||
"try-naas": "Klick mich",
|
||||
"naas-error": "Fehler mit no-as-a-service",
|
||||
"naas-error-desc": "Ein Fehler ist beim Kommunizieren mit no-as-a-service aufgetreten.",
|
||||
"naas-header": "Eine gute Möglichkeit, nein zu sagen...",
|
||||
"error-deleting-loan-507": "Die Ausleihe kann nicht gelöscht werden, da sie noch nicht zurückgegeben wurde.",
|
||||
"serviceDeactivatedHeadline": "Service deaktiviert",
|
||||
"contactPage_serviceDeactivatedText": "Der Kontaktservice ist derzeit deaktiviert. Bitte versuchen Sie es später erneut.",
|
||||
"loan_page_serviceDeactivatedText": "Der Ausleihservice ist derzeit deaktiviert. Bitte versuchen Sie es später erneut.",
|
||||
"is-deactivated": "ist deaktiviert.",
|
||||
"deactivated-services": "Deaktivierte Services",
|
||||
"contactPage_messageErrorHeadline": "Fehler bei der Nachrichteneingabe",
|
||||
"contactPage_messageErrorText2": "Bitte geben Sie eine Nachricht ein, bevor Sie sie senden."
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"greeting": "Welcome back, ",
|
||||
"err_pw_change": "Password change failed",
|
||||
"pw_mismatch": "Please check your input",
|
||||
"pw_success": "Password changed successfully",
|
||||
"pw_success_desc": "Your password was changed successfully.",
|
||||
"create-loan": "Create loan",
|
||||
"my-loans": "My loans",
|
||||
"change-password": "Change password",
|
||||
"help": "Help",
|
||||
"source-code": "Source code",
|
||||
"logout": "Log out",
|
||||
"old-password": "Old password",
|
||||
"new-password": "New password",
|
||||
"confirm-password": "Repeat new password",
|
||||
"cancel": "Cancel",
|
||||
"save": "Save",
|
||||
"start-date": "Start date",
|
||||
"end-date": "End date",
|
||||
"missing-fields": "Missing fields",
|
||||
"missing-fields-desc": "Please provide start and end date.",
|
||||
"error": "Error",
|
||||
"unknown-error": "Unknown frontend error",
|
||||
"get-borrowable-items": "Fetch available items",
|
||||
"loading": "Loading...",
|
||||
"item": "Item",
|
||||
"success": "Success",
|
||||
"loan-success": "Loan created successfully",
|
||||
"error-by-loading": "Error while loading",
|
||||
"unexpected-date-format_loan": "Unexpected date format received. (Loans)",
|
||||
"unexpected-date-format_device": "Unexpected date format received. (Device)",
|
||||
"error-fetching-loans": "The loans could not be retrieved.",
|
||||
"all-loans": "All loans",
|
||||
"username": "Username",
|
||||
"rented-items": "Borrowed items",
|
||||
"return-date": "Return date",
|
||||
"take-date": "Collection date",
|
||||
"no-loans-found": "No loans found.",
|
||||
"all-devices": "All devices",
|
||||
"rent-role": "Loan role",
|
||||
"legend": "Legend",
|
||||
"in-locker": "In locker",
|
||||
"not-in-locker": "Not in locker",
|
||||
"login-failed": "Login failed",
|
||||
"login": "Log in",
|
||||
"enter-credentials": "Please enter your credentials below.",
|
||||
"password": "Password",
|
||||
"logout-success": "Successfully logged out",
|
||||
"logout-success-desc": "You have been logged out successfully.",
|
||||
"network-error-fetching-loans": "Network error while loading loans.",
|
||||
"error-deleting-loan": "The loan could not be deleted.",
|
||||
"loan-deletion-success": "The loan was deleted successfully.",
|
||||
"network-error-deleting-loan": "Network error while deleting the loan.",
|
||||
"loan-code": "Loan code",
|
||||
"devices": "Devices",
|
||||
"actions": "Actions",
|
||||
"sure": "Are you sure?",
|
||||
"sure-delete-loan-0": "Do you really want to delete the loan with the ",
|
||||
"sure-delete-loan-1": " loan code?",
|
||||
"sure-delete-loan-2": "It will remain visible to the admin.",
|
||||
"delete": "Delete",
|
||||
"change-language": "Change language",
|
||||
"timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such. The entire system is set to Berlin timezone.",
|
||||
"optional-note": "Optional note",
|
||||
"note": "Note",
|
||||
"user-info-desc": "Here you can view your personal information and change your password. If you need to make further changes, please contact an administrator.",
|
||||
"role": "Role",
|
||||
"admin-status": "Admin status",
|
||||
"first-name": "First name",
|
||||
"last-name": "Last name",
|
||||
"app-title": "Borrow System",
|
||||
"last-borrowed-person": "Last borrowed by",
|
||||
"currently-borrowed-by": "Currently borrowed by",
|
||||
"back": "Go back",
|
||||
"landingpage": "Overview page",
|
||||
"contactPage_successHeadline": "Message sent successfully",
|
||||
"contactPage_successText": "Thank you for contacting us. We will get back to you as soon as possible.",
|
||||
"contactPage_errorHeadline": "Error sending message",
|
||||
"contactPage_errorText": "An error occurred while sending your message. Please try again later.",
|
||||
"contactPage_sendButton": "Send message",
|
||||
"contactPage_messageLabel": "Message",
|
||||
"contactPage_messagePlaceholder": "Enter your message here...",
|
||||
"contactPage_messageErrorText": "This field cannot be empty.",
|
||||
"contact": "Contact",
|
||||
"serverError": "Server error. Please try again later, or refresh the page.",
|
||||
"take": "Take",
|
||||
"return": "Return",
|
||||
"take-loan-success": "Loan taken successfully",
|
||||
"return-loan-success": "Loan returned successfully",
|
||||
"network-error": "Network error. Please contact the administrator.",
|
||||
"contactPage_messageDescription": "Please enter your message here. The system administrator (Theis Gaedigk) will get back to you as soon as possible.",
|
||||
"naas": "No-as-a-service",
|
||||
"try-naas": "Click me",
|
||||
"naas-error": "Error with no-as-a-service",
|
||||
"naas-error-desc": "An error occurred while communicating with no-as-a-service.",
|
||||
"naas-header": "A good way to say no...",
|
||||
"error-deleting-loan-507": "The loan cannot be deleted because it has not been returned yet.",
|
||||
"serviceDeactivatedHeadline": "Service deactivated",
|
||||
"contactPage_serviceDeactivatedText": "The contact service is currently deactivated. Please try again later.",
|
||||
"loan_page_serviceDeactivatedText": "The loan service is currently deactivated. Please try again later.",
|
||||
"is-deactivated": "is deactivated.",
|
||||
"deactivated-services": "Deactivated services",
|
||||
"contactPage_messageErrorHeadline": "Error submitting message",
|
||||
"contactPage_messageErrorText2": "Please enter a message before sending it."
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
// add other paths if needed
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
|
||||
/* Path aliases */
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import svgr from "vite-plugin-svgr";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
|
||||
server: {
|
||||
host: "0.0.0.0",
|
||||
port: 8001,
|
||||
watch: {
|
||||
usePolling: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user