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 = document.getElementById("login-modal");
    const loginForm = document.getElementById("login-form");

    const loginPasswordInput = document.getElementById("login-password");
    const loginUsernameInput = document.getElementById("login-username");
    const showHidePasswordButton = document.getElementById("login-show-hide-password-button");

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

        if (username && password) {
            makeRequest(
                "/api/v1/login",
                {
                    method: "POST",
                    json: {
                        username: username,
                        password: password,
                    },
                },
                _ => {
                    bootstrap.Modal.getOrCreateInstance(loginModal).hide();
                    showSuccess("Logged in", `Successfully logged in as ${username}`, _ => location.href = "/");
                },
                error => {
                    const message = _ =>
                        username === "admin" && password === "admin"
                            ? "You've entered a password for user \"root\", did you make a typo in username?"
                            : `Could not login as ${username}`;
                    showFailure("Login error", message, error);
                },
            );
        }
    }

    function showPassword() {
        if (loginPasswordInput.getAttribute("type") === "password") {
            loginPasswordInput.setAttribute("type", "text");
            showHidePasswordButton.classList.remove("bi-eye");
            showHidePasswordButton.classList.add("bi-eye-slash");
        } else {
            loginPasswordInput.setAttribute("type", "password");
            showHidePasswordButton.classList.remove("bi-eye-slash");
            showHidePasswordButton.classList.add("bi-eye");
        }
    }

    ready(_ => {
        loginModal.addEventListener("hidden.bs.modal", _ => {
            loginForm.reset();
        });
    });
</script>