PowerOn/frontend_nyla
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added files and users interface

Browse source
This commit is contained in:
idittrich-valueon 2025-05-19 14:07:43 +02:00
parent 6136c4fa1b
commit de8d30b58e
36 changed files with 2301 additions and 565 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/App.tsx
View file

@ -3,9 +3,11 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Register from './pages/Register';
import { AuthProvider } from './auth/auth-provider';
import { AuthProvider } from './auth/authProvider';
import { ProtectedRoute } from './auth/ProtectedRoute';
import Home from './pages/Home';
import Dateien from './pages/Dateien/Dateien';
import Mitglieder from './pages/Mitglieder/Mitglieder';
function App() {
return (
@ -19,7 +21,10 @@ function App() {
<ProtectedRoute>
<Home />
</ProtectedRoute>
}></Route>
}>
<Route path="dateien" element={<Dateien />} />
<Route path="mitglieder" element={<Mitglieder />} />
</Route>
</Routes>
</Router>
</AuthProvider>

0
src/auth/auth-config.ts → src/auth/authConfig.ts
View file

2
src/auth/auth-provider.tsx → src/auth/authProvider.tsx
View file

@ -4,7 +4,7 @@ import {
PublicClientApplication,
InteractionStatus
} from "@azure/msal-browser";
import { msalConfig } from "./auth-config";
import { msalConfig } from "./authConfig";
import { MsalProvider } from "@azure/msal-react";
import { ReactNode, useEffect, useState } from "react";

153
src/components/Dateien/DateienItem.module.css Normal file
View file

@ -0,0 +1,153 @@
.fileItem {
display: flex;
align-items: center;
height: 60px;
padding: 0px 16px;
justify-content: space-between;
color: var(--Grayscale-Black, #24262B);
transition: background-color 0.2s ease;
}
.fileItem:hover {
background-color: #f9f9f9;
}
/* Column layout matching the header structure */
.fileName {
flex: 3;
display: flex;
align-items: center;
overflow: hidden;
font-weight: 500;
color: #333;
padding-right: 8px;
}
.fileName span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 12px;
}
.fileType {
flex: 1;
font-size: 14px;
color: #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fileSize {
flex: 1;
font-size: 14px;
color: #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fileDateWithActions {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.fileDate {
flex: 1.5;
font-size: 14px;
color: #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon {
font-size: 18px;
color: #757575;
flex-shrink: 0;
}
.actionButtons {
flex: 1;
display: flex;
gap: 4px;
justify-content: flex-end;
}
.downloadButton,
.deleteButton {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px;
border: none;
border-radius: 4px;
background-color: transparent;
color: var(--text-color-secondary, #666);
cursor: pointer;
transition: all 0.2s ease;
min-width: 32px;
}
.downloadButton:hover:not(:disabled),
.deleteButton:hover:not(:disabled) {
background-color: var(--background-color-hover, #e8e8e8);
color: var(--text-color-primary, #333);
}
.deleteButton:hover:not(:disabled) {
color: #dc2626;
}
.deleteButton.confirm {
background-color: #fee2e2;
color: #dc2626;
}
.deleteButton.confirm:hover:not(:disabled) {
background-color: #fecaca;
}
.downloadButton:disabled,
.deleteButton:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.actionIcon {
font-size: 16px;
flex-shrink: 0;
}
.downloadButton.downloading,
.deleteButton.deleting {
background-color: var(--background-color-light, #f5f5f5);
}
.actionText {
font-size: 12px;
color: var(--text-color-secondary, #666);
animation: pulse 1.5s infinite;
white-space: nowrap;
}
.deleteButton.confirm .actionText {
color: #dc2626;
animation: none;
}
@keyframes pulse {
0% {
opacity: 0.6;
}
50% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}

127
src/components/Dateien/DateienItem.tsx Normal file
View file

@ -0,0 +1,127 @@
import { FaFile, FaDownload, FaTrash } from "react-icons/fa";
import styles from "./DateienItem.module.css";
import { useState } from "react";
import { useFileOperations } from "../../hooks/useFiles";
type DateienItemProps = {
file: {
id: number;
file_name: string;
action: string;
created_at: string;
size?: number;
};
onDelete?: () => void;
};
/**
* Formats a file size in bytes to a human-readable string (KB, MB, etc.)
*/
const formatFileSize = (bytes?: number): string => {
if (bytes === undefined || bytes === null) return 'Unbekannte Größe';
if (bytes === 0) return '0 Bytes';
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
if (i === 0) return `${bytes} ${sizes[i]}`;
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
};
const DateienItem = ({ file, onDelete }: DateienItemProps) => {
const { downloadingFiles, deletingFiles, handleFileDownload, handleFileDelete } = useFileOperations();
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const isDownloading = downloadingFiles.has(file.id);
const isDeleting = deletingFiles.has(file.id);
// Format the date properly
const formatDate = (dateString: string) => {
try {
const date = new Date(dateString);
// Check if date is valid
if (isNaN(date.getTime())) {
return 'Unbekanntes Datum';
}
return date.toLocaleDateString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
} catch (e) {
console.error('Error formatting date:', e);
return 'Unbekanntes Datum';
}
};
const handleDeleteClick = async () => {
if (showDeleteConfirm) {
const success = await handleFileDelete(file.id);
if (success && onDelete) {
onDelete();
}
setShowDeleteConfirm(false);
} else {
setShowDeleteConfirm(true);
}
};
const handleCancelDelete = () => {
setShowDeleteConfirm(false);
};
return (
<li>
{/* 1st column: Name with icon */}
<div className={styles.fileName}>
<FaFile className={styles.icon} />
<span>{file.file_name}</span>
</div>
{/* 2nd column: Type */}
<div className={styles.fileType}>
{file.action}
</div>
{/* 3rd column: Size */}
<div className={styles.fileSize}>
{formatFileSize(file.size)}
</div>
{/* 4th column: Date and action buttons */}
<div className={styles.fileDateWithActions}>
<span className={styles.fileDate}>
{formatDate(file.created_at)}
</span>
<div className={styles.actionButtons}>
<button
className={`${styles.downloadButton} ${isDownloading ? styles.downloading : ''}`}
onClick={() => handleFileDownload(file.id, file.file_name)}
disabled={isDownloading || isDeleting}
title="Download file"
>
<FaDownload className={styles.actionIcon} />
{isDownloading && <span className={styles.actionText}>Downloading...</span>}
</button>
<button
className={`${styles.deleteButton} ${isDeleting ? styles.deleting : ''} ${showDeleteConfirm ? styles.confirm : ''}`}
onClick={handleDeleteClick}
disabled={isDownloading || isDeleting}
title={showDeleteConfirm ? "Click again to confirm deletion" : "Delete file"}
onBlur={handleCancelDelete}
>
<FaTrash className={styles.actionIcon} />
{isDeleting && <span className={styles.actionText}>Deleting...</span>}
{showDeleteConfirm && <span className={styles.actionText}>Click to confirm</span>}
</button>
</div>
</div>
</li>
);
};
export default DateienItem;

53
src/components/Mitglieder/MitgliederItem.module.css Normal file
View file

@ -0,0 +1,53 @@
.memberItem {
display: flex;
align-items: center;
height: 70px;
padding: 0px 16px;
justify-content: space-between;
color: var(--Grayscale-Black, #24262B);
}
.userProfile {
margin-right: 12px;
}
.profileIcon {
font-size: 36px;
color: var(--Grayscale-Gray, #E9E9E9);
}
.userInfo {
display: grid;
grid-template-columns: 200px 250px 100px;
gap: 16px;
flex-grow: 1;
align-items: center;
}
.userName {
margin: 0;
font-size: 14px;
}
.userEmail,
.userRole {
margin: 0;
font-size: 12px;
font-weight: light;
}
.actions {
display: flex;
align-items: center;
justify-content: center;
}
.editBtn:hover {
color: var(--Brand-Green-Green, #3A8088);
}
.deleteBtn:hover {
color: var(--Brand-Green-Green, #3A8088);
}

32
src/components/Mitglieder/MitgliederItem.tsx Normal file
View file

@ -0,0 +1,32 @@
import { FaUserCircle } from "react-icons/fa";
import styles from "./MitgliederItem.module.css";
import MitgliederItemDelete from "./MitgliederItemDelete/MitgliederItemDelete";
import MitgliederItemEdit from "./MitgliederItemEdit/MitgliederItemEdit";
import { User } from "../../hooks/useUsers";
type MitgliederItemProps = {
user: User;
refetchUsers: () => Promise<void>;
totalUsers: number;
};
const MitgliederItem = ({ user, refetchUsers, totalUsers }: MitgliederItemProps) => {
return (
<li className={styles.memberItem}>
<div className={styles.userProfile}>
<FaUserCircle className={styles.profileIcon} />
</div>
<div className={styles.userInfo}>
<span className={styles.userName}>{user.fullName || user.username}</span>
<span className={styles.userEmail}>{user.email}</span>
<span className={styles.userRole}>{user.privilege}</span>
</div>
<div className={styles.actions}>
<MitgliederItemEdit user={user} refetchUsers={refetchUsers} />
<MitgliederItemDelete user={user} refetchUsers={refetchUsers} isDisabled={totalUsers <= 1} />
</div>
</li>
);
};
export default MitgliederItem;

92
src/components/Mitglieder/MitgliederItemDelete/DeletePopUp.module.css Normal file
View file

@ -0,0 +1,92 @@
.popupHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-top:10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
width: 300px;
height: 20px;
color: gray;
font-size: 10px;
}
.closeButton {
display: flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
width: 20px; /* Increased button size */
height: 20px;
line-height: 0;
padding: 0;
margin:0;
}
.closeIcon {
width: 100%; /* Make the icon fill the button's width */
height: 100%;
padding: 0;
margin:0;
display: block;
}
.horizontalLineLight {
width: 100%;
background-color: #F1F1F1;
height: 1px;
}
.userInfo {
display: grid;
grid-column: 1;
padding: none;
margin: none;
align-items: center;
justify-content: center; /* Center horizontally */
}
.userInfoParagraph{
display: flex;
color: gray;
font-size: 10px;
margin:0px;
justify-content: center;
gap: 10px;
}
.userInfo h2{
display: flex;
justify-content: center;
margin: 0;
margin-top:10px;
justify-content: center;
}
.submitButtonDiv {
margin: 10px;
display: flex; /* Use Flexbox */
justify-content: center; /* Center horizontally */
align-items: center;
}
.submitButton {
background: none;
border: 1px solid black;
border-radius: 5px;
padding: 5px 20px; /* Optional: Adds some padding for better button size */
cursor: pointer;
width: 80%
}
.submitButton:hover {
background: rgb(168, 18, 18);
border: 1px solid rgb(168, 18, 18);
border-radius: 5px;
padding: 5px 20px; /* Optional: Adds some padding for better button size */
cursor: pointer;
color: white;
transition: 0.2s;
}

88
src/components/Mitglieder/MitgliederItemDelete/DeletePopUp.tsx Normal file
View file

@ -0,0 +1,88 @@
import { IoCloseOutline } from "react-icons/io5";
import styles from "./DeletePopUp.module.css";
import { User, useOrgUsers } from "../../../hooks/useUsers";
import { useState } from "react";
type DeletePopUpProps = {
closePopup: () => void;
refetchUsers: () => Promise<void>;
user: User;
};
const DeletePopUp = ({ closePopup, refetchUsers, user }: DeletePopUpProps) => {
const { deleteUser } = useOrgUsers();
const [isDeleting, setIsDeleting] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleDelete = async () => {
setIsDeleting(true);
setError(null);
try {
await deleteUser(user.id);
// Refresh the users list and close the popup
await refetchUsers();
closePopup();
} catch (error: any) {
setError(error.message || "Failed to delete user");
setIsDeleting(false);
}
};
return (
<div style={popupStyles.overlay}>
<div style={popupStyles.popup}>
<div className={styles.popupHeader}>
<p>Delete User...</p>
<button
className={styles.closeButton}
onClick={closePopup}><IoCloseOutline className={styles.closeIcon}/>
</button>
</div>
<div className={styles.horizontalLineLight}></div>
{error && <div className={styles.errorMessage}>{error}</div>}
<div className={styles.userInfo}>
<h2>{user.fullName || user.username}</h2>
<div className={styles.userInfoParagraph}>
<p>Email: {user.email}</p>
<p>Privilege: {user.privilege}</p>
</div>
</div>
<div className={styles.horizontalLineLight}></div>
<div className={styles.submitButtonDiv}>
<button
className={styles.submitButton}
onClick={handleDelete}
disabled={isDeleting}>
{isDeleting ? "Deleting..." : "Delete"}
</button>
</div>
</div>
</div>
)
}
const popupStyles: { overlay: React.CSSProperties; popup: React.CSSProperties } = {
overlay: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0,0,0,0.5)",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
popup: {
backgroundColor: "#fff",
borderRadius: "8px",
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
position: "relative"
}
};
export default DeletePopUp;

33
src/components/Mitglieder/MitgliederItemDelete/MitgliederItemDelete.module.css Normal file
View file

@ -0,0 +1,33 @@
.deleteBtn {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #444;
height: 100;
}
.deleteBtn:hover {
color: var(--Brand-Green-Green, #3A8088);
}
.deleteBtn.disabled {
cursor: not-allowed;
opacity: 0.5;
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #444;
}
.deleteBtn.disabled:hover {
color: #444;
}
.deleteBtnContainer {
display: flex;
align-items: center;
justify-content: center;
}

37
src/components/Mitglieder/MitgliederItemDelete/MitgliederItemDelete.tsx Normal file
View file

@ -0,0 +1,37 @@
import { FaTrash } from "react-icons/fa";
import styles from "./MitgliederItemDelete.module.css";
import { useState } from "react";
import DeletePopUp from "./DeletePopUp";
import { User } from "../../../hooks/useUsers";
type MitgliederItemDeleteProps = {
user: User;
refetchUsers: () => Promise<void>;
isDisabled?: boolean;
};
const MitgliederItemDelete = ({ user, refetchUsers, isDisabled = false }: MitgliederItemDeleteProps) => {
const [deleteWindow, setDeleteWindow] = useState(false);
return (
<div className={styles.deleteBtnContainer}>
<button
onClick={() => !isDisabled && setDeleteWindow(true)}
className={`${styles.deleteBtn} ${isDisabled ? styles.disabled : ''}`}
disabled={isDisabled}
title={isDisabled ? "Cannot delete the only remaining user" : "Delete user"}>
<FaTrash />
</button>
{deleteWindow && (
<DeletePopUp
user={user}
closePopup={() => setDeleteWindow(false)}
refetchUsers={refetchUsers}
/>
)}
</div>
);
};
export default MitgliederItemDelete;

89
src/components/Mitglieder/MitgliederItemEdit/EditPopUp.module.css Normal file
View file

@ -0,0 +1,89 @@
.popupHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
.popupHeader p {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}
.closeButton {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.closeIcon {
font-size: 1.5rem;
color: #666;
}
.horizontalLineLight {
height: 1px;
background-color: #e0e0e0;
width: 100%;
margin: 0;
}
.form {
box-sizing: border-box;
max-width: 100%;
padding: 20px;
}
.formGroup {
margin-bottom: 15px;
box-sizing: border-box;
}
.formGroup label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.formGroup input,
.formGroup select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
}
.submitButtonDiv {
display: flex;
justify-content: flex-end;
padding: 15px 0 10px;
}
.submitButton {
background-color: #4c9aff;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.submitButton:hover {
background-color: #3d8df5;
}
.userInfo h2 {
margin-top: 0;
margin-bottom: 10px;
}

152
src/components/Mitglieder/MitgliederItemEdit/EditPopUp.tsx Normal file
View file

@ -0,0 +1,152 @@
import { IoCloseOutline } from "react-icons/io5";
import { useState } from "react";
import styles from "./EditPopUp.module.css";
import { User, useOrgUsers } from "../../../hooks/useUsers";
type EditPopUpProps = {
closePopup: () => void;
refetchUsers: () => Promise<void>;
user: User;
};
const EditPopUp = ({ closePopup, refetchUsers, user }: EditPopUpProps) => {
const { updateUser } = useOrgUsers();
const [formData, setFormData] = useState({
fullName: user.fullName || "",
email: user.email || "",
privilege: user.privilege || "",
username: user.username || ""
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
try {
await updateUser(user.id, {
fullName: formData.fullName,
email: formData.email,
privilege: formData.privilege,
username: formData.username
});
// Refresh the users list and close the popup
await refetchUsers();
closePopup();
} catch (error: any) {
setError(error.message || "Failed to update user");
} finally {
setIsSubmitting(false);
}
};
return (
<div style={popupStyles.overlay}>
<div style={popupStyles.popup}>
<div className={styles.popupHeader}>
<p>Edit User</p>
<button
className={styles.closeButton}
onClick={closePopup}><IoCloseOutline className={styles.closeIcon}/>
</button>
</div>
<div className={styles.horizontalLineLight}></div>
{error && <div className={styles.errorMessage}>{error}</div>}
<form onSubmit={handleSubmit} className={styles.form}>
<div className={styles.formGroup}>
<label htmlFor="fullName">Name:</label>
<input
type="text"
id="fullName"
name="fullName"
value={formData.fullName}
onChange={handleChange}
required
/>
</div>
<div className={styles.formGroup}>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div className={styles.formGroup}>
<label htmlFor="username">Username:</label>
<input
type="text"
id="username"
name="username"
value={formData.username}
onChange={handleChange}
required
/>
</div>
<div className={styles.formGroup}>
<label htmlFor="privilege">Privilege:</label>
<select
id="privilege"
name="privilege"
value={formData.privilege}
onChange={handleChange}
required
>
<option value="admin">admin</option>
<option value="user">user</option>
<option value="sysadmin">sysadmin</option>
</select>
</div>
<div className={styles.horizontalLineLight}></div>
<div className={styles.submitButtonDiv}>
<button
type="submit"
className={styles.submitButton}
disabled={isSubmitting}>
{isSubmitting ? "Updating..." : "Update"}
</button>
</div>
</form>
</div>
</div>
);
};
const popupStyles: { overlay: React.CSSProperties; popup: React.CSSProperties } = {
overlay: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0,0,0,0.5)",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
popup: {
backgroundColor: "#fff",
borderRadius: "8px",
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
position: "relative",
width: "400px",
maxWidth: "90%"
}
};
export default EditPopUp;

12
src/components/Mitglieder/MitgliederItemEdit/MitgliederItemEdit.module.css Normal file
View file

@ -0,0 +1,12 @@
.editBtn {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #444;
height: 100;
}
.editBtn:hover {
color: #3d8df5;
}

36
src/components/Mitglieder/MitgliederItemEdit/MitgliederItemEdit.tsx Normal file
View file

@ -0,0 +1,36 @@
import { FaEdit } from "react-icons/fa";
import { useState } from "react";
import styles from "./MitgliederItemEdit.module.css";
import EditPopUp from "./EditPopUp";
import { User } from "../../../hooks/useUsers";
type MitgliederItemEditProps = {
user: User;
refetchUsers: () => Promise<void>;
};
const MitgliederItemEdit = ({ user, refetchUsers }: MitgliederItemEditProps) => {
const [editWindow, setEditWindow] = useState(false);
return (
<div>
<button
onClick={() => setEditWindow(true)}
className={styles.editBtn}
title="Edit user"
>
<FaEdit />
</button>
{editWindow && (
<EditPopUp
user={user}
closePopup={() => setEditWindow(false)}
refetchUsers={refetchUsers}
/>
)}
</div>
);
};
export default MitgliederItemEdit;

4
src/components/Sidebar/Sidebar.tsx
View file

@ -1,9 +1,9 @@
import React from 'react'
import styles from './Sidebar.module.css'
import SidebarItem from './SidebarItem';
import useSidebarData from './sidebarData';
import useSidebarData from './SidebarData';
import SidebarUser from './SidebarUser';
import { useCurrentUser } from '../../hooks/useCurrentUser';
import { useCurrentUser } from '../../hooks/useUsers';
interface SidebarItemType {
id: string;

6
src/components/Sidebar/sidebarData.tsx
View file

@ -50,19 +50,19 @@ export const useSidebarData = () => {
icon: BiInfoSquare,
},
{
id: '6',
id: '7',
name: 'Logs',
link: '',
icon: TbLogs ,
},
{
id: '7',
id: '8',
name: 'Settings',
link: '',
icon: GoGear,
},
{
id: '8',
id: '9',
name: 'Help',
link: '',
icon: BiInfoSquare,

62
src/hooks/useApi.ts Normal file
View file

@ -0,0 +1,62 @@
import { useState } from 'react';
import api from '../api';
// Generic API error handling
export function formatApiError(error: any, defaultMessage: string): string {
if (error.response) {
return error.response.data?.detail || error.response.data?.message || defaultMessage;
} else if (error.request) {
return 'Keine Antwort vom Server erhalten';
} else {
return error.message || defaultMessage;
}
}
// Type for API request options
export interface ApiRequestOptions<T> {
url: string;
method: 'get' | 'post' | 'put' | 'delete';
data?: T;
params?: Record<string, string | number | boolean>;
additionalConfig?: Record<string, any>; // For responseType, headers, etc.
}
// Hook for making API requests with consistent error handling
export function useApiRequest<RequestData = any, ResponseData = any>() {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const request = async ({
url,
method,
data,
params,
additionalConfig = {}
}: ApiRequestOptions<RequestData>): Promise<ResponseData> => {
setIsLoading(true);
setError(null);
try {
const response = await api({
url,
method,
data,
params,
...additionalConfig
});
return response.data;
} catch (error: any) {
const errorMessage = formatApiError(error, `Fehler bei ${method.toUpperCase()} ${url}`);
setError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsLoading(false);
}
};
return {
request,
isLoading,
error
};
}

92
src/hooks/useAuth.ts
View file

@ -1,92 +0,0 @@
import { useState } from 'react';
import axios from 'axios';
interface LoginResponse {
accessToken: string;
tokenType: string;
label?: any;
fieldLabels?: any;
}
interface UseAuthReturn {
login: (username: string, password: string) => Promise<LoginResponse>;
error: string | null;
isLoading: boolean;
}
export function useAuth(): UseAuthReturn {
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const login = async (username: string, password: string): Promise<LoginResponse> => {
setIsLoading(true);
setError(null);
try {
// Create the form data in the exact format FastAPI expects
const params = new URLSearchParams();
params.append('username', username);
params.append('password', password);
params.append('grant_type', 'password');
params.append('scope', '');
params.append('client_id', '');
params.append('client_secret', '');
// Create a custom axios instance for this request
const instance = axios.create({
baseURL: 'https://gateway.poweron-center.net',
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
const response = await instance.post('/api/token', params);
console.log('Login response:', response.data);
// Store the entire auth response
if (response.data.accessToken) {
localStorage.setItem('auth_data', JSON.stringify(response.data));
}
return response.data;
} catch (error: any) {
let errorMessage = 'An error occurred during login';
if (error.response) {
// Log the complete error details including the request that was sent
console.error('Login error details:', {
status: error.response.status,
statusText: error.response.statusText,
data: error.response.data,
headers: error.response.headers,
request: {
url: error.config?.url,
method: error.config?.method,
data: error.config?.data,
params: error.config?.params
}
});
errorMessage = error.response.data?.detail || 'Invalid username or password';
} else if (error.request) {
console.error('No response received:', error.request);
errorMessage = 'No response received from server';
} else {
console.error('Error:', error.message);
errorMessage = error.message;
}
setError(errorMessage);
throw error;
} finally {
setIsLoading(false);
}
};
return {
login,
error,
isLoading
};
}

290
src/hooks/useAuthentication.ts Normal file
View file

@ -0,0 +1,290 @@
import { useState } from 'react';
import axios from 'axios';
import { useMsal } from '@azure/msal-react';
import api from '../api';
import { useApiRequest } from './useApi';
// Regular authentication
interface LoginResponse {
accessToken: string;
tokenType: string;
label?: any;
fieldLabels?: any;
}
export function useAuth() {
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const login = async (username: string, password: string): Promise<LoginResponse> => {
setIsLoading(true);
setError(null);
try {
// Create the form data in the exact format FastAPI expects
const params = new URLSearchParams();
params.append('username', username);
params.append('password', password);
params.append('grant_type', 'password');
params.append('scope', '');
params.append('client_id', '');
params.append('client_secret', '');
// Create a custom axios instance for this request
const instance = axios.create({
baseURL: 'https://gateway.poweron-center.net',
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
const response = await instance.post('/api/token', params);
// Store the entire auth response
if (response.data.accessToken) {
localStorage.setItem('auth_data', JSON.stringify(response.data));
}
return response.data;
} catch (error: any) {
let errorMessage = 'An error occurred during login';
if (error.response) {
errorMessage = error.response.data?.detail || 'Invalid username or password';
} else if (error.request) {
errorMessage = 'No response received from server';
} else {
errorMessage = error.message;
}
setError(errorMessage);
throw error;
} finally {
setIsLoading(false);
}
};
return {
login,
error,
isLoading
};
}
// Microsoft Authentication
interface MsalAuthResponse {
accessToken: string;
tokenType: string;
user: {
username: string;
email: string;
fullName: string;
mandateId: number;
};
}
export function useMsalAuth() {
const { instance, accounts } = useMsal();
const { request, isLoading, error } = useApiRequest<null, MsalAuthResponse>();
const [msalError, setMsalError] = useState<string | null>(null);
const [isMsalLoading, setIsMsalLoading] = useState(false);
const loginWithMsal = async (): Promise<MsalAuthResponse> => {
setIsMsalLoading(true);
setMsalError(null);
try {
let msalToken;
// If we have an account, try to get the token silently
if (accounts.length > 0) {
const silentRequest = {
scopes: ['user.read'],
account: accounts[0]
};
try {
const response = await instance.acquireTokenSilent(silentRequest);
msalToken = response.accessToken;
} catch (e) {
// If silent token acquisition fails, fall back to popup
const response = await instance.acquireTokenPopup(silentRequest);
msalToken = response.accessToken;
}
} else {
// No account, do popup login
const response = await instance.loginPopup({
scopes: ['user.read']
});
if (response.account) {
const tokenResponse = await instance.acquireTokenSilent({
scopes: ['user.read'],
account: response.account
});
msalToken = tokenResponse.accessToken;
} else {
throw new Error('Failed to get account after login');
}
}
// Exchange MSAL token for backend token
const response = await api.post('/api/msft/token', null, {
headers: {
'Authorization': `Bearer ${msalToken}`
}
});
// Store the backend token
if (response.data.accessToken) {
localStorage.setItem('auth_data', JSON.stringify(response.data));
}
return response.data;
} catch (error: any) {
let errorMessage = 'MSAL Login fehlgeschlagen';
if (error.response) {
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
errorMessage = error.message || errorMessage;
}
setMsalError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsMsalLoading(false);
}
};
return {
loginWithMsal,
error: msalError || error,
isLoading: isMsalLoading || isLoading
};
}
// Registration
interface RegisterData {
username: string;
password: string;
email: string;
fullName: string;
language?: string;
}
interface RegisterResponse {
success: boolean;
message?: string;
user?: {
username: string;
email: string;
fullName: string;
};
}
export function useRegister() {
const { request, isLoading, error } = useApiRequest<RegisterData, any>();
const register = async (userData: RegisterData): Promise<RegisterResponse> => {
try {
// Add default language if not provided
const dataToSend = {
...userData,
language: userData.language || 'de'
};
const response = await request({
url: '/api/users/register',
method: 'post',
data: dataToSend,
additionalConfig: {
headers: {
'Content-Type': 'application/json'
}
}
});
return {
success: true,
message: 'Registration successful',
user: response
};
} catch (error: any) {
throw error;
}
};
return {
register,
error,
isLoading
};
}
// Microsoft Registration
interface MsalRegisterData {
username: string;
email: string;
fullName: string;
language?: string;
}
export function useMsalRegister() {
const { instance, accounts } = useMsal();
const { request, isLoading, error } = useApiRequest<MsalRegisterData, any>();
const registerWithMsal = async (): Promise<RegisterResponse> => {
try {
if (!accounts || accounts.length === 0) {
// If not signed in with Microsoft, sign in first
await instance.loginPopup({
scopes: ['user.read']
});
}
// Get the current account
const currentAccount = instance.getAllAccounts()[0];
if (!currentAccount) {
throw new Error('No Microsoft account found');
}
// Prepare user data from Microsoft account
const userData: MsalRegisterData = {
username: currentAccount.username,
email: currentAccount.username,
fullName: currentAccount.name || currentAccount.username,
language: 'de'
};
// Register the user through our backend
const response = await request({
url: '/api/users/register-with-msal',
method: 'post',
data: userData,
additionalConfig: {
headers: {
'Content-Type': 'application/json'
}
}
});
return {
success: true,
message: 'Registration successful',
user: response
};
} catch (error: any) {
throw error;
}
};
return {
registerWithMsal,
error,
isLoading
};
}

60
src/hooks/useCurrentUser.ts
View file

@ -1,60 +0,0 @@
import { useState, useEffect } from 'react';
import api from '../api';
interface CurrentUser {
id: number;
username: string;
fullName: string;
email: string;
privilege: string;
mandateId: number;
}
interface UseCurrentUserReturn {
user: CurrentUser | null;
error: string | null;
isLoading: boolean;
refetch: () => Promise<void>;
}
export function useCurrentUser(): UseCurrentUserReturn {
const [user, setUser] = useState<CurrentUser | null>(null);
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const fetchCurrentUser = async () => {
setIsLoading(true);
setError(null);
try {
const response = await api.get('/api/user/me');
setUser(response.data);
} catch (error: any) {
let errorMessage = 'Fehler beim Abrufen des Benutzerprofils';
if (error.response) {
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
errorMessage = error.message || errorMessage;
}
setError(errorMessage);
setUser(null);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
fetchCurrentUser();
}, []);
return {
user,
error,
isLoading,
refetch: fetchCurrentUser
};
}

209
src/hooks/useFiles.ts Normal file
View file

@ -0,0 +1,209 @@
import { useState, useEffect } from 'react';
import { useApiRequest } from './useApi';
// File interfaces
export interface FileInfo {
id: number;
name: string;
mimeType: string;
size?: number;
creationDate: string;
fileHash?: string;
mandateId?: number;
userId?: number;
workflowId?: string;
}
export interface UserFile {
id: number;
file_name: string;
action: string;
created_at: string;
size?: number;
}
// Files list hook
export function useUserFiles() {
const [files, setFiles] = useState<UserFile[]>([]);
const { request, isLoading: loading, error } = useApiRequest<null, FileInfo[]>();
const fetchFiles = async () => {
try {
const data = await request({
url: '/api/files',
method: 'get'
});
// Map API response to our frontend model
const mappedFiles = data.map((apiFile: FileInfo): UserFile => {
// Derive a simplified action from the MIME type
let action = 'Document';
if (apiFile.mimeType) {
const mimePrefix = apiFile.mimeType.split('/')[0];
switch (mimePrefix) {
case 'image':
action = 'Bild';
break;
case 'application':
if (apiFile.mimeType.includes('pdf')) {
action = 'PDF';
} else if (apiFile.mimeType.includes('word') || apiFile.mimeType.includes('office')) {
action = 'Dokument';
} else if (apiFile.mimeType.includes('excel') || apiFile.mimeType.includes('spreadsheet')) {
action = 'Tabelle';
} else {
action = 'Datei';
}
break;
case 'text':
action = 'Text';
break;
case 'video':
action = 'Video';
break;
case 'audio':
action = 'Audio';
break;
default:
action = 'Datei';
}
}
return {
id: apiFile.id,
file_name: apiFile.name,
action: action,
created_at: apiFile.creationDate,
size: apiFile.size
};
});
setFiles(mappedFiles);
} catch (error) {
// Error is already handled by useApiRequest
}
};
useEffect(() => {
fetchFiles();
}, []);
return { files, loading, error, refetch: fetchFiles };
}
// File operations hook
export function useFileOperations() {
const [downloadingFiles, setDownloadingFiles] = useState<Set<number>>(new Set());
const [deletingFiles, setDeletingFiles] = useState<Set<number>>(new Set());
const [uploadingFile, setUploadingFile] = useState(false);
const { request, error: apiError, isLoading } = useApiRequest();
const [downloadError, setDownloadError] = useState<string | null>(null);
const [deleteError, setDeleteError] = useState<string | null>(null);
const [uploadError, setUploadError] = useState<string | null>(null);
const handleFileDownload = async (fileId: number, fileName: string) => {
setDownloadError(null);
setDownloadingFiles(prev => new Set(prev).add(fileId));
try {
const blob = await request({
url: `/api/files/${fileId}`,
method: 'get',
// Override axios config for blob response
additionalConfig: { responseType: 'blob' }
});
// Create a download link and trigger the download
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
return true;
} catch (error: any) {
setDownloadError(error.message);
return false;
} finally {
setDownloadingFiles(prev => {
const newSet = new Set(prev);
newSet.delete(fileId);
return newSet;
});
}
};
const handleFileDelete = async (fileId: number) => {
setDeleteError(null);
setDeletingFiles(prev => new Set(prev).add(fileId));
try {
await request({
url: `/api/files/${fileId}`,
method: 'delete'
});
// Add a small delay to ensure backend has time to process
await new Promise(resolve => setTimeout(resolve, 300));
return true;
} catch (error: any) {
setDeleteError(error.message);
return false;
} finally {
setDeletingFiles(prev => {
const newSet = new Set(prev);
newSet.delete(fileId);
return newSet;
});
}
};
const handleFileUpload = async (file: globalThis.File, workflowId?: string) => {
setUploadError(null);
setUploadingFile(true);
try {
const formData = new FormData();
formData.append('file', file);
if (workflowId) {
formData.append('workflowId', workflowId);
}
const fileData = await request({
url: '/api/files/upload',
method: 'post',
data: formData,
// Override axios config for form data
additionalConfig: {
headers: {
'Content-Type': 'multipart/form-data',
}
}
});
return { success: true, fileData };
} catch (error: any) {
setUploadError(error.message);
return { success: false, error: error.message };
} finally {
setUploadingFile(false);
}
};
return {
downloadingFiles,
deletingFiles,
uploadingFile,
downloadError,
deleteError,
uploadError,
handleFileDownload,
handleFileDelete,
handleFileUpload,
isLoading
};
}

117
src/hooks/useMsalAuth.ts
View file

@ -1,117 +0,0 @@
import { useState } from 'react';
import { useMsal } from '@azure/msal-react';
import api from '../api';
interface MsalAuthResponse {
accessToken: string;
tokenType: string;
user: {
username: string;
email: string;
fullName: string;
mandateId: number;
};
}
interface UseMsalAuthReturn {
loginWithMsal: () => Promise<MsalAuthResponse>;
error: string | null;
isLoading: boolean;
}
export function useMsalAuth(): UseMsalAuthReturn {
const { instance, accounts } = useMsal();
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const loginWithMsal = async (): Promise<MsalAuthResponse> => {
setIsLoading(true);
setError(null);
try {
let msalToken;
console.log("Starting MSAL auth process");
// If we have an account, try to get the token silently
if (accounts.length > 0) {
console.log("Account found, trying silent token acquisition");
const silentRequest = {
scopes: ['user.read'],
account: accounts[0]
};
try {
const response = await instance.acquireTokenSilent(silentRequest);
msalToken = response.accessToken;
console.log("Silent token acquisition successful");
} catch (e) {
// If silent token acquisition fails, fall back to popup
console.log("Silent token acquisition failed, trying popup", e);
const response = await instance.acquireTokenPopup(silentRequest);
msalToken = response.accessToken;
console.log("Popup token acquisition successful");
}
} else {
// No account, do popup login
console.log("No account found, doing popup login");
const response = await instance.loginPopup({
scopes: ['user.read']
});
if (response.account) {
console.log("Login successful, acquiring token");
const tokenResponse = await instance.acquireTokenSilent({
scopes: ['user.read'],
account: response.account
});
msalToken = tokenResponse.accessToken;
console.log("Token acquisition successful");
} else {
throw new Error('Failed to get account after login');
}
}
console.log("MSAL token acquired, exchanging with backend");
// Exchange MSAL token for backend token
const response = await api.post('/api/msft/token', null, {
headers: {
'Authorization': `Bearer ${msalToken}`
}
});
console.log("Backend token exchange successful", response.data);
// Store the backend token
if (response.data.accessToken) {
localStorage.setItem('auth_data', JSON.stringify(response.data));
}
return response.data;
} catch (error: any) {
let errorMessage = 'MSAL Login fehlgeschlagen';
if (error.response) {
console.error("Backend response error:", error.response.status, error.response.data);
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
console.error("No response received:", error.request);
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
console.error("Error during MSAL auth:", error.message);
errorMessage = error.message || errorMessage;
}
setError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsLoading(false);
}
};
return {
loginWithMsal,
error,
isLoading
};
}

94
src/hooks/useMsalRegister.ts
View file

@ -1,94 +0,0 @@
import { useState } from 'react';
import { useMsal } from '@azure/msal-react';
import api from '../api';
interface MsalRegisterData {
username: string;
email: string;
fullName: string;
language?: string;
}
interface MsalRegisterResponse {
success: boolean;
message?: string;
user?: {
username: string;
email: string;
fullName: string;
};
}
interface UseMsalRegisterReturn {
registerWithMsal: () => Promise<MsalRegisterResponse>;
error: string | null;
isLoading: boolean;
}
export function useMsalRegister(): UseMsalRegisterReturn {
const { instance, accounts } = useMsal();
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const registerWithMsal = async (): Promise<MsalRegisterResponse> => {
setIsLoading(true);
setError(null);
try {
if (!accounts || accounts.length === 0) {
// If not signed in with Microsoft, sign in first
await instance.loginPopup({
scopes: ['user.read']
});
}
// Get the current account
const currentAccount = instance.getAllAccounts()[0];
if (!currentAccount) {
throw new Error('No Microsoft account found');
}
// Prepare user data from Microsoft account
const userData: MsalRegisterData = {
username: currentAccount.username,
email: currentAccount.username,
fullName: currentAccount.name || currentAccount.username,
language: 'de'
};
// Register the user through our backend
const response = await api.post('/api/users/register-with-msal', userData, {
headers: {
'Content-Type': 'application/json'
}
});
return {
success: true,
message: 'Registration successful',
user: response.data
};
} catch (error: any) {
let errorMessage = 'MSAL Registrierung fehlgeschlagen';
if (error.response) {
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
errorMessage = error.message || errorMessage;
}
setError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsLoading(false);
}
};
return {
registerWithMsal,
error,
isLoading
};
}

82
src/hooks/useRegister.ts
View file

@ -1,82 +0,0 @@
import { useState } from 'react';
import api from '../api';
interface RegisterData {
username: string;
password: string;
email: string;
fullName: string;
language?: string;
}
interface RegisterResponse {
success: boolean;
message?: string;
user?: {
username: string;
email: string;
fullName: string;
};
}
interface UseRegisterReturn {
register: (data: RegisterData) => Promise<RegisterResponse>;
error: string | null;
isLoading: boolean;
}
export function useRegister(): UseRegisterReturn {
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const register = async (userData: RegisterData): Promise<RegisterResponse> => {
setIsLoading(true);
setError(null);
try {
// Add default language if not provided
const dataToSend = {
...userData,
language: userData.language || 'de'
};
const response = await api.post('/api/users/register', dataToSend, {
headers: {
'Content-Type': 'application/json'
}
});
return {
success: true,
message: 'Registration successful',
user: response.data
};
} catch (error: any) {
let errorMessage = 'Registrierung fehlgeschlagen';
// Handle different types of errors
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
// The request was made but no response was received
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
// Something happened in setting up the request
errorMessage = error.message || errorMessage;
}
setError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsLoading(false);
}
};
return {
register,
error,
isLoading
};
}

105
src/hooks/useUser.ts
View file

@ -1,105 +0,0 @@
import { useState } from 'react';
import api from '../api';
interface User {
id: number;
username: string;
email: string;
fullName: string;
mandateId: number;
}
interface UseUserReturn {
deleteUser: (userId: number) => Promise<void>;
updateUser: (userId: number, userData: Partial<User>) => Promise<User>;
getUser: (userId: number) => Promise<User>;
error: string | null;
isLoading: boolean;
}
export function useUser(): UseUserReturn {
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const deleteUser = async (userId: number): Promise<void> => {
setIsLoading(true);
setError(null);
try {
await api.delete(`/api/users/${userId}`);
} catch (error: any) {
let errorMessage = 'Fehler beim Löschen des Benutzers';
if (error.response) {
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
errorMessage = error.message || errorMessage;
}
setError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsLoading(false);
}
};
const updateUser = async (userId: number, userData: Partial<User>): Promise<User> => {
setIsLoading(true);
setError(null);
try {
const response = await api.put(`/api/users/${userId}`, userData);
return response.data;
} catch (error: any) {
let errorMessage = 'Fehler beim Aktualisieren des Benutzers';
if (error.response) {
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
errorMessage = error.message || errorMessage;
}
setError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsLoading(false);
}
};
const getUser = async (userId: number): Promise<User> => {
setIsLoading(true);
setError(null);
try {
const response = await api.get(`/api/users/${userId}`);
return response.data;
} catch (error: any) {
let errorMessage = 'Fehler beim Abrufen des Benutzers';
if (error.response) {
errorMessage = error.response.data?.detail || error.response.data?.message || errorMessage;
} else if (error.request) {
errorMessage = 'Keine Antwort vom Server erhalten';
} else {
errorMessage = error.message || errorMessage;
}
setError(errorMessage);
throw new Error(errorMessage);
} finally {
setIsLoading(false);
}
};
return {
deleteUser,
updateUser,
getUser,
error,
isLoading
};
}

134
src/hooks/useUsers.ts Normal file
View file

@ -0,0 +1,134 @@
import { useState, useEffect } from 'react';
import { useApiRequest } from './useApi';
// User interfaces
export interface User {
id: number;
username: string;
email: string;
fullName: string;
privilege: string;
mandateId: number;
}
export type UserUpdateData = Partial<Omit<User, 'id' | 'mandateId'>>;
// Current user hook
export function useCurrentUser() {
const [user, setUser] = useState<User | null>(null);
const { request, isLoading, error } = useApiRequest<null, User>();
const fetchCurrentUser = async () => {
try {
const data = await request({
url: '/api/user/me',
method: 'get'
});
setUser(data);
} catch (error) {
setUser(null);
}
};
useEffect(() => {
fetchCurrentUser();
}, []);
return {
user,
error,
isLoading,
refetch: fetchCurrentUser
};
}
// Organization users hook (list, update, delete)
export function useOrgUsers() {
const [users, setUsers] = useState<User[]>([]);
const { request, isLoading: loading, error } = useApiRequest();
const fetchUsers = async () => {
try {
const data = await request({
url: '/api/users',
method: 'get'
});
setUsers(data);
} catch (error) {
// Error is already handled by useApiRequest
}
};
const updateUser = async (userId: number, userData: UserUpdateData) => {
await request({
url: `/api/users/${userId}`,
method: 'put',
data: userData
});
await fetchUsers(); // Refresh the list after update
};
const deleteUser = async (userId: number) => {
await request({
url: `/api/users/${userId}`,
method: 'delete'
});
await fetchUsers(); // Refresh the list after deletion
};
const getUser = async (userId: number): Promise<User> => {
return await request({
url: `/api/users/${userId}`,
method: 'get'
});
};
useEffect(() => {
fetchUsers();
}, []);
return {
users,
loading,
error,
refetch: fetchUsers,
updateUser,
deleteUser,
getUser
};
}
// Individual user operations hook (for use when you don't need the full list)
export function useUser() {
const { request, isLoading, error } = useApiRequest();
const getUser = async (userId: number): Promise<User> => {
return await request({
url: `/api/users/${userId}`,
method: 'get'
});
};
const updateUser = async (userId: number, userData: UserUpdateData): Promise<User> => {
return await request({
url: `/api/users/${userId}`,
method: 'put',
data: userData
});
};
const deleteUser = async (userId: number): Promise<void> => {
await request({
url: `/api/users/${userId}`,
method: 'delete'
});
};
return {
getUser,
updateUser,
deleteUser,
isLoading,
error
};
}

2
src/main.tsx
View file

@ -1,7 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { AuthProvider } from './auth/auth-provider.tsx';
import { AuthProvider } from './auth/authProvider.tsx';
createRoot(document.getElementById('root')!).render(
<StrictMode>

126
src/pages/Dateien/Dateien.module.css Normal file
View file

@ -0,0 +1,126 @@
.dateienContainer {
margin: 51px 49px 0 36px;
display: flex;
padding: 0px 30px 30px 30px;
flex-direction: column;
align-self: stretch;
border-radius: 30px;
border: 1px solid var(--f-1-f-1-f-1, #F1F1F1);
background: var(--Grayscale-True-White, #FFF);
position: relative;
box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);
max-height: calc(100vh - 100px);
overflow: hidden;
}
.horizontalLineLight {
width: 100%;
background-color: #F1F1F1;
height: 1px;
margin-top: 90px;
margin-left: -30px;
position: absolute;
}
.header {
display: flex;
gap: 30px;
align-items: flex-start;
height: 62px;
color: var(--Grayscale-Black, #24262B);
padding-top: 30px;
}
.datei_hinzufügen_button {
border-radius: 30px;
background: var(--Grayscale-Gray, #E9E9E9);
border: none;
outline: none;
text-align: left;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
gap: 10px;
align-items: center;
}
.datei_hinzufügen_button:hover {
cursor: pointer;
}
.add_icon {
font-size: 16px;
}
/* Files table container */
.filesTable {
width: 100%;
margin-top: 20px;
display: flex;
flex-direction: column;
overflow-y: auto;
}
/* Table header with exact grid positioning to match the screenshot */
.tableHeader {
display: grid;
grid-template-columns: 45% 15% 15% 25%;
align-items: center;
height: 40px;
padding: 0px 16px;
position: sticky;
top: 0;
z-index: 10;
}
/* Header cells with exact positioning */
.headerCell {
display: flex;
align-items: center;
font-weight: 500;
font-size: 14px;
color: #333;
cursor: pointer;
white-space: nowrap;
padding-left: 0;
}
/* Adjust first column for icon space */
.headerCell:nth-child(1) {
padding-left: 30px;
}
/* Simple sort icon styling */
.sortIcon {
margin-left: 6px;
font-size: 14px;
}
/* Modify the file list to use the same grid layout */
.filesList {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
/* Override the flex layout in DateienItem to force matching the header */
.filesList li {
display: grid !important;
grid-template-columns: 45% 15% 15% 25%;
border-bottom: 1px solid #f1f1f1;
height: 60px;
padding: 0 16px;
align-items: center;
}
.error {
color: #d32f2f;
margin: 1rem 0;
padding: 0.5rem;
background-color: #ffebee;
border-radius: 4px;
text-align: center;
}

166
src/pages/Dateien/Dateien.tsx Normal file
View file

@ -0,0 +1,166 @@
import styles from './Dateien.module.css'
import { IoAddCircleOutline } from "react-icons/io5";
import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
import DateienItem from '../../components/Dateien/DateienItem';
import DateienUpload from './DateienHinzufügen/DateienUpload';
import { useState } from 'react';
import { useUserFiles, useFileOperations } from '../../hooks/useFiles';
// Define the file type interface
interface UserFile {
id: number;
file_name: string;
action: string;
created_at: string;
size?: number;
}
// Sort types
type SortField = 'file_name' | 'action' | 'size' | 'created_at';
type SortDirection = 'asc' | 'desc';
function Dateien() {
const { files, loading, error, refetch } = useUserFiles();
const [isUploadOpen, setIsUploadOpen] = useState(false);
const { uploadError, downloadError, deleteError } = useFileOperations();
const [sortField, setSortField] = useState<SortField>('created_at');
const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
// Single function to handle file refresh
const refreshFiles = () => {
console.log('Refreshing files list');
refetch();
};
const handleFileUpload = async (file: File) => {
console.log('File upload completed:', file.name);
};
const handleUploadClose = () => {
setIsUploadOpen(false);
// Refresh files when upload modal is closed
setTimeout(() => {
refreshFiles();
}, 300);
};
const handleFileDeleted = () => {
refreshFiles();
};
// Handle sorting
const handleSort = (field: SortField) => {
if (field === sortField) {
// Toggle direction if same field is clicked
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
} else {
// Set new field and default to ascending for most fields, descending for dates
setSortField(field);
setSortDirection(field === 'created_at' ? 'desc' : 'asc');
}
};
// Sort files
const sortedFiles = [...files].sort((a, b) => {
let result = 0;
switch (sortField) {
case 'file_name':
result = a.file_name.localeCompare(b.file_name);
break;
case 'action':
result = a.action.localeCompare(b.action);
break;
case 'size':
// Handle undefined sizes gracefully
const sizeA = a.size ?? 0;
const sizeB = b.size ?? 0;
result = sizeA - sizeB;
break;
case 'created_at':
result = new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
break;
}
// Apply sort direction
return sortDirection === 'asc' ? result : -result;
});
// Helper to render sort icon
const renderSortIcon = (field: SortField) => {
if (sortField !== field) return <FaSort className={styles.sortIcon} />;
return sortDirection === 'asc' ?
<FaSortUp className={styles.sortIcon} /> :
<FaSortDown className={styles.sortIcon} />;
};
return (
<div className={styles.dateienContainer}>
<div className={styles.header}>
<button
className={styles.datei_hinzufügen_button}
onClick={() => setIsUploadOpen(true)}
>
<IoAddCircleOutline className={styles.add_icon}/>
Datei hinzufügen
</button>
</div>
<div className={styles.horizontalLineLight}></div>
<DateienUpload
isOpen={isUploadOpen}
onClose={handleUploadClose}
onFileUpload={handleFileUpload}
/>
{(uploadError || downloadError || deleteError) && (
<p className={styles.error}>
{uploadError || downloadError || deleteError}
</p>
)}
{loading && <p>Loading files...</p>}
{error && <p>Error: {error}</p>}
{!loading && !error && files.length === 0 ? (
<p>No files found.</p>
) : (
<div className={styles.filesTable}>
{/* Table Headers */}
<div className={styles.tableHeader}>
<div className={styles.headerCell} onClick={() => handleSort('file_name')}>
<span>Name</span>
{renderSortIcon('file_name')}
</div>
<div className={styles.headerCell} onClick={() => handleSort('action')}>
<span>Typ</span>
{renderSortIcon('action')}
</div>
<div className={styles.headerCell} onClick={() => handleSort('size')}>
<span>Größe</span>
{renderSortIcon('size')}
</div>
<div className={styles.headerCell} onClick={() => handleSort('created_at')}>
<span>Datum</span>
{renderSortIcon('created_at')}
</div>
</div>
{/* Files List */}
<ul className={styles.filesList}>
{sortedFiles.map((file: UserFile) => (
<DateienItem
key={file.id}
file={file}
onDelete={handleFileDeleted}
/>
))}
</ul>
</div>
)}
</div>
);
}
export default Dateien;

142
src/pages/Dateien/DateienHinzufügen/DateienUpload.module.css Normal file
View file

@ -0,0 +1,142 @@
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
padding: 2rem;
border-radius: 8px;
width: 90%;
max-width: 500px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.closeButton {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
}
.closeButton:hover {
color: #333;
}
.closeButton:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.uploadStatus {
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
text-align: center;
font-weight: 500;
}
.uploadStatus.success {
background-color: rgba(76, 175, 80, 0.1);
color: #388e3c;
border: 1px solid #4caf50;
}
.uploadStatus.error {
background-color: rgba(244, 67, 54, 0.1);
color: #d32f2f;
border: 1px solid #f44336;
}
.dropzone {
border: 2px dashed #ccc;
border-radius: 4px;
padding: 2rem;
text-align: center;
cursor: pointer;
margin: 1rem 0;
transition: all 0.3s ease;
}
.dropzone.active {
border-color: #2196f3;
background-color: rgba(33, 150, 243, 0.1);
}
.dropzone.uploading {
border-color: #4caf50;
background-color: rgba(76, 175, 80, 0.1);
cursor: wait;
}
.uploadIcon {
font-size: 3rem;
color: #666;
margin-bottom: 1rem;
}
.dropzoneText {
color: #666;
}
.dropzoneText p {
margin: 0.5rem 0;
}
.browseButton {
background-color: #2196f3;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
margin-top: 0.5rem;
}
.browseButton:hover {
background-color: #1976d2;
}
.browseButton:disabled {
background-color: #90caf9;
cursor: not-allowed;
}
.selectedFile {
margin-top: 1rem;
padding: 1rem;
background-color: #f5f5f5;
border-radius: 4px;
}
.uploadButton {
background-color: #4caf50;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
margin-top: 0.5rem;
}
.uploadButton:hover {
background-color: #388e3c;
}
.uploadButton:disabled {
background-color: #a5d6a7;
cursor: not-allowed;
}

123
src/pages/Dateien/DateienHinzufügen/DateienUpload.tsx Normal file
View file

@ -0,0 +1,123 @@
import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import styles from './DateienUpload.module.css';
import { IoCloudUploadOutline } from "react-icons/io5";
import { IoClose } from "react-icons/io5";
import { useFileOperations } from '../../../hooks/useFiles';
interface DateienUploadProps {
isOpen: boolean;
onClose: () => void;
onFileUpload: (file: File) => void;
}
function DateienUpload({ isOpen, onClose, onFileUpload }: DateienUploadProps) {
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [isUploading, setIsUploading] = useState(false);
const [uploadStatus, setUploadStatus] = useState<{ success: boolean; message: string } | null>(null);
const { handleFileUpload, uploadError } = useFileOperations();
const onDrop = useCallback((acceptedFiles: File[]) => {
if (acceptedFiles.length > 0) {
setSelectedFile(acceptedFiles[0]);
// Clear previous upload status when selecting a new file
setUploadStatus(null);
}
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
multiple: false
});
const handleUpload = async () => {
if (selectedFile) {
setIsUploading(true);
setUploadStatus(null);
try {
const result = await handleFileUpload(selectedFile);
if (result.success) {
setUploadStatus({
success: true,
message: 'Datei erfolgreich hochgeladen!'
});
onFileUpload(selectedFile);
setSelectedFile(null);
// Close modal after brief success message
setTimeout(() => {
onClose();
}, 1500);
} else {
setUploadStatus({
success: false,
message: uploadError || 'Beim Hochladen ist ein Fehler aufgetreten.'
});
}
} catch (error) {
setUploadStatus({
success: false,
message: 'Beim Hochladen ist ein unerwarteter Fehler aufgetreten.'
});
} finally {
setIsUploading(false);
}
}
};
if (!isOpen) return null;
return (
<div className={styles.overlay}>
<div className={styles.modal}>
<button className={styles.closeButton} onClick={onClose} disabled={isUploading}>
<IoClose />
</button>
<h2>Datei hochladen</h2>
{uploadStatus && (
<div className={`${styles.uploadStatus} ${uploadStatus.success ? styles.success : styles.error}`}>
{uploadStatus.message}
</div>
)}
<div
{...getRootProps()}
className={`${styles.dropzone} ${isDragActive ? styles.active : ''} ${isUploading ? styles.uploading : ''}`}
>
<input {...getInputProps()} disabled={isUploading} />
<IoCloudUploadOutline className={styles.uploadIcon} />
{isDragActive ? (
<p>Datei hier ablegen...</p>
) : isUploading ? (
<p>Lädt hoch...</p>
) : (
<div className={styles.dropzoneText}>
<p>Dateien hierher ziehen</p>
<p>oder</p>
<button className={styles.browseButton} disabled={isUploading}>
Durchsuchen
</button>
</div>
)}
</div>
{selectedFile && !isUploading && !uploadStatus?.success && (
<div className={styles.selectedFile}>
<p>Ausgewählte Datei: {selectedFile.name}</p>
<button
className={styles.uploadButton}
onClick={handleUpload}
disabled={isUploading}
>
{isUploading ? 'Wird hochgeladen...' : 'Hochladen'}
</button>
</div>
)}
</div>
</div>
);
}
export default DateienUpload;

5
src/pages/Login.tsx
View file

@ -1,12 +1,11 @@
import { useMsal } from '@azure/msal-react';
import { loginRequest } from '../auth/auth-config';
import { loginRequest } from '../auth/authConfig';
import { useNavigate, useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';
import styles from './Login.module.css';
import agentDiagram from '../assets/Frame 43.png';
import logo from '../assets/LogoPowerOn.png';
import { useAuth } from '../hooks/useAuth';
import { useMsalAuth } from '../hooks/useMsalAuth';
import { useAuth, useMsalAuth } from '../hooks/useAuthentication';
function Login() {
const { instance, accounts, inProgress } = useMsal();

85
src/pages/Mitglieder/Mitglieder.module.css Normal file
View file

@ -0,0 +1,85 @@
.mitgliederContainer {
margin: 51px 49px 0 36px;
display: flex;
padding: 0px 30px 30px 30px;
flex-direction: column;
align-self: stretch;
border-radius: 30px;
border: 1px solid var(--f-1-f-1-f-1, #F1F1F1);
background: var(--Grayscale-True-White, #FFF);
position: relative;
box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);
max-height: calc(100vh - 100px);
overflow: hidden;
}
.horizontalLineLight {
width: 100%;
background-color: #F1F1F1;
height: 1px;
margin-top: 90px;
margin-left: -30px;
position: absolute;
}
.header{
display: flex;
gap: 30px;
align-items: flex-start;
height: 62px;
color: var(--Grayscale-Black, #24262B);
padding-top: 30px;
padding-bottom: 30px;
}
.mitglieder_hinzufügen_button {
border-radius: 30px;
background: var(--Grayscale-Gray, #E9E9E9);
border: none;
outline: none;
text-align: left;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
gap: 10px;
align-items: center;
}
.mitglieder_hinzufügen_button:hover {
cursor: pointer;
}
.add_icon {
font-size: 16px;
}
.membersList {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
overflow-y: auto; /* Enable vertical scrolling */
/* Space for the header line */
}
.membersList li {
display: flex;
align-items: center;
height: 60px; /* Specific height for each item */
padding: 0 16px;
border-bottom: 1px solid #F1F1F1;
font-size: 16px;
transition: background-color 0.2s ease;
}
.actions {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}

43
src/pages/Mitglieder/Mitglieder.tsx Normal file
View file

@ -0,0 +1,43 @@
import styles from './Mitglieder.module.css'
import MitgliederItem from '../../components/Mitglieder/MitgliederItem';
import { IoPersonAddSharp } from "react-icons/io5";
import { useOrgUsers } from '../../hooks/useUsers';
function Mitglieder () {
const { users, loading, error, refetch } = useOrgUsers();
return (
<div className={styles.mitgliederContainer}>
<div className={styles.header}>
<button className={styles.mitglieder_hinzufügen_button}>
<IoPersonAddSharp className={styles.add_icon}/>
Mitglied hinzufügen
</button>
</div>
<div className={styles.horizontalLineLight}></div>
{loading ? (
<p>Loading...</p>
) : error ? (
<p>Error: {error}</p>
) : users.length === 0 ? (
<p>No users found.</p>
) : (
<ul className={styles.membersList}>
{users.map((user) => (
<MitgliederItem
key={user.id}
user={user}
refetchUsers={refetch}
totalUsers={users.length}
/>
))}
</ul>
)}
</div>
);
}
export default Mitglieder;

4
src/pages/Register.tsx
View file

@ -3,9 +3,7 @@ import { useNavigate } from 'react-router-dom';
import styles from './Register.module.css';
import logo from '../assets/LogoPowerOn.png';
import agentDiagram from '../assets/Frame 43.png';
import { useRegister } from '../hooks/useRegister';
import { useMsalRegister } from '../hooks/useMsalRegister';
import { useRegister, useMsalRegister } from '../hooks/useAuthentication';
interface RegisterFormData {
username: string;