account refactor

front/js/svelte/account/Login.svelte

@@ -1,7 +1,6 @@
 <script>
     import {getContext} from "svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
-    import SuccessAlert from "../common/SuccessAlert.svelte";
 
     const channel = getContext("channel");
     let email = "";

front/js/svelte/account/Profile.svelte

@@ -3,23 +3,25 @@
     import SpinnerButton from "../common/SpinnerButton.svelte";
     import Avatar from "./Avatar.svelte";
     import {getContext} from "svelte";
+    import SuccessAlert from "../common/SuccessAlert.svelte";
 
     const user = getContext("user");
     const channel = getContext("channel");
     let name = user.name;
     let email = user.email;
     let errorMessage = "";
+    let successAlert;
 
     function saveName(e) {
         e.preventDefault();
         errorMessage = "";
 
         axios
-            .post("/account/update-name", {
+            .post(channel.lucentUrl + "/account/update-name", {
                 name: name,
             })
             .then((response) => {
-                // window.reload();
+                successAlert.show();
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
@@ -32,11 +34,11 @@
         errorMessage = "";
 
         axios
-            .post("/account/update-email", {
+            .post(channel.lucentUrl + "/account/update-email", {
                 email: email,
             })
             .then((response) => {
-                // window.reload();
+                successAlert.show();
             })
             .catch((error) => {
                 errorMessage = error.response?.data.error;
@@ -48,22 +50,38 @@
 
 <div class="wrapper-tiny">
     <ErrorAlert message={errorMessage}/>
+    <SuccessAlert bind:this={successAlert} />
     <h3 class="header-small mb-5">
         <Avatar name={user.name}/>
     </h3>
     <form on:submit={saveName}>
         <div class="input-group mb-3">
             <input
-                type="text"
-                bind:value={name}
-                class="form-control"
-                placeholder="Name"
+                    type="text"
+                    bind:value={name}
+                    class="form-control"
+                    placeholder="Name"
+                    required
+            />
+            <SpinnerButton label="Update"/>
+        </div>
+    </form>
+
+    <form on:submit={saveEmail}>
+        <div class="input-group mb-3">
+            <input
+                    type="email"
+                    bind:value={email}
+                    class="form-control"
+                    placeholder="Email"
+                    required
             />
             <SpinnerButton label="Update"/>
         </div>
     </form>
 
     <div class="list-group">
-        <a class="list-group-item list-group-item-action" href="{ channel.lucentUrl }/logout">Logout from this device</a>
+        <a class="list-group-item list-group-item-action" href="{ channel.lucentUrl }/logout">Logout from this
+            device</a>
     </div>
 </div>

front/js/svelte/account/avatar.js

@@ -1,44 +0,0 @@
-export function avatar(name, side = 48) {
-    const colors = [
-        "#00AA55",
-        "#009FD4",
-        "#B381B3",
-        "#939393",
-        "#E3BC00",
-        "#D47500",
-        "#DC2A2A",
-        "#3ede91",
-        "#377dd4",
-        "#0256b0",
-        "#053d82",
-        "#3d026e",
-        "#b378e3",
-        "#c4065c",
-        "#543208",
-        "#d97811",
-        "#0c6b40",
-    ];
-    let initials = "";
-    if (name.split(" ").length > 1) {
-        initials =
-            name.split(" ")[0].charAt(0).toUpperCase() +
-            name.split(" ")[1].charAt(0).toUpperCase();
-    } else {
-        initials =
-            name.split(" ")[0].charAt(0).toUpperCase() +
-            name.split(" ")[0].charAt(1).toUpperCase();
-    }
-
-    let charIndex = name.charCodeAt(1) + name.length;
-    let colorIndex = charIndex % 19;
-
-    return `
-    <div
-        class="avatar"
-        style="background-color:${
-            colors[colorIndex]
-        };height: ${side}px;width: ${side}px; font-size:${side / 2}px">
-        <div class="avatar__letters">${initials}</div>
-    </div>
-    `;
-}