added a profile page where a user can change his account properties (#38

)
mobergmann · Jan 21, 2024 · d247499 · d247499
1 parent a381405
commit d247499
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 4 deletions.
diff --git a/public/profile.html b/public/profile.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Settings</title>
+
+    <!-- Font Awesome -->
+    <link href="/assets/fontawesome6/css/fontawesome.css" rel="stylesheet">
+    <link href="/assets/fontawesome6/css/brands.css" rel="stylesheet">
+    <link href="/assets/fontawesome6/css/solid.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="/style/base.css">
+</head>
+
+<body class="center-vertically center-horizontally">
+<main class="main">
+    <h1>Settings</h1>
+
+    <form action="" id="form-account" class="form">
+        <h2>Profile</h2>
+
+        <div class="container">
+            <label for="username">Username</label>
+            <div class="input-group">
+                <i class="fa-solid fa-user"></i>
+                <input type="text" placeholder="Username" id="username" class="input">
+            </div>
+        </div>
+
+        <div class="form-buttons-container flex-row">
+            <button type="submit" id="submit-account" class="button button-primary w100">
+                <i class="fa-solid fa-pen-to-square"></i>
+                Update
+            </button>
+            <button type="reset" class="button button-danger w100">
+                <i class="fa-solid fa-broom"></i>
+                Reset
+            </button>
+        </div>
+    </form>
+
+    <form action="" id="form-credential" class="form">
+        <h2>Credentials</h2>
+
+        <div class="container">
+            <label for="current-password">Current Password</label>
+            <div class="input-group">
+                <i class="fa-solid fa-lock"></i>
+                <input type="password" id="current-password" placeholder="Password" class="input">
+            </div>
+        </div>
+
+        <div class="container">
+            <label for="new-password1">Password</label>
+            <div class="input-group">
+                <i class="fa-solid fa-lock"></i>
+                <input type="password" id="new-password1" placeholder="Password" class="input">
+            </div>
+        </div>
+
+        <div class="container">
+            <label for="new-password2">Password</label>
+            <div class="input-group">
+                <i class="fa-solid fa-lock"></i>
+                <input type="password" id="new-password2" placeholder="Password" class="input">
+            </div>
+        </div>
+
+        <div class="form-buttons-container flex-row">
+            <button type="submit" id="submit-credential" class="button button-primary w100">
+                <i class="fa-solid fa-pen-to-square"></i>
+                Update
+            </button>
+            <button type="reset" class="button button-danger w100">
+                <i class="fa-solid fa-broom"></i>
+                Reset
+            </button>
+        </div>
+    </form>
+
+    <script src="profile.js" type="module"></script>
+</main>
+</body>
+</html>
diff --git a/public/profile.js b/public/profile.js
@@ -0,0 +1,38 @@
+import {EditAccount, EditPassword, edit, edit_password} from "/scripts/api/account.js";
+
+document.querySelector("#form-account").addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const username = document.querySelector("#username").value;
+
+    const account_update = new EditAccount(username);
+    const res = await edit(account_update);
+    if (res.ok) {
+        window.location = "/home.html";
+    } else {
+        console.error(res.value);
+        alert(`Action not successful: ${res.value}`);
+    }
+});
+
+document.querySelector("#form-credential").addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const current_password = document.querySelector("#current-password").value;
+    const new_password1 = document.querySelector("#new-password1").value;
+    const new_password2 = document.querySelector("#new-password2").value;
+
+    if (new_password1 !== new_password2) {
+        alert("Passwords didn't match. Enter them again and retry.");
+        return;
+    }
+
+    const password_update = new EditPassword(current_password, new_password1);
+    const res = await edit_password(password_update);
+    if (res.ok) {
+        window.location = "/home.html";
+    } else {
+        console.error(res.value);
+        alert(`Action not successful: ${res.value}`);
+    }
+});
diff --git a/public/scripts/api/account.js b/public/scripts/api/account.js
@@ -102,15 +102,15 @@ export async function edit(account) {
 /// :param current_password the accounts current password
 /// :param new_password the new password for the account
 /// :return `Account` updated account
-export async function edit_password(current_password, new_password) {
-    const request = new Request(`${BASE_ACCOUNT_URL}`, {
+export async function edit_password(edit_password) {
+    const request = new Request(`${BASE_ACCOUNT_URL}/password`, {
         method: "PUT",
         headers: new Headers({
             "Content-Type": "application/json",
         }),
         body: JSON.stringify({
-            current_password: current_password,
-            new_password: new_password
+            current_password: edit_password.current_password,
+            new_password: edit_password.new_password
         }),
         credentials: 'include',
     });