ux: Me becomes Settings; backend: fix special usernames (me, block...)

2024-02-08 10:09:36 +01:00
parent 1dea678a04
commit 55d3ea40f6
11 changed files with 17 additions and 18 deletions
--- a/frontend/static/js/views/SettingsView.js
+++ b/frontend/static/js/views/SettingsView.js
@ -0,0 +1,127 @@
+import { client, navigateTo } from "../index.js";
+import { clear, fill_errors } from "../utils/formUtils.js";
+import AbstractAuthentificateView from "./abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentificateView
+{    
+    constructor(params)
+    {
+        super(params, "Settings");
+	}
+
+    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;
+			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.isAuthentificate())
+        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 > 2 * 1024 * 1024) {
+				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("file", 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>
+        `;
+    }
+}