refactor OpenVpnConfigModel to use QObject instead of QAbstractListModel

client/ui/models/protocols/openvpnConfigModel.cpp

@@ -2,72 +2,128 @@
 
 #include "protocols/protocols_defs.h"
 
-OpenVpnConfigModel::OpenVpnConfigModel(QObject *parent) : QAbstractListModel(parent)
+OpenVpnConfigModel::OpenVpnConfigModel(QObject *parent)
+    : QObject(parent)
 {
 }
 
-int OpenVpnConfigModel::rowCount(const QModelIndex &parent) const
+QString OpenVpnConfigModel::subnetAddress() const
 {
-    Q_UNUSED(parent);
+    return m_protocolConfig.value(amnezia::config_key::subnet_address).toString(amnezia::protocols::openvpn::defaultSubnetAddress);
-    return 1;
 }
 
-bool OpenVpnConfigModel::setData(const QModelIndex &index, const QVariant &value, int role)
+void OpenVpnConfigModel::setSubnetAddress(const QString &subnetAddress)
 {
-    if (!index.isValid() || index.row() < 0 || index.row() >= ContainerProps::allContainers().size()) {
+    m_protocolConfig.insert(amnezia::config_key::subnet_address, subnetAddress);
-        return false;
-    }
-
-    switch (role) {
-    case Roles::SubnetAddressRole: m_protocolConfig.insert(amnezia::config_key::subnet_address, value.toString()); break;
-    case Roles::TransportProtoRole: m_protocolConfig.insert(config_key::transport_proto, value.toString()); break;
-    case Roles::PortRole: m_protocolConfig.insert(config_key::port, value.toString()); break;
-    case Roles::AutoNegotiateEncryprionRole: m_protocolConfig.insert(config_key::ncp_disable, !value.toBool()); break;
-    case Roles::HashRole: m_protocolConfig.insert(config_key::hash, value.toString()); break;
-    case Roles::CipherRole: m_protocolConfig.insert(config_key::cipher, value.toString()); break;
-    case Roles::TlsAuthRole: m_protocolConfig.insert(config_key::tls_auth, value.toBool()); break;
-    case Roles::BlockDnsRole: m_protocolConfig.insert(config_key::block_outside_dns, value.toBool()); break;
-    case Roles::AdditionalClientCommandsRole: m_protocolConfig.insert(config_key::additional_client_config, value.toString()); break;
-    case Roles::AdditionalServerCommandsRole: m_protocolConfig.insert(config_key::additional_server_config, value.toString()); break;
-    }
-
-    emit dataChanged(index, index, QList { role });
-    return true;
 }
 
-QVariant OpenVpnConfigModel::data(const QModelIndex &index, int role) const
+QString OpenVpnConfigModel::transportProto() const
 {
-    if (!index.isValid() || index.row() < 0 || index.row() >= rowCount()) {
+    return m_protocolConfig.value(config_key::transport_proto).toString(protocols::openvpn::defaultTransportProto);
-        return false;
+}
-    }
 
-    switch (role) {
+void OpenVpnConfigModel::setTransportProto(const QString &transportProto)
-    case Roles::SubnetAddressRole:
+{
-        return m_protocolConfig.value(amnezia::config_key::subnet_address).toString(amnezia::protocols::openvpn::defaultSubnetAddress);
+    m_protocolConfig.insert(config_key::transport_proto, transportProto);
-    case Roles::TransportProtoRole:
+}
-        return m_protocolConfig.value(config_key::transport_proto).toString(protocols::openvpn::defaultTransportProto);
+
-    case Roles::PortRole: return m_protocolConfig.value(config_key::port).toString(protocols::openvpn::defaultPort);
+QString OpenVpnConfigModel::port() const
-    case Roles::AutoNegotiateEncryprionRole:
+{
-        return !m_protocolConfig.value(config_key::ncp_disable).toBool(protocols::openvpn::defaultNcpDisable);
+    return m_protocolConfig.value(config_key::port).toString(protocols::openvpn::defaultPort);
-    case Roles::HashRole: return m_protocolConfig.value(config_key::hash).toString(protocols::openvpn::defaultHash);
+}
-    case Roles::CipherRole: return m_protocolConfig.value(config_key::cipher).toString(protocols::openvpn::defaultCipher);
+
-    case Roles::TlsAuthRole: return m_protocolConfig.value(config_key::tls_auth).toBool(protocols::openvpn::defaultTlsAuth);
+void OpenVpnConfigModel::setPort(const QString &port)
-    case Roles::BlockDnsRole:
+{
-        return m_protocolConfig.value(config_key::block_outside_dns).toBool(protocols::openvpn::defaultBlockOutsideDns);
+    m_protocolConfig.insert(config_key::port, port);
-    case Roles::AdditionalClientCommandsRole:
+}
-        return m_protocolConfig.value(config_key::additional_client_config).toString(protocols::openvpn::defaultAdditionalClientConfig);
+
-    case Roles::AdditionalServerCommandsRole:
+bool OpenVpnConfigModel::autoNegotiateEncryption() const
-        return m_protocolConfig.value(config_key::additional_server_config).toString(protocols::openvpn::defaultAdditionalServerConfig);
+{
-    case Roles::IsPortEditable: return m_container == DockerContainer::OpenVpn ? true : false;
+    return !m_protocolConfig.value(config_key::ncp_disable).toBool(protocols::openvpn::defaultNcpDisable);
-    case Roles::IsTransportProtoEditable: return m_container == DockerContainer::OpenVpn ? true : false;
+}
-    case Roles::HasRemoveButton: return m_container == DockerContainer::OpenVpn ? true : false;
+
-    }
+void OpenVpnConfigModel::setAutoNegotiateEncryption(bool enabled)
-    return QVariant();
+{
+    m_protocolConfig.insert(config_key::ncp_disable, !enabled);
+}
+
+QString OpenVpnConfigModel::hash() const
+{
+    return m_protocolConfig.value(config_key::hash).toString(protocols::openvpn::defaultHash);
+}
+
+void OpenVpnConfigModel::setHash(const QString &hash)
+{
+    m_protocolConfig.insert(config_key::hash, hash);
+}
+
+QString OpenVpnConfigModel::cipher() const
+{
+    return m_protocolConfig.value(config_key::cipher).toString(protocols::openvpn::defaultCipher);
+}
+
+void OpenVpnConfigModel::setCipher(const QString &cipher)
+{
+    m_protocolConfig.insert(config_key::cipher, cipher);
+}
+
+bool OpenVpnConfigModel::tlsAuth() const
+{
+    return m_protocolConfig.value(config_key::tls_auth).toBool(protocols::openvpn::defaultTlsAuth);
+}
+
+void OpenVpnConfigModel::setTlsAuth(bool enabled)
+{
+    m_protocolConfig.insert(config_key::tls_auth, enabled);
+}
+
+bool OpenVpnConfigModel::blockDns() const
+{
+    return m_protocolConfig.value(config_key::block_outside_dns).toBool(protocols::openvpn::defaultBlockOutsideDns);
+}
+
+void OpenVpnConfigModel::setBlockDns(bool enabled)
+{
+    m_protocolConfig.insert(config_key::block_outside_dns, enabled);
+}
+
+QString OpenVpnConfigModel::additionalClientCommands() const
+{
+    return m_protocolConfig.value(config_key::additional_client_config).toString(protocols::openvpn::defaultAdditionalClientConfig);
+}
+
+void OpenVpnConfigModel::setAdditionalClientCommands(const QString &commands)
+{
+    m_protocolConfig.insert(config_key::additional_client_config, commands);
+}
+
+QString OpenVpnConfigModel::additionalServerCommands() const
+{
+    return m_protocolConfig.value(config_key::additional_server_config).toString(protocols::openvpn::defaultAdditionalServerConfig);
+}
+
+void OpenVpnConfigModel::setAdditionalServerCommands(const QString &commands)
+{
+    m_protocolConfig.insert(config_key::additional_server_config, commands);
+}
+
+bool OpenVpnConfigModel::isPortEditable() const
+{
+    return m_container == DockerContainer::OpenVpn;
+}
+
+bool OpenVpnConfigModel::isTransportProtoEditable() const
+{
+    return m_container == DockerContainer::OpenVpn;
+}
+
+bool OpenVpnConfigModel::hasRemoveButton() const
+{
+    return m_container == DockerContainer::OpenVpn;
 }
 
 void OpenVpnConfigModel::updateModel(const QJsonObject &config)
 {
-    beginResetModel();
     m_container = ContainerProps::containerFromString(config.value(config_key::container).toString());
 
     m_fullConfig = config;
@@ -100,8 +156,6 @@ void OpenVpnConfigModel::updateModel(const QJsonObject &config)
     m_protocolConfig.insert(
             config_key::additional_server_config,
             protocolConfig.value(config_key::additional_server_config).toString(protocols::openvpn::defaultAdditionalServerConfig));
-
-    endResetModel();
 }
 
 QJsonObject OpenVpnConfigModel::getConfig()
@@ -109,26 +163,3 @@ QJsonObject OpenVpnConfigModel::getConfig()
     m_fullConfig.insert(config_key::openvpn, m_protocolConfig);
     return m_fullConfig;
 }
-
-QHash<int, QByteArray> OpenVpnConfigModel::roleNames() const
-{
-    QHash<int, QByteArray> roles;
-
-    roles[SubnetAddressRole] = "subnetAddress";
-    roles[TransportProtoRole] = "transportProto";
-    roles[PortRole] = "port";
-    roles[AutoNegotiateEncryprionRole] = "autoNegotiateEncryprion";
-    roles[HashRole] = "hash";
-    roles[CipherRole] = "cipher";
-    roles[TlsAuthRole] = "tlsAuth";
-    roles[BlockDnsRole] = "blockDns";
-    roles[AdditionalClientCommandsRole] = "additionalClientCommands";
-    roles[AdditionalServerCommandsRole] = "additionalServerCommands";
-
-    roles[IsPortEditable] = "isPortEditable";
-    roles[IsTransportProtoEditable] = "isTransportProtoEditable";
-
-    roles[HasRemoveButton] = "hasRemoveButton";
-
-    return roles;
-}

client/ui/models/protocols/openvpnConfigModel.h

@@ -1,47 +1,90 @@
 #ifndef OPENVPNCONFIGMODEL_H
 #define OPENVPNCONFIGMODEL_H
 
-#include <QAbstractListModel>
+#include <QObject>
 #include <QJsonObject>
 
 #include "containers/containers_defs.h"
 
-class OpenVpnConfigModel : public QAbstractListModel
+class OpenVpnConfigModel : public QObject
 {
     Q_OBJECT
+    Q_PROPERTY(QString subnetAddress READ subnetAddress WRITE setSubnetAddress NOTIFY subnetAddressChanged)
+    Q_PROPERTY(QString transportProto READ transportProto WRITE setTransportProto NOTIFY transportProtoChanged)
+    Q_PROPERTY(QString port READ port WRITE setPort NOTIFY portChanged)
+    Q_PROPERTY(bool autoNegotiateEncryption READ autoNegotiateEncryption WRITE setAutoNegotiateEncryption NOTIFY autoNegotiateEncryptionChanged)
+    Q_PROPERTY(QString hash READ hash WRITE setHash NOTIFY hashChanged)
+    Q_PROPERTY(QString cipher READ cipher WRITE setCipher NOTIFY cipherChanged)
+    Q_PROPERTY(bool tlsAuth READ tlsAuth WRITE setTlsAuth NOTIFY tlsAuthChanged)
+    Q_PROPERTY(bool blockDns READ blockDns WRITE setBlockDns NOTIFY blockDnsChanged)
+    Q_PROPERTY(QString additionalClientCommands READ additionalClientCommands WRITE setAdditionalClientCommands NOTIFY additionalClientCommandsChanged)
+    Q_PROPERTY(QString additionalServerCommands READ additionalServerCommands WRITE setAdditionalServerCommands NOTIFY additionalServerCommandsChanged)
+    Q_PROPERTY(bool isPortEditable READ isPortEditable NOTIFY isPortEditableChanged)
+    Q_PROPERTY(bool isTransportProtoEditable READ isTransportProtoEditable NOTIFY isTransportProtoEditableChanged)
+    Q_PROPERTY(bool hasRemoveButton READ hasRemoveButton NOTIFY hasRemoveButtonChanged)
 
 public:
-    enum Roles {
-        SubnetAddressRole = Qt::UserRole + 1,
-        TransportProtoRole,
-        PortRole,
-        AutoNegotiateEncryprionRole,
-        HashRole,
-        CipherRole,
-        TlsAuthRole,
-        BlockDnsRole,
-        AdditionalClientCommandsRole,
-        AdditionalServerCommandsRole,
-
-        IsPortEditable,
-        IsTransportProtoEditable,
-
-        HasRemoveButton
-    };
-
     explicit OpenVpnConfigModel(QObject *parent = nullptr);
+    ~OpenVpnConfigModel() override = default;
 
-    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
+    OpenVpnConfigModel(const OpenVpnConfigModel &) = delete;
+    OpenVpnConfigModel &operator=(const OpenVpnConfigModel &) = delete;
+    OpenVpnConfigModel(OpenVpnConfigModel &&) = delete;
+    OpenVpnConfigModel &operator=(OpenVpnConfigModel &&) = delete;
 
-    bool setData(const QModelIndex &index, const QVariant &value, int role) override;
+    QString subnetAddress() const;
-    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
+    void setSubnetAddress(const QString &subnetAddress);
+
+    QString transportProto() const;
+    void setTransportProto(const QString &transportProto);
+
+    QString port() const;
+    void setPort(const QString &port);
+
+    bool autoNegotiateEncryption() const;
+    void setAutoNegotiateEncryption(bool enabled);
+
+    QString hash() const;
+    void setHash(const QString &hash);
+
+    QString cipher() const;
+    void setCipher(const QString &cipher);
+
+    bool tlsAuth() const;
+    void setTlsAuth(bool enabled);
+
+    bool blockDns() const;
+    void setBlockDns(bool enabled);
+
+    QString additionalClientCommands() const;
+    void setAdditionalClientCommands(const QString &commands);
+    
+    QString additionalServerCommands() const;
+    void setAdditionalServerCommands(const QString &commands);
+
+    bool isPortEditable() const;
+    bool isTransportProtoEditable() const;
+    bool hasRemoveButton() const;
+
+    Q_INVOKABLE QJsonObject getConfig();
+
+signals:
+    void subnetAddressChanged(const QString &);
+    void transportProtoChanged(const QString &);
+    void portChanged(const QString &);
+    void autoNegotiateEncryptionChanged(bool);
+    void hashChanged(const QString &);
+    void cipherChanged(const QString &);
+    void tlsAuthChanged(bool);
+    void blockDnsChanged(bool);
+    void additionalClientCommandsChanged(const QString &);
+    void additionalServerCommandsChanged(const QString &);
+    void isPortEditableChanged(bool);
+    void isTransportProtoEditableChanged(bool);
+    void hasRemoveButtonChanged(bool);
 
 public slots:
     void updateModel(const QJsonObject &config);
-    QJsonObject getConfig();
-
-protected:
-    QHash<int, QByteArray> roleNames() const override;
 
 private:
     DockerContainer m_container;

client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml

@@ -17,420 +17,182 @@ import "../Components"
 PageType {
     id: root
 
-    ColumnLayout {
+    BackButtonType {
-        id: backButtonLayout
+        id: backButton
 
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-
         anchors.topMargin: 20
 
-        BackButtonType {
+        onFocusChanged: {
-            id: backButton
+            if (this.activeFocus) {
+                listView.positionViewAtBeginning()
+            }
         }
     }
 
-    FlickableType {
+    ListViewType {
-        id: fl
+        id: listView
-        anchors.top: backButtonLayout.bottom
+
+        anchors.top: backButton.bottom
         anchors.bottom: parent.bottom
-        contentHeight: content.implicitHeight
+        anchors.right: parent.right
+        anchors.left: parent.left
 
-        Column {
+        enabled: ServersModel.isProcessedServerHasWriteAccess()
-            id: content
 
-            anchors.top: parent.top
+        model: OpenVpnConfigModel
-            anchors.left: parent.left
-            anchors.right: parent.right
 
-            enabled: ServersModel.isProcessedServerHasWriteAccess()
+        delegate: ColumnLayout {
+            width: listView.width
+
+            property alias vpnAddressSubnetTextField: vpnAddressSubnetTextField
+
+            spacing: 0
+
+            BaseHeaderType {
+                Layout.fillWidth: true
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                headerText: qsTr("OpenVPN settings")
+            }
+
+            TextFieldWithHeaderType {
+                id: vpnAddressSubnetTextField
+
+                Layout.fillWidth: true
+                Layout.topMargin: 32
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
 
-            ListView {
+                headerText: qsTr("VPN address subnet")
-                id: listview
+                textField.text: subnetAddress
 
-                width: parent.width
+                textField.onEditingFinished: {
-                height: listview.contentItem.height
+                    if (textField.text !== subnetAddress) {
-
+                        subnetAddress = textField.text
-                clip: true
+                    }
-                interactive: false
+                }
-
+            }
-                model: OpenVpnConfigModel             
+
-
+            ParagraphTextType {
-                delegate: Item {
+                Layout.fillWidth: true
-                    id: delegateItem
+                Layout.topMargin: 32
-
+                Layout.leftMargin: 16
-                    property alias vpnAddressSubnetTextField: vpnAddressSubnetTextField
+                Layout.rightMargin: 16
-                    property bool isEnabled: ServersModel.isProcessedServerHasWriteAccess()
+
-
+                text: qsTr("Network protocol")
-                    implicitWidth: listview.width
+            }
-                    implicitHeight: col.implicitHeight
+
-
+            TransportProtoSelector {
-                    ColumnLayout {
+                id: transportProtoSelector
-                        id: col
+                Layout.fillWidth: true
-
+                Layout.topMargin: 16
-                        anchors.top: parent.top
+                Layout.leftMargin: 16
-                        anchors.left: parent.left
+                Layout.rightMargin: 16
-                        anchors.right: parent.right
+                rootWidth: root.width
-
+
-                        anchors.leftMargin: 16
+                enabled: isTransportProtoEditable
-                        anchors.rightMargin: 16
+
-
+                currentIndex: {
-                        spacing: 0
+                    return transportProto === "tcp" ? 1 : 0
-
+                }
-                        BaseHeaderType {
+
-                            Layout.fillWidth: true
+                onCurrentIndexChanged: {
-                            headerText: qsTr("OpenVPN settings")
+                    if (transportProto === "tcp" && currentIndex === 0) {
-                        }
+                        transportProto = "udp"
-
+                    } else if (transportProto === "udp" && currentIndex === 1) {
-                        TextFieldWithHeaderType {
+                        transportProto = "tcp"
-                            id: vpnAddressSubnetTextField
+                    }
-
+                }
-                            Layout.fillWidth: true
+            }
-                            Layout.topMargin: 32
+
-
+            TextFieldWithHeaderType {
-                            enabled: delegateItem.isEnabled
+                id: portTextField
-
+
-                            headerText: qsTr("VPN address subnet")
+                Layout.fillWidth: true
-                            textField.text: subnetAddress
+                Layout.topMargin: 40
-
+                Layout.leftMargin: 16
-                            parentFlickable: fl
+                Layout.rightMargin: 16
-
+
-                            textField.onEditingFinished: {
+                enabled: listView.enabled
-                                if (textField.text !== subnetAddress) {
+
-                                    subnetAddress = textField.text
+                headerText: qsTr("Port")
-                                }
+                textField.text: port
-                            }
+                textField.maximumLength: 5
-
+                textField.validator: IntValidator { bottom: 1; top: 65535 }
-                            checkEmptyText: true
+
-                        }
+                textField.onEditingFinished: {
-
+                    if (textField.text !== port) {
-                        ParagraphTextType {
+                        port = textField.text
-                            Layout.fillWidth: true
+                    }
-                            Layout.topMargin: 32
+                }
-
+            }
-                            text: qsTr("Network protocol")
+
-                        }
+            SwitcherType {
-
+                id: autoNegotiateEncryprionSwitcher
-                        TransportProtoSelector {
+
-                            id: transportProtoSelector
+                Layout.fillWidth: true
-                            Layout.fillWidth: true
+                Layout.topMargin: 24
-                            Layout.topMargin: 16
+                Layout.leftMargin: 16
-                            rootWidth: root.width
+                Layout.rightMargin: 16
-
+
-                            enabled: isTransportProtoEditable
+                text: qsTr("Auto-negotiate encryption")
-
+                checked: autoNegotiateEncryprion
-                            currentIndex: {
+
-                                return transportProto === "tcp" ? 1 : 0
+                onCheckedChanged: {
-                            }
+                    if (checked !== autoNegotiateEncryprion) {
-
+                        autoNegotiateEncryprion = checked
-                            onCurrentIndexChanged: {
+                    }
-                                if (transportProto === "tcp" && currentIndex === 0) {
+                }
-                                    transportProto = "udp"
+            }
-                                } else if (transportProto === "udp" && currentIndex === 1) {
+
-                                    transportProto = "tcp"
+            DropDownType {
-                                }
+                id: hashDropDown
-                            }
+                Layout.fillWidth: true
-                        }
+                Layout.topMargin: 20
-
+                Layout.leftMargin: 16
-                        TextFieldWithHeaderType {
+                Layout.rightMargin: 16
-                            id: portTextField
+
-
+                enabled: !autoNegotiateEncryprionSwitcher.checked
-                            Layout.fillWidth: true
+
-                            Layout.topMargin: 40
+                descriptionText: qsTr("Hash")
-                            parentFlickable: fl
+                headerText: qsTr("Hash")
-
+
-                            enabled: delegateItem.isEnabled
+                drawerParent: root
-
+
-                            headerText: qsTr("Port")
+                listView: ListViewWithRadioButtonType {
-                            textField.text: port
+                    id: hashListView
-                            textField.maximumLength: 5
+
-                            textField.validator: IntValidator { bottom: 1; top: 65535 }
+                    rootWidth: root.width
-
+
-                            textField.onEditingFinished: {
+                    model: ListModel {
-                                if (textField.text !== port) {
+                        ListElement { name : qsTr("SHA512") }
-                                    port = textField.text
+                        ListElement { name : qsTr("SHA384") }
-                                }
+                        ListElement { name : qsTr("SHA256") }
-                            }
+                        ListElement { name : qsTr("SHA3-512") }
-
+                        ListElement { name : qsTr("SHA3-384") }
-                            checkEmptyText: true
+                        ListElement { name : qsTr("SHA3-256") }
-                        }
+                        ListElement { name : qsTr("whirlpool") }
-
+                        ListElement { name : qsTr("BLAKE2b512") }
-                        SwitcherType {
+                        ListElement { name : qsTr("BLAKE2s256") }
-                            id: autoNegotiateEncryprionSwitcher
+                        ListElement { name : qsTr("SHA1") }
-
+                    }
-                            Layout.fillWidth: true
+
-                            Layout.topMargin: 24
+                    clickedFunction: function() {
-                            parentFlickable: fl
+                        hashDropDown.text = selectedText
-
+                        hash = hashDropDown.text
-                            text: qsTr("Auto-negotiate encryption")
+                        hashDropDown.closeTriggered()
-                            checked: autoNegotiateEncryprion
+                    }
-
+
-                            onCheckedChanged: {
+                    Component.onCompleted: {
-                                if (checked !== autoNegotiateEncryprion) {
+                        hashDropDown.text = hash
-                                    autoNegotiateEncryprion = checked
+
-                                }
+                        for (var i = 0; i < hashListView.model.count; i++) {
-                            }
+                            if (hashListView.model.get(i).name === hashDropDown.text) {
-                        }
+                                currentIndex = i
-
-                        DropDownType {
-                            id: hashDropDown
-                            Layout.fillWidth: true
-                            Layout.topMargin: 20
-
-                            enabled: !autoNegotiateEncryprionSwitcher.checked
-
-                            descriptionText: qsTr("Hash")
-                            headerText: qsTr("Hash")
-
-                            drawerParent: root
-
-                            listView: ListViewWithRadioButtonType {
-                                id: hashListView
-
-                                rootWidth: root.width
-
-                                model: ListModel {
-                                    ListElement { name : qsTr("SHA512") }
-                                    ListElement { name : qsTr("SHA384") }
-                                    ListElement { name : qsTr("SHA256") }
-                                    ListElement { name : qsTr("SHA3-512") }
-                                    ListElement { name : qsTr("SHA3-384") }
-                                    ListElement { name : qsTr("SHA3-256") }
-                                    ListElement { name : qsTr("whirlpool") }
-                                    ListElement { name : qsTr("BLAKE2b512") }
-                                    ListElement { name : qsTr("BLAKE2s256") }
-                                    ListElement { name : qsTr("SHA1") }
-                                }
-
-                                clickedFunction: function() {
-                                    hashDropDown.text = selectedText
-                                    hash = hashDropDown.text
-                                    hashDropDown.closeTriggered()
-                                }
-
-                                Component.onCompleted: {
-                                    hashDropDown.text = hash
-
-                                    for (var i = 0; i < hashListView.model.count; i++) {
-                                        if (hashListView.model.get(i).name === hashDropDown.text) {
-                                            currentIndex = i
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        DropDownType {
-                            id: cipherDropDown
-                            Layout.fillWidth: true
-                            Layout.topMargin: 16
-
-                            enabled: !autoNegotiateEncryprionSwitcher.checked
-
-                            descriptionText: qsTr("Cipher")
-                            headerText: qsTr("Cipher")
-
-                            drawerParent: root
-
-                            listView: ListViewWithRadioButtonType {
-                                id: cipherListView
-
-                                rootWidth: root.width
-
-                                model: ListModel {
-                                    ListElement { name : qsTr("AES-256-GCM") }
-                                    ListElement { name : qsTr("AES-192-GCM") }
-                                    ListElement { name : qsTr("AES-128-GCM") }
-                                    ListElement { name : qsTr("AES-256-CBC") }
-                                    ListElement { name : qsTr("AES-192-CBC") }
-                                    ListElement { name : qsTr("AES-128-CBC") }
-                                    ListElement { name : qsTr("ChaCha20-Poly1305") }
-                                    ListElement { name : qsTr("ARIA-256-CBC") }
-                                    ListElement { name : qsTr("CAMELLIA-256-CBC") }
-                                    ListElement { name : qsTr("none") }
-                                }
-
-                                clickedFunction: function() {
-                                    cipherDropDown.text = selectedText
-                                    cipher = cipherDropDown.text
-                                    cipherDropDown.closeTriggered()
-                                }
-
-                                Component.onCompleted: {
-                                    cipherDropDown.text = cipher
-
-                                    for (var i = 0; i < cipherListView.model.count; i++) {
-                                        if (cipherListView.model.get(i).name === cipherDropDown.text) {
-                                            currentIndex = i
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        Rectangle {
-                            id: contentRect
-                            Layout.fillWidth: true
-                            Layout.topMargin: 32
-                            Layout.preferredHeight: checkboxLayout.implicitHeight
-                            color: AmneziaStyle.color.onyxBlack
-                            radius: 16
-
-                            Connections {
-                                target: tlsAuthCheckBox
-                                enabled: !GC.isMobile()
-
-                                function onFocusChanged() {
-                                    if (tlsAuthCheckBox.activeFocus) {
-                                        fl.ensureVisible(contentRect)
-                                    }
-                                }
-                            }
-
-                            ColumnLayout {
-                                id: checkboxLayout
-
-                                anchors.fill: parent
-                                CheckBoxType {
-                                    id: tlsAuthCheckBox
-                                    Layout.fillWidth: true
-
-                                    text: qsTr("TLS auth")
-                                    checked: tlsAuth
-
-                                    onCheckedChanged: {
-                                        if (checked !== tlsAuth) {
-                                            console.log("tlsAuth changed to: " + checked)
-                                            tlsAuth = checked
-                                        }
-                                    }
-                                }
-
-                                DividerType {}
-
-                                CheckBoxType {
-                                    id: blockDnsCheckBox
-                                    Layout.fillWidth: true
-
-                                    text: qsTr("Block DNS requests outside of VPN")
-                                    checked: blockDns
-
-                                    onCheckedChanged: {
-                                        if (checked !== blockDns) {
-                                            blockDns = checked
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        SwitcherType {
-                            id: additionalClientCommandsSwitcher
-                            Layout.fillWidth: true
-                            Layout.topMargin: 32
-                            parentFlickable: fl
-
-                            checked: additionalClientCommands !== ""
-
-                            text: qsTr("Additional client configuration commands")
-
-                            onCheckedChanged: {
-                                if (!checked) {
-                                    additionalClientCommands = ""
-                                }
-                            }
-                        }
-
-                        TextAreaType {
-                            id: additionalClientCommandsTextArea
-                            Layout.fillWidth: true
-                            Layout.topMargin: 16
-
-                            visible: additionalClientCommandsSwitcher.checked
-
-                            parentFlickable: fl
-
-                            textAreaText: additionalClientCommands
-                            placeholderText: qsTr("Commands:")
-
-                            textArea.onEditingFinished: {
-                                if (additionalClientCommands !== textAreaText) {
-                                    additionalClientCommands = textAreaText
-                                }
-                            }
-                        }
-
-                        SwitcherType {
-                            id: additionalServerCommandsSwitcher
-                            Layout.fillWidth: true
-                            Layout.topMargin: 16
-                            parentFlickable: fl
-
-                            checked: additionalServerCommands !== ""
-
-                            text: qsTr("Additional server configuration commands")
-
-                            onCheckedChanged: {
-                                if (!checked) {
-                                    additionalServerCommands = ""
-                                }
-                            }
-                        }
-
-                        TextAreaType {
-                            id: additionalServerCommandsTextArea
-                            Layout.fillWidth: true
-                            Layout.topMargin: 16
-
-                            visible: additionalServerCommandsSwitcher.checked
-
-                            textAreaText: additionalServerCommands
-                            placeholderText: qsTr("Commands:")
-                            parentFlickable: fl
-                            textArea.onEditingFinished: {
-                                if (additionalServerCommands !== textAreaText) {
-                                    additionalServerCommands = textAreaText
-                                }
-                            }
-                        }
-
-                        BasicButtonType {
-                            id: saveButton
-
-                            Layout.fillWidth: true
-                            Layout.topMargin: 24
-                            Layout.bottomMargin: 24
-
-                            enabled: vpnAddressSubnetTextField.errorText === "" &&
-                                     portTextField.errorText === ""
-
-                            text: qsTr("Save")
-                            parentFlickable: fl
-
-                            onClicked: function() {
-                                forceActiveFocus()
-
-                                var headerText = qsTr("Save settings?")
-                                var descriptionText = qsTr("All users with whom you shared a connection with will no longer be able to connect to it.")
-                                var yesButtonText = qsTr("Continue")
-                                var noButtonText = qsTr("Cancel")
-
-                                var yesButtonFunction = function() {
-                                    if (ConnectionController.isConnected && ServersModel.getDefaultServerData("defaultContainer") === ContainersModel.getProcessedContainerIndex()) {
-                                        PageController.showNotificationMessage(qsTr("Unable change settings while there is an active connection"))
-                                        return
-                                    }
-
-                                    PageController.goToPage(PageEnum.PageSetupWizardInstalling);
-                                    InstallController.updateContainer(OpenVpnConfigModel.getConfig())
-                                }
-                                var noButtonFunction = function() {
-                                    if (!GC.isMobile()) {
-                                        saveButton.forceActiveFocus()
-                                    }
-                                }
-                                showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
                             }
 
                             Keys.onEnterPressed: saveButton.clicked()
@@ -439,6 +201,231 @@ PageType {
                     }
                 }
             }
+
+            DropDownType {
+                id: cipherDropDown
+                Layout.fillWidth: true
+                Layout.topMargin: 16
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                enabled: !autoNegotiateEncryprionSwitcher.checked
+
+                descriptionText: qsTr("Cipher")
+                headerText: qsTr("Cipher")
+
+                drawerParent: root
+
+                listView: ListViewWithRadioButtonType {
+                    id: cipherListView
+
+                    rootWidth: root.width
+
+                    model: ListModel {
+                        ListElement { name : qsTr("AES-256-GCM") }
+                        ListElement { name : qsTr("AES-192-GCM") }
+                        ListElement { name : qsTr("AES-128-GCM") }
+                        ListElement { name : qsTr("AES-256-CBC") }
+                        ListElement { name : qsTr("AES-192-CBC") }
+                        ListElement { name : qsTr("AES-128-CBC") }
+                        ListElement { name : qsTr("ChaCha20-Poly1305") }
+                        ListElement { name : qsTr("ARIA-256-CBC") }
+                        ListElement { name : qsTr("CAMELLIA-256-CBC") }
+                        ListElement { name : qsTr("none") }
+                    }
+
+                    clickedFunction: function() {
+                        cipherDropDown.text = selectedText
+                        cipher = cipherDropDown.text
+                        cipherDropDown.closeTriggered()
+                    }
+
+                    Component.onCompleted: {
+                        cipherDropDown.text = cipher
+
+                        for (var i = 0; i < cipherListView.model.count; i++) {
+                            if (cipherListView.model.get(i).name === cipherDropDown.text) {
+                                currentIndex = i
+                            }
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                id: contentRect
+                Layout.fillWidth: true
+                Layout.topMargin: 32
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+                Layout.preferredHeight: checkboxLayout.implicitHeight
+                color: AmneziaStyle.color.onyxBlack
+                radius: 16
+
+                Connections {
+                    target: tlsAuthCheckBox
+                    enabled: !GC.isMobile()
+
+                    function onFocusChanged() {
+                        if (tlsAuthCheckBox.activeFocus) {
+                            fl.ensureVisible(contentRect)
+                        }
+                    }
+                }
+
+                ColumnLayout {
+                    id: checkboxLayout
+
+                    anchors.fill: parent
+                    CheckBoxType {
+                        id: tlsAuthCheckBox
+                        Layout.fillWidth: true
+
+                        text: qsTr("TLS auth")
+                        checked: tlsAuth
+
+                        onCheckedChanged: {
+                            if (checked !== tlsAuth) {
+                                console.log("tlsAuth changed to: " + checked)
+                                tlsAuth = checked
+                            }
+                        }
+                    }
+
+                    DividerType {}
+
+                    CheckBoxType {
+                        id: blockDnsCheckBox
+                        Layout.fillWidth: true
+
+                        text: qsTr("Block DNS requests outside of VPN")
+                        checked: blockDns
+
+                        onCheckedChanged: {
+                            if (checked !== blockDns) {
+                                blockDns = checked
+                            }
+                        }
+                    }
+                }
+            }
+
+            SwitcherType {
+                id: additionalClientCommandsSwitcher
+                Layout.fillWidth: true
+                Layout.topMargin: 32
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                checked: additionalClientCommands !== ""
+
+                text: qsTr("Additional client configuration commands")
+
+                onCheckedChanged: {
+                    if (!checked) {
+                        additionalClientCommands = ""
+                    }
+                }
+            }
+
+            TextAreaType {
+                id: additionalClientCommandsTextArea
+                Layout.fillWidth: true
+                Layout.topMargin: 16
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                visible: additionalClientCommandsSwitcher.checked
+
+                textAreaText: additionalClientCommands
+                placeholderText: qsTr("Commands:")
+
+                textArea.onEditingFinished: {
+                    if (additionalClientCommands !== textAreaText) {
+                        additionalClientCommands = textAreaText
+                    }
+                }
+            }
+
+            SwitcherType {
+                id: additionalServerCommandsSwitcher
+                Layout.fillWidth: true
+                Layout.topMargin: 16
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                checked: additionalServerCommands !== ""
+
+                text: qsTr("Additional server configuration commands")
+
+                onCheckedChanged: {
+                    if (!checked) {
+                        additionalServerCommands = ""
+                    }
+                }
+            }
+
+            TextAreaType {
+                id: additionalServerCommandsTextArea
+                Layout.fillWidth: true
+                Layout.topMargin: 16
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                visible: additionalServerCommandsSwitcher.checked
+
+                textAreaText: additionalServerCommands
+                placeholderText: qsTr("Commands:")
+
+                textArea.onEditingFinished: {
+                    if (additionalServerCommands !== textAreaText) {
+                        additionalServerCommands = textAreaText
+                    }
+                }
+            }
+
+            BasicButtonType {
+                id: saveRestartButton
+
+                Layout.fillWidth: true
+                Layout.topMargin: 24
+                Layout.bottomMargin: 24
+                Layout.leftMargin: 16
+                Layout.rightMargin: 16
+
+                enabled: vpnAddressSubnetTextField.errorText === "" &&
+                         portTextField.errorText === ""
+
+                text: qsTr("Save")
+
+                onClicked: function() {
+                    forceActiveFocus()
+
+                    var headerText = qsTr("Save settings?")
+                    var descriptionText = qsTr("All users with whom you shared a connection with will no longer be able to connect to it.")
+                    var yesButtonText = qsTr("Continue")
+                    var noButtonText = qsTr("Cancel")
+
+                    var yesButtonFunction = function() {
+                        if (ConnectionController.isConnected && ServersModel.getDefaultServerData("defaultContainer") === ContainersModel.getProcessedContainerIndex()) {
+                            PageController.showNotificationMessage(qsTr("Unable change settings while there is an active connection"))
+                            return
+                        }
+
+                        PageController.goToPage(PageEnum.PageSetupWizardInstalling);
+                        InstallController.updateContainer(OpenVpnConfigModel.getConfig())
+                    }
+                    var noButtonFunction = function() {
+                        if (!GC.isMobile()) {
+                            saveButton.forceActiveFocus()
+                        }
+                    }
+                    showQuestionDrawer(headerText, descriptionText, yesButtonText, noButtonText, yesButtonFunction, noButtonFunction)
+                }
+
+                Keys.onEnterPressed: saveButton.clicked()
+                Keys.onReturnPressed: saveButton.clicked()
+            }
         }
     }
 }