jonara
/
Gestion-inventario
mirror of https://github.com/jonander2233/Gestion-inventario
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor user registration and management UI with improved structure and styling

This commit is contained in:
jon ander 2025-04-08 19:48:31 +02:00
parent 4f86df1ca1
commit 2bea3dfc4c
4 changed files with 87 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/resources/static/css/style.css
View File

@ -18,19 +18,11 @@ p {
margin-bottom: 20px;
}
.register_form{
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.container1{
background-color: rgba(255,255,255,0.2);
background-color: rgba(255,255,255,0.4);
display: inline-flex;
flex-direction: column;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

33
src/main/resources/static/css/table_style.css
View File

@ -1,8 +1,9 @@
html{
html {
height: 100%;
background: linear-gradient(45deg, #f1faee, #a8dadc);
}
body{
body {
display: flex;
flex-direction: column;
align-items: center;
@ -10,7 +11,8 @@ body{
font-weight: 100;
color: #1d3557;
}
.contenido{
.contenido {
display: flex;
flex-direction: column;
align-items: center;
@ -22,38 +24,43 @@ tbody tr:hover {
th, td {
padding: 15px;
background-color: rgba(255,255,255,0.2);
background-color: rgba(255, 255, 255, 0.2);
color: #457b9d;
}
th {
background-color: #a8dadc;
}
td{
td {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table{
table {
border-collapse: collapse;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.table-container{
.table-container {
height: fit-content;
overflow: auto;
border-radius: 10px;
margin-bottom: 10px;
}
.table1 thead {
position: sticky;
top: 0%;
}
.celda-acciones{
.celda-acciones {
display: flex;
}
.celda-acciones button{
.celda-acciones button {
background-color: rgba(255, 255, 255, 0.3);
border: none;
border-radius: 4px;
@ -65,10 +72,12 @@ table{
.celda-acciones button:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.botones{
.botones {
display: flex;
flex-direction: row;
}
.botones button {
margin: 10px 30px;
padding: 10px;
@ -79,9 +88,11 @@ table{
cursor: pointer;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}
.botones .button_salir {
background-color: #ff5050;
}
.botones button:hover {
filter: brightness(0.8); /* Reduce el brillo al 80% */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

41
src/main/resources/templates/register.html
View File

@ -6,28 +6,29 @@
</head>
<body>
<h2>Registro</h2>
<div class="register_form">
<div class="container1">
<form th:action="@{/register}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<label>Usuario:</label>
<input type="text" name="username" required>
<br>
<br>
<label>Contraseña:</label>
<input type="password" name="password" required>
<br>
<br>
<label>Mail:</label>
<input type="text" name="mail" required>
<br>
<br>
<label>Rol:</label>
<select name="role">
<option value="USER">Usuario</option>
<option value="ADMIN">Administrador</option>
</select>
<br>
<br>
<div class="input-group">
<label>Usuario:</label>
<input type="text" name="username" required>
</div>
<div class="input-group">
<label>Contraseña:</label>
<input type="password" name="password" required>
</div>
<div class="input-group">
<label>Mail:</label>
<input type="text" name="mail" required>
</div>
<div class="input-group">
<label>Rol:</label>
<select name="role">
<option value="USER">Usuario</option>
<option value="ADMIN">Administrador</option>
</select>
</div>
<button type="submit">Registrar</button>
</form>
</div>

81
src/main/resources/templates/user_management.html
View File

@ -5,46 +5,49 @@
<link rel="stylesheet" th:href="@{/css/table_style.css}">
</head>
<body>
<div class="contenido">
<h2>Gestión de Usuarios</h2>
<div class="table-container">
<table class="table1">
<thead>
<tr>
<th class="celda-id">ID</th>
<th>Nombre</th>
<th>Rol</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td class="celda-id" th:text="${user.id}"></td>
<td th:text="${user.nombre}"></td>
<td th:text="${user.role}"></td>
<td th:title="${user.mail}" th:text="${user.mail}"></td>
<td class="celda-acciones">
<button th:title="Editar">✏️</button>
<form th:action="@{/delete_user}" method="get" style="display:inline;">
<input type="hidden" th:name="id" th:value="${user.id}" />
<button type="submit" th:title="Borrar" formaction="#" onclick="if(confirm('¿Estás seguro de que deseas borrar este usuario?')) { this.form.action = this.form.getAttribute('th:action'); } else { return false; }">🗑️</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<div class="botones">
<a href="/Inventario/home">
<button class="button_salir">Volver al inicio</button>
</a>
<a href="/Inventario/register">
<button>Añadir usuario</button>
</a>
</div>
<div class="contenido">
<h2>Gestión de Usuarios</h2>
<div class="table-container">
<table class="table1">
<thead>
<tr>
<th class="celda-id">ID</th>
<th>Nombre</th>
<th>Rol</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td class="celda-id" th:text="${user.id}"></td>
<td th:text="${user.nombre}"></td>
<td th:text="${user.role}"></td>
<td th:title="${user.mail}" th:text="${user.mail}"></td>
<td class="celda-acciones">
<button th:title="Editar">✏️</button>
<form th:action="@{/delete_user}" method="get" style="display:inline;">
<input type="hidden" th:name="id" th:value="${user.id}"/>
<button type="submit" th:title="Borrar" formaction="#"
onclick="if(confirm('¿Estás seguro de que deseas borrar este usuario?')) { this.form.action = this.form.getAttribute('th:action'); } else { return false; }">
🗑️
</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<div class="botones">
<a href="/Inventario/home">
<button class="button_salir">Volver al inicio</button>
</a>
<a href="/Inventario/register">
<button>Añadir usuario</button>
</a>
</div>
</div>
</body>
</html>