chore(webui): redesign the accounts page
This commit is contained in:
parent
bd28f459c9
commit
c69e323f9e
2 changed files with 56 additions and 57 deletions
|
@ -1,60 +1,60 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div>
|
<h1>User Accounts</h1>
|
||||||
<div class="tabs">
|
<div class="flex-row" style="justify-content:space-between;">
|
||||||
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>User Accounts</a>
|
<div style="min-width:240px;">
|
||||||
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New User Account</a>
|
<p>There are <span class=button>{{ len .Accounts }}</span> user accounts.</p>
|
||||||
</div>
|
<p>Use this page to inspect user accounts or create a new one.</p>
|
||||||
<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>
|
|
||||||
</div>
|
</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>
|
</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 }}
|
{{ end }}
|
||||||
|
|
|
@ -3,7 +3,6 @@ package webui
|
||||||
import (
|
import (
|
||||||
"html/template"
|
"html/template"
|
||||||
"net/http"
|
"net/http"
|
||||||
"path"
|
|
||||||
|
|
||||||
"git.adyxax.org/adyxax/tfstated/pkg/database"
|
"git.adyxax.org/adyxax/tfstated/pkg/database"
|
||||||
"git.adyxax.org/adyxax/tfstated/pkg/model"
|
"git.adyxax.org/adyxax/tfstated/pkg/model"
|
||||||
|
|
Loading…
Add table
Reference in a new issue