Integrate Wifi management to startupscreen

Task-number: QTBUG-97101
Change-Id: I23e26ce745c114a1749a2edc39a37a09a2f3a323
Reviewed-by: Samuli Piippo <samuli.piippo@qt.io>

18 files changed, 1012 insertions, 196 deletions

diff --git a/startupscreen/CMakeLists.txt b/startupscreen/CMakeLists.txt
index 6029d48..21d1fed 100644
--- a/startupscreen/CMakeLists.txt
+++ b/startupscreen/CMakeLists.txt
@@ -17,6 +17,7 @@ find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Core Quick QuickControls2 REQUIRED
 add_executable(startupscreen
     main.cpp
     settingsmanager.cpp
+    qtbuttonimageprovider.cpp
     qml.qrc
 )
 
diff --git a/startupscreen/GuideView.qml b/startupscreen/GuideView.qml
index fb6dd2e..3e980e3 100644
--- a/startupscreen/GuideView.qml
+++ b/startupscreen/GuideView.qml
@@ -85,6 +85,7 @@ Item  {
         opacity: 0.5
         MouseArea {
             anchors.fill: parent
+            anchors.margins: -width
             onPressed: backButton.scale = 0.4
             onReleased: backButton.scale = 0.5
             onClicked: root.visible = false
diff --git a/startupscreen/MainView.qml b/startupscreen/MainView.qml
index c5a18e8..4d95577 100644
--- a/startupscreen/MainView.qml
+++ b/startupscreen/MainView.qml
@@ -193,7 +193,10 @@ Item {
             id: wifiButton
             height: parent.buttonSize
             width: height
-            visible: false
+            visible: true
+            onPressed: {
+                loader.source = "qrc:/NetworkSettings/NetworkSettingsPage.qml"
+            }
         }
     }
 
@@ -227,6 +230,11 @@ Item {
         }
     }
 
+    Loader {
+        id: loader
+        anchors.fill: parent
+    }
+
     UsbModeDialog {
         id: usbModeDialog
     }
diff --git a/startupscreen/NetworkSettings/CustomSwitch.qml b/startupscreen/NetworkSettings/CustomSwitch.qml
new file mode 100644
index 0000000..fa21d7f
--- /dev/null
+++ b/startupscreen/NetworkSettings/CustomSwitch.qml
@@ -0,0 +1,114 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Controls
+
+Switch {
+    id: control
+
+    property alias indicatorWidth: indicatorImg.width
+    property alias indicatorHeight: indicatorImg.height
+
+    indicator: Image {
+        id: indicatorImg
+        width: 200
+        height: 75
+        sourceSize: Qt.size(width, height)
+        anchors.horizontalCenter: control.horizontalCenter
+        y: parent.height / 2 - height / 2
+        source: "image://QtButton/10/#848895/transparent"
+
+        Text {
+            id: offText
+            anchors.left: parent.left
+            anchors.leftMargin: parent.width * 0.075
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.Fit
+            minimumPixelSize: 1
+            font.pixelSize: parent.height * 0.55
+            color: "#3b4155"
+            text: "OFF"
+            font.family: viewSettings.appFont
+        }
+
+        Text {
+            id: onText
+            anchors.right: parent.right
+            anchors.rightMargin: parent.width * 0.1
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.Fit
+            minimumPixelSize: 1
+            font.pixelSize: parent.height * 0.55
+            color: "#3b4155"
+            text: "ON"
+            font.family: viewSettings.appFont
+        }
+
+        Binding {
+            target: qtHandle
+            property: "x"
+            value: control.checked ? indicatorImg.width  - qtHandle.width - indicatorImg.width * 0.025 : indicatorImg.width * 0.025
+            when: !mousearea.drag.active
+        }
+
+        QtButton {
+            id: qtHandle
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width * 0.475
+            height: parent.height * 0.9
+            fillColor: control.checked ? viewSettings.buttonGreenColor : viewSettings.buttonGrayColor
+            text: control.checked ? "ON" : "OFF"
+            borderColor: "transparent"
+            Behavior on x {
+                NumberAnimation { duration: 50 }
+            }
+
+            MouseArea {
+                id: mousearea
+                anchors.fill: parent
+                drag.target: qtHandle
+                drag.axis: Drag.XAxis
+                drag.minimumX: indicatorImg.width * 0.005
+                drag.maximumX: indicatorImg.width - width - indicatorImg.width * 0.005
+
+                onReleased: {
+                    if (qtHandle.x > indicatorImg.width / 5 ) {
+                        control.checked = true
+                    } else {
+                        control.checked = false
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/startupscreen/NetworkSettings/NetworkDelegate.qml b/startupscreen/NetworkSettings/NetworkDelegate.qml
new file mode 100644
index 0000000..67d6bba
--- /dev/null
+++ b/startupscreen/NetworkSettings/NetworkDelegate.qml
@@ -0,0 +1,117 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtDeviceUtilities.NetworkSettings
+
+Item {
+    id: networkDelegate
+    width: list.width
+    height: networkName.height * 3
+    property alias nameLabelText: networkName.text
+    property alias ipLabelText: ipAddressLabel.text
+    property alias ipText: ipAddress.text
+    property bool isConnected: false
+
+    signal clicked()
+
+    Column {
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width * 0.5
+
+        Text {
+            id: networkName
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: networkSettingsRoot.height * viewSettings.subTitleFontSize
+            font.family: viewSettings.appFont
+            color: isConnected ? viewSettings.buttonGreenColor : "white"
+            text: (modelData.type === NetworkSettingsType.Wired) ? modelData["name"] + " (" + modelData["id"] + ")" : name
+        }
+
+        Row {
+            id: ipRow
+            height: networkDelegate.height * 0.275 * opacity
+            spacing: networkDelegate.width * 0.0075
+            Item {
+                width: viewSettings.margin(list.width)
+                height: 1
+            }
+
+            Text {
+                id: ipAddressLabel
+                height: parent.height
+                anchors.verticalCenter: parent.verticalCenter
+                text: qsTr("IP Address:")
+                color: isConnected ? viewSettings.buttonGreenColor : "white"
+                font.pixelSize: networkSettingsRoot.height * viewSettings.valueFontSize
+                font.family: viewSettings.appFont
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignLeft
+            }
+
+            Text {
+                id: ipAddress
+                width: root.width * 0.15
+                height: parent.height
+                anchors.verticalCenter: parent.verticalCenter
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignLeft
+                color: isConnected ? viewSettings.buttonGreenColor : "white"
+                text: qsTr("Not connected")
+                font.pixelSize: networkSettingsRoot.height * viewSettings.valueFontSize
+                font.family: viewSettings.appFont
+                font.styleName: isConnected ? "SemiBold" : "Regular"
+            }
+        }
+    }
+
+    QtButton {
+        id: connectButton
+        fontFamily: viewSettings.appFont
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        fillColor: isConnected ? viewSettings.buttonGrayColor : viewSettings.buttonGreenColor
+        borderColor: "transparent"
+        text: isConnected ? qsTr("DISCONNECT") : qsTr("CONNECT")
+        enabled: true
+        onClicked: networkDelegate.clicked()
+    }
+
+    Rectangle {
+        id: delegateBottom
+        width: networkDelegate.width
+        color: viewSettings.borderColor
+        height: 2
+        anchors.bottom: networkDelegate.bottom
+        anchors.horizontalCenter: networkDelegate.horizontalCenter
+    }
+
+    Behavior on height { NumberAnimation { duration: 200} }
+}
diff --git a/startupscreen/NetworkSettings/NetworkListView.qml b/startupscreen/NetworkSettings/NetworkListView.qml
new file mode 100644
index 0000000..5ac722e
--- /dev/null
+++ b/startupscreen/NetworkSettings/NetworkListView.qml
@@ -0,0 +1,115 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtDeviceUtilities.NetworkSettings
+
+
+Item {
+    id: root
+
+    property var connectingService: null
+    property bool retryConnectAfterIdle: false
+
+    Connections {
+        target: NetworkSettingsManager.userAgent
+        function onShowUserCredentialsInput() {
+            passphraseEnter.visible = true;
+        }
+    }
+
+    function connectBySsid() {
+        passphraseEnter.showSsid = true
+        passphraseEnter.visible = true
+    }
+
+    function connectingServiceStateChange() {
+        if (connectingService) {
+            if (connectingService.state === NetworkSettingsState.Failure) {
+                // If authentication failed, request connection again. That will
+                // initiate new passphrase request.
+                retryConnectAfterIdle = true
+            } else if (connectingService.state === NetworkSettingsState.Ready) {
+                // If connection succeeded, we no longer have service connecting
+                connectingService = null;
+                retryConnectAfterIdle = false;
+            } else if (connectingService.state === NetworkSettingsState.Idle) {
+                if (retryConnectAfterIdle) {
+                    passphraseEnter.extraInfo = qsTr("Invalid passphrase");
+                    connectingService.connectService();
+                }
+                retryConnectAfterIdle = false;
+            }
+        }
+    }
+
+    NetworkDelegate {
+        id: manualConnectionPane
+        anchors.top: parent.top
+        anchors.right: parent.right
+        visible: wifiSwitch.checked
+        nameLabelText: qsTr("Manual connection")
+        ipLabelText: qsTr("Add a new connection manually")
+        ipText: ""
+        isConnected: false
+        onClicked: connectBySsid()
+    }
+
+    ListView {
+        id: list
+        clip: true
+        focus: true
+        boundsBehavior: Flickable.DragOverBounds
+        model: NetworkSettingsManager.services
+
+        anchors.top: manualConnectionPane.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        visible: wifiSwitch.checked
+
+        delegate: NetworkDelegate {
+            isConnected: connected
+            ipText: isConnected ? NetworkSettingsManager.services.itemFromRow(index).ipv4.address
+                                : (NetworkSettingsManager.services.itemFromRow(index).state === NetworkSettingsState.Idle) ?
+                                      qsTr("Not connected") : qsTr("Connecting")
+            onClicked: {
+                if (isConnected) {
+                    NetworkSettingsManager.services.itemFromRow(index).disconnectService();
+                } else {
+                    root.connectingService = NetworkSettingsManager.services.itemFromRow(index)
+                    if (root.connectingService) {
+                        passphraseEnter.extraInfo = "";
+                        root.connectingService.connectService();
+                        root.connectingService.stateChanged.connect(connectingServiceStateChange);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/startupscreen/NetworkSettings/NetworkSettings.qml b/startupscreen/NetworkSettings/NetworkSettings.qml
new file mode 100644
index 0000000..240dc25
--- /dev/null
+++ b/startupscreen/NetworkSettings/NetworkSettings.qml
@@ -0,0 +1,113 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtDeviceUtilities.NetworkSettings
+
+Item {
+    id: networkSettingsRoot
+    anchors.fill: parent
+
+    Component.onCompleted: NetworkSettingsManager.interfacesChanged()
+
+    Connections {
+        target: NetworkSettingsManager
+        function onInterfacesChanged() {
+            if (NetworkSettingsManager.interface(NetworkSettingsType.Wifi, 0) !== null) {
+                wifiSwitch.visible = true
+                wifiSwitch.checked = Qt.binding(function() { return NetworkSettingsManager.interface(NetworkSettingsType.Wifi, 0).powered })
+            } else {
+                wifiSwitch.visible = false
+            }
+        }
+    }
+
+    Text {
+        id: wlanText
+        visible: wifiSwitch.visible
+        text: qsTr("WiFi")
+        font.pixelSize: networkSettingsRoot.height * viewSettings.subTitleFontSize
+        font.family: viewSettings.appFont
+        font.styleName: "SemiBold"
+        color: "white"
+        anchors.top: networkSettingsRoot.top
+        anchors.left: networkSettingsRoot.left
+    }
+
+    CustomSwitch {
+        id: wifiSwitch
+        anchors.top: wlanText.bottom
+        anchors.left: wlanText.left
+        height: networkSettingsRoot.height * viewSettings.buttonHeight
+        indicatorWidth: networkSettingsRoot.height * viewSettings.buttonWidth
+        indicatorHeight: networkSettingsRoot.height * viewSettings.buttonHeight
+        checkable: visible && !wifiSwitchTimer.running
+
+        onCheckedChanged: {
+            // Power on/off all WiFi interfaces
+            for (var i = 0; NetworkSettingsManager.interface(NetworkSettingsType.Wifi, i) !== null; i++) {
+
+                NetworkSettingsManager.interface(NetworkSettingsType.Wifi, i).powered = checked
+                wifiSwitchTimer.start()
+            }
+        }
+
+        // At least 1s between switching on/off
+        Timer {
+            id: wifiSwitchTimer
+            interval: 1000
+            running: false
+        }
+    }
+
+    Text {
+        id: networkListTextItem
+        text: qsTr("Available networks:")
+        font.pixelSize: networkSettingsRoot.height * viewSettings.subTitleFontSize
+        font.family: viewSettings.appFont
+        font.styleName: "SemiBold"
+        visible: wifiSwitch.checked
+        color: "white"
+        anchors.top: (wifiSwitch.visible === true) ? wifiSwitch.bottom : networkSettingsRoot.top
+        anchors.topMargin: font.pixelSize
+    }
+
+    NetworkListView {
+        id: networkList
+        anchors.top: networkListTextItem.bottom
+        anchors.left: networkListTextItem.left
+        width: networkSettingsRoot.width
+        anchors.bottom: networkSettingsRoot.bottom
+    }
+
+    // Popup for entering passphrase
+    PassphraseEnter {
+        id: passphraseEnter
+    }
+}
+
diff --git a/startupscreen/NetworkSettings/NetworkSettingsPage.qml b/startupscreen/NetworkSettings/NetworkSettingsPage.qml
new file mode 100644
index 0000000..f920145
--- /dev/null
+++ b/startupscreen/NetworkSettings/NetworkSettingsPage.qml
@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.VirtualKeyboard
+
+Image {
+    id: root
+    anchors.fill: parent
+    source: "../assets/background.png"
+
+    property int margin: viewSettings.margin(root.width)
+
+    signal closed()
+
+    ViewSettings {
+        id: viewSettings
+    }
+
+    NetworkSettings {
+        anchors.margins: margin
+    }
+
+    Image {
+        id: backButton
+        source: "../assets/icon_nok.png"
+        anchors.top: parent.top
+        anchors.right: parent.right
+        scale: 0.5
+        opacity: 0.5
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -width
+            onPressed: backButton.scale = 0.4
+            onReleased: backButton.scale = 0.5
+            onClicked: loader.source = ""
+        }
+    }
+
+    /*  Keyboard input panel.
+        The keyboard is anchored to the bottom of the application.
+    */
+    InputPanel {
+        id: inputPanel
+        z: 99
+        y: root.height
+        anchors.left: root.left
+        anchors.right: root.right
+
+        states: State {
+            name: "visible"
+            when: Qt.inputMethod.visible
+            PropertyChanges {
+                target: inputPanel
+                y: root.height - inputPanel.height
+            }
+        }
+        transitions: Transition {
+            from: ""
+            to: "visible"
+            reversible: true
+            ParallelAnimation {
+                NumberAnimation {
+                    properties: "y"
+                    duration: 250
+                    easing.type: Easing.InOutQuad
+                }
+            }
+        }
+    }
+}
+
diff --git a/startupscreen/NetworkSettings/PassphraseEnter.qml b/startupscreen/NetworkSettings/PassphraseEnter.qml
new file mode 100644
index 0000000..2068412
--- /dev/null
+++ b/startupscreen/NetworkSettings/PassphraseEnter.qml
@@ -0,0 +1,154 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Controls
+import QtDeviceUtilities.NetworkSettings
+
+Image {
+    id: passphrasePopup
+    anchors.fill: parent
+    source: "../assets/background.png"
+    visible: false
+
+    property string extraInfo: ""
+    property bool showSsid: false
+    property int margin: (width / 3 * 2) * 0.05
+    property int spacing: margin * 0.5
+
+    onVisibleChanged: {
+        backButton.visible = !visible
+        if (!visible) {
+            networkSettingsRoot.forceActiveFocus()
+        } else {
+            if (showSsid) {
+                ssidField.forceActiveFocus()
+            } else {
+                passField.forceActiveFocus()
+            }
+        }
+    }
+
+    Rectangle {
+        id: frame
+        color: "transparent"
+        border.color: viewSettings.borderColor
+        border.width: 3
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: inputPanel.y * .5 - height * .5 - margin
+        width: passphraseColumn.width * 1.1
+        height: passphraseColumn.height * 1.1
+
+        Column {
+            id: passphraseColumn
+            anchors.centerIn: parent
+            spacing: passphrasePopup.spacing
+
+            Text {
+                visible: showSsid
+                font.pixelSize: passphrasePopup.height * viewSettings.subTitleFontSize
+                font.family: viewSettings.appFont
+                color: "white"
+                text: qsTr("Enter SSID")
+            }
+
+            TextField {
+                id: ssidField
+                visible: showSsid
+                width: passphrasePopup.width * 0.4
+                height: passphrasePopup.height * 0.075
+                color: "white"
+                background: Rectangle{
+                    color: "transparent"
+                    border.color: ssidField.focus ? viewSettings.buttonGreenColor : viewSettings.buttonGrayColor
+                    border.width: ssidField.focus ? width * 0.01 : 2
+                }
+            }
+
+            Text {
+                font.pixelSize: passphrasePopup.height * viewSettings.subTitleFontSize
+                font.family: viewSettings.appFont
+                color: "white"
+                text: qsTr("Enter Passphrase")
+            }
+
+            Text {
+                font.pixelSize: passphrasePopup.height * viewSettings.valueFontSize
+                font.family: viewSettings.appFont
+                color: "red"
+                text: extraInfo
+                visible: extraInfo !== ""
+            }
+
+            TextField {
+                id: passField
+                width: passphrasePopup.width * 0.4
+                height: passphrasePopup.height * 0.075
+                color: "white"
+                echoMode: TextInput.Password
+                background: Rectangle{
+                    color: "transparent"
+                    border.color: passField.focus ? viewSettings.buttonGreenColor : viewSettings.buttonGrayColor
+                    border.width: passField.focus ? width * 0.01 : 2
+                }
+            }
+
+            Row {
+                spacing: parent.width * 0.025
+
+                QtButton{
+                    id: setButton
+                    text: qsTr("SET")
+                    onClicked: {
+                        if (showSsid) {
+                            NetworkSettingsManager.connectBySsid(ssidField.text, passField.text)
+                            showSsid = false
+                        } else {
+                            NetworkSettingsManager.userAgent.setPassphrase(passField.text)
+                        }
+                        passphrasePopup.visible = false;
+                    }
+                }
+
+                QtButton {
+                    id: cancelButton
+                    text: qsTr("CANCEL")
+                    borderColor: "transparent"
+                    fillColor: viewSettings.buttonGrayColor
+                    onClicked: {
+                        if (!showSsid) {
+                            NetworkSettingsManager.userAgent.cancelInput()
+                        }
+                        showSsid = false
+                        passphrasePopup.visible = false;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/startupscreen/NetworkSettings/QtButton.qml b/startupscreen/NetworkSettings/QtButton.qml
new file mode 100644
index 0000000..3363e55
--- /dev/null
+++ b/startupscreen/NetworkSettings/QtButton.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+
+Image {
+    id: root
+    width: buttonText.contentWidth + cutSize * 4
+    source: "image://QtButton/" + cutSize + "/" + fillColor + "/" + borderColor
+    sourceSize: Qt.size(width, height)
+
+    property string state: "enabled"
+    property int cutSize: 10
+    property color fillColor: viewSettings.buttonGreenColor
+    property color borderColor: mouseArea.pressed ? viewSettings.buttonActiveColor : viewSettings.buttonGreenColor
+    property alias text: buttonText.text
+    property alias fontFamily: buttonText.font.family
+
+    signal clicked()
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: root.clicked()
+    }
+
+    Text {
+        id: buttonText
+        anchors.fill: parent
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: parent.height * 0.65
+        font.family: viewSettings.appFont
+        color: "white"
+    }
+}
diff --git a/startupscreen/NetworkSettings/ViewSettings.qml b/startupscreen/NetworkSettings/ViewSettings.qml
new file mode 100644
index 0000000..121bdbc
--- /dev/null
+++ b/startupscreen/NetworkSettings/ViewSettings.qml
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+
+QtObject {
+    id: viewSettings
+    readonly property string appFont: "Titillium Web"
+    readonly property color backgroundColor: "#09102b"
+    readonly property color borderColor: "#9d9faa"
+    readonly property color buttonGreenColor: "#41cd52"
+    readonly property color buttonGrayColor: "#9d9faa"
+    readonly property color buttonActiveColor: "#216729"
+    readonly property color scrollBarColor: "#41cd52"
+
+    readonly property real spacing: 0.5
+    readonly property real titleFontSize: 0.04
+    readonly property real subTitleFontSize: 0.035
+    readonly property real valueFontSize: 0.025
+    readonly property real fieldHeight: 0.07
+    readonly property real fieldTextHeight: 0.05
+    readonly property real buttonHeight: 0.05
+
+    function margin(width) {
+        return (width / 3 * 2) * 0.05;
+    }
+}
diff --git a/startupscreen/StartupScreen.qml b/startupscreen/StartupScreen.qml
index 36730bf..7b09a83 100644
--- a/startupscreen/StartupScreen.qml
+++ b/startupscreen/StartupScreen.qml
@@ -103,7 +103,6 @@ ApplicationWindow {
             duration: 2000
         }
     }
-
 }
 
 
diff --git a/startupscreen/WifiButton.qml b/startupscreen/WifiButton.qml
index fd34a90..72ed86a 100644
--- a/startupscreen/WifiButton.qml
+++ b/startupscreen/WifiButton.qml
@@ -50,12 +50,15 @@
 
 import QtQuick
 import StartupScreen
+import QtDeviceUtilities.NetworkSettings
 
 Item {
     id: root
-
+    scale: mouseArea.pressed ? .9 : 1.0
     signal pressed()
 
+    Component.onCompleted: NetworkSettingsManager.services.type = NetworkSettingsType.Wifi;
+
     Rectangle {
         id: buttonBackground
         anchors.fill: parent
@@ -63,64 +66,27 @@ Item {
         radius: 0
     }
 
-    // changing button state
     MouseArea {
+        id: mouseArea
         anchors.fill: parent
-
-        onPressed: {
-            root.scale = 0.9
-        }
-        onReleased: {
-            root.scale = 1.0
-            root.pressed()
-
-            if (root.state == "")
-                root.state = "working"
-            else if (root.state == "working")
-                root.state = "ok"
-            else
-                root.state = ""
-        }
+        onClicked: root.pressed()
     }
 
     // icons for signal strengths (from 0 to 3)
+
+    property int signalStrength: NetworkSettingsManager.currentWifiConnection ? NetworkSettingsManager.currentWifiConnection.wirelessConfig.signalStrength / 25 : 0
+
     Image {
-        id: icon_signal_0
-        height: parent.height * 0.9
-        source: "assets/icon_wifi_0.png"
-        fillMode: Image.PreserveAspectFit
-        anchors.centerIn: parent
-    }
-    Image {
-        id: icon_signal_1
-        height: parent.height * 0.9
-        source: "assets/icon_wifi_1.png"
-        fillMode: Image.PreserveAspectFit
-        anchors.centerIn: parent
-        opacity: 0
-    }
-    Image {
-        id: icon_signal_2
-        height: parent.height * 0.9
-        source: "assets/icon_wifi_2.png"
-        fillMode: Image.PreserveAspectFit
-        anchors.centerIn: parent
-        opacity: 0
-    }
-    Image {
-        id: icon_signal_3
+        id: icon_signal
         height: parent.height * 0.9
-        source: "assets/icon_wifi_3.png"
+        source: "assets/icon_wifi_" + signalStrength + ".png"
         fillMode: Image.PreserveAspectFit
         anchors.centerIn: parent
-        opacity: 0
     }
 
-    // marker for the error, working and OK states
     Image {
         id: markerBackground
         height: parent.height * 0.5
-
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         source: "assets/icon_markerBackground.png"
@@ -129,157 +95,12 @@ Item {
         fillMode: Image.PreserveAspectFit
 
         Image {
-            id: errorIcon
+            id: icon
             height: parent.height * 0.5
             anchors.centerIn: parent
-            source: "assets/icon_error.png"
+            source: NetworkSettingsManager.currentWifiConnection ? "assets/icon_ok.png" : "assets/icon_error.png"
             fillMode: Image.PreserveAspectFit
             opacity: 1
         }
-        Image {
-            id: workingIcon
-            height: parent.height * 0.75
-            anchors.centerIn: parent
-            source: "assets/icon_working.png"
-            fillMode: Image.PreserveAspectFit
-            opacity: 0
-
-            RotationAnimation on rotation {
-                from: 0
-                to: 360
-                loops: Animation.Infinite
-                duration: 1000
-                running: true
-            }
-        }
-        Image {
-            id: okIcon
-            height: parent.height * 0.5
-            anchors.centerIn: parent
-            source: "assets/icon_ok.png"
-            fillMode: Image.PreserveAspectFit
-            opacity: 0
-        }
     }
-    states: [
-        State {
-            name: "working"
-            PropertyChanges {
-                target: errorIcon
-                opacity: 0
-            }
-            PropertyChanges {
-                target: workingIcon
-                opacity: 1
-            }
-            PropertyChanges {
-                target: okIcon
-                opacity: 0
-            }
-        },
-        State {
-            name: "ok"
-            PropertyChanges {
-                target: errorIcon
-                opacity: 0
-            }
-            PropertyChanges {
-                target: workingIcon
-                opacity: 0
-            }
-            PropertyChanges {
-                target: okIcon
-                opacity: 1
-            }
-            PropertyChanges {
-                target: markerBackground
-                opacity: 0
-            }
-            PropertyChanges {
-                target: icon_signal_0
-                opacity: 0
-            }
-            PropertyChanges {
-                target: icon_signal_1
-                opacity: 1
-            }
-            PropertyChanges {
-                target: icon_signal_2
-                opacity: 1
-            }
-            PropertyChanges {
-                target: icon_signal_3
-                opacity: 1
-            }
-        }
-    ]
-    transitions: [
-        Transition {
-            from: ""
-            to: "working"
-            PropertyAnimation {
-                duration: 200
-                properties: "opacity"
-
-            }
-        },
-        Transition {
-            from: "working"
-            to: "ok"
-            SequentialAnimation {
-                PropertyAnimation {
-                    target: workingIcon
-                    duration: 200
-                    properties: "opacity"
-                }
-                PropertyAnimation {
-                    target: okIcon
-                    duration: 100
-                    properties: "opacity"
-                }
-                ParallelAnimation {
-                    PropertyAnimation {
-                        target: icon_signal_0
-                        duration: 300
-                        properties: "opacity"
-                    }
-                    PropertyAnimation {
-                        target: icon_signal_1
-                        duration: 300
-                        properties: "opacity"
-                    }
-                }
-                PropertyAnimation {
-                    target: icon_signal_2
-                    duration: 300
-                    properties: "opacity"
-                }
-                PropertyAnimation {
-                    target: icon_signal_3
-                    duration: 200
-                    properties: "opacity"
-                }
-                PropertyAnimation {
-                    target: markerBackground
-                    duration: 1000
-                    properties: "opacity"
-                }
-            }
-        },
-        Transition {
-            from: ""
-            to: "working"
-            PropertyAnimation {
-                duration: 200
-                properties: "opacity"
-
-            }
-        }
-    ]
-}
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
 }
-##^##*/
diff --git a/startupscreen/main.cpp b/startupscreen/main.cpp
index 4bbfa04..fe83866 100644
--- a/startupscreen/main.cpp
+++ b/startupscreen/main.cpp
@@ -49,6 +49,7 @@
 ****************************************************************************/
 
 #include "settingsmanager.h"
+#include "qtbuttonimageprovider.h"
 
 #include <QFontDatabase>
 #include <QGuiApplication>
@@ -56,6 +57,8 @@
 
 int main(int argc, char *argv[])
 {
+    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));
+
     QGuiApplication app(argc, argv);
 
     QFontDatabase::addApplicationFont(":/fonts/TitilliumWeb-Bold.ttf");
@@ -65,7 +68,10 @@ int main(int argc, char *argv[])
     SettingsManager settingsManager;
     qmlRegisterSingletonInstance("StartupScreen", 1, 0, "SettingsManager", &settingsManager);
 
+    QtButtonImageProvider imageProvider;
     QQmlApplicationEngine engine;
+
+    engine.addImageProvider("QtButton", &imageProvider);
     engine.addImportPath("qrc:/imports");
     const QUrl url(QStringLiteral("qrc:/StartupScreen.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
diff --git a/startupscreen/qml.qrc b/startupscreen/qml.qrc
index e195e96..f413df7 100644
--- a/startupscreen/qml.qrc
+++ b/startupscreen/qml.qrc
@@ -35,5 +35,13 @@
         <file>fonts/TitilliumWeb-Light.ttf</file>
         <file>fonts/TitilliumWeb-Regular.ttf</file>
         <file>qtquickcontrols2.conf</file>
+        <file>NetworkSettings/CustomSwitch.qml</file>
+        <file>NetworkSettings/NetworkListView.qml</file>
+        <file>NetworkSettings/NetworkSettings.qml</file>
+        <file>NetworkSettings/NetworkSettingsPage.qml</file>
+        <file>NetworkSettings/PassphraseEnter.qml</file>
+        <file>NetworkSettings/ViewSettings.qml</file>
+        <file>NetworkSettings/QtButton.qml</file>
+        <file>NetworkSettings/NetworkDelegate.qml</file>
     </qresource>
 </RCC>
diff --git a/startupscreen/qtbuttonimageprovider.cpp b/startupscreen/qtbuttonimageprovider.cpp
new file mode 100644
index 0000000..65566a5
--- /dev/null
+++ b/startupscreen/qtbuttonimageprovider.cpp
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include <QImage>
+#include <QPainter>
+#include <QPainterPath>
+
+#include "qtbuttonimageprovider.h"
+
+QtButtonImageProvider::QtButtonImageProvider()
+        : QQuickImageProvider(QQuickImageProvider::Pixmap)
+{
+}
+
+QPixmap QtButtonImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+{
+    bool ok = false;
+
+    QStringList params = id.split("/");
+
+    int cutSize = params.at(0).toInt(&ok);
+
+    if (!ok)
+        cutSize = 10;
+
+    QColor fillColor;
+    QColor borderColor;
+
+    if (params.length() > 1) {
+        fillColor = QColor(params.at(1));
+    }
+
+    if (params.length() > 2)
+        borderColor = QColor(params.at(2));
+
+    if (!fillColor.isValid())
+        fillColor = "#00eb00";
+
+    if (!borderColor.isValid())
+        borderColor ="white";
+
+    int width = 100;
+    int height = 50;
+
+    if (size)
+        *size = QSize(requestedSize.width(), requestedSize.height());
+
+    QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
+                   requestedSize.height() > 0 ? requestedSize.height() : height);
+    pixmap.fill(Qt::transparent);
+
+    QPainter painter(&pixmap);
+    const qreal borderPenWidth = 2;
+    QPen borderPen(QBrush(borderColor), borderPenWidth);
+    borderPen.setJoinStyle(Qt::MiterJoin);
+    painter.setRenderHint(QPainter::Antialiasing, true);
+    painter.setPen(borderPen);
+    painter.setBrush(fillColor);
+
+    QPainterPath path;
+    qreal top = borderPenWidth - 1;
+    qreal left = borderPenWidth - 1;
+    qreal bottom = pixmap.height() - borderPenWidth;
+    qreal right = pixmap.width() - borderPenWidth;
+    path.moveTo(left + cutSize, top);
+    path.lineTo(right, top);
+    path.lineTo(right, bottom - cutSize);
+    path.lineTo(right - cutSize, bottom);
+    path.lineTo(left, bottom);
+    path.lineTo(left, top + cutSize);
+    path.lineTo(left + cutSize, top);
+    painter.drawPath(path);
+
+    return pixmap;
+}
diff --git a/startupscreen/qtbuttonimageprovider.h b/startupscreen/qtbuttonimageprovider.h
new file mode 100644
index 0000000..94f410e
--- /dev/null
+++ b/startupscreen/qtbuttonimageprovider.h
@@ -0,0 +1,47 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef QTBUTTONIMAGEPROVIDER_H
+#define QTBUTTONIMAGEPROVIDER_H
+
+#include <QQuickImageProvider>
+#include <QPixmap>
+
+class QtButtonImageProvider : public QQuickImageProvider
+{
+public:
+    QtButtonImageProvider();
+
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) override;
+
+    void setCutSize(int size) { m_cutSize = size; }
+private:
+    int m_cutSize;
+};
+
+#endif // QTBUTTONIMAGEPROVIDER_H
diff --git a/startupscreen/startupscreen.pro b/startupscreen/startupscreen.pro
index 5f2a0c2..a30dea2 100644
--- a/startupscreen/startupscreen.pro
+++ b/startupscreen/startupscreen.pro
@@ -2,10 +2,12 @@ QT += quick quickcontrols2
 
 SOURCES += \
         settingsmanager.cpp \
-        main.cpp
+        main.cpp \
+        qtbuttonimageprovider.cpp
 
 HEADERS += \
-        settingsmanager.h
+        settingsmanager.h \
+        qtbuttonimageprovider.h
 
 RESOURCES += qml.qrc