[ui] disable checkboxes when on

gui/components/Preferences.qml

 import QtQuick 2.9
 import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.1
 
 Page {
     title: qsTr("Preferences")
 
     Column {
-        spacing: 2
-        topPadding: root.width * 0.2
+        id: prefCol
+        // FIXME the checkboxes seem to have a bigger lineHeight themselves, need to pack more.
+        spacing: 1
+        topPadding: root.width * 0.1
         leftPadding: root.width * 0.15
         rightPadding: root.width * 0.15
 
+        Rectangle {
+            id: turnOffWarning
+            visible: false
+            height: 40
+            width: 300
+
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Label {
+                color: "red"
+                text: qsTr("Turn off the VPN to make changes")
+                width: prefCol.width
+            }
+        }
+
+
         Label {
             text: qsTr("Anti-censorship")
             font.bold: true
         }
 
         CheckBox {
+            id: useBridgesCheckBox
             checked: false
-            text: qsTr("Use Bridges")
+            text: qsTr("Use obfs4 bridges")
         }
+
+        CheckBox {
+            id: useSnowflake
+            checked: false
+            text: qsTr("Use Snowflake (experimental)")
+        }
+
+        Label {
+            text: qsTr("Transport")
+            font.bold: true
+        }
+
+        CheckBox {
+            id: useUDP
+            checked: false
+            text: qsTr("UDP")
+        }
+    }
+
+    StateGroup {
+        state: ctx ? ctx.status : "off"
+        states: [
+            State {
+                name: "on"
+                PropertyChanges {
+                    target: turnOffWarning
+                    visible: true
+                }
+                PropertyChanges {
+                    target: useBridgesCheckBox
+                    checkable: false
+                }
+                PropertyChanges {
+                    target: useUDP
+                    checkable: false
+                }
+            },
+            State {
+                name: "starting"
+                PropertyChanges {
+                    target: turnOffWarning
+                    visible: true
+                }
+                PropertyChanges {
+                    target: useBridgesCheckBox
+                    checkable: false
+                }
+                PropertyChanges {
+                    target: useUDP
+                    checkable: false
+                }
+            },
+            State {
+                name: "off"
+                PropertyChanges {
+                    target: turnOffWarning
+                    visible: false
+                }
+                PropertyChanges {
+                    target: useBridgesCheckBox
+                    checkable: true
+                }
+                PropertyChanges {
+                    target: useUDP
+                    checkable: true
+                }
+            }
+        ]
     }
 }