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

feat(webui): bootstrap a proper UI

Browse source
This commit is contained in:
Julien Dessaux 2025-01-26 00:04:38 +01:00
parent 09885ef1e4
commit 4e029fb83a
Signed by: adyxax
GPG key ID: F92E51B86E07177E
11 changed files with 127 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

54
pkg/webui/html/base.html
View file

@ -1,28 +1,50 @@
{{ define "nav" }}
<header>
<nav>
<a href="/">
<h6>TFSTATED</h6>
</a>
</nav>
</header>
{{ if eq .Page.Section "login" }}
<a href="/login" class="active">
<i>login</i>
<span>Login</span>
</a>
{{ else }}
<a href="/states"{{ if eq .Page.Section "states" }} class="active"{{ end}}>
<i>home_storage</i>
<span>States</span>
</a>
<hr>
<a href="/logout">
<i>logout</i>
<span>Logout</span>
</a>
{{ end }}
{{ end }}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<title>tfstated</title>
<link href="/static/main.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.css" rel="stylesheet">
<title>TFSTATED - {{ .Page.Title }}</title>
</head>
<body>
<header class="container">
<body class="dark">
<nav class="left drawer l">{{ template "nav" . }}</nav>
<nav class="left m">{{ template "nav" . }}</nav>
<nav class="bottom s">{{ template "nav" . }}</nav>
<header>
<nav>
<ul>
<li><a href="/"><strong>TFSTATED</strong></a></li>
</ul>
<ul>
<li><a href="/states">States</a></li>
</ul>
<h5 class="max center-align">{{ .Page.Title }}</h5>
</nav>
</header>
<main class="container">
{{ template "main" . }}
</main>
<footer class="container">
{{ template "main" . }}
<footer>
</footer>
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js"></script>
</body>
</html>

8
pkg/webui/html/error.html
View file

@ -1,6 +1,6 @@
{{ define "main" }}
<article>
<h1>{{ .Status }} - {{ .StatusText }}</h1>
<p>{{ .Err }}</p>
</article>
<main class="responsive">
<h5>{{ .Status }} - {{ .StatusText }}</h5>
<p>{{ .Err }}</p>
</main>
{{ end }}

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

@ -1,29 +1,26 @@
{{ define "main" }}
{{ if .Forbidden }}
<article>
<p class="error-message">Invalid username or password</p>
</article>
{{ end }}
<form action="/login" method="post">
<fieldset>
<label>
Username
<input type="text"
placeholder="Username"
name="username"
value="{{ .Username }}"
{{ if .Forbidden }}aria-invalid="true"{{ end }}
required>
</label>
<label>
Password
<input type="password"
placeholder="Password"
name="password"
{{ if .Forbidden }}aria-invalid="true"{{ end }}
required>
</label>
</fieldset>
<button type="submit" value="login">Login</button>
</form>
<main class="responsive">
<form action="/login" method="post">
<fieldset>
<div class="field border label{{ if .Forbidden }} invalid{{ end}}">
<input id="username"
name="username"
type="text"
value="{{ .Username }}"
required>
<label for="username">Username</label>
{{ 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>
</main>
{{ end }}

6
pkg/webui/html/logout.html
View file

@ -1,5 +1,5 @@
{{ define "main" }}
<article>
<p>Logout successful</p>
</article>
<main class="responsive">
<h5>Logout successful</h5>
</main>
{{ end }}

51
pkg/webui/html/states.html
View file

@ -1,23 +1,32 @@
{{ define "main" }}
<h1>States</h1>
<table class="striped">
<thead>
<tr>
<th scope="col">Path</th>
<th scope="col">Created</th>
<th scope="col">Updated</th>
<th scope="col">Locked</th>
</tr>
</thead>
<tbody>
{{ range .States }}
<tr>
<th scope="row">{{ .Path }}</th>
<td>{{ .Created }}</td>
<td>{{ .Updated }}</td>
<td>{{ .Lock }}</td>
</tr>
{{ end }}
</tbody>
</table>
<main class="responsive" id="main">
<table class="clickable-rows no-space stripes">
<thead>
<tr>
<th>Path</th>
<th>Updated</th>
<th>Locked</th>
</tr>
</thead>
<tbody>
{{ range .States }}
<tr>
<td><a href="/state/{{ .Id }}">{{ .Path }}</a></td>
<td><a href="/state/{{ .Id }}">{{ .Updated }}</a></td>
<td>
<a href="/state/{{ .Id }}">
{{ if eq .Lock nil }}no{{ else }}
<span>yes</span>
<div class="tooltip left max">
<b>Lock</b>
<p>{{ .Lock }}</p>
</div>
{{ end }}
</a>
</td>
</tr>
{{ end }}
</tbody>
</table>
</main>
{{ end }}