refactor: login section to reuse in unauthed pages
This commit is contained in:
efim
parent
c9e1bf65fa
commit
0e804b21e5
|
|
@ -17,9 +17,12 @@ import (
|
||||||
"sunshine.industries/some-automoderation/sessions"
|
"sunshine.industries/some-automoderation/sessions"
|
||||||
)
|
)
|
||||||
|
|
||||||
type MainData struct {
|
type LoginSectionData struct {
|
||||||
IsRoomExisting bool
|
IsRoomExisting bool
|
||||||
}
|
}
|
||||||
|
type loginPageData struct {
|
||||||
|
LoginSection LoginSectionData
|
||||||
|
}
|
||||||
|
|
||||||
// function to register all http routes for servicing auth pages and logic
|
// function to register all http routes for servicing auth pages and logic
|
||||||
func registerLoginRoutes(
|
func registerLoginRoutes(
|
||||||
|
|
@ -93,14 +96,17 @@ func authedPageMiddleware(
|
||||||
|
|
||||||
func renderLoginPage(w http.ResponseWriter) {
|
func renderLoginPage(w http.ResponseWriter) {
|
||||||
baseFile := "templates/base.gohtml"
|
baseFile := "templates/base.gohtml"
|
||||||
templFile := "templates/login.gohtml"
|
pageTempl := "templates/login.gohtml"
|
||||||
tmpl := template.Must(template.ParseFS(templateFs, templFile, baseFile))
|
loginSecion := "templates/login-section.gohtml"
|
||||||
|
tmpl := template.Must(template.ParseFS(templateFs, pageTempl, baseFile, loginSecion))
|
||||||
data := pageData{
|
data := pageData{
|
||||||
Base: baseData{
|
Base: baseData{
|
||||||
Title: "login",
|
Title: "login",
|
||||||
},
|
},
|
||||||
Content: MainData{
|
Content: loginPageData{
|
||||||
IsRoomExisting: false,
|
LoginSection: LoginSectionData{
|
||||||
|
IsRoomExisting: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -182,7 +188,7 @@ func checkRoomName(templateFs *embed.FS,
|
||||||
if err != nil {
|
if err != nil {
|
||||||
log.Printf("/login/room-name-check error finding room %s\n", err)
|
log.Printf("/login/room-name-check error finding room %s\n", err)
|
||||||
}
|
}
|
||||||
var templFile = "templates/login.gohtml"
|
templFile := "templates/login-section.gohtml"
|
||||||
tmpl := template.Must(template.ParseFS(templateFs, templFile))
|
tmpl := template.Must(template.ParseFS(templateFs, templFile))
|
||||||
err = tmpl.ExecuteTemplate(w, "formButton", isFound)
|
err = tmpl.ExecuteTemplate(w, "formButton", isFound)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
{{ define "loginSection" }}
|
||||||
|
<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>
|
||||||
|
{{ end }}
|
||||||
|
|
@ -33,115 +33,7 @@
|
||||||
<header>
|
<header>
|
||||||
<h1>Some Automoderation: login page</h1>
|
<h1>Some Automoderation: login page</h1>
|
||||||
</header>
|
</header>
|
||||||
<section class="h-full grid place-content-center">
|
{{ template "loginSection" .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=""
|
|
||||||
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>
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue