feat(Onboarding): Create Profile & Login flows

libs/StatusQ/qml/Status/Core/StatusBaseText.qml

@@ -17,7 +17,7 @@ import Status.Core.Theme
            width: 240
            text: qsTr("Hello World!")
            font.pixelSize: 24
-           color: Theme.pallete.directColor1
+           color: Theme.palette.directColor1
        }
    \endqml
 

storybook/pages/BackupSeedphraseFlowPage.qml

@@ -0,0 +1,141 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1 as SQUtils
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+import utils 1.0
+
+import AppLayouts.Onboarding2.pages 1.0
+
+Item {
+    id: root
+
+    QtObject {
+        id: d
+        readonly property var seedWords: ["apple", "banana", "cat", "cow", "catalog", "catch", "category", "cattle", "dog", "elephant", "fish", "grape"]
+        readonly property int numWordsToVerify: 4
+    }
+
+    StackView {
+        id: stack
+        anchors.fill: parent
+        initialItem: backupSeedIntroPage
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.BackButton
+        enabled: stack.depth > 1 && !stack.busy
+        cursorShape: undefined // fall thru
+        onClicked: stack.pop()
+    }
+
+    StatusBackButton {
+        width: 44
+        height: 44
+        anchors.left: parent.left
+        anchors.leftMargin: Theme.padding
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Theme.padding
+        opacity: stack.depth > 1 && !stack.busy ? 1 : 0
+        visible: opacity > 0
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+        onClicked: stack.pop()
+    }
+
+    Label {
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        text: !!stack.currentItem && stack.currentItem.pageClassName === "BackupSeedphraseVerify" ?
+                  "Hint: %1".arg(stack.currentItem.seedWordsToVerify.map((entry) => entry.seedWord))
+                : ""
+    }
+
+    Connections {
+        id: mainHandler
+        target: stack.currentItem
+        ignoreUnknownSignals: true
+
+        function onBackupSeedphraseRequested() {
+            stack.push(backupSeedAcksPage)
+        }
+
+        function onBackupSeedphraseContinue() {
+            stack.push(backupSeedRevealPage)
+        }
+
+        function onBackupSeedphraseConfirmed() {
+            stack.push(backupSeedVerifyPage)
+        }
+
+        function onBackupSeedphraseVerified() {
+            stack.push(backupSeedOutroPage)
+        }
+
+        function onBackupSeedphraseRemovalConfirmed() {
+            console.warn("!!! FLOW FINISHED; RESTART")
+            stack.pop(null)
+        }
+    }
+
+    Component {
+        id: backupSeedIntroPage
+        BackupSeedphraseIntro {
+            onBackupSeedphraseRequested: console.warn("!!! SEED BACKUP REQUESTED")
+        }
+    }
+
+    Component {
+        id: backupSeedAcksPage
+        BackupSeedphraseAcks {
+            onBackupSeedphraseContinue: console.warn("!!! SEED ACKED")
+        }
+    }
+
+    Component {
+        id: backupSeedRevealPage
+        BackupSeedphraseReveal {
+            seedWords: d.seedWords
+            onBackupSeedphraseConfirmed: console.warn("!!! SEED CONFIRMED")
+        }
+    }
+
+    Component {
+        id: backupSeedVerifyPage
+        BackupSeedphraseVerify {
+            seedWordsToVerify: {
+                let result = []
+                const randomIndexes = SQUtils.Utils.nSamples(d.numWordsToVerify, d.seedWords.length)
+                for (const i of randomIndexes) {
+                    result.push({seedWordNumber: i+1, seedWord: d.seedWords[i]})
+                }
+                return result
+            }
+            onBackupSeedphraseVerified: console.warn("!!! ALL VERIFIED")
+        }
+    }
+
+    Component {
+        id: backupSeedOutroPage
+        BackupSeedphraseOutro {
+            onBackupSeedphraseRemovalConfirmed: console.warn("!!! SEED REMOVAL CONFIRMED")
+        }
+    }
+}
+
+// category: Onboarding
+// status: good
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-40428&node-type=instance&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-40730&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=522-36751&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=522-37165&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=783-33987&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-44817&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=783-34183&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-44231&node-type=frame&m=dev

storybook/pages/ColorsPage.qml

@@ -146,6 +146,10 @@ SplitView {
                     enabled: searchField.searchText !== ""
                     onClicked: searchField.clear()
                 }
+                Label {
+                    text: "INFO: Reload the page after selecting 'Dark mode'"
+                    font.weight: Font.Medium
+                }
             }
 
             ColorFlow {

storybook/pages/DidYouKnowSplashScreenPage.qml

@@ -19,23 +19,29 @@ SplitView {
             SplitView.fillHeight: true
             SplitView.fillWidth: true
             progress: progressSlider.position
+            messagesEnabled: ctrlMessagesEnabled.checked
         }
     }
 
     Pane {
-         SplitView.minimumWidth: 300
-         SplitView.preferredWidth: 300
-         RowLayout {
-             Label {
-                 text: "Progress"
-             }
-             Slider {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+        ColumnLayout {
+            Layout.fillWidth: true
+            Label {
+                text: "Progress"
+            }
+            Slider {
                 id: progressSlider
-             }
-         }
+            }
+            Switch {
+                id: ctrlMessagesEnabled
+                text: "Messages enabled"
+            }
+        }
     }
 }
 
 // category: Panels
-
+// status: good
 // https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=25878%3A518438&t=C7xTpNib38t7s7XU-4

storybook/pages/KeycardAddKeyPairPagePage.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core.Backpressure 0.1
+
+import AppLayouts.Onboarding2.pages 1.0
+import AppLayouts.Onboarding.enums 1.0
+
+Item {
+    id: root
+
+    KeycardAddKeyPairPage {
+        id: progressPage
+        anchors.fill: parent
+        addKeyPairState: Onboarding.AddKeyPairState.InProgress
+        timeoutInterval: 5000
+        onKeypairAddTryAgainRequested: {
+            console.warn("!!! onKeypairAddTryAgainRequested")
+            addKeyPairState = Onboarding.AddKeyPairState.InProgress
+            Backpressure.debounce(root, 2000, function() {
+                console.warn("!!! SIMULATION: SUCCESS")
+                addKeyPairState = Onboarding.AddKeyPairState.Success
+            })()
+        }
+        onKeypairAddContinueRequested: console.warn("!!! onKeypairAddContinueRequested")
+        onReloadKeycardRequested: console.warn("!!! onReloadKeycardRequested")
+        onCreateProfilePageRequested: console.warn("!!! onCreateProfilePageRequested")
+    }
+
+    ComboBox {
+        id: ctrlState
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        width: 350
+        model: ["Onboarding.AddKeyPairState.InProgress", "Onboarding.AddKeyPairState.Success", "Onboarding.AddKeyPairState.Failed"]
+        onCurrentIndexChanged: progressPage.addKeyPairState = currentIndex
+    }
+}
+
+// category: Onboarding
+// status: good
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1305-48023&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1305-48081&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1305-48102&node-type=frame&m=dev

storybook/pages/KeycardCreatePinPagePage.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.15
+
+import AppLayouts.Onboarding2.pages 1.0
+
+Item {
+    id: root
+
+    KeycardCreatePinPage {
+        anchors.fill: parent
+        onKeycardPinCreated: (pin) => console.warn("!!! PIN CREATED:", pin)
+    }
+}
+
+// category: Onboarding
+// status: good
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=595-57785&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=595-57989&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=595-58027&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=507-34789&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1053-53693&node-type=frame&m=dev

storybook/pages/KeycardEnterPinPagePage.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import AppLayouts.Onboarding2.pages 1.0
+
+Item {
+    id: root
+
+    readonly property string existingPin: "111111"
+
+    KeycardEnterPinPage {
+        id: page
+        anchors.fill: parent
+        tryToSetPinFunction: (pin) => {
+                                 const valid = pin === root.existingPin
+                                 if (!valid)
+                                     remainingAttempts--
+                                 return valid
+                             }
+        remainingAttempts: 3
+        onKeycardPinEntered: (pin) => {
+                                 console.warn("!!! PIN:", pin)
+                                 console.warn("!!! RESETTING FLOW")
+                                 state = "entering"
+                             }
+        onReloadKeycardRequested: {
+            console.warn("!!! RELOAD KEYCARD")
+            remainingAttempts--
+            state = "entering"
+        }
+        onKeycardFactoryResetRequested: {
+            console.warn("!!! FACTORY RESET KEYCARD")
+            remainingAttempts = 3
+            state = "entering"
+        }
+    }
+
+    Label {
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        text: "Hint: %1".arg(root.existingPin)
+    }
+}
+
+// category: Onboarding
+// status: good
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1281-45942&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1281-45950&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1281-45959&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1281-45966&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1281-45996&node-type=frame&m=dev