Something went wrong. Try again.
A Haskell Webserver Template
Something went wrong. Try again.
5.7 kB · 152 lines
HTML
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Auth Test</title> <!-- Bulma CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Local CSS --> <link rel="stylesheet" href="./static/styles.css"> </head> <body> <section class="section"> <div class="container"> <div class="columns is-centered"> <div class="column is-5">
<div class="content has-text-centered mb-4"> <h1 class="title is-3">Auth Test</h1> <p class="subtitle is-6 has-text-grey">Create a user or validate login credentials</p> </div>
<div id="banner" class="notification is-hidden mb-4"> <button class="delete" id="banner-close"></button> <span id="banner-message"></span> </div>
<div class="box"> <div class="field"> <label class="label">Username</label> <div class="control has-icons-left"> <input id="username" class="input" type="text" placeholder="Username"> <span class="icon is-small is-left"> <i class="fa fa-user"></i> </span> </div> </div>
<div class="field"> <label class="label"> Email <span class="has-text-grey is-size-7 ml-1">(required for user creation)</span> </label> <div class="control has-icons-left"> <input id="email" class="input" type="email" placeholder="user@example.com"> <span class="icon is-small is-left"> <i class="fa fa-envelope"></i> </span> </div> </div>
<div class="field"> <label class="label">Password</label> <div class="control has-icons-left"> <input id="password" class="input" type="password" placeholder="Password"> <span class="icon is-small is-left"> <i class="fa fa-lock"></i> </span> </div> </div>
<div class="field is-grouped mt-5"> <div class="control"> <button id="btn-create" class="button is-primary"> <span class="icon"><i class="fa fa-user-plus"></i></span> <span>Create User</span> </button> </div> <div class="control"> <button id="btn-login" class="button is-info"> <span class="icon"><i class="fa fa-right-to-bracket"></i></span> <span>Test Login</span> </button> </div> </div> </div>
</div> </div> </div> </section>
<script> const banner = document.getElementById("banner"); const bannerMsg = document.getElementById("banner-message");
document.getElementById("banner-close").addEventListener("click", () => { banner.className = "notification is-hidden mb-4"; });
function showBanner(message, success) { banner.className = "notification mb-4 " + (success ? "is-success" : "is-danger"); bannerMsg.textContent = message; }
function setLoading(btn, loading) { loading ? btn.classList.add("is-loading") : btn.classList.remove("is-loading"); }
document.getElementById("btn-create").addEventListener("click", async () => { const btn = document.getElementById("btn-create"); setLoading(btn, true); try { const resp = await fetch("/i/user/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_name: document.getElementById("username").value, user_email: document.getElementById("email").value, user_password: document.getElementById("password").value, }), }); if (resp.ok) { showBanner("User created successfully.", true); } else { showBanner("Failed to create user — they may already exist, or a field is missing.", false); } } catch (_) { showBanner("Request failed — is the server running?", false); } finally { setLoading(btn, false); } });
document.getElementById("btn-login").addEventListener("click", async () => { const btn = document.getElementById("btn-login"); setLoading(btn, true); try { const resp = await fetch("/i/verify-credentials", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_name: document.getElementById("username").value, user_password: document.getElementById("password").value, }), }); if (resp.ok) { showBanner("Login successful — credentials are valid.", true); } else { showBanner("Login failed — user not found or wrong password.", false); } } catch (_) { showBanner("Request failed — is the server running?", false); } finally { setLoading(btn, false); } }); </script> </body></html>