Passport/pkg/views/users/personalize.gohtml

167 lines
5.2 KiB
Plaintext
Raw Normal View History

2024-04-21 07:07:53 +00:00
<div class="left-part">
<img class="logo" alt="Logo" src="/favicon.png" width="64" height="64"/>
<h1 class="title">Personalize</h1>
<p class="caption">Personalize your account, and make us provide better service for you.</p>
</div>
<div class="right-part">
<div class="responsive-title-gap"></div>
<div class="personalize-actions">
<md-filled-tonal-button class="personalize-action" data-target="avatar">
Edit Avatar
<span slot="icon" class="material-symbols-outlined">account_circle</span>
</md-filled-tonal-button>
2024-04-21 07:07:53 +00:00
<input
hidden
2024-04-21 07:07:53 +00:00
id="avatar-input"
class="block-field"
name="avatar"
type="file"
accept="image/*"
placeholder="Avatar"
>
<md-filled-tonal-button class="personalize-action" data-target="banner">
Edit Banner
<span slot="icon" class="material-symbols-outlined">background_replace</span>
</md-filled-tonal-button>
2024-04-21 07:07:53 +00:00
<input
hidden
2024-04-21 07:07:53 +00:00
id="banner-input"
class="block-field"
name="banner"
type="file"
accept="image/*"
placeholder="Banner"
>
</div>
<form class="action-form" action="/users/me/personalize" method="POST">
<div class="columns-two">
<md-outlined-text-field
class="block-field"
name="name"
type="text"
autocomplete="username"
label="Username"
disabled
value="{{.userinfo.Name}}"
>
</md-outlined-text-field>
<md-outlined-text-field
class="block-field"
name="nick"
type="text"
autocomplete="nickname"
label="Nickname"
value="{{.userinfo.Nick}}"
>
</md-outlined-text-field>
</div>
<div class="columns-two">
<md-outlined-text-field
class="block-field"
name="first_name"
type="text"
autocomplete="given_name"
label="First Name"
value="{{if gt (len .userinfo.Profile.FirstName) 0}}{{.userinfo.Profile.FirstName}}{{end}}"
>
</md-outlined-text-field>
<md-outlined-text-field
class="block-field"
name="last_name"
type="text"
autocomplete="family_name"
label="Last Name"
value="{{if gt (len .userinfo.Profile.LastName) 0}}{{.userinfo.Profile.LastName}}{{end}}"
>
</md-outlined-text-field>
</div>
<md-outlined-text-field
class="block-field"
name="birthday"
type="date"
label="Birthday"
value="{{if ne .birthday nil}}{{.birthday}}{{end}}"
>
</md-outlined-text-field>
<md-outlined-text-field
class="block-field"
name="description"
type="textarea"
autocomplete="off"
label="Description"
value="{{if gt (len .userinfo.Description) 0}}{{.userinfo.Description}}{{end}}"
style="resize: vertical"
>
</md-outlined-text-field>
<div class="action-form-buttons">
<md-text-button type="button" href="/users/me">{{.i18n.back}}</md-text-button>
<md-filled-button type="submit">{{.i18n.apply}}</md-filled-button>
</div>
</form>
</div>
<style>
.input-label {
font-size: 14px;
text-align: left;
}
.personalize-actions {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
margin-left: -0.2rem;
margin-right: -0.2rem;
}
.personalize-actions .personalize-action {
width: fit-content;
}
.personalize-action .material-symbols-outlined {
font-size: 20px;
margin-bottom: 2px;
}
2024-04-21 07:07:53 +00:00
</style>
<script>
document.querySelectorAll(".personalize-action").forEach((element) => {
element.addEventListener("click", (_) => {
document.getElementById(`${element.getAttribute("data-target")}-input`).click();
})
})
2024-04-21 07:07:53 +00:00
document.getElementById("avatar-input").addEventListener("input", (evt) => {
if (!evt.target.files) return
const data = new FormData();
data.set("avatar", evt.target.files[0])
fetch("/api/users/me/avatar", {
method: "PUT",
body: data,
}).then(() => {
location.href = "/users/me"
})
})
document.getElementById("banner-input").addEventListener("input", (evt) => {
if (!evt.target.files) return
const data = new FormData();
data.set("banner", evt.target.files[0])
fetch("/api/users/me/banner", {
method: "PUT",
body: data,
}).then(() => {
location.href = "/users/me"
})
})
</script>