adyxax/tfstated
1
0
Fork 0
Code Issues 37 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

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

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

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

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