129 lines
4.7 KiB
JavaScript
129 lines
4.7 KiB
JavaScript
import { client, navigateTo } from "../index.js";
|
|
import { clear, fill_errors } from "../utils/formUtils.js";
|
|
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
|
|
|
|
export default class extends AbstractAuthenticatedView
|
|
{
|
|
constructor(params)
|
|
{
|
|
super(params, "Settings");
|
|
this.PROFILE_PICTURE_MAX_SIZE = 2 * 1024 * 1024; // 2MB
|
|
}
|
|
|
|
async postInit()
|
|
{
|
|
this.display_avatar();
|
|
document.getElementById("save-account-button").onclick = () => this.save_account();
|
|
document.getElementById("delete-account-button").onclick = () => this.delete_account();
|
|
document.getElementById("save-profile-button").onclick = () => this.save_profile();
|
|
}
|
|
|
|
async display_avatar() {
|
|
let profile = await client.profiles.getProfile(client.me.username);
|
|
if (profile !== undefined || profile !== null) {
|
|
if (document.getElementById("avatar") != undefined)
|
|
document.getElementById("avatar").remove();
|
|
let avatar = document.createElement("img");
|
|
avatar.id = "avatar";
|
|
avatar.src = profile.avatar_url + '?t=' +new Date().getTime();
|
|
document.getElementsByClassName("avatar")[0].appendChild(avatar);
|
|
}
|
|
}
|
|
|
|
async delete_account()
|
|
{
|
|
let current_password = document.getElementById("current_password-input").value;
|
|
|
|
let response_data = await client.account.delete(current_password);
|
|
|
|
console.log(await client.isAuthenticated())
|
|
if (response_data === null || response_data === "user deleted")
|
|
{
|
|
navigateTo("/login");
|
|
return;
|
|
}
|
|
clear("innerHTML", ["current_password-input"])
|
|
fill_errors({"current_password-input": response_data["password"]}, "innerHTML")
|
|
}
|
|
|
|
async save_account()
|
|
{
|
|
let username = document.getElementById("username-input").value;
|
|
let new_password = document.getElementById("new_password-input").value;
|
|
let current_password = document.getElementById("current_password-input").value;
|
|
|
|
let data = {};
|
|
|
|
data.username = username;
|
|
if (new_password.length != 0)
|
|
data.new_password = new_password;
|
|
|
|
let response_data = await client.account.update(data, current_password);
|
|
|
|
if (response_data === null)
|
|
{
|
|
navigateTo("/login");
|
|
return;
|
|
}
|
|
|
|
if (response_data === "data has been alterate")
|
|
response_data = {"save-account": "saved"}
|
|
|
|
clear("innerHTML", ["username", "new_password", "current_password", "save-account", "delete-account"])
|
|
fill_errors(response_data, "innerHTML")
|
|
}
|
|
|
|
async save_profile()
|
|
{
|
|
let avatar = document.getElementById("avatar-input");
|
|
|
|
if (avatar.files[0] !== undefined)
|
|
{
|
|
if (avatar.files[0].size > this.PROFILE_PICTURE_MAX_SIZE) {
|
|
document.getElementById("save-profile").classList.add('text-danger');
|
|
document.getElementById("save-profile").innerHTML = "Image too large :/";
|
|
return;
|
|
}
|
|
let form_data = new FormData();
|
|
form_data.append("avatar", avatar.files[0]);
|
|
await client.me.change_avatar(form_data);
|
|
this.display_avatar();
|
|
}
|
|
document.getElementById("save-profile").classList.remove('text-danger');
|
|
document.getElementById("save-profile").innerHTML = "Saved";
|
|
}
|
|
|
|
async getHtml()
|
|
{
|
|
return /* HTML */ `
|
|
<link rel="stylesheet" href="/static/css/settings.css">
|
|
<h1>ME</h1>
|
|
<div id="main">
|
|
<div class="avatar">
|
|
</div>
|
|
<div class="account">
|
|
<h3>Account</h3>
|
|
<input type="text" placeholder="username" id="username-input" text=${client.me.username}>
|
|
<span id="username"></span>
|
|
<input type=password placeholder="new_password" id="new_password-input">
|
|
<span id="new_password"></span>
|
|
<input type=password placeholder="current_password" id="current_password-input">
|
|
<span id="current_password"></span>
|
|
|
|
<input type="button" value="Save Credentials" id="save-account-button">
|
|
<span id="save-account"></span>
|
|
<input type="button" value="Delete Account" id="delete-account-button">
|
|
<span id="delete-account"></span>
|
|
</div>
|
|
<div class="profile">
|
|
<h3>Profile</h3>
|
|
<input type="file" id="avatar-input" accept="image/png, image/jpeg">
|
|
<input type="button" value="Save profile" id="save-profile-button">
|
|
<span id="save-profile"></span>
|
|
</div>
|
|
<a href="/logout" class="nav__link" data-link>Logout</a>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|