feat(Onboarding): Create Profile

- implements the basic Onboarding UI skeleton and the Create Profile
flow

Fixes #16719

storybook/pages/OnboardingLayoutPage.qml

@@ -0,0 +1,117 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQml 2.15
+
+import StatusQ 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+import Models 1.0
+import Storybook 1.0
+
+import utils 1.0
+
+import AppLayouts.Onboarding2 1.0
+
+import shared.stores 1.0 as SharedStores
+
+// compat
+import AppLayouts.Onboarding.stores 1.0 as OOBS
+
+SplitView {
+    id: root
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    OnboardingLayout {
+        id: onboarding
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        startupStore: OOBS.StartupStore {
+            function getPasswordStrengthScore(password) {
+                return Math.min(password.length, 4)
+            }
+            function validMnemonic(mnemonic) {
+                return true
+            }
+        }
+        metricsStore: SharedStores.MetricsStore {
+            readonly property var d: QtObject {
+                id: d
+                property bool isCentralizedMetricsEnabled
+            }
+
+            function toggleCentralizedMetrics(enabled) {
+                d.isCentralizedMetricsEnabled = enabled
+            }
+
+            function addCentralizedMetricIfEnabled(eventName, eventValue = null) {}
+
+            readonly property bool isCentralizedMetricsEnabled : d.isCentralizedMetricsEnabled
+        }
+        splashScreenDurationMs: 3000
+
+        QtObject {
+            id: localAppSettings
+            property bool metricsPopupSeen
+        }
+
+        onFinished: (success, primaryPath, secondaryPath) => {
+            console.warn("!!! ONBOARDING FINISHED; success:", success, "; primary path:", primaryPath, "; secondary:", secondaryPath)
+            logs.logEvent("onFinished", ["success", "primaryPath", "secondaryPath"], arguments)
+
+            console.warn("!!! RESTARTING FLOW")
+            restartFlow()
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 150
+        SplitView.preferredHeight: 150
+
+        logsView.logText: logs.logText
+
+        RowLayout {
+            anchors.fill: parent
+            ColumnLayout {
+                Layout.fillWidth: true
+                Label {
+                    text: "Current page: %1".arg(onboarding.stack.currentItem ? onboarding.stack.currentItem.title : "")
+                }
+                Label {
+                    text: `Current path: ${onboarding.primaryPath} -> ${onboarding.secondaryPath}`
+                }
+                Label {
+                    text: "Stack depth: %1".arg(onboarding.stack.depth)
+                }
+            }
+            Item { Layout.fillWidth: true }
+            Button {
+                text: "Restart"
+                focusPolicy: Qt.NoFocus
+                onClicked: onboarding.restartFlow()
+            }
+            Button {
+                text: "Copy password"
+                focusPolicy: Qt.NoFocus
+                onClicked: ClipboardUtils.setText("0123456789")
+            }
+            Button {
+                text: "Copy seedphrase"
+                focusPolicy: Qt.NoFocus
+                onClicked: ClipboardUtils.setText("dog dog dog dog dog dog dog dog dog dog dog dog")
+            }
+        }
+    }
+}
+
+// category: Onboarding
+// status: good
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1-25&node-type=canvas&m=dev

storybook/stubs/shared/stores/BIP39_en.qml

@@ -5,7 +5,7 @@ ListModel {
 
     Component.onCompleted: {
         var englishWords = [
-            "apple", "banana", "cat", "cow", "catalog", "catch", "category", "cattle", "dog", "elephant", "fish", "grape", "horse", "ice cream", "jellyfish",
+            "age", "agent", "apple", "banana", "cat", "cow", "catalog", "catch", "category", "cattle", "dog", "elephant", "fish", "grape", "horse", "ice cream", "jellyfish",
             "kiwi", "lemon", "mango", "nut", "orange", "pear", "quail", "rabbit", "strawberry", "turtle",
             "umbrella", "violet", "watermelon", "xylophone", "yogurt", "zebra"
             // Add more English words here...

storybook/stubs/shared/stores/MetricsStore.qml

@@ -0,0 +1,3 @@
+import QtQml 2.15
+
+QtObject {}

storybook/stubs/shared/stores/qmldir

@@ -8,3 +8,4 @@ PermissionsStore 1.0 PermissionsStore.qml
 ProfileStore 1.0 ProfileStore.qml
 RootStore 1.0 RootStore.qml
 UtilsStore 1.0 UtilsStore.qml
+MetricsStore 1.0 MetricsStore.qml

ui/StatusQ/src/StatusQ/Components/StatusImage.qml

@@ -1,5 +1,4 @@
-import QtQuick 2.13
-import QtQuick.Window 2.15
+import QtQuick 2.15
 
 /*!
     \qmltype StatusImage

ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -53,6 +53,7 @@ Loader {
                 objectName: "statusRoundImage"
                 width: parent.width
                 height: parent.height
+                radius: asset.bgRadius
                 image.source: root.asset.isImage ? root.asset.name : ""
                 showLoadingIndicator: true
                 border.width: root.asset.imgIsIdenticon ? 1 : 0

ui/StatusQ/src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml

@@ -74,7 +74,7 @@ StatusProgressBar {
 
        Default value: "So-so"
     */
-    property string labelSoso: qsTr("So-so")
+    property string labelSoso: qsTr("Okay")
     /*!
        \qmlproperty string StatusPasswordStrengthIndicator::labelGood
        This property holds the text shown when the strength is StatusPasswordStrengthIndicator.Strength.Good.
@@ -88,7 +88,7 @@ StatusProgressBar {
 
        Default value: "Great"
     */
-    property string labelGreat: qsTr("Great")
+    property string labelGreat: qsTr("Very strong")
 
     enum Strength {
         None, // 0

ui/StatusQ/src/StatusQ/Popups/StatusSimpleTextPopup.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core 0.1
+import StatusQ.Popups.Dialog 0.1
+
+StatusDialog {
+    width: 600
+    padding: 0
+    standardButtons: Dialog.Ok
+
+    property alias content: contentText
+
+    StatusScrollView {
+        id: scrollView
+        anchors.fill: parent
+        contentWidth: availableWidth
+        StatusBaseText {
+            id: contentText
+            width: scrollView.availableWidth
+            wrapMode: Text.Wrap
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Popups/qmldir

@@ -14,5 +14,6 @@ StatusModalDivider 0.1 StatusModalDivider.qml
 StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml
 StatusSearchPopup 0.1 StatusSearchPopup.qml
 StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
+StatusSimpleTextPopup 0.1 StatusSimpleTextPopup.qml
 StatusStackModal 0.1 StatusStackModal.qml
 StatusSuccessAction 0.1 StatusSuccessAction.qml

ui/StatusQ/src/assets.qrc

@@ -8339,6 +8339,11 @@
         <file>assets/png/onboarding/profile_fetching_in_progress.png</file>
         <file>assets/png/onboarding/seed-phrase.png</file>
         <file>assets/png/onboarding/welcome.png</file>
+        <file>assets/png/onboarding/status_totebag_artwork_1.png</file>
+        <file>assets/png/onboarding/status_generate_keys.png</file>
+        <file>assets/png/onboarding/create_profile_seed.png</file>
+        <file>assets/png/onboarding/create_profile_keycard.png</file>
+        <file>assets/png/onboarding/enable_biometrics.png</file>
         <file>assets/png/onRampProviders/latamex.png</file>
         <file>assets/png/onRampProviders/mercuryo.png</file>
         <file>assets/png/onRampProviders/moonPay.png</file>

ui/StatusQ/src/statusq.qrc

@@ -245,6 +245,7 @@
         <file>StatusQ/Popups/StatusSearchLocationMenu.qml</file>
         <file>StatusQ/Popups/StatusSearchPopup.qml</file>
         <file>StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
+        <file>StatusQ/Popups/StatusSimpleTextPopup.qml</file>
         <file>StatusQ/Popups/StatusStackModal.qml</file>
         <file>StatusQ/Popups/StatusSuccessAction.qml</file>
         <file>StatusQ/Popups/qmldir</file>