extract Login wizard components

ui/nim-status-client.pro

@@ -128,6 +128,12 @@ DISTFILES += \
     onboarding/Intro.qml \
     onboarding/KeysMain.qml \
     onboarding/Login.qml \
+    onboarding/Login/AccountList.qml \
+    onboarding/Login/AccountSelection.qml \
+    onboarding/Login/AddressView.qml \
+    onboarding/Login/qmldir \
+    onboarding/Login/samples/AccountsData.qml \
+    onboarding/Login/samples/qmldir \
     onboarding/OnboardingMain.qml \
     onboarding/Slide.qml \
     onboarding/img/browser-dark@2x.jpg \

ui/onboarding/ExistingKey.qml

@@ -15,7 +15,6 @@ SwipeView {
         currentItem.txtPassword.textField.focus = true;
     }
 
-
     Item {
         id: wizardStep1
         property Item txtPassword: txtMnemonic
@@ -77,17 +76,17 @@ SwipeView {
             anchors.topMargin: 30
             Column {
                 Image {
-                  source: onboardingModel.currentAccount.identicon
+                    source: onboardingModel.currentAccount.identicon
                 }
             }
             Column {
                 Text {
-                  text: onboardingModel.currentAccount.username
+                    text: onboardingModel.currentAccount.username
                 }
                 Text {
-                  text: onboardingModel.currentAccount.address
+                    text: onboardingModel.currentAccount.address
-                  width: 160
+                    width: 160
-                  elide: Text.ElideMiddle
+                    elide: Text.ElideMiddle
                 }
 
             }
@@ -127,7 +126,7 @@ SwipeView {
         property Item txtPassword: txtConfirmPassword
 
         Text {
-          id: step3Title
+            id: step3Title
             text: "Confirm password"
             font.pointSize: 36
             anchors.top: parent.top
@@ -141,17 +140,17 @@ SwipeView {
             anchors.topMargin: 30
             Column {
                 Image {
-                  source: onboardingModel.currentAccount.identicon
+                    source: onboardingModel.currentAccount.identicon
                 }
             }
             Column {
                 Text {
-                  text: onboardingModel.currentAccount.username
+                    text: onboardingModel.currentAccount.username
                 }
                 Text {
-                  text: onboardingModel.currentAccount.address
+                    text: onboardingModel.currentAccount.address
-                  width: 160
+                    width: 160
-                  elide: Text.ElideMiddle
+                    elide: Text.ElideMiddle
                 }
 
             }
@@ -197,9 +196,9 @@ SwipeView {
             target: onboardingModel
             ignoreUnknownSignals: true
             onLoginResponseChanged: {
-              if(error){
+                if(error){
-                importLoginError.open()
+                    importLoginError.open()
-              }
+                }
             }
         }
 

ui/onboarding/Login.qml

@@ -5,9 +5,10 @@ import QtQuick.Window 2.11
 import QtQuick.Dialogs 1.3
 import "../shared"
 import "../imports"
+import "./Login"
 
 SwipeView {
-    property alias btnGenKey: btnGenKey
+    property alias btnGenKey: accountSelection.btnGenKey
 
     id: swipeView
     anchors.fill: parent
@@ -20,103 +21,8 @@ SwipeView {
         }
     }
 
-    Item {
+    AccountSelection {
-        id: wizardStep1
+        id: accountSelection
-        property int selectedIndex: 0
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-
-        Text {
-            id: title
-            text: "Login"
-            font.pointSize: 36
-            anchors.top: parent.top
-            anchors.topMargin: 20
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        ButtonGroup {
-            id: accountGroup
-        }
-
-        Component {
-            id: addressViewDelegate
-
-            Item {
-                height: 56
-                anchors.right: parent.right
-                anchors.rightMargin: 0
-                anchors.left: parent.left
-                anchors.leftMargin: 0
-
-                Row {
-                    RadioButton {
-                        checked: index == 0 ? true : false
-                        ButtonGroup.group: accountGroup
-                        onClicked: {
-                            wizardStep1.selectedIndex = index
-                        }
-                    }
-                    Column {
-                        Image {
-                            source: identicon
-                        }
-                    }
-                    Column {
-                        Text {
-                            text: username
-                        }
-                    }
-                }
-            }
-        }
-
-        ListView {
-            id: addressesView
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-            anchors.bottom: footer.top
-            anchors.bottomMargin: 0
-            anchors.top: title.bottom
-            anchors.topMargin: 16
-            contentWidth: 200
-            model: loginModel
-            delegate: addressViewDelegate
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            focus: true
-            Keys.onReturnPressed: {
-                selectBtn.clicked()
-            }
-        }
-
-        Item {
-            id: footer
-            width: btnGenKey.width + selectBtn.width + Theme.padding
-            height: btnGenKey.height
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: Theme.padding
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            StyledButton {
-                id: btnGenKey
-                label: "Generate new account"
-            }
-
-            StyledButton {
-                id: selectBtn
-                anchors.left: btnGenKey.right
-                anchors.leftMargin: Theme.padding
-                label: "Select"
-
-                onClicked: {
-                    loginModel.setCurrentAccount(wizardStep1.selectedIndex)
-                    swipeView.incrementCurrentIndex()
-                }
-            }
-        }
     }
 
     Item {
@@ -194,7 +100,7 @@ SwipeView {
             anchors.bottom: parent.bottom
             anchors.bottomMargin: 20
             onClicked: {
-                const selectedAccountIndex = wizardStep1.selectedIndex
+                const selectedAccountIndex = accountSelection.selectedIndex
                 const response = loginModel.login(selectedAccountIndex, txtPassword.textField.text)
                 // TODO: replace me with something graphical (ie spinner)
                 console.log("Logging in...")

ui/onboarding/Login/AccountList.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+//import "../../../../shared"
+//import "../../../../imports"
+import "./samples/"
+
+ListView {
+    property var accounts: AccountsData {}
+
+    id: addressesView
+    anchors.right: parent.right
+    anchors.rightMargin: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+    anchors.bottom: footer.top
+    anchors.bottomMargin: 0
+    anchors.top: title.bottom
+    anchors.topMargin: 16
+    contentWidth: 200
+    height: parent.height
+    model: accounts
+
+    delegate: AddressView {
+      username: model.username
+      identicon: model.identicon
+    }
+
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    focus: true
+    Keys.onReturnPressed: {
+        selectBtn.clicked()
+    }
+}
+
+

ui/onboarding/Login/AccountSelection.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+import QtQuick.Window 2.11
+import QtQuick.Dialogs 1.3
+import "../../shared"
+import "../../imports"
+
+Item {
+    property alias btnGenKey: btnGenKey
+//    property alias selectedIndex: selecte
+
+    id: wizardStep1
+    property int selectedIndex: 0
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+
+    Text {
+        id: title
+        text: "Login"
+        font.pointSize: 36
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    ButtonGroup {
+        id: accountGroup
+    }
+
+    AccountList {
+        id: accountList
+        accounts: loginModel
+    }
+
+    Item {
+        id: footer
+        width: btnGenKey.width + selectBtn.width + Theme.padding
+        height: btnGenKey.height
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Theme.padding
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        StyledButton {
+            id: btnGenKey
+            label: "Generate new account"
+        }
+
+        StyledButton {
+            id: selectBtn
+            anchors.left: btnGenKey.right
+            anchors.leftMargin: Theme.padding
+            label: "Select"
+
+            onClicked: {
+                loginModel.setCurrentAccount(accountList.selectedAccount)
+                swipeView.incrementCurrentIndex()
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/

ui/onboarding/Login/AddressView.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+
+Item {
+    property string username: "Jotaro Kujo"
+    property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
+
+    id: addressViewDelegate
+    height: 56
+    anchors.right: parent.right
+    anchors.rightMargin: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+
+    Row {
+        RadioButton {
+            checked: index == 0 ? true : false
+            ButtonGroup.group: accountGroup
+            onClicked: {
+                wizardStep1.selectedIndex = index
+            }
+        }
+        Column {
+            Image {
+                source: identicon
+            }
+        }
+        Column {
+            Text {
+                text: username
+            }
+        }
+    }
+}

ui/onboarding/Login/qmldir

@@ -0,0 +1,3 @@
+AccountSelection 1.0 AccountSelection.qml
+AccountList 1.0 AccountList.qml
+AddressView 1.0 AddressView.qml

ui/onboarding/Login/samples/AccountsData.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+
+ListModel {
+    ListElement {
+        username: "Ferocious Herringbone Sinewave2"
+        identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
+    }
+    ListElement {
+        username: "Another Account"
+        identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/

ui/onboarding/Login/samples/qmldir

@@ -0,0 +1 @@
+AccountsData 1.0 AccountsData.qml

ui/onboarding/qmldir

@@ -2,5 +2,6 @@ ExistingKey 1.0 ExistingKey.qml
 GenKey 1.0 GenKey.qml
 Intro 1.0 Intro.qml
 KeysMain 1.0 KeysMain.qml
+Login 1.0 Login.qml
 OnboardingMain 1.0 OnboardingMain.qml
 Slide 1.0 Slide.qml