Vpn and wizard pages fixes

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,69 +15,90 @@ PageBase {
         id: back_from_setup_wizard
     }
     Caption {
+        id: caption
         text: qsTr("Setup Wizard")
     }
-    Item {
-        x: 10
-        y: 70
-        width: 361
-        height: 561
-        LabelType {
-            x: 30
-            y: 10
-            width: 321
-            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.")
-        }
-        LabelType {
-            x: 30
-            y: 400
-            width: 321
-            height: 71
-            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
-            y: 360
-            width: 301
-            height: 41
-            text: WizardLogic.lineEditHighWebsiteMaskingText
-            onEditingFinished: {
-                let _text = website_masking.text
-                _text.replace("http://", "");
-                _text.replace("https://", "");
-                if (!_text) {
-                    return
+
+    Flickable {
+        id: fl
+        width: root.width
+        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("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.
+
+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 {
+                Layout.fillWidth: true
+                Layout.topMargin: 15
+                verticalAlignment: Text.AlignTop
+                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.")
+            }
+
+            TextFieldType {
+                id: website_masking
+                Layout.fillWidth: true
+                text: WizardLogic.lineEditHighWebsiteMaskingText
+                onEditingFinished: {
+                    let _text = website_masking.text
+                    _text.replace("http://", "");
+                    _text.replace("https://", "");
+                    if (!_text) {
+                        return
+                    }
+                    _text = _text.split("/").first();
+                    WizardLogic.lineEditHighWebsiteMaskingText = _text
                 }
-                _text = _text.split("/").first();
-                WizardLogic.lineEditHighWebsiteMaskingText = _text
-            }
-            onAccepted: {
-                next_button.clicked()
-            }
-        }
-        BlueButtonType {
-            id: next_button
-            x: 30
-            y: 490
-            width: 301
-            height: 40
-            text: qsTr("Next")
-            onClicked: {
-                let domain = website_masking.text;
-                if (!domain || !domain.includes(".")) {
-                    return
+                onAccepted: {
+                    next_button.clicked()
                 }
-                UiLogic.goToPage(PageEnum.WizardVpnMode)
             }
+
+            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
+                Layout.fillWidth: true
+                Layout.topMargin: 15
+                Layout.preferredHeight: 41
+                text: qsTr("Next")
+                onClicked: {
+                    let domain = website_masking.text;
+                    if (!domain || !domain.includes(".")) {
+                        return
+                    }
+                    UiLogic.goToPage(PageEnum.WizardVpnMode, false)
+                }
+            }
+
         }
+
     }
 }