84 lines
2.1 KiB
HTML
84 lines
2.1 KiB
HTML
<script>
|
|
new MutationObserver((mutations, observer) => {
|
|
mutations.forEach((mutation) => {
|
|
const user_json = document.body.dataset.user;
|
|
const user = user_json
|
|
? JSON.parse(user_json)
|
|
: {
|
|
username: "",
|
|
meta: {
|
|
avatar: "/images/default_avatar.gif",
|
|
},
|
|
};
|
|
|
|
const avatars = document.querySelectorAll("[data-bind-user_meta_avatar]");
|
|
for (const avatar of avatars) {
|
|
const bound_to = avatar.dataset["bind-user_meta_avatar"] ?? "innerHTML";
|
|
avatar[bound_to] = user.meta?.avatar ?? "/images/default_avatar.gif";
|
|
}
|
|
|
|
const usernames = document.querySelectorAll("[data-bind-user_username]");
|
|
for (const username of usernames) {
|
|
const bound_to = username.dataset["bind-user_username"] ?? "innerHTML";
|
|
username[bound_to] = user.username;
|
|
}
|
|
});
|
|
}).observe(document.body, {
|
|
attributes: true,
|
|
attributeFilter: ["data-user"],
|
|
});
|
|
</script>
|
|
<style>
|
|
.profile-container {
|
|
margin: 1rem auto;
|
|
max-width: 1024px;
|
|
}
|
|
</style>
|
|
<div id="user" class="tab">
|
|
<input
|
|
type="radio"
|
|
name="top-level-tabs"
|
|
id="user-tab-input"
|
|
class="tab-switch"
|
|
data-hash="/profile"
|
|
/>
|
|
<label for="user-tab-input" class="tab-label"
|
|
><div class="icon user"></div>
|
|
<div class="label">Profile</div></label
|
|
>
|
|
<div class="tab-content">
|
|
<div class="profile-container">
|
|
<div class="avatar-container">
|
|
<img
|
|
id="user-avatar"
|
|
src="/images/default_avatar.gif"
|
|
alt="User Avatar"
|
|
data-bind-user_meta_avatar="src"
|
|
/>
|
|
</div>
|
|
|
|
<div class="username-container">
|
|
<span class="username" data-bind-user_username></span>
|
|
</div>
|
|
|
|
<form data-smart="true" data-method="DELETE" action="/api/auth">
|
|
<script>
|
|
{
|
|
const form = document.currentScript.closest("form");
|
|
form.on_response = (response) => {
|
|
if (!response.deleted) {
|
|
alert("error logging out? please reload.");
|
|
return;
|
|
}
|
|
|
|
delete document.body.dataset.user;
|
|
delete document.body.dataset.perms;
|
|
window.location = "/";
|
|
};
|
|
}
|
|
</script>
|
|
<button class="primary">Log Out</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|