efim
/
some-automoderation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: login section to reuse in unauthed pages

This commit is contained in:
efim 2023-11-18 08:34:45 +00:00
parent c9e1bf65fa
commit 0e804b21e5
3 changed files with 125 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
routes/login_page.go
View File

@ -17,9 +17,12 @@ import (
"sunshine.industries/some-automoderation/sessions"
)
type MainData struct {
type LoginSectionData struct {
IsRoomExisting bool
}
type loginPageData struct {
LoginSection LoginSectionData
}
// function to register all http routes for servicing auth pages and logic
func registerLoginRoutes(
@ -93,14 +96,17 @@ func authedPageMiddleware(
func renderLoginPage(w http.ResponseWriter) {
baseFile := "templates/base.gohtml"
templFile := "templates/login.gohtml"
tmpl := template.Must(template.ParseFS(templateFs, templFile, baseFile))
pageTempl := "templates/login.gohtml"
loginSecion := "templates/login-section.gohtml"
tmpl := template.Must(template.ParseFS(templateFs, pageTempl, baseFile, loginSecion))
data := pageData{
Base: baseData{
Title: "login",
},
Content: MainData{
IsRoomExisting: false,
Content: loginPageData{
LoginSection: LoginSectionData{
IsRoomExisting: false,
},
},
}
@ -182,7 +188,7 @@ func checkRoomName(templateFs *embed.FS,
if err != nil {
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))
err = tmpl.ExecuteTemplate(w, "formButton", isFound)
}
@ -241,7 +247,7 @@ func joinRoomHandler(templateFs *embed.FS,
if (person == rooms.Person{}) {
log.Printf("/login/join room pass correct, new person joins")
// creating a new person with provided password hash
personPassHash, err := hashPassword(personPass)
personPassHash, err := hashPassword(personPass)
person = rooms.Person{
Name: personName,
PasswordHash: personPassHash,

111
routes/templates/login-section.gohtml Normal file
View File

@ -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 }}

110
routes/templates/login.gohtml
View File

@ -33,115 +33,7 @@
<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>
{{ template "loginSection" .LoginSection }}
</main>
{{ end }}
</body>