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; color: #57595A; }
 .common_response_page { max-width: inherit; padding: 0; }
 header { background: white; padding: 100px 50px 75px; border-bottom: 1px solid #e2e2e2; }
 main { max-width: 1000px; margin: auto; width: 99%; }
 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.3); border-radius: 10px; font-weight: bold; font-size: 0.7rem; cursor: pointer; }
 form { width: 100%; padding: 0; }
 tbody tr:hover { background: rgba(255, 255, 255, 0.7); }
 th { font-weight: bold; font-size: 0.8rem; color: rgba(0, 0, 0, 0.5); text-transform: uppercase; }
 th, td { padding: 10px 10px; }
 input[disabled] { background: #d2d2d2; }
 .banner-empty { margin-top: 50px; font-size: 1.2rem; color: rgba(0, 0, 0, 0.5); text-align: center; }
 button { text-transform: uppercase; background: #9AD1ED; }
 dialog { position: absolute; inset: 0; border: none !important; border-radius: 5px; 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: #505457; z-index: 5; color: white; }
 dialog[open] { animation: dialogin 0.2s ease forwards; }
 @keyframes dialogin{
     0%{ opacity:0; transform: translateY(5px); }
     100%{ opacity:1; transform: translateY(0); }
 }
 dialog h1 { padding: 0; margin: 5px 0 20px 0; }
 .center { text-align: center; }
 .pointer { cursor: pointer; }
 .button__round { border: 1px solid #313538; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; padding: 2px; box-shadow: 2px 2px rgba(0, 0, 0, 0.2); }
 dialog .button__round { border-color: white; box-shadow: none; }
 h1 span.pointer { float: right; }
 #modal-close { transform: rotate(45deg); }
 #back { position: absolute; top: 10px; left: 10px; color: inherit; text-decoration: none; }
</style>

<dialog closedby="any">
    <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" {{ if ne .CurrentUser.Email "" }}disabled{{ end }} />
        <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>
            {{ if eq .CurrentUser.Email "" }}Create{{ else }}Update{{ end }}
        </button>
    </form>
</dialog>

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

<main>
    {{ $length := len .Users }} {{ if eq $length 0 }}
    <p class="center banner-empty">
        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>
            {{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 }}
</main>

<a href="{{ .BackURL }}" id="back">&#60; back</a>

<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");

     // feature: click the add button
     document.getElementById("user-add").onclick = () => $dialog.showModal();

     // feature: autoopen modal
     if(new URLSearchParams(location.search).has("email")) {
         $dialog.showModal();
     }

     // feature: modal close button
     document.getElementById("modal-close").onclick = () => {
         $dialog.close();
         location.search = "";
     };
     // feature: modal submit
     document.querySelector("form").onsubmit = (e) => {
         e.target.querySelector("button").setAttribute("disabled", "true");
     };
     // feature: request admin refresh
     const bus = new BroadcastChannel("admin");
     bus.postMessage("reload");
 })();
</script>