add call sound settings

ui/actions.mjs

@@ -117,4 +117,29 @@ export function toggleInstanceEnabled(instances, instance) {
 export function playSound(name) {
     const audio = new Audio(`/sounds/${name}`);
     audio.play();
+}
+
+export function playLoop(name) {
+    if (!window.playingLoops) {
+        window.playingLoops = [];
+    }
+
+    const audio = new Audio(`/loops/${name}`);
+    audio.loop = true;
+    audio.play();
+    window.playingLoops.push(audio);
+
+    return () => {
+        audio.pause();
+        audio.remove();
+    };
+}
+
+export function stopPlayingLoop() {
+    if (window.playingLoops) {
+        window.playingLoops.forEach(audio => {
+            audio.pause();
+            audio.remove();
+        });
+    }
 }

ui/api/Api.mjs

@@ -16,6 +16,9 @@ export class Api extends ApiBase {
     static async getUsers() {
         return await this.get("/api/auth/getUsers", {});
     }
+    static async changePassword(oldPassword = null, newPassword = null) {
+        return await this.patch("/api/auth/changePassword", {oldPassword, newPassword});
+    }
     static async updateUser(username = null, displayname = null, description = null) {
         return await this.patch("/api/auth/updateUser", {username, displayname, description});
     }

ui/api/LocalSetting.mjs

@@ -56,3 +56,11 @@ export function currentSound() {
 export function setCurrentSound(sound) {
     LocalSetting.set("currentSound", sound);
 }
+
+export function currentCallSound() {
+    return LocalSetting.getString("currentCallSound");
+}
+
+export function setCurrentCallSound(sound) {
+    LocalSetting.set("currentCallSound", sound);
+}

ui/api/Popups.mjs

@@ -108,4 +108,18 @@ export class Popups {
             removePopups();
         }, "Delete user", "Yes", "No", "delete", "close"));
     }
+
+    static updatePassword() {
+        popup(PopupComponents.changePassword((oldPassword, newPassword, errorState) => {
+            Api.changePassword(oldPassword, newPassword).then((res) => {
+                if (res.status !== 200) {
+                    errorState.value = res.data.error;
+                    toast("Failed to update password", "error");
+                    return;
+                }
+                toast("Password updated", "success");
+                removePopups();
+            });
+        }));
+    }
 }

ui/classes.css

@@ -334,6 +334,12 @@
     left: .5em;
 }
 
+.small-avatar {
+    --size: 1em;
+    width: var(--size);
+    height: var(--size);
+}
+
 .max800 {
     max-width: 800px;
 }

ui/components/common.mjs

@@ -23,12 +23,12 @@ export class CommonTemplates {
             .build();
     }
 
-    static buttonWithIcon(icon, text, onclick, classes = []) {
+    static buttonWithIcon(icon, text, onclick, classes = [], iconClasses = []) {
         return create("button")
             .classes("flex", ...classes)
             .onclick(onclick)
             .children(
-                CommonTemplates.icon(icon),
+                CommonTemplates.icon(icon, iconClasses),
                 create("span")
                     .text(text)
                     .build(),
@@ -63,7 +63,9 @@ export class CommonTemplates {
                     .classes("select")
                     .children(
                         create("select")
-                            .onchange(onchange)
+                            .onchange((e) => {
+                                onchange(e.target.value);
+                            })
                             .children(
                                 ...options.map(option => {
                                     const selected = computedSignal(value, value => option.value === value);
@@ -72,6 +74,9 @@ export class CommonTemplates {
                                         .text(option.text)
                                         .value(option.value)
                                         .selected(selected)
+                                        .onclick(() => {
+                                            onchange(option.value);
+                                        })
                                         .build();
                                 })
                             ).build()
@@ -118,7 +123,7 @@ export class CommonTemplates {
                 create("div")
                     .classes("flex", "align-center")
                     .children(
-                        CommonTemplates.buttonWithIcon(avatar, "Profile", () => window.router.navigate('profile'), [activeIfActive("profile")]),
+                        CommonTemplates.buttonWithIcon(avatar, "Profile", () => window.router.navigate('profile'), [activeIfActive("profile")], ["small-avatar"]),
                         CommonTemplates.pageLink("Logout", "logout")
                     ).build(),
             ).build();

ui/components/pages/profile.mjs

@@ -5,6 +5,7 @@ import {Store} from "../../api/Store.mjs";
 import {Api} from "../../api/Api.mjs";
 import {toast} from "../../actions.mjs";
 import {Live} from "../../live/Live.mjs";
+import {Popups} from "../../api/Popups.mjs";
 
 export class ProfileComponent {
     static render() {
@@ -27,6 +28,7 @@ export class ProfileComponent {
                                 .children(
                                     ProfileComponent.avatarSection(user),
                                     ProfileComponent.basicInfoSection(user),
+                                    ProfileComponent.accountSection(user),
                                 ).build()
                         ), "100%", "500px", "100%")
                     ).build()
@@ -125,4 +127,14 @@ export class ProfileComponent {
                 })
             ).build();
     }
+
+    static accountSection(user) {
+        return create("div")
+            .classes("flex-v")
+            .children(
+                CommonTemplates.buttonWithIcon("password", "Change password", () => {
+                    Popups.updatePassword(user);
+                })
+            ).build();
+    }
 }

ui/components/pages/settings.mjs

@@ -4,9 +4,10 @@ import {CommonTemplates} from "../common.mjs";
 import {Store} from "../../api/Store.mjs";
 import {Api} from "../../api/Api.mjs";
 import {
+    playLoop,
     playSound,
     popup,
-    removePopups,
+    removePopups, stopPlayingLoop,
     testImage,
     toast,
     toggleAllowlist,
@@ -15,8 +16,9 @@ import {
 import {PopupComponents} from "../popup.mjs";
 import {Popups} from "../../api/Popups.mjs";
 import {
+    currentCallSound,
     currentSound,
-    localNotificationsEnabled, setCurrentSound,
+    localNotificationsEnabled, setCurrentCallSound, setCurrentSound,
     setLocalNotificationsEnabled, setSoundEnabled, setSystemNotificationsEnabled, soundEnabled,
     systemNotificationsEnabled
 } from "../../api/LocalSetting.mjs";
@@ -403,6 +405,11 @@ export class SettingsComponent {
         sound.subscribe(v => {
             setCurrentSound(v);
         });
+        const callSound = signal(currentCallSound());
+        callSound.subscribe(v => {
+            setCurrentCallSound(v);
+        });
+        const playingLoop = signal(false);
 
         return create("div")
             .classes("flex-v", "card")
@@ -426,10 +433,25 @@ export class SettingsComponent {
                             { text: "In", value: "in.wav" },
                             { text: "Log", value: "log.wav" },
                             { text: "Out", value: "out.wav" },
-                        ], sound, (e) => {
-                            sound.value = e.target.value;
+                        ], sound, (value) => {
+                            sound.value = value;
                             playSound(sound.value);
-                        })
+                        }),
+                        create("div")
+                            .classes("flex")
+                            .children(
+                                CommonTemplates.select("Call sound", [
+                                    { text: "Blossom", value: "blossom.mp3" },
+                                ], callSound, (value) => {
+                                    callSound.value = value;
+                                    playingLoop.value = true;
+                                    playLoop(callSound.value);
+                                }),
+                                ifjs(playingLoop, CommonTemplates.buttonWithIcon("stop", "Stop playing", () => {
+                                    stopPlayingLoop();
+                                    playingLoop.value = false;
+                                }))
+                            ).build(),
                     ).build(),
             ).build();
     }

ui/components/popup.mjs

@@ -1,4 +1,4 @@
-import {create, ifjs, signalMap} from "https://fjs.targoninc.com/f.js";
+import {create, ifjs, signal, signalMap} from "https://fjs.targoninc.com/f.js";
 import {CommonTemplates} from "./common.mjs";
 
 export class PopupComponents {
@@ -77,4 +77,42 @@ export class PopupComponents {
                     ).build()
             ).build();
     }
+
+    static changePassword(onconfirm = (oldPass, newPass, errorState) => {}, oncancel = () => {}) {
+        const oldPassword = signal("");
+        const newPassword = signal("");
+        const confirmPassword = signal("");
+        const errorState = signal(null);
+
+        return create("div")
+            .classes("card")
+            .children(
+                create("div")
+                    .classes("flex-v")
+                    .children(
+                        create("h3")
+                            .text("Change password")
+                            .build(),
+                        CommonTemplates.input("password", "old-password", "Old password", "Old password", oldPassword, (e) => {
+                            oldPassword.value = e.target.value;
+                        }, true, "old-password"),
+                        CommonTemplates.input("password", "new-password", "New password", "New password", newPassword, (e) => {
+                            newPassword.value = e.target.value;
+                        }, true, "new-password"),
+                        CommonTemplates.input("password", "confirm-password", "Confirm new password", "Confirm new password", confirmPassword, (e) => {
+                            confirmPassword.value = e.target.value;
+                        }, true, "confirm-password"),
+                        ifjs(errorState, create("p")
+                            .classes("error")
+                            .text(errorState)
+                            .build()),
+                        create("div")
+                            .classes("flex", "space-between")
+                            .children(
+                                CommonTemplates.buttonWithIcon("close", "Cancel", oncancel),
+                                CommonTemplates.buttonWithIcon("check", "Confirm", () => onconfirm(oldPassword.value, newPassword.value, errorState)),
+                            ).build()
+                    ).build()
+            ).build();
+    }
 }