WIP feat(Onboarding) Implement new Login screen

Fixes #17057
status-im · Jan 14, 2025 · 0157c62 · 0157c62
1 parent 866a1a6
commit 0157c62
Show file tree

Hide file tree

Showing 14 changed files with 1,040 additions and 4 deletions.
diff --git a/storybook/pages/LoginFlowPage.qml b/storybook/pages/LoginFlowPage.qml
@@ -0,0 +1,184 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQml.Models 2.15
+
+import StatusQ 0.1
+import StatusQ.Core 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 AppLayouts.Onboarding.enums 1.0
+import AppLayouts.Onboarding2.stores 1.0
+
+import AppLayouts.Login 1.0
+
+import utils 1.0
+
+SplitView {
+    id: root
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    LoginFlow {
+        id: loginLayout
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        loginAccountsModel: ListModel {
+            readonly property var data: [
+                {
+                    keycardCreatedAccount: false,
+                    colorId: 1,
+                    colorHash: [{colorId: 3, segmentLength: 2}, {colorId: 7, segmentLength: 1}, {colorId: 4, segmentLength: 2}],
+                    username: "Bob",
+                    thumbnailImage: Theme.png("collectibles/Doodles"),
+                    keyUid: "uid_1"
+                },
+                {
+                    keycardCreatedAccount: false,
+                    colorId: 2,
+                    colorHash: [{colorId: 9, segmentLength: 1}, {colorId: 7, segmentLength: 3}, {colorId: 10, segmentLength: 2}],
+                    username: "John",
+                    thumbnailImage: Theme.png("collectibles/CryptoPunks"),
+                    keyUid: "uid_2"
+                },
+                {
+                    keycardCreatedAccount: false,
+                    colorId: 3,
+                    colorHash: [],
+                    username: "8️⃣6️⃣.eth",
+                    thumbnailImage: "",
+                    keyUid: "uid_4"
+                },
+                {
+                    keycardCreatedAccount: true,
+                    colorId: 4,
+                    colorHash: [{colorId: 2, segmentLength: 4}, {colorId: 6, segmentLength: 3}, {colorId: 11, segmentLength: 1}],
+                    username: "Very long username that should eventually elide on the right side",
+                    thumbnailImage: Theme.png("collectibles/SuperRare"),
+                    keyUid: "uid_3"
+                }
+            ]
+            Component.onCompleted: append(data)
+        }
+        onboardingStore: OnboardingStore {
+            // keycard
+            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-- // SIMULATION: decrease the remaining PIn attempts
+                if (keycardRemainingPinAttempts <= 0) { // SIMULATION: "lock" the keycard
+                    ctrlKeycardState.currentIndex = ctrlKeycardState.indexOfValue(Onboarding.KeycardState.Locked)
+                    keycardRemainingPinAttempts = 5
+                }
+                return valid
+            }
+
+            // password
+            signal accountLoginError(string error)
+        }
+        isBiometricsLogin: localAccountSettings.storeToKeychainValue === Constants.keychain.storedValue.store
+
+        onLoginRequested: (keyUid, method, data) => {
+                              logs.logEvent("onLoginRequested", ["keyUid", "method", "data"], arguments)
+
+                              // SIMULATION: emit an error in case of wrong password
+                              if (method === Onboarding.LoginMethod.Password && data.password !== ctrlPassword.text) {
+                                  onboardingStore.accountLoginError("file is not a database")
+                              }
+                          }
+        onOnboardingCreateProfileFlowRequested: logs.logEvent("onOnboardingCreateProfileFlowRequested")
+        onOnboardingLoginFlowRequested: logs.logEvent("onOnboardingLoginFlowRequested")
+        onUnlockWithSeedphraseRequested: logs.logEvent("onUnlockWithSeedphraseRequested")
+        onLostKeycard: logs.logEvent("onLostKeycard")
+
+        QtObject {
+            id: localAccountSettings
+            readonly property string storeToKeychainValue: ctrlTouchIdUser.checked ? Constants.keychain.storedValue.store : ""
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 150
+        SplitView.preferredHeight: 150
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            RowLayout {
+                Layout.fillWidth: true
+                Label {
+                    text: "Password:\t"
+                }
+                TextField {
+                    id: ctrlPassword
+                    text: "0123456789"
+                    placeholderText: "Example password"
+                    selectByMouse: true
+                }
+                Switch {
+                    id: ctrlTouchIdUser
+                    text: "Touch ID login"
+                    checked: true
+                }
+
+                Label {
+                    text: "Selected user ID: %1".arg(loginLayout.selectedUserKeyId || "N/A")
+                }
+            }
+
+            RowLayout {
+                Layout.fillWidth: true
+                Label {
+                    text: "Keycard PIN:\t"
+                }
+                TextField {
+                    id: ctrlPin
+                    text: "111111"
+                    inputMask: "999999"
+                    selectByMouse: true
+                }
+                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=801-42615&m=dev
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusPasswordInput.qml
@@ -35,6 +35,8 @@ StatusTextField {
     */
     property string signingPhrase: ""
 
+    property bool hasError
+
     QtObject {
         id: d
 
@@ -44,7 +46,6 @@ StatusTextField {
         readonly property int signingPhraseWordPadding: 8
         readonly property int signingPhraseWordsSpacing: 8
         readonly property int signingPhraseWordsHeight: 30
-
     }
 
     leftPadding: d.inputTextPadding
@@ -57,13 +58,12 @@ StatusTextField {
     selectByMouse: true
 
     echoMode: TextInput.Password
-    color: Theme.palette.directColor1
 
     background: Rectangle {
         color: Theme.palette.baseColor2
         radius: d.radius
-        border.width: root.focus ? 1 : 0
-        border.color: Theme.palette.primaryColor1
+        border.width: root.focus || root.hasError ? 1 : 0
+        border.color: root.hasError ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
     }
 
     RowLayout {

diff --git a/ui/StatusQ/src/onboarding/enums.h b/ui/StatusQ/src/onboarding/enums.h
@@ -25,6 +25,11 @@ class OnboardingEnums
         LoginWithKeycard
     };
 
+    enum class LoginMethod {
+        Password,
+        Keycard,
+    };
+
     enum class KeycardState {
         NoPCSCService,
         PluginReader,
@@ -55,6 +60,7 @@ class OnboardingEnums
 private:
     Q_ENUM(PrimaryFlow)
     Q_ENUM(SecondaryFlow)
+    Q_ENUM(LoginMethod)
     Q_ENUM(KeycardState)
     Q_ENUM(AddKeyPairState)
     Q_ENUM(SyncState)