adyxax/tfstated
1
0
Fork 0
Code Issues 35 Pull requests Releases Packages Activity Actions

chore(webui): redesign the login page

Browse source
This commit is contained in:
Julien Dessaux 2025-04-06 14:37:00 +02:00
parent f12a54b760
commit 0354ef67be
Signed by: adyxax
GPG key ID: F92E51B86E07177E
2 changed files with 40 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
pkg/webui/html/login.html
View file

@ -1,25 +1,31 @@
{{ define "main" }}
<form action="/login" method="post">
<fieldset>
<div class="field border label{{ if .Forbidden }} invalid{{ end }}">
<input autofocus
id="username"
name="username"
type="text"
value="{{ .Username }}"
required>
<label for="username">Username</label>
<div style="display: grid;">
<form action="/login" method="post" style="align-self:center; justify-self: center;">
<fieldset style="align-items:center; display:flex; flex-direction:column; gap:8px;">
<legend>Login</legend>
<div style="align-items:center; display:flex; flex-direction:row; gap:8px;">
<label for="username">Username</label>
<input autofocus
{{ if .Forbidden }}class="error"{{ end }}
id="username"
name="username"
type="text"
value="{{ .Username }}"
required>
</div>
<div style="align-items:center; display:flex; flex-direction:row; gap:8px;">
<label for="password">Password</label>
<input {{ if .Forbidden }}class="error"{{ end }}
id="password"
name="password"
type="password"
required>
</div>
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
</div>
<div class="field border label{{ if .Forbidden }} invalid{{ end}}">
<input id="password"
name="password"
type="password"
required>
<label for="password">Password</label>
{{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
</div>
<button class="small-round" type="submit" value="login">Login</button>
</fieldset>
</form>
<div style="align-self:stretch; display:flex; justify-content:flex-end;">
<button class="primary" type="submit" value="login">Login</button>
</div>
</fieldset>
</form>
</div>
{{ end }}

14
pkg/webui/static/main.css
View file

@ -137,7 +137,7 @@ header {
main {
background-color: var(--bg-1);
margin-right: auto;
padding: 8px;
padding: 16px;
overflow-wrap: anywhere;
scrollbar-gutter: stable both-edges;
max-width: 776px;
@ -230,9 +230,16 @@ ul {
ul li {
margin-bottom: 4px;
}
article, fieldset {
article {
border: 1px solid var(--fg-0);
border-radius: 4px;
margin: 8px 0px 8px 0px;
padding: 8px;
}
fieldset {
border: 1px solid var(--fg-0);
border-radius: 4px;
margin: 0px 0px 8px 0px;
padding: 8px;
}
button {
@ -255,6 +262,9 @@ button:hover {
border: 1px solid var(--red);
color: var(--red);
}
.error {
color: var(--red);
}
.primary {
background-color: var(--orange);
color: var(--fg-1);