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; 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{ .container1{
background-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.4);
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
background-color: #fff;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 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%; height: 100%;
background: linear-gradient(45deg, #f1faee, #a8dadc); background: linear-gradient(45deg, #f1faee, #a8dadc);
} }
body{
body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -10,7 +11,8 @@ body{
font-weight: 100; font-weight: 100;
color: #1d3557; color: #1d3557;
} }
.contenido{
.contenido {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -22,38 +24,43 @@ tbody tr:hover {
th, td { th, td {
padding: 15px; padding: 15px;
background-color: rgba(255,255,255,0.2); background-color: rgba(255, 255, 255, 0.2);
color: #457b9d; color: #457b9d;
} }
th { th {
background-color: #a8dadc; background-color: #a8dadc;
} }
td{
td {
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
table{
table {
border-collapse: collapse; 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; height: fit-content;
overflow: auto; overflow: auto;
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.table1 thead { .table1 thead {
position: sticky; position: sticky;
top: 0%; top: 0%;
} }
.celda-acciones{ .celda-acciones {
display: flex; display: flex;
} }
.celda-acciones button{
.celda-acciones button {
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
@ -65,10 +72,12 @@ table{
.celda-acciones button:hover { .celda-acciones button:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.botones{
.botones {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.botones button { .botones button {
margin: 10px 30px; margin: 10px 30px;
padding: 10px; padding: 10px;
@ -79,9 +88,11 @@ table{
cursor: pointer; cursor: pointer;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
} }
.botones .button_salir { .botones .button_salir {
background-color: #ff5050; background-color: #ff5050;
} }
.botones button:hover { .botones button:hover {
filter: brightness(0.8); /* Reduce el brillo al 80% */ filter: brightness(0.8); /* Reduce el brillo al 80% */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 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> </head>
<body> <body>
<h2>Registro</h2> <h2>Registro</h2>
<div class="register_form"> <div class="container1">
<form th:action="@{/register}" method="post"> <form th:action="@{/register}" method="post">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/> <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<label>Usuario:</label>
<input type="text" name="username" required> <div class="input-group">
<br> <label>Usuario:</label>
<br> <input type="text" name="username" required>
<label>Contraseña:</label> </div>
<input type="password" name="password" required> <div class="input-group">
<br> <label>Contraseña:</label>
<br> <input type="password" name="password" required>
<label>Mail:</label> </div>
<input type="text" name="mail" required> <div class="input-group">
<br> <label>Mail:</label>
<br> <input type="text" name="mail" required>
<label>Rol:</label> </div>
<select name="role"> <div class="input-group">
<option value="USER">Usuario</option> <label>Rol:</label>
<option value="ADMIN">Administrador</option> <select name="role">
</select> <option value="USER">Usuario</option>
<br> <option value="ADMIN">Administrador</option>
<br> </select>
</div>
<button type="submit">Registrar</button> <button type="submit">Registrar</button>
</form> </form>
</div> </div>

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

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