83c634c2b9
https://htmx.org/attributes/hx-validate/ for 'non form submittions' to trigger validation custom check, because 'required' marks fields red immediately and this js does only on attempted submittion, not sure i want it, but seems better right now. also - such a good argument for hyperscript
147 lines
4.8 KiB
Plaintext
147 lines
4.8 KiB
Plaintext
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<title>Untitled!!!</title>
|
|
<meta name="description" content="" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script
|
|
src="https://unpkg.com/htmx.org@1.9.6"
|
|
integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="/static/out.css"
|
|
type="text/css"
|
|
media="screen"
|
|
/>
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<!-- Place favicon.ico in the root directory -->
|
|
</head>
|
|
<body class="bg-main-700/25 text-xl">
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">
|
|
You are using an <strong>outdated</strong> browser. Please
|
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
|
your experience.
|
|
</p>
|
|
<![endif]-->
|
|
<main class="grid grid-rows-[auto,1fr] h-screen">
|
|
<header>
|
|
<h1>Some Automoderation: login page</h1>
|
|
</header>
|
|
<section class="h-full grid place-content-center">
|
|
<form
|
|
id="loginForm"
|
|
class="grid grid-cols-2 place-content-center border border-black rounded p-4 gap-6"
|
|
>
|
|
<div id="roomInput" class="flex flex-col gap-4">
|
|
<p>Please specify room</p>
|
|
<input
|
|
id="roomName"
|
|
type="text"
|
|
name="roomName"
|
|
value=""
|
|
placeholder="room name!!!"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
hx-post="/login/room-name-check"
|
|
hx-target="#formButton"
|
|
hx-swap="outerHTML"
|
|
class="invalid:bg-red-700"
|
|
/>
|
|
<input
|
|
id="roomPassword"
|
|
type="password"
|
|
name="roomPassword"
|
|
value=""
|
|
placeholder="room password"
|
|
/>
|
|
</div>
|
|
<div id="personInput" class="flex flex-col gap-4">
|
|
<p>And input your personal</p>
|
|
<input
|
|
id="personalName"
|
|
type="text"
|
|
name="personalName"
|
|
value=""
|
|
placeholder="personal name"
|
|
class="invalid:bg-red-700"
|
|
/>
|
|
<input
|
|
id="personalPassword"
|
|
type="password"
|
|
name="personalPassword"
|
|
value=""
|
|
placeholder="personal password"
|
|
/>
|
|
</div>
|
|
{{ block "formButton" .IsRoomExisting }} {{ if not . }}
|
|
<button
|
|
id="formButton"
|
|
class="col-span-full"
|
|
hx-post="/login/create"
|
|
hx-validate="true"
|
|
>
|
|
Create Room
|
|
</button>
|
|
{{ else }}
|
|
<button
|
|
id="formButton"
|
|
class="col-span-full"
|
|
hx-post="/login/join"
|
|
hx-validate="true"
|
|
>
|
|
Join Room
|
|
</button>
|
|
{{ end }} {{ end }}
|
|
</form>
|
|
<script>
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
document.getElementById("loginForm").reset();
|
|
});
|
|
|
|
const requiredInputFunc = function (event) {
|
|
// If the input is empty...
|
|
if (this.value.trim() === "") {
|
|
// ...set a custom validity message
|
|
console.log("empty name");
|
|
this.setCustomValidity("Please fill out this field.");
|
|
this.checkValidity();
|
|
} else {
|
|
// If not empty, clear any custom validity message
|
|
console.log("other");
|
|
this.setCustomValidity("");
|
|
}
|
|
};
|
|
|
|
// Find the input element
|
|
const personalNameInput = document.getElementById("personalName");
|
|
const roomNameInput = document.getElementById("roomName");
|
|
|
|
// Listen for the 'htmx:validation:validate' event on the input element
|
|
personalNameInput.addEventListener(
|
|
"htmx:validation:validate",
|
|
requiredInputFunc,
|
|
);
|
|
roomNameInput.addEventListener(
|
|
"htmx:validation:validate",
|
|
requiredInputFunc,
|
|
);
|
|
|
|
// You can also listen for the 'input' event to clear the validation message as the user types
|
|
personalNameInput.addEventListener("input", function (event) {
|
|
// Always clear the custom validity message when the user types
|
|
this.setCustomValidity("");
|
|
});
|
|
roomNameInput.addEventListener("input", function (event) {
|
|
// Always clear the custom validity message when the user types
|
|
this.setCustomValidity("");
|
|
});
|
|
</script>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|