Vpn and wizard pages fixes

client/resources.qrc

@@ -142,5 +142,7 @@
         <file>images/connected.png</file>
         <file>images/disconnected.png</file>
         <file>ui/qml/Pages/PageQrDecoder.qml</file>
+        <file>ui/qml/Pages/PageAbout.qml</file>
+        <file>ui/qml/Controls/RichLabelType.qml</file>
     </qresource>
 </RCC>

client/ui/pages.h

@@ -24,7 +24,7 @@ enum class Page {Start = 0, NewServer, NewServerProtocols, Vpn,
            Wizard, WizardLow, WizardMedium, WizardHigh, WizardVpnMode, ServerConfiguringProgress,
            GeneralSettings, AppSettings, NetworkSettings, ServerSettings,
            ServerContainers, ServersList, ShareConnection,  Sites,
-           ProtocolSettings, ProtocolShare, QrDecoder};
+           ProtocolSettings, ProtocolShare, QrDecoder, About};
 Q_ENUM_NS(Page)
 
 static void declareQmlPageEnum() {

client/ui/pages_logic/ServerContainersLogic.cpp

@@ -12,6 +12,9 @@
 #include <functional>
 
 #include "../uilogic.h"
+#include "../pages_logic/VpnLogic.h"
+#include "vpnconnection.h"
+
 
 ServerContainersLogic::ServerContainersLogic(UiLogic *logic, QObject *parent):
     PageLogicBase(logic, parent)
@@ -42,8 +45,17 @@ void ServerContainersLogic::onPushButtonProtoSettingsClicked(DockerContainer c,
 
 void ServerContainersLogic::onPushButtonDefaultClicked(DockerContainer c)
 {
+    if (m_settings.defaultContainer(uiLogic()->selectedServerIndex) == c) return;
+
     m_settings.setDefaultContainer(uiLogic()->selectedServerIndex, c);
     uiLogic()->onUpdateAllPages();
+
+    if (uiLogic()->selectedServerIndex != m_settings.defaultServerIndex()) return;
+    if (!uiLogic()->m_vpnConnection) return;
+    if (!uiLogic()->m_vpnConnection->isConnected()) return;
+
+    uiLogic()->vpnLogic()->onDisconnect();
+    uiLogic()->vpnLogic()->onConnect();
 }
 
 void ServerContainersLogic::onPushButtonShareClicked(DockerContainer c)

client/ui/qml/Controls/RichLabelType.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.12
+
+LabelType {
+    id: label_connection_code
+    width: parent.width - 60
+    x: 30
+    font.pixelSize: 14
+    textFormat: Text.RichText
+    onLinkActivated: Qt.openUrlExternally(link)
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+        acceptedButtons: Qt.NoButton
+    }
+}
+

client/ui/qml/Pages/PageAbout.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import PageEnum 1.0
+import "./"
+import "../Controls"
+import "../Config"
+
+PageBase {
+    id: root
+    page: PageEnum.About
+
+    BackButton {
+        id: back_from_start
+    }
+
+    Caption {
+        id: caption
+        font.pixelSize: 22
+        text: qsTr("About Amnezia")
+    }
+
+    RichLabelType {
+        id: label_about
+        anchors.top: caption.bottom
+
+        text: qsTr("AmneziaVPN is opensource software, it's free forever. Our goal is to make the best VPN client in the world.
+<ul>
+<li>Sources on <a href=\"https://github.com/amnezia-vpn/desktop-client\">GitHub</a></li>
+<li><a href=\"https://amnezia.org/\">Web Site</a></li>
+<li><a href=\"https://t.me/amnezia_vpn_en\">Telegram group</a></li>
+<li><a href=\"https://signal.group/#CjQKIB2gUf8QH_IXnOJMGQWMDjYz9cNfmRQipGWLFiIgc4MwEhAKBONrSiWHvoUFbbD0xwdh\">Signal group</a></li>
+</ul>
+")
+    }
+
+    Caption {
+        id: caption2
+        anchors.topMargin: 20
+        font.pixelSize: 22
+        text: qsTr("Support")
+        anchors.top: label_about.bottom
+    }
+
+    RichLabelType {
+        id: label_support
+        anchors.top: caption2.bottom
+
+        text: qsTr("Have questions? You can get support by:
+<ul>
+<li><a href=\"https://t.me/amnezia_vpn_en\">Telegram group</a> (preferred way)</li>
+<li>Create issue on <a href=\"https://github.com/amnezia-vpn/desktop-client/issues\">GitHub</a></li>
+<li>Email to: <a href=\"support@amnezia.org\">support@amnezia.org</a></li>
+</ul>")
+    }
+
+    Caption {
+        id: caption3
+        anchors.topMargin: 20
+        font.pixelSize: 22
+        text: qsTr("Donate")
+        anchors.top: label_support.bottom
+    }
+
+    RichLabelType {
+        id: label_donate
+        anchors.top: caption3.bottom
+
+        text: qsTr("Please support Amnezia project by donation, we really need it now more than ever.
+<ul>
+<li>By credit card on <a href=\"https://www.patreon.com/amneziavpn\">Patreon</a> (starting from $1)</li>
+<li>Send some coins to addresses listed <a href=\"https://github.com/amnezia-vpn/desktop-client/blob/master/README.md\">on GitHub page</a></li>
+</ul>
+")
+    }
+
+    Logo {
+        id: logo
+        anchors.bottom: parent.bottom
+    }
+}

client/ui/qml/Pages/PageAppSetting.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
 import PageEnum 1.0
 import "./"
 import "../Controls"
@@ -14,13 +15,34 @@ PageBase {
         id: back
     }
     Caption {
+        id: caption
         text: qsTr("Application Settings")
     }
+
+    Flickable {
+        id: fl
+        width: root.width
+        anchors.top: caption.bottom
+        anchors.topMargin: 20
+        anchors.bottom: logo.top
+        anchors.bottomMargin: 20
+        anchors.left: root.left
+        anchors.leftMargin: 30
+        anchors.right: root.right
+        anchors.rightMargin: 30
+
+        contentHeight: content.height
+        clip: true
+
+        ColumnLayout {
+            id: content
+            enabled: logic.pageEnabled
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
             CheckBoxType {
-        x: 30
+                Layout.fillWidth: true
-        y: 140
-        width: 211
-        height: 31
                 text: qsTr("Auto connect")
                 checked: AppSettingsLogic.checkBoxAutoConnectChecked
                 onCheckedChanged: {
@@ -29,10 +51,7 @@ PageBase {
                 }
             }
             CheckBoxType {
-        x: 30
+                Layout.fillWidth: true
-        y: 100
-        width: 211
-        height: 31
                 text: qsTr("Auto start")
                 checked: AppSettingsLogic.checkBoxAutostartChecked
                 onCheckedChanged: {
@@ -41,10 +60,7 @@ PageBase {
                 }
             }
             CheckBoxType {
-        x: 30
+                Layout.fillWidth: true
-        y: 180
-        width: 211
-        height: 31
                 text: qsTr("Start minimized")
                 checked: AppSettingsLogic.checkBoxStartMinimizedChecked
                 onCheckedChanged: {
@@ -53,36 +69,43 @@ PageBase {
                 }
             }
             LabelType {
-        x: 30
+                Layout.fillWidth: true
-        y: 240
+                Layout.topMargin: 15
-        width: 281
-        height: 21
                 text: AppSettingsLogic.labelVersionText
             }
             BlueButtonType {
-        x: 30
+                Layout.fillWidth: true
-        y: 280
+                Layout.preferredHeight: 41
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: parent.width - 40
-        height: 41
                 text: qsTr("Check for updates")
                 onClicked: {
                     Qt.openUrlExternally("https://github.com/amnezia-vpn/desktop-client/releases/latest")
                 }
             }
             BlueButtonType {
-        x: 30
+                Layout.fillWidth: true
-        y: 340
+                Layout.topMargin: 15
-        anchors.horizontalCenter: parent.horizontalCenter
+                Layout.preferredHeight: 41
-        width: parent.width - 40
-        height: 41
                 text: qsTr("Open logs folder")
                 onClicked: {
                     AppSettingsLogic.onPushButtonOpenLogsClicked()
                 }
             }
 
+            BlueButtonType {
+                Layout.fillWidth: true
+                Layout.topMargin: 15
+                Layout.preferredHeight: 41
+                text: qsTr("Export logs")
+                onClicked: {
+                    AppSettingsLogic.onPushButtonOpenLogsClicked()
+                }
+            }
+
+        }
+    }
+
     Logo {
+        id: logo
         anchors.bottom: parent.bottom
     }
 }

client/ui/qml/Pages/PageServerSettings.qml

@@ -28,7 +28,16 @@ PageBase {
         horizontalAlignment: Text.AlignHCenter
         text: ServerSettingsLogic.labelCurrentVpnProtocolText
     }
-    LabelType {
+//    LabelType {
+//        anchors.horizontalCenter: parent.horizontalCenter
+//        y: 120
+//        width: 341
+//        height: 31
+//        font.pixelSize: 20
+//        horizontalAlignment: Text.AlignHCenter
+//        text: ServerSettingsLogic.labelServerText
+//    }
+    TextFieldType {
         anchors.horizontalCenter: parent.horizontalCenter
         y: 120
         width: 341
@@ -36,7 +45,10 @@ PageBase {
         font.pixelSize: 20
         horizontalAlignment: Text.AlignHCenter
         text: ServerSettingsLogic.labelServerText
+        readOnly: true
+        background: Item {}
     }
+
     LabelType {
         anchors.horizontalCenter: parent.horizontalCenter
         y: 530

client/ui/qml/Pages/PageSetupWizard.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
 import PageEnum 1.0
 import "./"
 import "../Controls"
@@ -14,94 +15,100 @@ PageBase {
         id: back_from_setup_wizard
     }
     Caption {
+        id: caption
         text: qsTr("Setup your server to use VPN")
     }
-    Item {
+
-        x: 10
+    Flickable {
-        y: 70
+        id: fl
-        width: 361
+        width: root.width
-        height: 561
+        anchors.top: caption.bottom
-        LabelType {
+        anchors.topMargin: 20
-            horizontalAlignment: Text.AlignLeft
+        anchors.bottom: root.bottom
-            verticalAlignment: Text.AlignTop
+        anchors.bottomMargin: 20
-            text: qsTr("I'm living in country with high censorship level. Many of foreign web sites and VPNs blocked by my government. I want to setup reliable VPN, which is invisible for government.")
+        anchors.left: root.left
-            wrapMode: Text.Wrap
+        anchors.leftMargin: 30
-            x: 30
+        anchors.right: root.right
-            y: 40
+        anchors.rightMargin: 30
-            width: 321
+
-            height: 121
+        contentHeight: content.height
-        }
+        clip: true
-        LabelType {
+
-            horizontalAlignment: Text.AlignLeft
+        ColumnLayout {
-            verticalAlignment: Text.AlignTop
+            id: content
-            text: qsTr("I'm living in country with medium censorship level. Some web sites blocked by my government, but VPNs are not blocked at all. I want to setup flexible solution.")
+            enabled: logic.pageEnabled
-            wrapMode: Text.Wrap
+            anchors.top: parent.top
-            x: 30
+            anchors.left: parent.left
-            y: 210
+            anchors.right: parent.right
-            width: 321
+
-            height: 121
-        }
-        LabelType {
-            horizontalAlignment: Text.AlignLeft
-            verticalAlignment: Text.AlignTop
-            text: qsTr("I just want to improve my privacy in internet.")
-            wrapMode: Text.Wrap
-            x: 30
-            y: 360
-            width: 321
-            height: 121
-        }
-        BlueButtonType {
-            anchors.horizontalCenter: parent.horizontalCenter
-            y: 490
-            width: 321
-            height: 40
-            text: qsTr("Next")
-            onClicked: {
-                if (radioButton_setup_wizard_high.checked) {
-                    UiLogic.goToPage(PageEnum.WizardHigh);
-                } else if (radioButton_setup_wizard_medium.checked) {
-                    UiLogic.goToPage(PageEnum.WizardMedium);
-                } else if (radioButton_setup_wizard_low.checked) {
-                    UiLogic.goToPage(PageEnum.WizardLow);
-                }
-            }
-        }
             RadioButtonType {
                 id: radioButton_setup_wizard_high
-            x: 10
+                Layout.fillWidth: true
-            y: 10
-            width: 331
-            height: 25
                 text: qsTr("High censorship level")
                 checked: WizardLogic.radioButtonHighChecked
                 onCheckedChanged: {
                     WizardLogic.radioButtonHighChecked = checked
                 }
             }
+            LabelType {
+                Layout.fillWidth: true
+                Layout.leftMargin: 25
+                verticalAlignment: Text.AlignTop
+                text: qsTr("I'm living in a country with a high censorship level. Many of the foreign websites and VPNs are blocked by my government. I want to setup a reliable VPN, which can not be detected by my internet provider and my government.
+OpenVPN and ShadowSocks over Cloak (VPN obfuscation) profiles will be installed.\n")
+            }
+
+
             RadioButtonType {
                 id: radioButton_setup_wizard_medium
-            x: 10
+                Layout.fillWidth: true
-            y: 330
-            width: 331
-            height: 25
-            text: qsTr("Low censorship level")
-            checked: WizardLogic.radioButtonLowChecked
-            onCheckedChanged: {
-                WizardLogic.radioButtonLowChecked = checked
-            }
-        }
-        RadioButtonType {
-            id: radioButton_setup_wizard_low
-            x: 10
-            y: 180
-            width: 331
-            height: 25
                 text: qsTr("Medium censorship level")
                 checked: WizardLogic.radioButtonMediumChecked
                 onCheckedChanged: {
                     WizardLogic.radioButtonMediumChecked = checked
                 }
             }
+            LabelType {
+                Layout.fillWidth: true
+                Layout.leftMargin: 25
+                verticalAlignment: Text.AlignTop
+                text: qsTr("I'm living in a country with a medium censorship level. Some websites are blocked by my government, but VPNs are not blocked at all. I want to setup a flexible solution.
+OpenVPN over ShadowSocks profile will be installed.\n")
+            }
+
+
+            RadioButtonType {
+                id: radioButton_setup_wizard_low
+                Layout.fillWidth: true
+                text: qsTr("Low censorship level")
+                checked: WizardLogic.radioButtonLowChecked
+                onCheckedChanged: {
+                    WizardLogic.radioButtonLowChecked = checked
+                }
+            }
+            LabelType {
+                Layout.fillWidth: true
+                Layout.leftMargin: 25
+                verticalAlignment: Text.AlignTop
+                text: qsTr("I want to improve my privacy on the internet.
+OpenVPN profile will be installed.\n")
+            }
+
+
+            BlueButtonType {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 41
+                text: qsTr("Next")
+                onClicked: {
+                    if (radioButton_setup_wizard_high.checked) {
+                        UiLogic.goToPage(PageEnum.WizardHigh, false);
+                    } else if (radioButton_setup_wizard_medium.checked) {
+                        UiLogic.goToPage(PageEnum.WizardMedium, false);
+                    } else if (radioButton_setup_wizard_low.checked) {
+                        UiLogic.goToPage(PageEnum.WizardLow, false);
+                    }
+                }
+            }
+        }
     }
 }

client/ui/qml/Pages/PageSetupWizardHighLevel.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
 import PageEnum 1.0
 import "./"
 import "../Controls"
@@ -14,40 +15,50 @@ PageBase {
         id: back_from_setup_wizard
     }
     Caption {
+        id: caption
         text: qsTr("Setup Wizard")
     }
-    Item {
+
-        x: 10
+    Flickable {
-        y: 70
+        id: fl
-        width: 361
+        width: root.width
-        height: 561
+        anchors.top: caption.bottom
+        anchors.topMargin: 20
+        anchors.bottom: root.bottom
+        anchors.bottomMargin: 20
+        anchors.left: root.left
+        anchors.leftMargin: 30
+        anchors.right: root.right
+        anchors.rightMargin: 30
+
+        contentHeight: content.height
+        clip: true
+
+        ColumnLayout {
+            id: content
+            enabled: logic.pageEnabled
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
             LabelType {
-            x: 30
+                Layout.fillWidth: true
-            y: 10
+                verticalAlignment: Text.AlignTop
-            width: 321
+                text: qsTr("AmneziaVPN will install a VPN protocol which is not visible to your internet provider and government firewall. Your VPN connection will be seen by your internet provider as regular web traffic to a particular website.
-            height: 321
+
-            text: qsTr("AmneziaVPN will install VPN protocol which is not visible for your internet provider and government firewall. Your VPN connection will be detected by your provider as regular web traffic to particular web site.\n\nYou SHOULD set this web site address to some foreign web site which is updatesnot blocked by your internet provider. Other words you need to type below some foreign web site address which is accessible without VPN.\n\nPlease note, this protocol still does not support export connection profile to mobile devices. Keep for updates.")
+You SHOULD set this website address to some foreign website which is not blocked by your internet provider. In other words, you need to type some foreign website address which is accessible to you without a VPN.")
             }
+
             LabelType {
-            x: 30
+                Layout.fillWidth: true
-            y: 400
+                Layout.topMargin: 15
-            width: 321
+                verticalAlignment: Text.AlignTop
-            height: 71
+                text: qsTr("Type another web site address for masking or keep it by default. Your internet provider will think you working on this web site when you connected to VPN.")
-            text: qsTr("OpenVPN over Cloak (VPN obfuscation) profile will be installed")
-        }
-        LabelType {
-            x: 30
-            y: 330
-            width: 291
-            height: 21
-            text: qsTr("Type web site address for mask")
             }
+
             TextFieldType {
                 id: website_masking
-            x: 30
+                Layout.fillWidth: true
-            y: 360
-            width: 301
-            height: 41
                 text: WizardLogic.lineEditHighWebsiteMaskingText
                 onEditingFinished: {
                     let _text = website_masking.text
@@ -63,20 +74,31 @@ PageBase {
                     next_button.clicked()
                 }
             }
+
+            LabelType {
+                Layout.fillWidth: true
+                Layout.topMargin: 15
+                verticalAlignment: Text.AlignTop
+                text: qsTr("OpenVPN and ShadowSocks over Cloak (VPN obfuscation) profiles will be installed.
+
+This protocol support exporting connection profiles to mobile devices by exporting ShadowSocks and Cloak configs (you should launch the 3rd party open source VPN client - ShadowSocks VPN and install Cloak plugin).")
+            }
             BlueButtonType {
                 id: next_button
-            x: 30
+                Layout.fillWidth: true
-            y: 490
+                Layout.topMargin: 15
-            width: 301
+                Layout.preferredHeight: 41
-            height: 40
                 text: qsTr("Next")
                 onClicked: {
                     let domain = website_masking.text;
                     if (!domain || !domain.includes(".")) {
                         return
                     }
-                UiLogic.goToPage(PageEnum.WizardVpnMode)
+                    UiLogic.goToPage(PageEnum.WizardVpnMode, false)
                 }
             }
+
+        }
+
     }
 }

client/ui/qml/Pages/PageSetupWizardLowLevel.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
 import PageEnum 1.0
 import "./"
 import "../Controls"
@@ -14,39 +15,57 @@ PageBase {
         id: back_from_setup_wizard
     }
     Caption {
+        id: caption
         text: qsTr("Setup Wizard")
     }
-    Item {
+
-        x: 10
+    Flickable {
-        y: 70
+        id: fl
-        width: 361
+        width: root.width
-        height: 561
+        anchors.top: caption.bottom
+        anchors.topMargin: 20
+        anchors.bottom: root.bottom
+        anchors.bottomMargin: 20
+        anchors.left: root.left
+        anchors.leftMargin: 30
+        anchors.right: root.right
+        anchors.rightMargin: 30
+
+        contentHeight: content.height
+        clip: true
+
+        ColumnLayout {
+            id: content
+            enabled: logic.pageEnabled
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
             LabelType {
-            x: 30
+                Layout.fillWidth: true
-            y: 10
-            width: 321
-            height: 341
                 verticalAlignment: Text.AlignTop
-            text: qsTr('AmneziaVPN will install OpenVPN protocol with public/private key pairs generated on server and client sides. You can also configure connection on your mobile device by copying exported ".ovpn" file to your device and setting up official OpenVPN client. We recommend do not use messengers for sending connection profile - it contains VPN private keys.')
+                text: qsTr('AmneziaVPN will install the OpenVPN protocol with public/private key pairs generated on both server and client sides.
+
+You can also configure the connection on your mobile device by copying the exported ".ovpn" file to your device, and setting up the official OpenVPN client.
+
+We recommend not to use messaging applications for sending the connection profile - it contains VPN private keys.')
             }
             LabelType {
-            x: 30
+                Layout.fillWidth: true
-            y: 400
+                Layout.topMargin: 15
-            width: 321
-            height: 71
                 text: qsTr('OpenVPN profile will be installed')
                 verticalAlignment: Text.AlignBottom
             }
             BlueButtonType {
                 id: next_button
-            x: 30
+                Layout.fillWidth: true
-            y: 490
+                Layout.topMargin: 15
-            width: 301
+                Layout.preferredHeight: 41
-            height: 40
                 text: qsTr("Start configuring")
                 onClicked: {
                     WizardLogic.onPushButtonLowFinishClicked()
                 }
             }
         }
+    }
 }

client/ui/qml/Pages/PageSetupWizardMediumLevel.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
 import PageEnum 1.0
 import "./"
 import "../Controls"
@@ -14,38 +15,51 @@ PageBase {
         id: back_from_setup_wizard
     }
     Caption {
+        id: caption
         text: qsTr("Setup Wizard")
     }
-    Item {
+
-        x: 10
+    Flickable {
-        y: 70
+        id: fl
-        width: 361
+        width: root.width
-        height: 561
+        anchors.top: caption.bottom
+        anchors.topMargin: 20
+        anchors.bottom: root.bottom
+        anchors.bottomMargin: 20
+        anchors.left: root.left
+        anchors.leftMargin: 30
+        anchors.right: root.right
+        anchors.rightMargin: 30
+
+        contentHeight: content.height
+        clip: true
+
+        ColumnLayout {
+            id: content
+            enabled: logic.pageEnabled
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
             LabelType {
-            x: 30
+                Layout.fillWidth: true
-            y: 10
-            width: 321
-            height: 341
                 verticalAlignment: Text.AlignTop
-            text: qsTr('AmneziaVPN will install VPN protocol which is difficult to detect by your internet provider and government firewall (but possible). In most cases, this is the most suitable protocol. This protocol is faster compared to the VPN protocols with "web traffic masking".\n\nThis protocol support export connection profile to mobile devices using QR code (you should launch 3rd party opensource VPN client - ShadowSocks VPN).')
+                text: qsTr('AmneziaVPN will install a VPN protocol which is difficult to detect by your internet provider and government firewall (but possible). In most cases, this is the most suitable protocol. This protocol is faster compared to the VPN protocols with "VPN masking".\n\nThis protocol supports exporting connection profiles to mobile devices by using QR codes (you should launch the 3rd party open source VPN client - ShadowSocks VPN).')
             }
             LabelType {
-            x: 30
+                Layout.fillWidth: true
-            y: 400
+                Layout.topMargin: 15
-            width: 321
-            height: 71
                 text: qsTr('OpenVPN over ShadowSocks profile will be installed')
-            verticalAlignment: Text.AlignBottom
             }
             BlueButtonType {
                 id: next_button
-            x: 30
+                Layout.fillWidth: true
-            y: 490
+                Layout.topMargin: 15
-            width: 301
+                Layout.preferredHeight: 41
-            height: 40
                 text: qsTr("Next")
                 onClicked: {
-                UiLogic.goToPage(PageEnum.WizardVpnMode)
+                    UiLogic.goToPage(PageEnum.WizardVpnMode, false)
+                }
             }
         }
     }

client/ui/qml/Pages/PageSetupWizardVPNMode.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.15
 import PageEnum 1.0
 import "./"
 import "../Controls"
@@ -14,41 +15,58 @@ PageBase {
         id: back_from_setup_wizard
     }
     Caption {
+        id: caption
         text: qsTr("Setup Wizard")
     }
-    Item {
+
-        x: 10
+    Flickable {
-        y: 70
+        id: fl
-        width: 361
+        width: root.width
-        height: 561
+        anchors.top: caption.bottom
+        anchors.topMargin: 20
+        anchors.bottom: root.bottom
+        anchors.bottomMargin: 20
+        anchors.left: root.left
+        anchors.leftMargin: 30
+        anchors.right: root.right
+        anchors.rightMargin: 30
+
+        contentHeight: content.height
+        clip: true
+
+        ColumnLayout {
+            id: content
+            enabled: logic.pageEnabled
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            LabelType {
+                Layout.fillWidth: true
+                verticalAlignment: Text.AlignTop
+                text: qsTr('Optional.\n
+You can enable VPN mode "For selected sites" and add blocked sites you need to visit manually. If you will choose this option, you will need add every bloked site you want to visit to the access list. You may switch between modes later.\n\nPlease note, you should add addresses to the list after VPN connection established. You may add any domain, URL or IP address, it will be resolved to IP address.')
+            }
+
             CheckBoxType {
-            x: 30
+                Layout.fillWidth: true
-            y: 350
-            width: 301
-            height: 71
                 text: qsTr('Turn on mode "VPN for selected sites"')
                 checked: WizardLogic.checkBoxVpnModeChecked
                 onCheckedChanged: {
                     WizardLogic.checkBoxVpnModeChecked = checked
                 }
             }
-        LabelType {
+
-            x: 30
-            y: 10
-            width: 321
-            height: 341
-            text: qsTr('Optional.\n\nWe recommend to enable VPN mode "For selected sites" and add blocked sites you need to visit manually. If you will choose this option, you will need add every bloked site you want to visit to the access list. You may switch between modes later.\n\nPlease note, you should add addresses to the list after VPN connection established. You may add any domain, URL or IP address, it will be resolved to IP address.')
-        }
             BlueButtonType {
                 id: vpn_mode_finish
-            x: 30
+                Layout.fillWidth: true
-            y: 490
+                Layout.topMargin: 15
-            width: 301
+                Layout.preferredHeight: 41
-            height: 40
                 text: qsTr("Start configuring")
                 onClicked: {
                     WizardLogic.onPushButtonVpnModeFinishClicked()
                 }
             }
         }
+    }
 }

client/ui/qml/Pages/PageVPN.qml

@@ -22,7 +22,7 @@ PageBase {
 
     LabelType {
         x: 10
-        y: 5
+        y: 10
         width: 100
         height: 21
         text: VpnLogic.labelVersionText
@@ -30,6 +30,33 @@ PageBase {
         font.pixelSize: 12
     }
 
+    BasicButtonType {
+        y: 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: 21
+        background: Item {}
+
+
+        contentItem: Text {
+            anchors.fill: parent
+            font.family: "Lato"
+            font.styleName: "normal"
+            font.pixelSize: 18
+            font.underline: true
+
+            text: qsTr("Donate")
+            color: "#D4D4D4"
+
+
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        onClicked: {
+            UiLogic.goToPage(PageEnum.About)
+        }
+    }
+
     ImageButtonType {
         x: parent.width - 40
         y: 10

client/ui/qml/Pages/Protocols/PageProtoSftp.qml

@@ -77,24 +77,12 @@ PageProtocolBase {
         }
     }
 
-    LabelType {
+    RichLabelType {
         anchors.bottom: check_persist.top
         anchors.bottomMargin: 10
         width: parent.width - 60
         x: 30
         font.pixelSize: 14
-        textFormat: Text.RichText
-
-        MouseArea {
-            anchors.fill: parent
-            cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
-            acceptedButtons: Qt.NoButton
-        }
-
-//        text: "In order to mount remote SFTP folder as local drive, perform following steps:
-//- Install the latest version of WinFsp [https://github.com/billziss-gh/winfsp/releases/latest].
-//- Install the latest version of SSHFS-Win. Choose the x64 or x86 installer according to your computer's architecture [https://github.com/billziss-gh/sshfs-win/releases]"
-        onLinkActivated: Qt.openUrlExternally(link)
 
         readonly property string windows_text: "In order to mount remote SFTP folder as local drive, perform following steps:
 <ul>