filestash/server/plugin/plg_authenticate_local/handler.html

<style>
 html { height: initial; }
 body { max-width: 800px; margin: 0 auto; text-align: left; padding-left: 10px; padding-right: 10px; }
 h1 { margin-top: 10px; margin-bottom: 0; font-size: 2.3rem; }
 p { margin: 7px 0; }
 table { width: 100%; margin: 30px auto 50px auto; padding: 0; }
 table .disabled td:not([onclick]) { text-decoration: line-through; }
 table td.action { color: white; background: rgba(0, 0, 0, 0.8); border-radius: 30px; font-weight: bold; font-size: 0.7rem; cursor: pointer; }
 form { width: 100%; padding: 0; }
 thead { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.6); font-weight: normal; }
 tbody tr:hover { background: rgba(255, 255, 255, 0.7); }
 th { font-weight: normal; }
 th, td { padding: 5px 10px; }
 input[disabled], .common_response_page button[disabled] { background: rgba(0,0,0,0.1); }
 dialog { border: none !important; border-radius: 10px; box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 20px 40px 35px 40px; width: 450px; background: #f2f3f5; z-index: 5; }
 dialog[open] { animation: dialogin 0.2s ease forwards; }
 dialog[open] ~ .backdrop { display: block; }
 @keyframes dialogin{
     0%{ opacity:0; transform: translateY(5px); }
     100%{ opacity:1; transform: translateY(0); }
 }
 dialog h1 { padding: 0; margin: 5px 0 20px 0; }
 .backdrop { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.4); z-index: 2; }
 .transparency { opacity: 0.8; }
 .center { text-align: center; }
 .pointer { cursor: pointer; }
 .button__round { border: 1px solid #313538; display: inline-block; width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 50%; padding: 2px; box-shadow: 2px 2px rgba(0, 0, 0, 0.2); }
 .banner { background: rgba(0, 0, 0, 0.02); border: 2px dashed rgba(0, 0, 0, 0.05); padding: 50px 0; text-align: center; margin-top: 30px; font-size: 1.2rem; color: rgba(0, 0, 0, 0.3); }
 h1 span.pointer { float: right; }
 #modal-close { transform: rotate(45deg); }
 #back { position: absolute; top: 10px; left: 10px; color: inherit; text-decoration: none; }
</style>

<dialog {{ if ne .CurrentUser.Email "" }}open{{ end }}>
    <h1>
        {{ if eq .CurrentUser.Email "" }}User Creation{{ else }}User Update{{ end }}
        <span id="modal-close" class="pointer button__round">+</span>
    </h1>
    <form method="post">
        <input type="email" name="email" value="{{ .CurrentUser.Email }}" placeholder="Email" {{ if ne .CurrentUser.Email "" }}disabled{{ end }} />
        <input type="password" name="password" value="{{ .CurrentUser.Password }}" placeholder="Password" />
        <input type="text" name="role" value="{{ .CurrentUser.Role }}" placeholder="Role" />
        <label>
            <input type="checkbox" name="disabled" {{ if eq .CurrentUser.Disabled true }}checked{{ end }}>
            Block
        </label>
        <button class="transparency">
            {{ if eq .CurrentUser.Email "" }}Create{{ else }}Update{{ end }}
        </button>
    </form>
</dialog>
<div class="backdrop"></div>

<h1>User Management <span id="user-add" class="pointer button__round">+</span></h1>
<p class="transparency">Manage your team members and their account permissions here.</p>

{{ $length := len .Users }} {{ if eq $length 0 }}
<p class="banner">
    There is not user yet, create one!
</p>
{{ else }}
<table>
    <thead>
        <tr>
            <th>Email</th>
            <th>Role</th>
            <th style="width:10px;"></th>
            <th style="width:10px;"></th>
        </tr>
    </thead>
    <tbody class="transparency">
        {{range $user := .Users }}
        <tr class="{{ if eq $user.Disabled true }}disabled{{ end }}">
            <td>{{ $user.Email }}</td>
            <td>{{ $user.Role }}</td>
            <td class="center action" onclick="deleteItem('{{ $user.Email }}')">DEL</td>
            <td class="center action" onclick="updateItem('{{ $user.Email }}')">EDIT</td>
        </tr>
        {{end}}
    </tbody>
</table>
{{ end }}

{{ if ne .Referer "" }}
<a href="{{ .Referer }}" id="back" class="transparency">&#60; back</a>
{{ end }}

<script>
 window.deleteItem = async (email) => {
     const ok = window.confirm("Are you sure you want to remove: " + email);
     if (!ok) return;
     const f = new FormData();
     f.append("email", email)
     const resp = await fetch(location.pathname, {
         method: "DELETE",
         body: f,
     });
     if (!resp.ok) {
         alert(resp.statusText);
         return;
     }
     location.reload();

 };
 window.updateItem = async (email) => {
     location.search = "?email=" + encodeURIComponent(email);
 };

 (function() {
     const $dialog = document.querySelector("dialog");
     document.getElementById("user-add").onclick = () => $dialog.showModal();
     document.getElementById("modal-close").onclick = () => {
         $dialog.close();
         location.search = "";
     };

     document.querySelector("form").onsubmit = (e) => {
         e.target.querySelector("button").setAttribute("disabled", "true");
     };
 })();
</script>