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"> <div className="admin-dashboard">
<h1>Admin Dashboard</h1> <h1>Admin Dashboard</h1>
<div className="section users-section"> <div className="grid-container">
<h2>Users</h2> <div className="section">
<ul> <h2>Users</h2>
{users.map(user => ( <ul>
<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">
{users.map(user => ( {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> </ul>
<select </div>
name="groupId"
value={selectedGroupId} <div className="section">
onChange={(e) => setSelectedGroupId(e.target.value)} <h2>Groups</h2>
> <ul>
<option value="">Select a group</option>
{groups.map(group => ( {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> </ul>
<button type="submit">Add User</button> </div>
</form>
</div>
<div className="section register-section"> <div className="section">
<h2>Register New User</h2> <h2>Add User to Group</h2>
<form onSubmit={registerUser}> <form onSubmit={(e) => {
<input e.preventDefault();
type="text" const userId = e.target.userId.value;
placeholder="Username" if (selectedGroupId) addUserToGroup(userId);
value={newUser.username} }}>
onChange={(e) => setNewUser({ ...newUser, username: e.target.value })} <select name="userId">
required {users.map(user => (
/> <option key={user.id} value={user.id}>{user.name}</option>
<input ))}
type="password" </select>
placeholder="Password" <select
value={newUser.password} name="groupId"
onChange={(e) => setNewUser({ ...newUser, password: e.target.value })} value={selectedGroupId}
required onChange={(e) => setSelectedGroupId(e.target.value)}
/> >
<input <option value="">Select a group</option>
type="text" {groups.map(group => (
placeholder="Name" <option key={group.id} value={group.id}>{group.GroupName}</option>
value={newUser.name} ))}
onChange={(e) => setNewUser({ ...newUser, name: e.target.value })} </select>
required <button type="submit">Add User</button>
/> </form>
<button type="submit">Register User</button> </div>
</form>
</div>
<div className="section create-group-section"> <div className="section">
<h2>Create New Group</h2> <h2>Register New User</h2>
<form onSubmit={createGroup}> <form onSubmit={registerUser}>
<input <input
type="text" type="text"
placeholder="Group Name" placeholder="Username"
value={newGroupName} value={newUser.username}
onChange={(e) => setNewGroupName(e.target.value)} onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
required required
/> />
<button type="submit">Create Group</button> <input
</form> 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>
</div> </div>
); );

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

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