[Feature] VPN Configuration from end-4#614

but also make it toggleable

Author: refurbishing

.config/ags/modules/.commonwidgets/statusicons.js

@@ -535,6 +535,16 @@ const WeatherWidget = () =>
       }),
   });
 
+const VPNIndicator = () => Widget.Revealer({
+    child: MaterialIcon('lock', 'norm'),
+    transition: 'slide_left',
+    revealChild: false,
+    transitionDuration: userOptions.animations.durationSmall,
+    setup: (self) => self.hook(Network.vpn, (self) => {
+        self.revealChild = (Network.vpn.activatedConnections.length > 0);
+    })
+});
+
 export const StatusIcons = (props = {}, monitor = 0) =>
   Widget.Box({
     ...props,
@@ -552,6 +562,7 @@ export const StatusIcons = (props = {}, monitor = 0) =>
         ...(userOptions.weather.enabled ? [WeatherWidget()] : []),
         Utilities(),
         BarGroup({ child: BarBattery() }),
+        ...(userOptions.bar.vpn ? [VPNIndicator()] : []),
       ],
     }),
   });

.config/ags/modules/.configuration/user_options.js

@@ -40,6 +40,7 @@ let configOptions = {
     settings: 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center',
     taskManager: "gnome-system-monitor",
     terminal: "foot", // This is only for shell actions
+    'vpn': "XDG_CURRENT_DESKTOP=\"gnome\" gnome-control-center network",
   },
   battery: {
     low: 20,
@@ -208,6 +209,7 @@ let configOptions = {
     // Change Order to reorder, remove to hide
     // Options: "snip", "picker", "keyboard"
     utilities: ["picker"],
+    vpn: false, // true to enable
   },
   keybinds: {
     // Format: Mod1+Mod2+key. CaSe SeNsItIvE!

.config/ags/modules/sideright/centermodules/vpn.js

@@ -0,0 +1,144 @@
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Network from "resource:///com/github/Aylur/ags/service/network.js";
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
+import { ConfigToggle } from '../../.commonwidgets/configwidgets.js';
+import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
+
+const { execAsync } = Utils;
+const { Box, Button, Icon, Label, Scrollable, Stack } = Widget;
+
+const USE_SYMBOLIC_ICONS = true;
+
+const VPNConfig = (vpn) => {
+    console.log(vpn.state);
+
+    const vpnIcon = Icon({
+        vpack: 'center',
+        className: 'sidebar-vpn-appicon',
+        tooltipText: vpn.id,
+        setup: (self) => self.hook(vpn, (self) => {
+            self.icon = `${vpn.iconName}${USE_SYMBOLIC_ICONS ? '-symbolic' : ''}`;
+        })
+    });
+
+    const vpnName = Box({
+        vpack: 'center',
+        hexpand: true,
+        vertical: true,
+        children: [
+            Label({
+                setup: (self) => self.hook(vpn, (self) => {
+                    self.label = vpn.id;
+                }),
+                label: vpn.id,
+                xalign: 0,
+                truncate: 'end',
+                className: 'txt-small',
+                maxWidthChars: 1,
+            })
+        ]
+    });
+
+    const vpnConnectButton = ConfigToggle({
+        desc: 'Toggle connection',
+        vpack: 'center',
+        initValue: (vpn.state === 'connected'),
+        expandWidget: false,
+        onChange: (self, newValue) => {
+            vpn.setConnection(newValue);
+        },
+        extraSetup: (self) => self.hook(vpn, (self) => {
+            Utils.timeout(200, () => self.enabled.value = (vpn.state === 'connected'));
+        })
+    });
+
+    return Box({
+        className: 'spacing-h-10 sidebar-vpn-config',
+        children: [
+            vpnIcon,
+            vpnName,
+            Box({
+                className: 'spacing-h-5',
+                children: [
+                    vpnConnectButton,
+                ]
+            })
+        ]
+    });
+}
+
+export default (props) => {
+    const emptyContent = Box({
+        homogeneous: true,
+        children: [
+            Box({
+                vpack: "center",
+                vertical: true,
+                className: 'txt spacing-v-10',
+                children: [
+                    Box({
+                        vertical: true,
+                        className: 'spacing-v-5 txt-subtext',
+                        children: [
+                            MaterialIcon('vpn_key_off', 'gigantic'),
+                            Label({ label: 'No VPN configured', className: 'txt-small' })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+
+    const vpnList = Scrollable({
+        vexpand: true,
+        child: Box({
+            vertical: true,
+            className: 'spacing-v-5',
+            attribute: {
+                'updateVPNList': (self) => {
+                    self.children = Network.vpn.connections.map(vpn => VPNConfig(vpn));
+                }
+            },
+            setup: (self) => self
+                .hook(Network.vpn, self.attribute.updateVPNList, 'connection-added')
+                .hook(Network.vpn, self.attribute.updateVPNList, 'connection-removed')
+        })
+    });
+
+    const mainContent = Stack({
+        children: {
+            'list': vpnList,
+            'empty': emptyContent,
+        },
+        setup: (self) => self.hook(Network, (self) => {
+            self.shown = (Network.vpn.connections.length > 0 ? 'list' : 'empty');
+        })
+    });
+
+    const bottomBar = Box({
+        homogeneous: true,
+        children: [
+            Button({
+                label: 'More',
+                hpack: 'center',
+                setup: setupCursorHover,
+                className: 'txt-small txt sidebar-centermodules-bottombar-button',
+                onClicked: () => {
+                    execAsync(['bash', '-c', `${userOptions.apps.vpn}`, '&']);
+                    closeEverything();
+                },
+            })
+        ]
+    });
+
+    return Box({
+        ...props,
+        vertical: true,
+        className: 'spacing-v-5',
+        children: [
+            mainContent,
+            bottomBar
+        ],
+    });
+}

.config/ags/modules/sideright/sideright.js

@@ -26,6 +26,7 @@ import { getDistroIcon } from '../.miscutils/system.js';
 import { MaterialIcon } from '../.commonwidgets/materialicon.js';
 import { ExpandingIconTabContainer } from '../.commonwidgets/tabcontainer.js';
 import { checkKeybind } from '../.widgetutils/keybind.js';
+import ModuleVPN from "./centermodules/vpn.js";
 
 const centerWidgets = [
     {
@@ -54,6 +55,11 @@ const centerWidgets = [
         materialIcon: 'tune',
         contentWidget: ModuleConfigure,
     },
+    ...(userOptions.bar.vpn ? [{
+        name: "VPN",
+        materialIcon: 'lock',
+        contentWidget: ModuleVPN,
+    }] : []),
 ];
 
 const timeRow = Box({

.config/hypr/hyprland/rules.conf

@@ -76,4 +76,3 @@ layerrule = blur, indicator*
 layerrule = ignorealpha 0.6, indicator*
 layerrule = blur, osk
 layerrule = ignorealpha 0.6, osk
-