Added ability to change username
This commit is contained in:
@@ -1,9 +1,15 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"database/sql"
|
||||
"net/http"
|
||||
|
||||
"projectreshoot/contexts"
|
||||
"projectreshoot/db"
|
||||
"projectreshoot/view/component/account"
|
||||
"projectreshoot/view/page"
|
||||
|
||||
"github.com/rs/zerolog"
|
||||
)
|
||||
|
||||
func HandleAccountPage() http.Handler {
|
||||
@@ -19,7 +25,38 @@ func HandleAccountSubpage() http.Handler {
|
||||
func(w http.ResponseWriter, r *http.Request) {
|
||||
r.ParseForm()
|
||||
subpage := r.FormValue("subpage")
|
||||
account.AccountContent(subpage).Render(r.Context(), w)
|
||||
account.AccountContainer(subpage).Render(r.Context(), w)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
func HandleChangeUsername(
|
||||
logger *zerolog.Logger,
|
||||
conn *sql.DB,
|
||||
) http.Handler {
|
||||
return http.HandlerFunc(
|
||||
func(w http.ResponseWriter, r *http.Request) {
|
||||
r.ParseForm()
|
||||
newUsername := r.FormValue("username")
|
||||
|
||||
unique, err := db.CheckUsernameUnique(conn, newUsername)
|
||||
if err != nil {
|
||||
logger.Error().Err(err).Msg("Error updating username")
|
||||
w.WriteHeader(http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
if !unique {
|
||||
account.ChangeUsername("Usename is taken", newUsername).Render(r.Context(), w)
|
||||
return
|
||||
}
|
||||
user := contexts.GetUser(r.Context())
|
||||
err = user.ChangeUsername(conn, newUsername)
|
||||
if err != nil {
|
||||
logger.Error().Err(err).Msg("Error updating username")
|
||||
w.WriteHeader(http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
w.Header().Set("HX-Redirect", "/account")
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@@ -75,4 +75,8 @@ func addRoutes(
|
||||
middleware.RequiresLogin(
|
||||
handlers.HandleAccountSubpage(),
|
||||
))
|
||||
mux.Handle("POST /change-username",
|
||||
middleware.RequiresLogin(
|
||||
handlers.HandleChangeUsername(logger, conn),
|
||||
))
|
||||
}
|
||||
|
||||
94
view/component/account/changeusername.templ
Normal file
94
view/component/account/changeusername.templ
Normal file
@@ -0,0 +1,94 @@
|
||||
package account
|
||||
|
||||
import "projectreshoot/contexts"
|
||||
|
||||
templ ChangeUsername(err string, username string) {
|
||||
{{
|
||||
user := contexts.GetUser(ctx)
|
||||
if username == "" {
|
||||
username = user.Username
|
||||
}
|
||||
}}
|
||||
<form
|
||||
hx-post="/change-username"
|
||||
hx-swap="outerHTML"
|
||||
class="w-[90%] mx-auto mt-5"
|
||||
x-data={ "{ err: '" + err + "'}" }
|
||||
>
|
||||
<div
|
||||
class="flex"
|
||||
x-data={ "{username: '" + username + "'}" }
|
||||
>
|
||||
<div
|
||||
class="flex items-center relative"
|
||||
>
|
||||
<label
|
||||
for="username"
|
||||
class="text-lg"
|
||||
>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
class="py-1 px-4 rounded-lg text-md
|
||||
bg-surface0 border border-surface2
|
||||
disabled:opacity-50 ml-5 disabled:pointer-events-none"
|
||||
required
|
||||
aria-describedby="username-error"
|
||||
x-model="username"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-y-0 end-0
|
||||
pointer-events-none pe-3 pt-2"
|
||||
x-show="err"
|
||||
x-cloak
|
||||
>
|
||||
<svg
|
||||
class="size-5 text-red"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8
|
||||
4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
|
||||
0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
|
||||
1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="rounded-lg bg-blue py-1 px-2 text-mantle ml-2
|
||||
hover:cursor-pointer hover:bg-blue/75 transition"
|
||||
x-cloak
|
||||
x-show={ "username !=='" + user.Username + "'" }
|
||||
x-transition.opacity.duration.500ms
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
<button
|
||||
class="rounded-lg bg-overlay0 py-1 px-2 text-mantle
|
||||
hover:cursor-pointer hover:bg-surface2 transition"
|
||||
type="button"
|
||||
href="#"
|
||||
x-cloak
|
||||
x-show={ "username !=='" + user.Username + "'" }
|
||||
x-transition.opacity.duration.500ms
|
||||
@click={ "username='" + user.Username + "';err=''" }
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="block text-red ml-24 mt-1 transition"
|
||||
x-cloak
|
||||
x-show="err"
|
||||
x-text="err"
|
||||
></p>
|
||||
</form>
|
||||
}
|
||||
24
view/component/account/container.templ
Normal file
24
view/component/account/container.templ
Normal file
@@ -0,0 +1,24 @@
|
||||
package account
|
||||
|
||||
templ AccountContainer(subpage string) {
|
||||
<div
|
||||
id="account-container"
|
||||
class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl"
|
||||
>
|
||||
@SelectMenu(subpage)
|
||||
<div class="mt-5 w-full">
|
||||
<div
|
||||
class="pl-5 text-2xl text-subtext1 border-b
|
||||
border-overlay0 w-[90%] mx-auto"
|
||||
>
|
||||
{ subpage }
|
||||
</div>
|
||||
switch subpage {
|
||||
case "General":
|
||||
@AccountGeneral()
|
||||
case "Security":
|
||||
@AccountGeneral()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
package account
|
||||
|
||||
templ AccountContent(subpage string) {
|
||||
<form hx-post="/account-select-page">
|
||||
<div class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl">
|
||||
@SelectMenu(subpage)
|
||||
<div class="mt-5">
|
||||
<div class="pl-10 text-2xl text-subtext1 underline">
|
||||
{ subpage }
|
||||
</div>
|
||||
// page content
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
7
view/component/account/general.templ
Normal file
7
view/component/account/general.templ
Normal file
@@ -0,0 +1,7 @@
|
||||
package account
|
||||
|
||||
templ AccountGeneral() {
|
||||
<div>
|
||||
@ChangeUsername("", "")
|
||||
</div>
|
||||
}
|
||||
@@ -29,27 +29,35 @@ templ SelectMenu(activePage string) {
|
||||
menuItems := getMenuItems()
|
||||
page := fmt.Sprintf("{page:'%s'}", activePage)
|
||||
}}
|
||||
<div class="flex w-fit flex-col border-e bg-surface0 rounded-l-xl">
|
||||
<div class="px-4 py-6">
|
||||
<ul class="mt-6 space-y-1" x-data={ page }>
|
||||
for _, item := range menuItems {
|
||||
{{
|
||||
<form
|
||||
class="flex bg-surface0 w-fit border-e border-overlay0
|
||||
rounded-l-xl"
|
||||
hx-post="/account-select-page"
|
||||
hx-target="#account-container"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
<div>
|
||||
<div class="px-4 py-6">
|
||||
<ul class="mt-6 space-y-1" x-data={ page }>
|
||||
for _, item := range menuItems {
|
||||
{{
|
||||
activebind := fmt.Sprintf("page === '%s' && 'bg-mantle'", item.name)
|
||||
}}
|
||||
<li>
|
||||
<button
|
||||
type="submit"
|
||||
name="subpage"
|
||||
value={ item.name }
|
||||
class="block rounded-lg px-4 py-2 text-md
|
||||
}}
|
||||
<li>
|
||||
<button
|
||||
type="submit"
|
||||
name="subpage"
|
||||
value={ item.name }
|
||||
class="block rounded-lg px-4 py-2 text-md
|
||||
hover:bg-mantle hover:cursor-pointer"
|
||||
:class={ activebind }
|
||||
>
|
||||
{ item.name }
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
:class={ activebind }
|
||||
>
|
||||
{ item.name }
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
@@ -5,6 +5,6 @@ import "projectreshoot/view/component/account"
|
||||
|
||||
templ Account(subpage string) {
|
||||
@layout.Global() {
|
||||
@account.AccountContent(subpage)
|
||||
@account.AccountContainer(subpage)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user