work on profile edit page

targoninc · Jun 2, 2024 · 0773aaa · 0773aaa
1 parent 20f9535
commit 0773aaa
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 22 deletions.
diff --git a/ui/api/Popups.mjs b/ui/api/Popups.mjs
@@ -147,4 +147,19 @@ export class Popups {
             removePopups();
         }, "Delete account", "Yes", "No", "delete", "close"));
     }
+
+    static removeInstancePopup(instance, instances) {
+        popup(PopupComponents.confirmPopup(`Are you sure you want to remove ${instance.url} from bridged instances?`, () => {
+            Api.removeInstance(instance.id).then(res => {
+                if (res.status === 200) {
+                    toast("Bridged instance removed", "success");
+                    instances.value = instances.value.filter(i => i.id !== instance.id);
+                } else {
+                    toast("Failed to remove bridged instance: " + res.data.error, "error");
+                }
+            });
+        }, () => {
+            removePopups();
+        }, "Remove instance", "Yes", "No", "delete", "close"));
+    }
 }
diff --git a/ui/base.css b/ui/base.css
@@ -143,6 +143,11 @@ button.negative, input.negative, textarea.negative, select.negative {
     color: var(--red);
 }
 
+button.sensitive, input.sensitive, textarea.sensitive, select.sensitive {
+    border: var(--input-border-width) solid var(--yellow);
+    color: var(--yellow);
+}
+
 button.double, input.double, textarea.double, select.double {
     padding: var(--input-padding-v) calc(var(--input-padding-h) * 2);
 }

diff --git a/ui/components/pages/profile.mjs b/ui/components/pages/profile.mjs
@@ -3,7 +3,7 @@ import {computedSignal, create, signal, signalFromProperty, store} from "https:/
 import {CommonTemplates} from "../common.mjs";
 import {Store} from "../../api/Store.mjs";
 import {Api} from "../../api/Api.mjs";
-import {toast} from "../../actions.mjs";
+import {testImage, toast} from "../../actions.mjs";
 import {Live} from "../../live/Live.mjs";
 import {Popups} from "../../api/Popups.mjs";
 
@@ -106,7 +106,8 @@ export class ProfileComponent {
     }
 
     static avatarSection(user) {
-        const avatar = signalFromProperty(user, "avatar");
+        const realAvatar = signalFromProperty(user, "avatar");
+        const avatar = computedSignal(realAvatar, av => av ?? testImage);
         const buttonText = signal("Upload avatar");
 
         return create("div")
@@ -128,20 +129,32 @@ export class ProfileComponent {
                     buttonText.value = "Uploading...";
                     ProfileComponent.uploadAvatar(avatar);
                     buttonText.value = "Upload avatar";
-                })
+                }),
+                CommonTemplates.buttonWithIcon("delete", "Delete avatar", () => {
+                    Live.send({
+                        type: "updateAvatar",
+                        avatar: null
+                    });
+                    Store.get('user').value = {
+                        ...Store.get('user').value,
+                        avatar: null
+                    };
+                }, ["negative"])
             ).build();
     }
 
     static accountSection(user) {
-        return create("div")
-            .classes("flex-v")
-            .children(
-                CommonTemplates.buttonWithIcon("password", "Change password", () => {
-                    Popups.updatePassword(user);
-                }),
-                CommonTemplates.buttonWithIcon("delete", "Delete account", () => {
-                    Popups.deleteAccount(user);
-                }, ["negative"])
-            ).build();
+        return LayoutTemplates.collapsible("Account",
+            create("div")
+                .classes("flex-v")
+                .children(
+                    CommonTemplates.buttonWithIcon("password", "Change password", () => {
+                        Popups.updatePassword(user);
+                    }, ["sensitive"]),
+                    CommonTemplates.buttonWithIcon("delete", "Delete account", () => {
+                        Popups.deleteAccount(user);
+                    }, ["negative"])
+                ).build()
+        );
     }
 }
diff --git a/ui/components/pages/settings.mjs b/ui/components/pages/settings.mjs
@@ -160,7 +160,8 @@ export class SettingsComponent {
         const instanceInfo = signal({
             url: "",
             useAllowlist: false,
-            enabled: true
+            enabled: true,
+            allowList: [],
         });
         const url = signalFromProperty(instanceInfo, 'url');
         const useAllowlist = signalFromProperty(instanceInfo, 'useAllowlist');
@@ -242,14 +243,7 @@ export class SettingsComponent {
                                 ifjs(instance.enabled, CommonTemplates.circleToggle("Enabled", "var(--green)", () => toggleInstanceEnabled(instances, instance))),
                                 ifjs(instance.enabled, CommonTemplates.circleToggle("Disabled", "var(--red)", () => toggleInstanceEnabled(instances, instance)), true),
                                 ifjs(hasRemovePermission, CommonTemplates.buttonWithIcon("delete", "Remove", () => {
-                                    Api.removeInstance(instance.id).then(res => {
-                                        if (res.status === 200) {
-                                            toast("Bridged instance removed", "success");
-                                            instances.value = instances.value.filter(i => i.id !== instance.id);
-                                        } else {
-                                            toast("Failed to remove bridged instance: " + res.data.error, "error");
-                                        }
-                                    });
+                                    Popups.removeInstancePopup(instance, instances);
                                 })),
                             ).build(),
                     ).build(),

diff --git a/ui/live/LiveInstance.mjs b/ui/live/LiveInstance.mjs
@@ -7,6 +7,7 @@ export class LiveInstance {
         this.onStop = onStop;
         this.onStart = onStart;
         this.server = null;
+        this.interval = null;
 
         this.start();
     }
@@ -20,6 +21,19 @@ export class LiveInstance {
         return null;
     }
 
+    async startPing() {
+        if (!this.server || this.interval) {
+            return;
+        }
+
+        this.interval = setInterval(() => {
+            if (this.server.readyState !== WebSocket.OPEN) {
+                return;
+            }
+            this.server.send(JSON.stringify({type: "ping"}));
+        }, 10000);
+    }
+
     async start() {
         let connectSid = await this.getConnectSid();
         if (!connectSid) {
@@ -35,6 +49,7 @@ export class LiveInstance {
         this.server.onopen = () => {
             console.log("Connected to live server!");
             this.onStart();
+            this.startPing();
         };
 
         this.server.onclose = () => {