113 lines
3.8 KiB
Plaintext
113 lines
3.8 KiB
Plaintext
{{ define "loginSection" }}
|
|
<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="{{.RoomName}}"
|
|
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 read-only:font-bold"
|
|
{{ if not (eq .RoomName "") }}
|
|
readonly
|
|
{{ end }}
|
|
/>
|
|
<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>
|
|
{{ end }}
|