added logic to the connect to vpn button

client/ui/qml/Components/ConnectButton.qml

@@ -2,21 +2,40 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import ConnectionState 1.0
+
 Button {
     id: root
 
-    implicitHeight: 190
-    implicitWidth: 190
+    property var isConnected: ConnectionController.isConnected
 
-    background: Rectangle {
-        id: background
+    text: "Подключиться"
 
-        radius: parent.width * 0.5
+//    implicitHeight: 190
+//    implicitWidth: 190
 
-        color: "transparent"
+//    color: "transparent"
 
-        border.width: 2
-        border.color: "white"
+    background: Image {
+        id: border
+
+        source: connectionProccess.running ? "/images/connectionProgress.svg" :
+                                             ConnectionController.isConnected() ? "/images/connectionOff.svg" : "/images/connectionOn.svg"
+
+        RotationAnimator {
+            id: connectionProccess
+
+            target: border
+            running: false
+            from: 0
+            to: 360
+            loops: Animation.Infinite
+            duration: 1250
+        }
+
+        Behavior on source {
+            PropertyAnimation { duration: 200 }
+        }
     }
 
     contentItem: Text {
@@ -34,7 +53,58 @@ Button {
     }
 
     onClicked: {
-        background.color = "red"
         ConnectionController.onConnectionButtonClicked()
+        console.log(connectionProccess.from)
+    }
+
+    Connections {
+        target: ConnectionController
+        function onConnectionStateChanged(state) {
+            switch(state) {
+            case ConnectionState.Unknown: {
+                console.log("Unknown")
+                break
+            }
+            case ConnectionState.Disconnected: {
+                console.log("Disconnected")
+                connectionProccess.running = false
+                root.text = "Подключиться"
+                break
+            }
+            case ConnectionState.Preparing: {
+                console.log("Preparing")
+                break
+            }
+            case ConnectionState.Connecting: {
+                console.log("Connecting")
+                connectionProccess.running = true
+                root.text = "Подключение..."
+                break
+            }
+            case ConnectionState.Connected: {
+                console.log("Connected")
+                connectionProccess.running = false
+                root.text = "Подключено"
+                break
+            }
+            case ConnectionState.Disconnecting: {
+                console.log("Disconnecting")
+                connectionProccess.running = true
+                root.text = "Отключение..."
+                break
+            }
+            case ConnectionState.Reconnecting: {
+                console.log("Reconnecting")
+                connectionProccess.running = true
+                root.text = "Переподключение..."
+                break
+            }
+            case ConnectionState.Error: {
+                console.log("Error")
+                connectionProccess.running = false
+                break
+            }
+            }
+        }
     }
 }