jbah.skp/PasswordBox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend

Browse Source
This commit is contained in:
Jesper 2024-10-09 19:56:04 +02:00
parent f6b25a1a20
commit ed6985c670
2 changed files with 92 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
frontend/src/pages/Admin/index.tsx
View File

@ -143,96 +143,98 @@ export function Admin() {
<div className="admin-dashboard">
<h1>Admin Dashboard</h1>
<div className="section users-section">
<h2>Users</h2>
<ul>
{users.map(user => (
<li key={user.id}>
{user.name}
<button className="delete-btn" onClick={() => deleteUser(user.id)}>Delete</button>
</li>
))}
</ul>
</div>
<div className="section groups-section">
<h2>Groups</h2>
<ul>
{groups.map(group => (
<li key={group.id}>
{group.GroupName}
<button className="delete-btn" onClick={() => deleteGroup(group.GroupID)}>Delete</button>
</li>
))}
</ul>
</div>
<div className="section add-to-group-section">
<h2>Add User to Group</h2>
<form onSubmit={(e) => {
e.preventDefault();
const userId = e.target.userId.value;
if (selectedGroupId) addUserToGroup(userId);
}}>
<select name="userId">
<div className="grid-container">
<div className="section">
<h2>Users</h2>
<ul>
{users.map(user => (
<option key={user.id} value={user.id}>{user.name}</option>
<li key={user.id}>
{user.name}
<button className="delete-btn" onClick={() => deleteUser(user.id)}>Delete</button>
</li>
))}
</select>
<select
name="groupId"
value={selectedGroupId}
onChange={(e) => setSelectedGroupId(e.target.value)}
>
<option value="">Select a group</option>
</ul>
</div>
<div className="section">
<h2>Groups</h2>
<ul>
{groups.map(group => (
<option key={group.id} value={group.id}>{group.GroupName}</option>
<li key={group.id}>
{group.GroupName}
<button className="delete-btn" onClick={() => deleteGroup(group.GroupID)}>Delete</button>
</li>
))}
</select>
<button type="submit">Add User</button>
</form>
</div>
</ul>
</div>
<div className="section register-section">
<h2>Register New User</h2>
<form onSubmit={registerUser}>
<input
type="text"
placeholder="Username"
value={newUser.username}
onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
required
/>
<input
type="password"
placeholder="Password"
value={newUser.password}
onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
required
/>
<input
type="text"
placeholder="Name"
value={newUser.name}
onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
required
/>
<button type="submit">Register User</button>
</form>
</div>
<div className="section">
<h2>Add User to Group</h2>
<form onSubmit={(e) => {
e.preventDefault();
const userId = e.target.userId.value;
if (selectedGroupId) addUserToGroup(userId);
}}>
<select name="userId">
{users.map(user => (
<option key={user.id} value={user.id}>{user.name}</option>
))}
</select>
<select
name="groupId"
value={selectedGroupId}
onChange={(e) => setSelectedGroupId(e.target.value)}
>
<option value="">Select a group</option>
{groups.map(group => (
<option key={group.id} value={group.id}>{group.GroupName}</option>
))}
</select>
<button type="submit">Add User</button>
</form>
</div>
<div className="section create-group-section">
<h2>Create New Group</h2>
<form onSubmit={createGroup}>
<input
type="text"
placeholder="Group Name"
value={newGroupName}
onChange={(e) => setNewGroupName(e.target.value)}
required
/>
<button type="submit">Create Group</button>
</form>
<div className="section">
<h2>Register New User</h2>
<form onSubmit={registerUser}>
<input
type="text"
placeholder="Username"
value={newUser.username}
onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
required
/>
<input
type="password"
placeholder="Password"
value={newUser.password}
onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
required
/>
<input
type="text"
placeholder="Name"
value={newUser.name}
onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
required
/>
<button type="submit">Register User</button>
</form>
</div>
<div className="section">
<h2>Create New Group</h2>
<form onSubmit={createGroup}>
<input
type="text"
placeholder="Group Name"
value={newGroupName}
onChange={(e) => setNewGroupName(e.target.value)}
required
/>
<button type="submit">Create Group</button>
</form>
</div>
</div>
</div>
);

15
frontend/src/pages/Admin/style.css
View File

@ -14,12 +14,11 @@
color: #b682ff;
}
/* Flexbox Layout */
.grid-container {
display: flex;
flex-wrap: wrap; /* Wrap the sections into the next row when needed */
flex-wrap: wrap;
gap: 20px;
justify-content: space-between; /* Distribute the sections horizontally with space between */
justify-content: space-between;
}
.section {
@ -27,8 +26,8 @@
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
flex: 1 1 30%; /* Make the section take up approximately 30% of the row */
min-width: 280px; /* Ensure each section has a minimum width */
flex: 1 1 30%;
min-width: 280px;
box-sizing: border-box;
transition: transform 0.2s ease;
}
@ -43,7 +42,6 @@ h2 {
margin-bottom: 15px;
}
/* List Styles */
ul {
list-style: none;
padding: 0;
@ -102,15 +100,14 @@ button:hover {
background-color: #9b50ff;
}
/* Responsive Adjustments */
@media (max-width: 900px) {
.section {
flex: 1 1 45%; /* For medium screens, display 2 sections per row */
flex: 1 1 45%;
}
}
@media (max-width: 600px) {
.section {
flex: 1 1 100%; /* For small screens, each section takes full width */
flex: 1 1 100%;
}
}