Merge lp:~naaando/wingpanel-indicator-network/vpn into lp:~wingpanel-devs/wingpanel-indicator-network/trunk

[Fernando da Silva Sousa]

Show configured VPNs

Adds VPN menu

[Danielle Foré (danrabbit)]

I don't have any VPN connections set up, but I still get the header in the menu. It should probably only show if you actually have VPN connections configured. Especially since toggling VPN to on does nothing. This is kind of dangerous honestly because it could make people think they have a VPN just by hitting this switch.

It also shows as "Vpn" instead of "VPN"

review: Needs Fixing

[lp:~naaando/wingpanel-indicator-network/vpn]

226. By Fernando da Silva Sousa on 2017-04-06

Fix small typos

227. By Fernando da Silva Sousa on 2017-04-19

* Fix wingpanel crashing when a VPN is added all being removed
* Hide VPN menu if there's no VPN setup

[Fernando da Silva Sousa (naaando)]

I made the fixes, under the hood the menu is hidden when there are no VPN connections now.

[Danielle Foré (danrabbit)]

I can confirm that the VPN section isn't present while I have no VPN configured :)

[Kirill Romanov (djaler1)]

I can confirm that it works good for me!

review: Approve (test)

[Kirill Romanov (djaler1)]

I have some VPN connections, and I succesfully managed to connect and switch between them

[Adam Bieńkowski (donadigo)]

One little thing in the diff comment.

review: Needs Fixing (code)

[Danielle Foré (danrabbit)]

review: Approve (ux)

[lp:~naaando/wingpanel-indicator-network/vpn]

228. By Fernando da Silva Sousa on 2017-04-23

Rename function that create VPN

229. By Fernando da Silva Sousa on 2017-04-23

Fix coding style

230. By Fernando da Silva Sousa on 2017-04-23

Merge trunk

[Adam Bieńkowski (donadigo)]

Thanks. I can let that go now.

review: Approve (code)

=== modified file 'src/CMakeLists.txt'
--- src/CMakeLists.txt	2016-10-29 20:28:52 +0000
+++ src/CMakeLists.txt	2017-04-23 18:39:47 +0000
@@ -17,15 +17,18 @@
   Widgets/DisplayWidget.vala
   Widgets/PopoverWidget.vala
   Widgets/EtherInterface.vala
+  Widgets/VpnInterface.vala
   Widgets/WifiInterface.vala
   common/Utils.vala
   common/Widgets/WifiMenuItem.vala
+  common/Widgets/VpnMenuItem.vala
   common/Widgets/NMVisualizer.vala
   common/Widgets/WidgetNMInterface.vala
   Services/SettingsManager.vala
   ${CMAKE_CURRENT_BINARY_DIR}/config.vala
   common/rfkill.vala
   common/Widgets/AbstractWifiInterface.vala
+  common/Widgets/AbstractVpnInterface.vala
   common/Widgets/AbstractEtherInterface.vala
 
 PACKAGES

=== modified file 'src/Widgets/PopoverWidget.vala'
--- src/Widgets/PopoverWidget.vala	2016-11-19 14:50:46 +0000
+++ src/Widgets/PopoverWidget.vala	2017-04-23 18:39:47 +0000
@@ -19,6 +19,7 @@
 public class Network.Widgets.PopoverWidget : Network.Widgets.NMVisualizer {
     private Gtk.Box other_box;
     private Gtk.Box wifi_box;
+    private Gtk.Box vpn_box;
     private Wingpanel.Widgets.Button show_settings_button;
     private Wingpanel.Widgets.Button hidden_item;
 
@@ -47,8 +48,10 @@
 
         other_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
         wifi_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
+        vpn_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
         add (other_box);
         add (wifi_box);
+        add (vpn_box);
 
         if (!is_dm ()) {
             hidden_item = new Wingpanel.Widgets.Button (_("Connect to Hidden Network…"));
@@ -90,6 +93,10 @@
             });
         }
 
+        if (widget_interface is Network.VpnInterface) {
+            container_box = vpn_box;
+        }
+
         if (!is_dm () || get_children ().length () > 0) {
             widget_interface.sep = new Wingpanel.Widgets.Separator ();
             container_box.pack_end (widget_interface.sep);

=== added file 'src/Widgets/VpnInterface.vala'
--- src/Widgets/VpnInterface.vala	1970-01-01 00:00:00 +0000
+++ src/Widgets/VpnInterface.vala	2017-04-23 18:39:47 +0000
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2017 elementary LLC. (http://launchpad.net/elementary)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Library General Public License as published by
+ * the Free Software Foundation, either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+public class Network.VpnInterface : Network.AbstractVpnInterface {
+    private Wingpanel.Widgets.Switch vpn_item;
+    Gtk.Revealer revealer;
+
+    public VpnInterface (NM.Client nm_client, NM.RemoteSettings nm_settings) {
+        init_vpn_interface (nm_client, nm_settings);
+        vpn_item.set_caption (display_title);
+        debug ("Starting VPN Interface");
+
+        vpn_item.get_style_context ().add_class ("h4");
+        vpn_item.switched.connect (() => {
+            revealer.reveal_child = vpn_item.get_active ();
+            if (!vpn_item.get_active ()) {
+                vpn_deactivate_cb ();
+            }
+        });
+
+        vpn_list.add.connect (check_vpn_availability);
+        vpn_list.remove.connect (check_vpn_availability);
+
+        notify["vpn_state"].connect (update);
+    }
+
+    construct {
+        orientation = Gtk.Orientation.VERTICAL;
+        vpn_item = new Wingpanel.Widgets.Switch ("");
+        vpn_item.get_style_context ().add_class ("h4");
+        pack_start (vpn_item);
+
+        var scrolled_box = new Wingpanel.Widgets.AutomaticScrollBox (null, null);
+        scrolled_box.set_policy (Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        scrolled_box.add (vpn_list);
+
+        revealer = new Gtk.Revealer ();
+        revealer.add (scrolled_box);
+        pack_start (revealer);
+    }
+
+    public override void update () {
+        base.update ();
+
+        check_vpn_availability ();
+        if (active_vpn_item != null) {
+            vpn_item.set_active (true);
+        }
+    }
+
+    private void check_vpn_availability () {
+        var length = vpn_list.get_children ().length ();
+        // The first item is the blank item
+        show_vpn (length > 1);
+    }
+
+    private void show_vpn (bool show) {
+        no_show_all = sep.no_show_all = !show;
+        visible = sep.visible = show;
+    }
+
+    protected override void vpn_activate_cb (VpnMenuItem item) {
+        warning ("Activating connection");
+        vpn_deactivate_cb ();
+
+        debug ("Connecting to VPN : %s", item.connection.get_id ());
+
+        nm_client.activate_connection (item.connection, null, null, null);
+        active_vpn_item = item;
+        Idle.add (() => { update (); return false; });
+    }
+
+    protected override void vpn_deactivate_cb () {
+        if (active_vpn_connection == null) {
+            update ();
+            return;
+        }
+        debug ("Deactivating VPN : %s", active_vpn_connection.get_id ());
+        nm_client.deactivate_connection (active_vpn_connection);
+        Idle.add (() => { update (); return false; });
+    }
+}

=== added file 'src/common/Widgets/AbstractVpnInterface.vala'
--- src/common/Widgets/AbstractVpnInterface.vala	1970-01-01 00:00:00 +0000
+++ src/common/Widgets/AbstractVpnInterface.vala	2017-04-23 18:39:47 +0000
@@ -0,0 +1,206 @@
+/*
+ * Copyright (c) 2017 elementary LLC. (http://launchpad.net/elementary)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Library General Public License as published by
+ * the Free Software Foundation, either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+public abstract class Network.AbstractVpnInterface : Network.WidgetNMInterface {
+    protected NM.VPNConnection? active_vpn_connection = null;
+
+    protected Gtk.ListBox vpn_list;
+
+    protected NM.Client nm_client;
+    public NM.RemoteSettings nm_settings;
+
+    protected VpnMenuItem? active_vpn_item { get; set; }
+    protected VpnMenuItem? blank_item = null;
+    protected Gtk.Stack placeholder;
+
+    /**
+     * If we want to add a visual feedback on DisplayWidget later,
+     * we just need to remove vpn_state and swap it to state on the code
+    **/
+    public Network.State vpn_state { get; protected set; default = Network.State.DISCONNECTED; }
+
+    public void init_vpn_interface (NM.Client _nm_client, NM.RemoteSettings _nm_settings) {
+        nm_client = _nm_client;
+        nm_settings = _nm_settings;
+        display_title = _("VPN");
+
+        blank_item = new VpnMenuItem.blank ();
+        vpn_list.add (blank_item);
+        active_vpn_item = null;
+
+        /* Advices that no Vpn has been configured */
+        var no_vpn_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 6);
+        no_vpn_box.visible = true;
+        no_vpn_box.valign = Gtk.Align.CENTER;
+
+        var no_vpn = construct_placeholder_label (_("No VPN Available"), true);
+        no_vpn_box.add (no_vpn);
+
+        placeholder.add_named (no_vpn_box, "no-vpn");
+        placeholder.visible_child_name = "no-vpn";
+
+        nm_settings.connections_read.connect (update);
+        nm_client.notify["active-connections"].connect (update);
+        nm_settings.new_connection.connect (vpn_added_cb);
+
+        update ();
+    }
+
+    construct {
+        placeholder = new Gtk.Stack ();
+        placeholder.visible = true;
+
+        vpn_list = new Gtk.ListBox ();
+        // Single click is disabled because it's being handled by VpnMenuItem
+        vpn_list.activate_on_single_click = false;
+        vpn_list.visible = true;
+        vpn_list.set_placeholder (placeholder);
+    }
+
+    public override void update () {
+        update_active_connection ();
+
+        VpnMenuItem? item = null;
+
+        if (active_vpn_connection != null) {
+            switch (active_vpn_connection.vpn_state) {
+                case NM.VPNConnectionState.UNKNOWN:
+                case NM.VPNConnectionState.DISCONNECTED:
+                    vpn_state = State.DISCONNECTED;
+                    active_vpn_item = null;
+                    break;
+                case NM.VPNConnectionState.PREPARE:
+                case NM.VPNConnectionState.IP_CONFIG_GET:
+                case NM.VPNConnectionState.CONNECT:
+                    vpn_state = State.CONNECTING_VPN;
+                    item = get_item_by_uuid (active_vpn_connection.get_uuid ());
+                    break;
+                case NM.VPNConnectionState.FAILED:
+                    vpn_state = State.FAILED_VPN;
+                    active_vpn_item = null;
+                    break;
+                case NM.VPNConnectionState.ACTIVATED:
+                    vpn_state = State.CONNECTED_VPN;
+                    item = get_item_by_uuid (active_vpn_connection.get_uuid ());
+                    sensitive = true;
+                    break;
+                }
+        } else {
+            vpn_state = State.DISCONNECTED;
+        }
+
+        if (item == null) {
+            blank_item.set_active (true);
+
+            if (active_vpn_item != null) {
+                active_vpn_item.no_show_all = false;
+                active_vpn_item.visible = true;
+                active_vpn_item.vpn_state = vpn_state;
+            }
+        }
+
+        base.update ();
+    }
+
+    protected Gtk.Label construct_placeholder_label (string text, bool title = false) {
+        var label = new Gtk.Label (text);
+        label.visible = true;
+        label.use_markup = true;
+        label.wrap = true;
+        label.wrap_mode = Pango.WrapMode.WORD_CHAR;
+        label.max_width_chars = 30;
+        label.justify = Gtk.Justification.CENTER;
+
+        if (title) {
+#if PLUG_NETWORK
+            label.get_style_context ().add_class ("h2");
+#endif
+        }
+
+        return label;
+    }
+
+    /**
+      * The vpn_added_cb is called on new_connection signal,
+      * (we get the vpn connections from there)
+      * then we filter the connection that make sense for us.
+    */
+    void vpn_added_cb (Object obj) {
+        var vpn = (NM.RemoteConnection)obj;
+        switch (vpn.get_connection_type ()) {
+            case NM.SettingVpn.SETTING_NAME:
+                // Remove vpn when it's removed in switchboard-plug-networking
+                vpn.removed.connect (vpn_removed_cb);
+
+                // Add the item to vpn_list
+                var item = new VpnMenuItem (vpn);
+                item.set_visible (true);
+                item.user_action.connect (vpn_activate_cb);
+
+                vpn_list.add (item);
+                update ();
+                break;
+            default:
+                break;
+        }
+    }
+
+    // Removed vpn, from removed signal attached to connection when it get added.
+    void vpn_removed_cb (NM.RemoteConnection vpn_) {
+        var item = get_item_by_uuid (vpn_.get_uuid ());
+        item.destroy ();
+    }
+
+    private VpnMenuItem? get_item_by_uuid (string uuid) {
+        VpnMenuItem? item = null;
+        foreach (var child in vpn_list.get_children ()) {
+            var _item = (VpnMenuItem)child;
+            if (_item.connection != null && _item.connection.get_uuid () == uuid && item == null) {
+                item = (VpnMenuItem)child;
+            }
+        }
+
+        return item;
+    }
+
+    /**
+     * Loop through each active connection to find out the vpn.
+    */
+    protected void update_active_connection () {
+        active_vpn_connection = null;
+
+        nm_client.get_active_connections ().foreach ((ac) => {
+            if (ac.get_vpn () && active_vpn_connection == null) {
+                active_vpn_connection = (NM.VPNConnection)ac;
+                active_vpn_connection.vpn_state_changed.connect (update);
+
+                foreach (var v in vpn_list.get_children ()) {
+                    var menu_item = (VpnMenuItem) v;
+
+                    if (menu_item.connection.get_uuid () == active_vpn_connection.uuid) {
+                        menu_item.set_active (true);
+                        active_vpn_item = menu_item;
+                        active_vpn_item.vpn_state = vpn_state;
+                    }
+                }
+            }
+        });
+    }
+
+    protected abstract void vpn_activate_cb (VpnMenuItem i);
+    protected abstract void vpn_deactivate_cb ();
+}

=== modified file 'src/common/Widgets/NMVisualizer.vala'
--- src/common/Widgets/NMVisualizer.vala	2017-01-06 14:22:24 +0000
+++ src/common/Widgets/NMVisualizer.vala	2017-04-23 18:39:47 +0000
@@ -16,175 +16,180 @@
  */
 
 public abstract class Network.Widgets.NMVisualizer : Gtk.Grid {
-	protected NM.Client nm_client;
-	protected NM.RemoteSettings nm_settings;
-	protected NM.VPNConnection? active_vpn_connection = null;
-
-	protected GLib.List<WidgetNMInterface>? network_interface;
-
-	public bool secure { private set; get; default = false; }
-	public Network.State state { private set; get; default = Network.State.CONNECTING_WIRED; }
-
-	construct {
-		network_interface = new GLib.List<WidgetNMInterface>();
-
-		build_ui ();
-
-		/* Monitor network manager */
-		nm_client = new NM.Client ();
-		nm_settings = new NM.RemoteSettings (null);
-
-		nm_client.notify["active-connections"].connect (update_vpn_connection);
-
-		nm_client.device_added.connect (device_added_cb);
-		nm_client.device_removed.connect (device_removed_cb);
-
-		nm_client.notify["networking-enabled"].connect (update_state);
-
-		var devices = nm_client.get_devices ();
-		for (var i = 0; i < devices.length; i++)
-			device_added_cb (devices.get (i));
-
-		show_all();
-		update_vpn_connection ();
-	}
-
-	protected abstract void build_ui ();
-	protected abstract void add_interface (WidgetNMInterface widget_interface);
-	protected abstract void remove_interface (WidgetNMInterface widget_interface);
-
-	void device_removed_cb (NM.Device device) {
-		foreach (var widget_interface in network_interface) {
-			if (widget_interface.is_device (device)) {
-				network_interface.remove (widget_interface);
-
-				// Implementation call
-				remove_interface (widget_interface);
-				break;
-			}
-		}
-
-		update_interfaces_names ();
-	}
-
-	void update_interfaces_names () {
-		var count_type = new Gee.HashMap<string, int?> ();
-		foreach (var iface in network_interface) {
-			var type = iface.get_type ().name ();
-			if (count_type.has_key (type)) {
-				count_type[type] = count_type[type] + 1;
-			} else {
-				count_type[type] = 1;
-			}
-		}
-
-		foreach (var iface in network_interface) {
-			var type = iface.get_type ().name ();
-			iface.update_name (count_type [type]);
-		}
-	}
-
-	private void device_added_cb (NM.Device device) {
-		if (device.get_iface ().has_prefix ("vmnet") ||
-			device.get_iface ().has_prefix ("lo") ||
-			device.get_iface ().has_prefix ("veth")) {
-			return;
-		}
-
-		WidgetNMInterface? widget_interface = null;
-#if PLUG_NETWORK
-		WidgetNMInterface? hotspot_interface = null;
-#endif
-
-		if (device is NM.DeviceWifi) {
-			widget_interface = new WifiInterface (nm_client, nm_settings, device);
-#if PLUG_NETWORK
-			hotspot_interface = new HotspotInterface((WifiInterface)widget_interface);
-#endif
-
-			debug ("Wifi interface added");
-		} else if (device is NM.DeviceEthernet) {
-			widget_interface = new EtherInterface (nm_client, nm_settings, device);
-			debug ("Wired interface added");
-		} else {
-			debug ("Unknown device: %s\n", device.get_device_type().to_string());
-		}
-
-		if (widget_interface != null) {
-			// Implementation call
-			network_interface.append (widget_interface);
-			add_interface(widget_interface);
-			widget_interface.notify["state"].connect(update_state);
-
-		}
-
-#if PLUG_NETWORK
-		if (hotspot_interface != null) {
-			// Implementation call
-			network_interface.append (hotspot_interface);
-			add_interface(hotspot_interface);
-			hotspot_interface.notify["state"].connect(update_state);
-
-		}
-#endif
-
-		update_interfaces_names ();
-		update_all ();
-		show_all ();
-	}
-
-	void update_all () {
-		foreach(var inter in network_interface) {
-			inter.update ();
-		}
-	}
-
-	void update_state () {
-		if (!nm_client.networking_get_enabled ()) {
-			state = Network.State.DISCONNECTED_AIRPLANE_MODE;
-		} else {
-			var next_state = Network.State.DISCONNECTED;
-			var best_score = int.MAX;
-
-			foreach (var inter in network_interface) {
-				var score = inter.state.get_priority();
-
-				if (score < best_score) {
-					next_state = inter.state;
-					best_score = score;
-				}
-			}
-
-			state = next_state;
-		}
-	}
-
-	void update_vpn_connection () {
-		active_vpn_connection = null;
-
-		nm_client.get_active_connections ().foreach ((ac) => {
-			if (active_vpn_connection == null && ac.get_vpn ()) {
-				active_vpn_connection = (NM.VPNConnection) ac;
-				update_vpn_state (active_vpn_connection.get_vpn_state ());
-				active_vpn_connection.vpn_state_changed.connect (() => {
-					update_vpn_state (active_vpn_connection.get_vpn_state ());
-				});
-			}
-		});
-	}
-
-	void update_vpn_state (NM.VPNConnectionState state) {
-		switch (state) {
-			case NM.VPNConnectionState.DISCONNECTED:
-			case NM.VPNConnectionState.PREPARE:
-			case NM.VPNConnectionState.IP_CONFIG_GET:
-			case NM.VPNConnectionState.CONNECT:
-			case NM.VPNConnectionState.FAILED:
-				secure = false;
-				break;
-			case NM.VPNConnectionState.ACTIVATED:
-				secure = true;
-				break;
-		}
-	}
+    protected NM.Client nm_client;
+    protected NM.RemoteSettings nm_settings;
+    protected NM.VPNConnection? active_vpn_connection = null;
+
+    protected GLib.List<WidgetNMInterface>? network_interface;
+
+    public bool secure { private set; get; default = false; }
+    public Network.State state { private set; get; default = Network.State.CONNECTING_WIRED; }
+
+    construct {
+        network_interface = new GLib.List<WidgetNMInterface>();
+
+        build_ui ();
+
+        /* Monitor network manager */
+        nm_client = new NM.Client ();
+        nm_settings = new NM.RemoteSettings (null);
+
+        nm_client.notify["active-connections"].connect (update_vpn_connection);
+
+        nm_client.device_added.connect (device_added_cb);
+        nm_client.device_removed.connect (device_removed_cb);
+
+        nm_client.notify["networking-enabled"].connect (update_state);
+
+        var devices = nm_client.get_devices ();
+        for (var i = 0; i < devices.length; i++)
+            device_added_cb (devices.get (i));
+
+        // Vpn interface
+        create_vpn_interface ();
+
+        show_all();
+        update_vpn_connection ();
+    }
+
+    protected abstract void build_ui ();
+    protected abstract void add_interface (WidgetNMInterface widget_interface);
+    protected abstract void remove_interface (WidgetNMInterface widget_interface);
+
+    void device_removed_cb (NM.Device device) {
+        foreach (var widget_interface in network_interface) {
+            if (widget_interface.is_device (device)) {
+                network_interface.remove (widget_interface);
+
+                // Implementation call
+                remove_interface (widget_interface);
+                break;
+            }
+        }
+
+        update_interfaces_names ();
+    }
+
+    void update_interfaces_names () {
+        var count_type = new Gee.HashMap<string, int?> ();
+        foreach (var iface in network_interface) {
+            var type = iface.get_type ().name ();
+            if (count_type.has_key (type)) {
+                count_type[type] = count_type[type] + 1;
+            } else {
+                count_type[type] = 1;
+            }
+        }
+
+        foreach (var iface in network_interface) {
+            var type = iface.get_type ().name ();
+            iface.update_name (count_type [type]);
+        }
+    }
+
+    private void device_added_cb (NM.Device device) {
+        if (device.get_iface ().has_prefix ("vmnet") ||
+            device.get_iface ().has_prefix ("lo") ||
+            device.get_iface ().has_prefix ("veth")) {
+            return;
+        }
+
+        WidgetNMInterface? widget_interface = null;
+#if PLUG_NETWORK
+        WidgetNMInterface? hotspot_interface = null;
+#endif
+
+        if (device is NM.DeviceWifi) {
+            widget_interface = new WifiInterface (nm_client, nm_settings, device);
+#if PLUG_NETWORK
+            hotspot_interface = new HotspotInterface((WifiInterface)widget_interface);
+#endif
+
+            debug ("Wifi interface added");
+        } else if (device is NM.DeviceEthernet) {
+            widget_interface = new EtherInterface (nm_client, nm_settings, device);
+            debug ("Wired interface added");
+        } else {
+            debug ("Unknown device: %s\n", device.get_device_type().to_string());
+        }
+
+        if (widget_interface != null) {
+            // Implementation call
+            network_interface.append (widget_interface);
+            add_interface(widget_interface);
+            widget_interface.notify["state"].connect(update_state);
+
+        }
+
+#if PLUG_NETWORK
+        if (hotspot_interface != null) {
+            // Implementation call
+            network_interface.append (hotspot_interface);
+            add_interface(hotspot_interface);
+            hotspot_interface.notify["state"].connect(update_state);
+
+        }
+#endif
+
+        update_interfaces_names ();
+        update_all ();
+        show_all ();
+    }
+
+    private void create_vpn_interface () {
+        WidgetNMInterface widget_interface = new VpnInterface (nm_client, nm_settings);
+        network_interface.append (widget_interface);
+        add_interface (widget_interface);
+        widget_interface.notify["state"].connect (update_state);
+    }
+
+    void update_all () {
+        foreach(var inter in network_interface) {
+            inter.update ();
+        }
+    }
+
+    void update_state () {
+        if (!nm_client.networking_get_enabled ()) {
+            state = Network.State.DISCONNECTED_AIRPLANE_MODE;
+        } else {
+            var next_state = Network.State.DISCONNECTED;
+            foreach (var inter in network_interface) {
+                if (inter.state != Network.State.DISCONNECTED) {
+                    next_state = inter.state;
+                }
+            }
+
+            state = next_state;
+        }
+    }
+
+    void update_vpn_connection () {
+        active_vpn_connection = null;
+
+        nm_client.get_active_connections ().foreach ((ac) => {
+            if (active_vpn_connection == null && ac.get_vpn ()) {
+                active_vpn_connection = (NM.VPNConnection) ac;
+                update_vpn_state (active_vpn_connection.get_vpn_state ());
+                active_vpn_connection.vpn_state_changed.connect (() => {
+                    update_vpn_state (active_vpn_connection.get_vpn_state ());
+                });
+            }
+        });
+    }
+
+    void update_vpn_state (NM.VPNConnectionState state) {
+        switch (state) {
+            case NM.VPNConnectionState.DISCONNECTED:
+            case NM.VPNConnectionState.PREPARE:
+            case NM.VPNConnectionState.IP_CONFIG_GET:
+            case NM.VPNConnectionState.CONNECT:
+            case NM.VPNConnectionState.FAILED:
+                secure = false;
+                break;
+            case NM.VPNConnectionState.ACTIVATED:
+                secure = true;
+                break;
+        }
+    }
 }

=== added file 'src/common/Widgets/VpnMenuItem.vala'
--- src/common/Widgets/VpnMenuItem.vala	1970-01-01 00:00:00 +0000
+++ src/common/Widgets/VpnMenuItem.vala	2017-04-23 18:39:47 +0000
@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2017 elementary LLC. (http://launchpad.net/elementary)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Library General Public License as published by
+ * the Free Software Foundation, either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+public class Network.VpnMenuItem : Gtk.ListBoxRow {
+    private static unowned Gtk.RadioButton? blank_button = null;
+
+    public signal void user_action ();
+    public NM.RemoteConnection? connection { get; private set; }
+    public string id {
+        get {
+            return connection.get_id ();
+        }
+    }
+    public Network.State vpn_state { get; set; default = Network.State.DISCONNECTED; }
+
+    public Gtk.RadioButton radio_button { get; private set; }
+    Gtk.Spinner spinner;
+    Gtk.Image error_img;
+
+    public VpnMenuItem (NM.RemoteConnection? _connection) {
+        connection = _connection;
+        connection.changed.connect (update);
+
+        var main_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6);
+        main_box.margin_start = main_box.margin_end = 6;
+
+        radio_button = new Gtk.RadioButton (null);
+        if (blank_button != null) {
+            radio_button.join_group (blank_button);
+        }
+
+        radio_button.button_release_event.connect ((b, ev) => {
+            user_action ();
+            return false;
+        });
+
+        error_img = new Gtk.Image.from_icon_name ("process-error-symbolic", Gtk.IconSize.MENU);
+        error_img.margin_start = 6;
+        error_img.set_tooltip_text (_("This Virtual Private Network could not be connected to."));
+
+        spinner = new Gtk.Spinner ();
+        spinner.start ();
+        spinner.visible = false;
+        spinner.no_show_all = !spinner.visible;
+
+        main_box.pack_start (radio_button, true, true);
+        main_box.pack_start (spinner, false, false);
+        main_box.pack_start (error_img, false, false);
+
+        notify["vpn_state"].connect (update);
+        radio_button.notify["active"].connect (update);
+
+        add (main_box);
+        get_style_context ().add_class ("menuitem");
+
+        update ();
+    }
+
+    /**
+    * Only used for an item which is not displayed: hacky way to have no radio button selected.
+    **/
+    public VpnMenuItem.blank () {
+        radio_button = new Gtk.RadioButton (null);
+        blank_button = radio_button;
+    }
+
+    private void update () {
+        radio_button.label = connection.get_id ();
+
+#if PLUG_NETWORK
+        if (show_icons) {
+#endif
+            hide_item (error_img);
+            hide_item (spinner);
+
+#if PLUG_NETWORK
+        }
+#endif
+        switch (vpn_state) {
+            case State.FAILED_VPN:
+                show_item (error_img);
+                break;
+            case State.CONNECTING_VPN:
+                show_item (spinner);
+                if (!radio_button.active) {
+                    critical ("An VPN is being connected but not active.");
+                }
+                break;
+        }
+    }
+
+    public void set_active (bool active) {
+        radio_button.set_active (active);
+    }
+
+    public void hide_icons (bool show_remove_button = true) {
+#if PLUG_NETWORK
+        show_icons = false;
+        hide_item (error_img);
+        hide_item (spinner);
+        if (!show_remove_button) {
+            hide_item (remove_button);
+        }
+#endif
+    }
+
+    void show_item (Gtk.Widget w) {
+        w.visible = true;
+        w.no_show_all = w.visible;
+    }
+
+    void hide_item (Gtk.Widget w) {
+        w.visible = false;
+        w.no_show_all = !w.visible;
+        w.hide ();
+    }
+}