status-desktop/storybook/pages/OnboardingLayoutPage.qml

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 AppLayouts.Onboarding2.stores 1.0
import AppLayouts.Onboarding.enums 1.0

import shared.panels 1.0
import shared.stores 1.0 as SharedStores

SplitView {
    id: root
    orientation: Qt.Vertical

    Logs { id: logs }

    QtObject {
        id: mockDriver
        readonly property string mnemonic: "dog dog dog dog dog dog dog dog dog dog dog dog"
        readonly property var seedWords: ["apple", "banana", "cat", "cow", "catalog", "catch", "category", "cattle", "dog", "elephant", "fish", "grape"]

        // TODO simulation
        function restart() {
            // add keypair state
            // sync state
        }
    }

    OnboardingLayout {
        id: onboarding
        SplitView.fillWidth: true
        SplitView.fillHeight: true
        networkChecksEnabled: true
        onboardingStore: OnboardingStore {
            readonly property int keycardState: ctrlKeycardState.currentValue // enum Onboarding.KeycardState
            property int keycardRemainingPinAttempts: 5

            function setPin(pin: string) { // -> bool
                logs.logEvent("OnboardingStore.setPin", ["pin"], arguments)
                const valid = pin === ctrlPin.text
                if (!valid)
                    keycardRemainingPinAttempts--
                return valid
            }

            property int addKeyPairState // enum Onboarding.AddKeyPairState
            function startKeypairTransfer() { // -> void
                logs.logEvent("OnboardingStore.startKeypairTransfer")
                addKeyPairState = Onboarding.AddKeyPairState.InProgress
            }

            // password
            function getPasswordStrengthScore(password: string) { // -> int
                logs.logEvent("OnboardingStore.getPasswordStrengthScore", ["password"], arguments)
                return Math.min(password.length-1, 4)
            }

            // seedphrase/mnemonic
            function validMnemonic(mnemonic: string) { // -> bool
                logs.logEvent("OnboardingStore.validMnemonic", ["mnemonic"], arguments)
                return mnemonic === mockDriver.mnemonic
            }
            function getMnemonic() { // -> string
                logs.logEvent("OnboardingStore.getMnemonic()")
                return mockDriver.seedWords.join(" ")
            }
            function mnemonicWasShown() { // -> void
                logs.logEvent("OnboardingStore.mnemonicWasShown()")
            }
            function removeMnemonic() { // -> void
                logs.logEvent("OnboardingStore.removeMnemonic()")
            }

            readonly property int syncState: Onboarding.SyncState.InProgress // enum Onboarding.SyncState
            function validateLocalPairingConnectionString(connectionString: string) { // -> bool
                logs.logEvent("OnboardingStore.validateLocalPairingConnectionString", ["connectionString"], arguments)
                return !Number.isNaN(parseInt(connectionString))
            }
            function inputConnectionStringForBootstrapping(connectionString: string) { // -> void
                logs.logEvent("OnboardingStore.inputConnectionStringForBootstrapping", ["connectionString"], arguments)
            }
        }

        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
        biometricsAvailable: ctrlBiometrics.checked

        QtObject {
            id: localAppSettings
            property bool metricsPopupSeen
        }

        onFinished: (primaryFlow, secondaryFlow, data) => {
            console.warn("!!! ONBOARDING FINISHED; primary flow:", primaryFlow, "; secondary:", secondaryFlow, "; data:", JSON.stringify(data))
            logs.logEvent("onFinished", ["primaryFlow", "secondaryFlow", "data"], arguments)

            console.warn("!!! SIMULATION: SHOWING SPLASH")
            stack.clear()
            stack.push(splashScreen, { runningProgressAnimation: true })
            ctrlKeycardState.currentIndex = 0
        }
        onKeycardFactoryResetRequested: {
            logs.logEvent("onKeycardFactoryResetRequested")
            console.warn("!!! FACTORY RESET; RESTARTING FLOW")
            restartFlow()
            ctrlKeycardState.currentIndex = 0
        }
        onKeycardReloaded: {
            logs.logEvent("onKeycardReloaded")
            console.warn("!!! RELOAD KEYCARD")
            ctrlKeycardState.currentIndex = 0
        }
    }

    Component {
        id: splashScreen
        DidYouKnowSplashScreen {
            readonly property string pageClassName: "Splash"
            property bool runningProgressAnimation
            NumberAnimation on progress {
                from: 0.0
                to: 1
                duration: onboarding.splashScreenDurationMs
                running: runningProgressAnimation
                onStopped: {
                    console.warn("!!! SPLASH SCREEN DONE")
                    console.warn("!!! RESTARTING FLOW")
                    onboarding.restartFlow()
                }
            }
        }
    }

    Connections {
        target: Global
        function onOpenLink(link: string) {
            console.warn("Opening link in an external web browser:", link)
            Qt.openUrlExternally(link)
        }
        function onOpenLinkWithConfirmation(link: string, domain: string) {
            console.warn("Opening link in an external web browser:", link, domain)
            Qt.openUrlExternally(link)
        }
    }

    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.pageClassName : "")
                }
                Label {
                    text: `Current flow: ${onboarding.primaryFlow} -> ${onboarding.secondaryFlow}`
                }
                Label {
                    text: "Stack depth: %1".arg(onboarding.stack.depth)
                }
            }
            Item { Layout.fillWidth: true }
            ColumnLayout {
                Layout.fillWidth: true
                RowLayout {
                    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(mockDriver.mnemonic)
                    }
                    Button {
                        text: "Copy PIN (\"%1\")".arg(ctrlPin.text)
                        focusPolicy: Qt.NoFocus
                        enabled: ctrlPin.acceptableInput
                        onClicked: ClipboardUtils.setText(ctrlPin.text)
                    }
                    Switch {
                        id: ctrlBiometrics
                        text: "Biometrics?"
                        checked: true
                    }
                }
                RowLayout {
                    Label {
                        text: "Keycard PIN:"
                    }
                    TextField {
                        id: ctrlPin
                        text: "111111"
                        inputMask: "999999"
                    }
                    Label {
                        text: "State:"
                    }
                    ComboBox {
                        Layout.preferredWidth: 300
                        id: ctrlKeycardState
                        focusPolicy: Qt.NoFocus
                        textRole: "text"
                        valueRole: "value"
                        model: [
                            { value: Onboarding.KeycardState.NoPCSCService, text: "NoPCSCService" },
                            { value: Onboarding.KeycardState.PluginReader, text: "PluginReader" },
                            { value: Onboarding.KeycardState.InsertKeycard, text: "InsertKeycard" },
                            { value: Onboarding.KeycardState.ReadingKeycard, text: "ReadingKeycard" },
                            { value: Onboarding.KeycardState.WrongKeycard, text: "WrongKeycard" },
                            { value: Onboarding.KeycardState.NotKeycard, text: "NotKeycard" },
                            { value: Onboarding.KeycardState.MaxPairingSlotsReached, text: "MaxPairingSlotsReached" },
                            { value: Onboarding.KeycardState.Locked, text: "Locked" },
                            { value: Onboarding.KeycardState.NotEmpty, text: "NotEmpty" },
                            { value: Onboarding.KeycardState.Empty, text: "Empty" }
                        ]
                    }
                }
            }
        }
    }
}

// category: Onboarding
// status: good
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=1-25&node-type=canvas&m=dev