feat(@desktop/onboarding): refactor/restructure ui/onboarding to new architecture

closes #3799
This commit is contained in:
Khushboo Mehta 2021-10-12 20:26:02 +02:00 committed by Iuri Matias
parent 80de3f75eb
commit ee5fef7dda
28 changed files with 181 additions and 167 deletions

View File

@ -2,10 +2,13 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import "../../shared"
import "../../shared/status"
Rectangle {
import "../../../../shared"
import "../../../../shared/status"
Rectangle {
id: accountViewDelegate
property string username: "Jotaro Kujo"
property string keyUid: "0x123345677890987654321123456"
property string address: ""
@ -17,7 +20,6 @@ Rectangle {
}
property bool isHovered: false
id: root
height: 64
anchors.right: parent.right
anchors.left: parent.left
@ -69,8 +71,8 @@ Rectangle {
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
checked: root.selected
isHovered: root.isHovered
checked: accountViewDelegate.selected
isHovered: accountViewDelegate.isHovered
}
MouseArea {
@ -81,16 +83,10 @@ Rectangle {
onAccountSelect(index)
}
onEntered: {
root.isHovered = true
accountViewDelegate.isHovered = true
}
onExited: {
root.isHovered = false
accountViewDelegate.isHovered = false
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:64;width:450}
}
##^##*/

View File

@ -1,22 +1,22 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import "./samples/"
import "../controls"
import utils 1.0
ListView {
property var accounts: AccountsData {}
id: accountsView
property var isSelected: function () {}
property var onAccountSelect: function () {}
id: accountsView
anchors.fill: parent
model: accounts
focus: true
spacing: Style.current.smallPadding
clip: true
delegate: AccountView {
delegate: AccountViewDelegate {
username: model.username
identicon: model.thumbnailImage || model.identicon
keyUid: model.keyUid
@ -29,9 +29,3 @@ ListView {
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

View File

@ -2,13 +2,14 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.14
import utils 1.0
import "../shared"
import "../shared/status"
import "../../../../shared"
import "../../../../shared/status"
ModalPopup {
id: popup
displayCloseButton: false
//% "Before you get started..."
title: qsTrId("before-you-get-started---")

View File

@ -2,8 +2,9 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import "../../shared"
import "../../shared/status"
import "../../../../shared"
import "../../../../shared/status"
ModalPopup {
property var onOpenModalClick: function () {}
@ -31,9 +32,3 @@ ModalPopup {
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:500;width:400}
}
##^##*/

View File

@ -3,8 +3,9 @@ import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import utils 1.0
import "../shared"
import "../shared/status"
import "../../../../shared"
import "../../../../shared/status"
ModalPopup {
property var onConfirmSeedClick: function () {}
@ -63,9 +64,3 @@ ModalPopup {
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:500;width:400}
}
##^##*/

View File

@ -1,11 +1,14 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import StatusQ.Controls 0.1
import utils 1.0
import "../shared"
import "./Login"
import "../../../../shared"
import "../panels"
import "../stores"
ModalPopup {
property int selectedIndex: 0
@ -15,12 +18,12 @@ ModalPopup {
//% "Choose a chat name"
title: qsTrId("intro-wizard-title2")
AccountList {
AccountListPanel {
id: accountList
anchors.fill: parent
interactive: false
accounts: onboardingModel
model: OnboardingStore.onBoardingModel
isSelected: function (index) {
return index === selectedIndex
}
@ -42,9 +45,3 @@ ModalPopup {
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:500;width:400}
}
##^##*/

View File

@ -2,8 +2,9 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import "../shared"
import "../shared/status"
import "../../../../shared"
import "../../../../shared/status"
ModalPopup {
id: popup

View File

@ -1,14 +1,16 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import "../../imports/utils" as Imports
import "../../shared"
import "../../shared/keycard"
import utils 1.0 as Imports
import "../../../../shared"
import "../../../../shared/keycard"
StatusModal {
property bool firstPINFieldValid: false
@ -17,6 +19,8 @@ StatusModal {
property string repeatPINValidationError: ""
property bool submitted: false
signal submitBtnClicked(string pin)
id: popup
header.title: qsTr("Create PIN")
anchors.centerIn: parent
@ -102,7 +106,7 @@ StatusModal {
onClicked: {
submitted = true
keycardModel.init(firstPINField.text)
submitBtnClicked()
popup.close()
}
}

View File

@ -3,8 +3,9 @@ import QtQuick.Controls 2.13
import QtQuick.Dialogs 1.3
import utils 1.0
import "../shared"
import "../shared/status"
import "../../../../shared"
import "../../../../shared/status"
import "../stores"
ModalPopup {
id: popup
@ -32,7 +33,7 @@ ModalPopup {
StatusImageIdenticon {
id: identicon
source: onboardingModel.currentAccount.identicon
source: OnboardingStore.currentAccount.identicon
anchors.top: info.bottom
anchors.topMargin: Style.current.bigPadding
anchors.horizontalCenter: parent.horizontalCenter
@ -45,7 +46,7 @@ ModalPopup {
anchors.top: identicon.bottom
anchors.topMargin: Style.current.padding
anchors.horizontalCenter: identicon.horizontalCenter
text: onboardingModel.currentAccount.username
text: OnboardingStore.currentAccount.username
font.weight: Font.Bold
font.pixelSize: 15
}
@ -54,7 +55,7 @@ ModalPopup {
anchors.top: username.bottom
anchors.topMargin: Style.current.halfPadding
anchors.horizontalCenter: username.horizontalCenter
text: onboardingModel.currentAccount.address
text: OnboardingStore.currentAccount.address
width: 120
}

View File

@ -2,8 +2,11 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import "../../shared"
import "../../shared/status"
import "../../../../shared"
import "../../../../shared/status"
import "../panels"
import "../stores"
ModalPopup {
property var onAccountSelect: function () {}
@ -12,13 +15,13 @@ ModalPopup {
//% "Your keys"
title: qsTrId("your-keys")
AccountList {
AccountListPanel {
id: accountList
anchors.fill: parent
accounts: loginModel
model: LoginStore.loginModelInst
isSelected: function (index, keyUid) {
return loginModel.currentAccount.keyUid === keyUid
return LoginStore.loginModelInst.currentAccount.keyUid === keyUid
}
onAccountSelect: function(index) {
@ -40,9 +43,3 @@ ModalPopup {
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:500;width:400}
}
##^##*/

View File

@ -1,10 +1,11 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Dialogs 1.3
import StatusQ.Controls 0.1
import utils 1.0
import "../shared"
import "../../../../shared"
ModalPopup {
property bool loading: false

View File

@ -0,0 +1,19 @@
pragma Singleton
import QtQuick 2.13
QtObject {
property var keycardModelInst: keycardModel
function startConnection() {
keycardModel.startConnection()
}
function init(pin) {
keycardModel.init(pin)
}
function recoverAccount() {
keycardModel.recoverAccount()
}
}

View File

@ -0,0 +1,24 @@
pragma Singleton
import QtQuick 2.13
QtObject {
property var loginModelInst: loginModel
property var currentAccount: loginModel.currentAccount
function login(password) {
loginModel.login(password)
}
function tryToObtainPassword() {
loginModel.tryToObtainPassword()
}
function setCurrentAccount(index) {
loginModel.setCurrentAccount(index)
}
function rowCount() {
return loginModel.rowCount()
}
}

View File

@ -0,0 +1,29 @@
pragma Singleton
import QtQuick 2.13
QtObject {
property var onBoardingModel: onboardingModel
property var currentAccount: onboardingModel.currentAccount
function importMnemonic(mnemonic) {
onboardingModel.importMnemonic(mnemonic)
}
function setCurrentAccount(selectedAccountIdx) {
onboardingModel.setCurrentAccount(selectedAccountIdx)
}
property ListModel accountsSampleData: ListModel {
ListElement {
username: "Ferocious Herringbone Sinewave2"
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
address: "0x123456789009876543211234567890"
}
ListElement {
username: "Another Account"
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
address: "0x123456789009876543211234567890"
}
}
}

View File

@ -0,0 +1,3 @@
singleton OnboardingStore 1.0 OnboardingStore.qml
singleton LoginStore 1.0 LoginStore.qml
singleton KeycardStore 1.0 KeycardStore.qml

View File

@ -3,6 +3,10 @@ import QtQuick.Controls 2.13
import utils 1.0
import "../popups"
import "../stores"
import "../shared"
Item {
property var onClosed: function () {}
id: existingKeyView
@ -18,7 +22,7 @@ Item {
onConfirmSeedClick: function (mnemonic) {
wentNext = true
enterSeedPhraseModal.close()
onboardingModel.importMnemonic(mnemonic)
OnboardingStore.importMnemonic(mnemonic)
removeMnemonicAfterLogin = true
recoverySuccessModal.open()
}
@ -51,9 +55,3 @@ Item {
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

View File

@ -1,5 +1,9 @@
import QtQuick 2.13
import "../popups"
import "../stores"
import "../shared"
Item {
property var onClosed: function () {}
id: genKeyView
@ -14,7 +18,7 @@ Item {
id: genKeyModal
onNextClick: function (selectedIndex) {
wentNext = true
onboardingModel.setCurrentAccount(selectedIndex)
OnboardingStore.setCurrentAccount(selectedIndex)
createPasswordModal.open()
}
onClosed: function () {
@ -31,9 +35,3 @@ Item {
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
}
##^##*/

View File

@ -1,6 +1,8 @@
import QtQuick 2.13
import "./Keycard"
import "../shared/keycard"
import "../../../../shared/keycard"
import "../popups"
import "../stores"
Item {
enum OnboardingFlow {
@ -16,11 +18,12 @@ Item {
id: keycardView
Component.onCompleted: {
insertCard.open()
keycardModel.startConnection()
KeycardStore.startConnection()
}
CreatePINModal {
KeycardCreatePINModal {
id: createPinModal
onSubmitBtnClicked: KeycardStore.init(pin)
onClosed: function () {
if (!createPinModal.submitted) {
keycardView.onClosed()
@ -55,7 +58,7 @@ Item {
Connections {
id: connection
target: keycardModel
target: OnboardingStore.keycardModelInst
ignoreUnknownSignals: true
onCardUnpaired: {
@ -69,7 +72,7 @@ Item {
onCardAuthenticated: {
switch (flow) {
case OnboardingFlow.Recover: {
keycardModel.recoverAccount();
KeycardStore.recoverAccount();
break;
}
case OnboardingFlow.Generate: {
@ -108,4 +111,4 @@ Item {
}
}
}
}

View File

@ -1,8 +1,10 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Controls.Universal 2.12
import "../shared"
import "../shared/status"
import "../../../../shared"
import "../../../../shared/status"
import "../popups"
import utils 1.0
@ -80,7 +82,6 @@ Page {
font.pixelSize: 15
}
StatusButton {
id: btnGenKey
anchors.top: txtDesc1.bottom
@ -112,9 +113,3 @@ Page {
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.8999999761581421;height:760;width:1080}
}
##^##*/

View File

@ -3,11 +3,13 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import QtGraphicalEffects 1.13
import "../shared"
import "../shared/status"
import "../../../../shared"
import "../../../../shared/status"
import "../popups"
import "../stores"
import utils 1.0
import "./Login"
Item {
property var onGenKeyClicked: function () {}
@ -18,8 +20,8 @@ Item {
anchors.fill: parent
function setCurrentFlow(isLogin) {
loginModel.isCurrentFlow = isLogin;
onboardingModel.isCurrentFlow = !isLogin;
LoginStore.loginModelInst.isCurrentFlow = isLogin;
OnboardingStore.onBoardingModel.isCurrentFlow = !isLogin;
}
function doLogin(password) {
@ -28,8 +30,8 @@ Item {
setCurrentFlow(true);
loading = true
loginModel.login(password)
applicationWindow.checkForStoringPassToKeychain(loginModel.currentAccount.username, password, false)
LoginStore.login(password)
applicationWindow.checkForStoringPassToKeychain(LoginStore.currentAccount.username, password, false)
txtPassword.textField.clear()
}
@ -38,7 +40,7 @@ Item {
{
connection.enabled = true
txtPassword.visible = false
loginModel.tryToObtainPassword()
LoginStore.tryToObtainPassword()
}
else
{
@ -53,7 +55,7 @@ Item {
Connections{
id: connection
target: loginModel
target: LoginStore.loginModelInst
onObtainingPasswordError: {
enabled = false
@ -91,12 +93,12 @@ Item {
StatusImageIdenticon {
id: userImage
anchors.horizontalCenter: parent.horizontalCenter
source: loginModel.currentAccount.thumbnailImage
source: LoginStore.currentAccount.thumbnailImage
}
StyledText {
id: usernameText
text: loginModel.currentAccount.username
text: LoginStore.currentAccount.username
font.weight: Font.Bold
font.pixelSize: 17
anchors.top: userImage.bottom
@ -115,7 +117,7 @@ Item {
SelectAnotherAccountModal {
id: selectAnotherAccountModal
onAccountSelect: function (index) {
loginModel.setCurrentAccount(index)
LoginStore.setCurrentAccount(index)
resetLogin()
}
onOpenModalClick: function () {
@ -162,7 +164,7 @@ Item {
changeAccountBtn.isHovered = false
}
onClicked: {
if (loginModel.rowCount() > 1) {
if (LoginStore.rowCount() > 1) {
selectAnotherAccountModal.open()
} else {
confirmAddExstingKeyModal.open()
@ -223,7 +225,7 @@ Item {
}
Connections {
target: loginModel
target: LoginStore.loginModelInst
ignoreUnknownSignals: true
onLoginResponseChanged: {
if (error) {

View File

@ -6,7 +6,7 @@ import QtGraphicalEffects 1.13
import utils 1.0
import "../../../../shared"
import "../../../../shared/status"
import "../../../../onboarding/" as OnboardingComponents
import "../../Onboarding/shared" as OnboardingComponents
Item {
id: privacyContainer

View File

@ -11,7 +11,7 @@ import QtQuick.Controls.Universal 2.12
import DotherSide 0.1
import "./onboarding"
import "./app/AppLayouts/Onboarding/views"
import "./app"
import "./sounds"
import "./shared"
@ -539,7 +539,7 @@ StatusWindow {
Component {
id: keysMain
KeysMain {
KeysMainView {
btnGenKey.onClicked: applicationWindow.navigateTo("GenKey")
btnExistingKey.onClicked: applicationWindow.navigateTo("ExistingKey")
btnKeycard.onClicked: applicationWindow.navigateTo("KeycardFlowSelection")
@ -548,7 +548,7 @@ StatusWindow {
Component {
id: existingKey
ExistingKey {
ExistingKeyView {
onClosed: function () {
removeMnemonicAfterLogin = false
if (hasAccounts) {
@ -562,7 +562,7 @@ StatusWindow {
Component {
id: genKey
GenKey {
GenKeyView {
onClosed: function () {
if (hasAccounts) {
applicationWindow.navigateTo("InitialState")
@ -575,7 +575,7 @@ StatusWindow {
Component {
id: keycardFlowSelection
KeycardFlowSelection {
KeycardFlowSelectionView {
onClosed: function () {
if (hasAccounts) {
applicationWindow.navigateTo("InitialState")
@ -588,7 +588,7 @@ StatusWindow {
Component {
id: login
Login {
LoginView {
onGenKeyClicked: function () {
applicationWindow.navigateTo("GenKey")
}

View File

@ -19,9 +19,6 @@ SOURCES = *.qml \
imports/*.qml \
shared/status/*.qml \
shared/keycard/*.qml \
onboarding/*.qml \
onboarding/Login/*.qml \
onboarding/Keycard/*.qml \
app/AppLayouts/*.qml \
app/AppLayouts/Browser/*.qml \
app/AppLayouts/Chat/*.qml \

View File

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

View File

@ -1,4 +0,0 @@
AccountList 1.0 AccountList.qml
AccountView 1.0 AccountView.qml
SelectAnotherAccountModal 1.0 SelectAnotherAccountModal.qml
ConfirmAddExistingKeyModal 1.0 ConfirmAddExistingKeyModal.qml

View File

@ -1,20 +0,0 @@
import QtQuick 2.13
ListModel {
ListElement {
username: "Ferocious Herringbone Sinewave2"
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
address: "0x123456789009876543211234567890"
}
ListElement {
username: "Another Account"
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
address: "0x123456789009876543211234567890"
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

View File

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

View File

@ -1,10 +0,0 @@
ExistingKey 1.0 ExistingKey.qml
GenKey 1.0 GenKey.qml
KeysMain 1.0 KeysMain.qml
Login 1.0 Login.qml
OnboardingMain 1.0 OnboardingMain.qml
EnterSeedPhraseModal 1.0 EnterSeedPhraseModal.qml
CreatePasswordModal 1.0 CreatePasswordModal.qml
GenKeyModal 1.0 GenKeyModal.qml
BeforeGetStartedModal 1.0 BeforeGetStartedModal.qml
KeycardFlowSelection 1.0 KeycardFlowSelection.qml