feat(onboarding): adding initial screens

Closes #4974

ui/app/AppLayouts/Onboarding/OnboardingLayout.qml

@@ -9,7 +9,7 @@ QtObject {
     id: root
     property bool hasAccounts
     signal loadApp()
-    signal onBoardingStepChanged(var view)
+    signal onBoardingStepChanged(var view, string state)
 
     property var stateMachine: DSM.StateMachine {
         id: stateMachine
@@ -22,7 +22,7 @@ QtObject {
 
             DSM.State {
                 id: keysMainState
-                onEntered: { onBoardingStepChanged(keysMain); }
+                onEntered: { onBoardingStepChanged(welcomeMain, ""); }
 
                 DSM.SignalTransition {
                     targetState: genKeyState
@@ -33,7 +33,7 @@ QtObject {
 
             DSM.State {
                 id: existingKeyState
-                onEntered: { onBoardingStepChanged(existingKey); }
+                onEntered: { onBoardingStepChanged(existingKey, ""); }
 
                 DSM.SignalTransition {
                     targetState: appState
@@ -44,7 +44,7 @@ QtObject {
 
             DSM.State {
                 id: genKeyState
-                onEntered: { onBoardingStepChanged(genKey); }
+                onEntered: { onBoardingStepChanged(genKey, ""); }
 
                 DSM.SignalTransition {
                     targetState: appState
@@ -55,7 +55,7 @@ QtObject {
 
             DSM.State {
                 id: keycardState
-                onEntered: { onBoardingStepChanged(keycardFlowSelection); }
+                onEntered: { onBoardingStepChanged(keycardFlowSelection, ""); }
 
                 DSM.SignalTransition {
                     targetState: appState
@@ -66,7 +66,7 @@ QtObject {
 
             DSM.State {
                 id: stateLogin
-                onEntered: { onBoardingStepChanged(login); }
+                onEntered: { onBoardingStepChanged(login, ""); }
 
                 DSM.SignalTransition {
                     targetState: appState
@@ -121,12 +121,33 @@ QtObject {
         }
     }
 
+    property var welcomeComponent: Component {
+        id: welcomeMain
+        WelcomeView {
+            onBtnNewUserClicked: {
+                onBoardingStepChanged(keysMain, "getkeys");
+            }
+            onBtnExistingUserClicked: {
+                onBoardingStepChanged(keysMain, "connectkeys");
+            }
+        }
+    }
+
     property var keysMainComponent: Component {
         id: keysMain
         KeysMainView {
-            btnGenKey.onClicked: Global.applicationWindow.navigateTo("GenKey")
+            onButtonClicked: {
-            btnExistingKey.onClicked: Global.applicationWindow.navigateTo("ExistingKey")
+                Global.applicationWindow.navigateTo("GenKey");
-            btnKeycard.onClicked: Global.applicationWindow.navigateTo("KeycardFlowSelection")
+            }
+            onKeycardLinkClicked: {
+                Global.applicationWindow.navigateTo("KeycardFlowSelection");
+            }
+            onSeedLinkClicked: {
+                Global.applicationWindow.navigateTo("ExistingKey");
+            }
+            onBackClicked: {
+                onBoardingStepChanged(welcomeMain, "");
+            }
         }
     }
 

ui/app/AppLayouts/Onboarding/popups/BeforeGetStartedModal.qml

@@ -13,7 +13,6 @@ StatusModal {
     id: popup
 
     anchors.centerIn: parent
-    //% "Before you get started..."
     header.title: qsTrId("before-you-get-started---")
     hasCloseButton: false
     closePolicy: Popup.NoAutoClose
@@ -34,7 +33,6 @@ StatusModal {
                 id: acknowledge
                 objectName: "acknowledgeCheckBox"
                 width: parent.width
-                //% "I acknowledge that Status Desktop is in Beta and by using it, I take the full responsibility for all risks concerning my data and funds."
                 text: qsTrId("i-acknowledge-that-status-desktop-is-in-beta-and-by-using-it--i-take-the-full-responsibility-for-all-risks-concerning-my-data-and-funds-")
             }
 
@@ -47,16 +45,14 @@ StatusModal {
                     leftPadding: termsOfUse.indicator.width + termsOfUse.spacing
 
                     StatusBaseText {
-                        //% "I accept"
+                        text: qsTr("I accept Status")
-                        text: qsTrId("i-accept")
                         color: Theme.palette.directColor1
                     }
 
                     StatusBaseText {
-                        //% "Terms of Use"
+                        objectName: "termsOfUseLink"
                         text: qsTrId("terms-of-service")
                         color: Theme.palette.primaryColor1
-                        objectName: "termsOfUseLink"
 
                         MouseArea {
                             anchors.fill: parent
@@ -73,6 +69,32 @@ StatusModal {
                             }
                         }
                     }
+
+                    StatusBaseText {
+                        text: " & "
+                        color: Theme.palette.directColor1
+                    }
+
+                    StatusBaseText {
+                        objectName: "privacyPolicyLink"
+                        text: qsTr("Privacy Policy")
+                        color: Theme.palette.primaryColor1
+
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            hoverEnabled: true
+                            onEntered: {
+                                parent.font.underline = true
+                            }
+                            onExited: {
+                                parent.font.underline = false
+                            }
+                            onClicked: {
+                                Qt.openUrlExternally("https://status.im/privacy-policy/")
+                            }
+                        }
+                    }
                 }
             }
 
@@ -80,39 +102,11 @@ StatusModal {
         }
     }
 
-    leftButtons: [
-        StatusBaseText {
-            id: ppText
-            //% "Privacy Policy"
-            objectName: "privacyPolicyLink"
-            text: qsTrId("privacy-policy")
-            color: Theme.palette.primaryColor1
-            anchors.verticalCenter: parent.verticalCenter
-
-            MouseArea {
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                hoverEnabled: true
-                onEntered: {
-                    parent.font.underline = true
-                }
-                onExited: {
-                    parent.font.underline = false
-                }
-                onClicked: {
-                    Qt.openUrlExternally("https://status.im/privacy-policy/")
-                }
-            }
-        }
-
-    ]
-
     rightButtons: [
         StatusButton {
             id: getStartedButton
             objectName: "getStartedStatusButton"
             enabled: acknowledge.checked && termsOfUse.checked
-            //% "Get Started"
             text: qsTrId("get-started")
             onClicked: {
                 popup.close()

ui/app/AppLayouts/Onboarding/views/KeycardFlowSelectionView.qml

@@ -13,7 +13,7 @@ Item {
 
     property var onClosed: function () {}
     property bool connected: false
-    property int flow: OnboardingFlow.Recover
+    property int flow: KeycardFlowSelectionView.OnboardingFlow.Recover
 
     id: keycardView
     Component.onCompleted: {

ui/app/AppLayouts/Onboarding/views/KeysMainView.qml

@@ -1,8 +1,11 @@
 import QtQuick 2.13
+import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.13
 import QtQuick.Controls.Universal 2.12
 
 import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 import shared 1.0
 import shared.panels 1.0
@@ -11,10 +14,12 @@ import "../popups"
 import utils 1.0
 
 Page {
-    id: page
+    id: root
-    property alias btnExistingKey: btnExistingKey
+
-    property alias btnGenKey: btnGenKey
+    signal buttonClicked()
-    property alias btnKeycard: btnKeycard
+    signal keycardLinkClicked()
+    signal seedLinkClicked()
+    signal backClicked()
 
     background: Rectangle {
         color: Style.current.background
@@ -59,8 +64,7 @@ Page {
         }
 
         StyledText {
-            id: txtTitle1
+            id: txtTitle
-            //% "Get your keys"
             text: qsTrId("intro-wizard-title1")
             anchors.topMargin: Style.current.padding
             font.bold: true
@@ -71,45 +75,168 @@ Page {
         }
 
         StyledText {
-            id: txtDesc1
+            id: txtDesc
             color: Style.current.secondaryText
-            //% "A set of keys controls your account. Your keys live on your device, so only you can use them."
             text: qsTrId("a-set-of-keys-controls-your-account.-your-keys-live-on-your-device,-so-only-you-can-use-them.")
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
             anchors.right: parent.right
             anchors.left: parent.left
-            anchors.top: txtTitle1.bottom
+            anchors.top: txtTitle.bottom
             anchors.topMargin: Style.current.padding
             font.pixelSize: 15
         }
-
+        ColumnLayout {
-        StatusButton {
-            id: btnGenKey
-            anchors.top: txtDesc1.bottom
             anchors.topMargin: 40
             anchors.horizontalCenter: parent.horizontalCenter
-            //% "I'm new, generate keys"
+            anchors.top: txtDesc.bottom
-            text: qsTrId("im-new,-generate-keys")
+            spacing: Style.current.bigPadding
-        }
+            StatusButton {
+                id: button
+                Layout.alignment: Qt.AlignHCenter
+                onClicked: {
+                    root.buttonClicked();
+                }
+            }
 
-        StatusFlatButton {
+            StatusBaseText {
-            id: btnExistingKey
+                id: keycardLink
-            //% "Access existing key"
+                Layout.alignment: Qt.AlignHCenter
-            text: qsTrId("access-existing-key")
+                color: Theme.palette.primaryColor1
-            anchors.top: btnGenKey.bottom
+                MouseArea {
-            anchors.topMargin: Style.current.padding
+                    anchors.fill: parent
-            anchors.horizontalCenter: parent.horizontalCenter
+                    cursorShape: Qt.PointingHandCursor
-        }
+                    hoverEnabled: true
+                    onEntered: {
+                        parent.font.underline = true
+                    }
+                    onExited: {
+                        parent.font.underline = false
+                    }
+                    onClicked: {
+                        root.keycardLinkClicked();
+                    }
+                }
+            }
 
-        StatusFlatButton {
+            StatusBaseText {
-            id: btnKeycard
+                id: seedLink
-            //% "I have a Keycard"
+                Layout.alignment: Qt.AlignHCenter
-            text: qsTr("I have a Keycard")
+                color: Theme.palette.primaryColor1
-            anchors.top: btnExistingKey.bottom
+                MouseArea {
-            anchors.topMargin: Style.current.padding
+                    anchors.fill: parent
-            anchors.horizontalCenter: parent.horizontalCenter
+                    cursorShape: Qt.PointingHandCursor
-            visible: isExperimental === "1" || localAccountSettings.isKeycardEnabled
+                    hoverEnabled: true
+                    onEntered: {
+                        parent.font.underline = true
+                    }
+                    onExited: {
+                        parent.font.underline = false
+                    }
+                    onClicked: {
+                        root.seedLinkClicked();
+                    }
+                }
+            }
         }
     }
+
+    StatusRoundButton {
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Style.current.padding
+        icon.name: "arrow-left"
+        onClicked: {
+            root.backClicked();
+        }
+    }
+
+    states: [
+        State {
+            name: "connectkeys"
+            PropertyChanges {
+                target: txtTitle
+                text: qsTr("Connect your keys")
+
+            }
+            PropertyChanges {
+                target: txtDesc
+                text: qsTr("Use your existing Status keys to login to this device.")
+
+            }
+            PropertyChanges {
+                target: button
+                text: qsTr("Scan sync code")
+
+            }
+            PropertyChanges {
+                target: keycardLink
+                text: qsTr("Login with Keycard")
+
+            }
+            PropertyChanges {
+                target: seedLink
+                text: qsTr("Enter a seed phrase")
+
+            }
+        },
+        State {
+            name: "getkeys"
+            PropertyChanges {
+                target: txtTitle
+                text: qsTr("Get your keys")
+
+            }
+            PropertyChanges {
+                target: txtDesc
+                text: qsTr("A set of keys controls your account. Your keys live on your\ndevice, so only you can use them.")
+
+            }
+            PropertyChanges {
+                target: button
+                text: qsTr("Generate new keys")
+
+            }
+            PropertyChanges {
+                target: keycardLink
+                text: qsTr("Generate keys for a new Keycard")
+
+            }
+            PropertyChanges {
+                target: seedLink
+                text: qsTr("lmport a seed phrase")
+
+            }
+        },
+        State {
+            name: "importseed"
+            PropertyChanges {
+                target: txtTitle
+                text: qsTr("lmport a seed phrase")
+
+            }
+            PropertyChanges {
+                target: txtDesc
+                text: qsTr("Seed phrases are used to back up and restore your keys.\n
+Only use this option if you already have a seed phrase.")
+
+            }
+            PropertyChanges {
+                target: button
+                text: qsTr("lmport a seed phrase")
+
+            }
+            PropertyChanges {
+                target: keycardLink
+                text: qsTr("lmport a seed phrase into a new Keycard")
+
+            }
+            PropertyChanges {
+                target: seedLink
+                text: ""
+                visible: false
+            }
+        }
+    ]
 }

ui/app/AppLayouts/Onboarding/views/WelcomeView.qml

@@ -0,0 +1,108 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Controls.Universal 2.12
+
+import StatusQ.Controls 0.1
+
+import shared 1.0
+import shared.panels 1.0
+import "../popups"
+
+import utils 1.0
+
+Page {
+    id: page
+
+    signal btnNewUserClicked()
+    signal btnExistingUserClicked()
+
+    background: Rectangle {
+        color: Style.current.background
+    }
+
+    Component.onCompleted: {
+        if(displayBeforeGetStartedModal) {
+            displayBeforeGetStartedModal = false
+            beforeGetStartedModal.open()
+        }
+    }
+
+    BeforeGetStartedModal {
+        id: beforeGetStartedModal
+    }
+
+    Item {
+        id: container
+        width: 425
+        height: {
+            let h = 0
+            const children = this.children
+            Object.keys(children).forEach(function (key) {
+                const child = children[key]
+                h += child.height + Style.current.padding
+            })
+            return h
+        }
+
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Image {
+            id: keysImg
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            fillMode: Image.PreserveAspectFit
+            source: Style.png("welcome")
+            width: 256
+            height: 256
+            mipmap: true
+        }
+
+        StyledText {
+            id: txtTitle1
+            //% "Get your keys"
+            text: qsTr("Welcome to Status")
+            anchors.topMargin: Style.current.padding
+            font.bold: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: keysImg.bottom
+            font.letterSpacing: -0.2
+            font.pixelSize: 22
+        }
+
+        StyledText {
+            id: txtDesc1
+            color: Style.current.secondaryText
+            text: qsTr("Your fully decentralized gateway to Ethereum and Web3.\nCrypto wallet, privacy first group chat, and dApp browser.")
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+            anchors.right: parent.right
+            anchors.left: parent.left
+            anchors.top: txtTitle1.bottom
+            anchors.topMargin: Style.current.padding
+            font.pixelSize: 15
+        }
+
+        StatusButton {
+            id: btnNewUser
+            anchors.top: txtDesc1.bottom
+            anchors.topMargin: 40
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: qsTr("I am new to Status")
+            onClicked: {
+                page.btnNewUserClicked();
+            }
+        }
+
+        StatusButton {
+            id: btnExistingUser
+            text: qsTr("I already use Status")
+            anchors.top: btnNewUser.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.horizontalCenter: parent.horizontalCenter
+            onClicked: {
+                page.btnExistingUserClicked();
+            }
+        }
+    }
+}

ui/main.qml

@@ -321,6 +321,7 @@ StatusWindow {
 
         onOnBoardingStepChanged: {
             loader.sourceComponent = view;
+            loader.item.state = state;
         }
     }