chore(webui): redesign the accounts page

This commit is contained in:
Julien Dessaux 2025-04-12 13:55:55 +02:00
parent bd28f459c9
commit c69e323f9e
Signed by: adyxax
GPG key ID: F92E51B86E07177E
2 changed files with 56 additions and 57 deletions

View file

@ -1,60 +1,60 @@
{{ define "main" }}
<div>
<div class="tabs">
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>User Accounts</a>
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New User Account</a>
</div>
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
<table class="clickable-rows no-space">
<thead>
<tr>
<th>Username</th>
<th>Created</th>
<th>Last Login</th>
<th>Is Admin</th>
</tr>
</thead>
<tbody>
{{ range .Accounts }}
<tr>
<td><a href="/accounts/{{ .Id }}">{{ .Username }}</a></td>
<td><a href="/accounts/{{ .Id }}">{{ .Created }}</a></td>
<td><a href="/accounts/{{ .Id }}">{{ .LastLogin }}</a></td>
<td><a href="/accounts/{{ .Id }}">{{ .IsAdmin }}</a></td>
</tr>
{{ end }}
</tbody>
</table>
</div>
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
<form action="/accounts" enctype="multipart/form-data" method="post">
<fieldset>
<div class="field border label{{ if or .UsernameDuplicate .UsernameInvalid }} invalid{{ end }}">
<input autofocus
id="username"
name="username"
required
type="text"
value="{{ .Username }}">
<label for="username">Username</label>
{{ if .UsernameDuplicate }}
<span class="error">This username already exist</span>
{{ else if .UsernameInvalid }}
<span class="error">Invalid username</span>
{{ end }}
</div>
<div class="field label">
<label>
<input {{ if .IsAdmin }} checked{{ end }}
name="is-admin"
type="checkbox"
value="{{ .IsAdmin }}" />
<span>Is Admin</span>
</label>
</div>
<button class="small-round" type="submit" value="submit">Create User Account</button>
</fieldset>
</form>
<h1>User Accounts</h1>
<div class="flex-row" style="justify-content:space-between;">
<div style="min-width:240px;">
<p>There are <span class=button>{{ len .Accounts }}</span> user accounts.</p>
<p>Use this page to inspect user accounts or create a new one.</p>
</div>
<form action="/accounts" enctype="multipart/form-data" method="post">
<fieldset>
<legend>New User Account</legend>
<div class="grid-2">
<label for="username" style="min-width:92px;">Username</label>
<input autofocus
{{ if or .UsernameDuplicate .UsernameInvalid }}class="error"{{ end }}
id="username"
name="username"
required
type="text"
value="{{ .Username }}">
</div>
{{ if .UsernameDuplicate }}
<span class="error">This username already exist.</span>
{{ else if .UsernameInvalid }}
<span class="error">
<span class="tooltip">
Invalid username.
<span class="tooltip-text">
Username must start with a letter and be composed of only letters, numbers or underscores.
</span>
</span>
</span>
{{ end }}
<div style="align-self:stretch; display:flex; justify-content:flex-end;">
<button class="primary" type="submit" value="submit">Create User Account</button>
</fieldset>
</form>
</div>
<article>
<table style="width:100%;">
<thead>
<tr>
<th>Username</th>
<th>Created</th>
<th>Last Login</th>
<th>Is Admin</th>
</tr>
</thead>
<tbody>
{{ range .Accounts }}
<tr>
<td><a href="/accounts/{{ .Id }}">{{ .Username }}</a></td>
<td>{{ .Created }}</td>
<td>{{ .LastLogin }}</td>
<td>{{ .IsAdmin }}</td>
</tr>
{{ end }}
</tbody>
</table>
</article>
{{ end }}

View file

@ -3,7 +3,6 @@ package webui
import (
"html/template"
"net/http"
"path"
"git.adyxax.org/adyxax/tfstated/pkg/database"
"git.adyxax.org/adyxax/tfstated/pkg/model"