ahriman/package/share/ahriman/templates/build-status/login-modal.jinja2

<div id="login-modal" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="login-form" onsubmit="return false">
                <div class="modal-header">
                    <h4 class="modal-title">Login</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="login-username" class="col-4 col-form-label">username</label>
                        <div class="col-8">
                            <input id="login-username" type="text" class="form-control" placeholder="enter username" name="username" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="login-password" class="col-4 col-form-label">password</label>
                        <div class="col-8">
                            <div class="input-group">
                                <input id="login-password" type="password" class="form-control" placeholder="enter password" name="password" required>
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" onclick="showPassword()"><i id="login-show-hide-password-button" class="bi bi-eye"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" onclick="login()"><i class="bi bi-person"></i> login</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const loginModal = $("#login-modal");
    const loginForm = $("#login-form");

    const loginPasswordInput = $("#login-password");
    const loginUsernameInput = $("#login-username");
    const showHidePasswordButton = $("#login-show-hide-password-button");

    function login() {
        const password = loginPasswordInput.val();
        const username = loginUsernameInput.val();

        if (username && password) {
            $.ajax({
                url: "/api/v1/login",
                data: JSON.stringify({username: username, password: password}),
                type: "POST",
                contentType: "application/json",
                success: _ => {
                    loginModal.modal("hide");
                    showSuccess("Logged in", `Successfully logged in as ${username}`, () => location.href = "/");
                },
                error: (jqXHR, _, errorThrown) => {
                    const message = _ => `Could not login as ${username}`;
                    showFailure("Login error", message, jqXHR, errorThrown);
                },
            });
        }
    }

    function showPassword() {
        if (loginPasswordInput.attr("type") === "password") {
            loginPasswordInput.attr("type", "text");
            showHidePasswordButton.removeClass("bi-eye");
            showHidePasswordButton.addClass("bi-eye-slash");
        } else {
            loginPasswordInput.attr("type", "password");
            showHidePasswordButton.removeClass("bi-eye-slash");
            showHidePasswordButton.addClass("bi-eye");
        }
    }

    $(() => {
        loginModal.on("hidden.bs.modal", () => {
            loginForm.trigger("reset");
        });
    });
</script>