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/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,44 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import AppLayouts.Onboarding2.pages 1.0
+
+Item {
+    id: root
+
+    KeycardEnterPinPage {
+        id: page
+        anchors.fill: parent
+        existingPin: "111111"
+        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(page.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

storybook/pages/KeycardIntroPagePage.qml

@@ -0,0 +1,104 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import AppLayouts.Onboarding2.pages 1.0
+
+import utils 1.0
+
+Item {
+    id: root
+
+    Loader {
+        id: loader
+        anchors.fill: parent
+        sourceComponent: {
+            switch (ctrlKeycardState.currentValue) {
+            case Constants.startupState.keycardEmpty: return emptyPage
+            case Constants.startupState.keycardNotEmpty: return notEmptyPage
+            default: introPage
+            }
+        }
+    }
+
+    Component {
+        id: introPage
+        KeycardIntroPage {
+            keycardState: ctrlKeycardState.currentValue
+            displayPromoBanner: ctrlDisplayPromo.checked
+            onEmptyKeycardDetected: console.warn("!!! EMPTY DETECTED")
+            onNotEmptyKeycardDetected: console.warn("!!! NOT EMPTY DETECTED")
+            onReloadKeycardRequested: console.warn("!!! RELOAD REQUESTED")
+            onOpenLink: Qt.openUrlExternally(link)
+            onOpenLinkWithConfirmation: Qt.openUrlExternally(link)
+        }
+    }
+
+    Component {
+        id: emptyPage
+        KeycardEmptyPage {
+            onCreateProfileWithEmptyKeycardRequested: console.warn("!!! CREATE NEW PROFILE")
+        }
+    }
+
+    Component {
+        id: notEmptyPage
+        KeycardNotEmptyPage {
+            onReloadKeycardRequested: console.warn("!!! RELOAD REQUESTED")
+            onLoginWithThisKeycardRequested: console.warn("!!! LOGIN REQUESTED")
+            onKeycardFactoryResetRequested: console.warn("!!! FACTORY RESET")
+        }
+    }
+
+    RowLayout {
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        CheckBox {
+            id: ctrlDisplayPromo
+            text: "Promo banner"
+            checked: true
+            visible: ctrlKeycardState.currentValue === Constants.startupState.keycardPluginReader
+        }
+        ToolButton {
+            text: "<"
+            onClicked: ctrlKeycardState.decrementCurrentIndex()
+        }
+        ComboBox {
+            id: ctrlKeycardState
+
+            focusPolicy: Qt.NoFocus
+            Layout.preferredWidth: 250
+            model: [
+                // initial
+                Constants.startupState.keycardNoPCSCService,
+                Constants.startupState.keycardPluginReader,
+                Constants.startupState.keycardInsertKeycard,
+                Constants.startupState.keycardInsertedKeycard,
+                Constants.startupState.keycardReadingKeycard,
+                Constants.startupState.keycardRecognizedKeycard,
+                // initial errors
+                Constants.startupState.keycardWrongKeycard, Constants.startupState.keycardNotKeycard,
+                Constants.startupState.keycardLocked, Constants.startupState.keycardMaxPairingSlotsReached,
+                // exit states
+                Constants.startupState.keycardNotEmpty,
+                Constants.startupState.keycardEmpty
+            ]
+        }
+        ToolButton {
+            text: ">"
+            onClicked: ctrlKeycardState.incrementCurrentIndex()
+        }
+    }
+}
+
+// category: Onboarding
+// status: good
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=507-34558&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=507-34583&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=507-34608&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=595-57486&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=595-57709&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=972-44743&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=972-44633&node-type=frame&m=dev
+// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=972-44611&node-type=frame&m=dev