feat(onboarding): adding initial screens

Closes #4974
This commit is contained in:
Alexandra Betouni 2022-03-05 01:31:31 +02:00 committed by Iuri Matias
parent 8cab96fd24
commit cbfb60c4f7
7 changed files with 327 additions and 76 deletions

View File

@ -9,7 +9,7 @@ QtObject {
id: root id: root
property bool hasAccounts property bool hasAccounts
signal loadApp() signal loadApp()
signal onBoardingStepChanged(var view) signal onBoardingStepChanged(var view, string state)
property var stateMachine: DSM.StateMachine { property var stateMachine: DSM.StateMachine {
id: stateMachine id: stateMachine
@ -22,7 +22,7 @@ QtObject {
DSM.State { DSM.State {
id: keysMainState id: keysMainState
onEntered: { onBoardingStepChanged(keysMain); } onEntered: { onBoardingStepChanged(welcomeMain, ""); }
DSM.SignalTransition { DSM.SignalTransition {
targetState: genKeyState targetState: genKeyState
@ -33,7 +33,7 @@ QtObject {
DSM.State { DSM.State {
id: existingKeyState id: existingKeyState
onEntered: { onBoardingStepChanged(existingKey); } onEntered: { onBoardingStepChanged(existingKey, ""); }
DSM.SignalTransition { DSM.SignalTransition {
targetState: appState targetState: appState
@ -44,7 +44,7 @@ QtObject {
DSM.State { DSM.State {
id: genKeyState id: genKeyState
onEntered: { onBoardingStepChanged(genKey); } onEntered: { onBoardingStepChanged(genKey, ""); }
DSM.SignalTransition { DSM.SignalTransition {
targetState: appState targetState: appState
@ -55,7 +55,7 @@ QtObject {
DSM.State { DSM.State {
id: keycardState id: keycardState
onEntered: { onBoardingStepChanged(keycardFlowSelection); } onEntered: { onBoardingStepChanged(keycardFlowSelection, ""); }
DSM.SignalTransition { DSM.SignalTransition {
targetState: appState targetState: appState
@ -66,7 +66,7 @@ QtObject {
DSM.State { DSM.State {
id: stateLogin id: stateLogin
onEntered: { onBoardingStepChanged(login); } onEntered: { onBoardingStepChanged(login, ""); }
DSM.SignalTransition { DSM.SignalTransition {
targetState: appState targetState: appState
@ -121,12 +121,33 @@ QtObject {
} }
} }
property var welcomeComponent: Component {
id: welcomeMain
WelcomeView {
onBtnNewUserClicked: {
onBoardingStepChanged(keysMain, "getkeys");
}
onBtnExistingUserClicked: {
onBoardingStepChanged(keysMain, "connectkeys");
}
}
}
property var keysMainComponent: Component { property var keysMainComponent: Component {
id: keysMain id: keysMain
KeysMainView { KeysMainView {
btnGenKey.onClicked: Global.applicationWindow.navigateTo("GenKey") onButtonClicked: {
btnExistingKey.onClicked: Global.applicationWindow.navigateTo("ExistingKey") Global.applicationWindow.navigateTo("GenKey");
btnKeycard.onClicked: Global.applicationWindow.navigateTo("KeycardFlowSelection") }
onKeycardLinkClicked: {
Global.applicationWindow.navigateTo("KeycardFlowSelection");
}
onSeedLinkClicked: {
Global.applicationWindow.navigateTo("ExistingKey");
}
onBackClicked: {
onBoardingStepChanged(welcomeMain, "");
}
} }
} }

View File

@ -13,7 +13,6 @@ StatusModal {
id: popup id: popup
anchors.centerIn: parent anchors.centerIn: parent
//% "Before you get started..."
header.title: qsTrId("before-you-get-started---") header.title: qsTrId("before-you-get-started---")
hasCloseButton: false hasCloseButton: false
closePolicy: Popup.NoAutoClose closePolicy: Popup.NoAutoClose
@ -34,7 +33,6 @@ StatusModal {
id: acknowledge id: acknowledge
objectName: "acknowledgeCheckBox" objectName: "acknowledgeCheckBox"
width: parent.width width: parent.width
//% "I acknowledge that Status Desktop is in Beta and by using it, I take the full responsibility for all risks concerning my data and funds."
text: qsTrId("i-acknowledge-that-status-desktop-is-in-beta-and-by-using-it--i-take-the-full-responsibility-for-all-risks-concerning-my-data-and-funds-") text: qsTrId("i-acknowledge-that-status-desktop-is-in-beta-and-by-using-it--i-take-the-full-responsibility-for-all-risks-concerning-my-data-and-funds-")
} }
@ -47,16 +45,14 @@ StatusModal {
leftPadding: termsOfUse.indicator.width + termsOfUse.spacing leftPadding: termsOfUse.indicator.width + termsOfUse.spacing
StatusBaseText { StatusBaseText {
//% "I accept" text: qsTr("I accept Status")
text: qsTrId("i-accept")
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
StatusBaseText { StatusBaseText {
//% "Terms of Use" objectName: "termsOfUseLink"
text: qsTrId("terms-of-service") text: qsTrId("terms-of-service")
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
objectName: "termsOfUseLink"
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -73,21 +69,16 @@ StatusModal {
} }
} }
} }
}
}
Item { height: 12; width: parent.width }
}
}
leftButtons: [
StatusBaseText { StatusBaseText {
id: ppText text: " & "
//% "Privacy Policy" color: Theme.palette.directColor1
}
StatusBaseText {
objectName: "privacyPolicyLink" objectName: "privacyPolicyLink"
text: qsTrId("privacy-policy") text: qsTr("Privacy Policy")
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
anchors.verticalCenter: parent.verticalCenter
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -104,15 +95,18 @@ StatusModal {
} }
} }
} }
}
}
] Item { height: 12; width: parent.width }
}
}
rightButtons: [ rightButtons: [
StatusButton { StatusButton {
id: getStartedButton id: getStartedButton
objectName: "getStartedStatusButton" objectName: "getStartedStatusButton"
enabled: acknowledge.checked && termsOfUse.checked enabled: acknowledge.checked && termsOfUse.checked
//% "Get Started"
text: qsTrId("get-started") text: qsTrId("get-started")
onClicked: { onClicked: {
popup.close() popup.close()

View File

@ -13,7 +13,7 @@ Item {
property var onClosed: function () {} property var onClosed: function () {}
property bool connected: false property bool connected: false
property int flow: OnboardingFlow.Recover property int flow: KeycardFlowSelectionView.OnboardingFlow.Recover
id: keycardView id: keycardView
Component.onCompleted: { Component.onCompleted: {

View File

@ -1,8 +1,11 @@
import QtQuick 2.13 import QtQuick 2.13
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtQuick.Controls.Universal 2.12 import QtQuick.Controls.Universal 2.12
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import shared 1.0 import shared 1.0
import shared.panels 1.0 import shared.panels 1.0
@ -11,10 +14,12 @@ import "../popups"
import utils 1.0 import utils 1.0
Page { Page {
id: page id: root
property alias btnExistingKey: btnExistingKey
property alias btnGenKey: btnGenKey signal buttonClicked()
property alias btnKeycard: btnKeycard signal keycardLinkClicked()
signal seedLinkClicked()
signal backClicked()
background: Rectangle { background: Rectangle {
color: Style.current.background color: Style.current.background
@ -59,8 +64,7 @@ Page {
} }
StyledText { StyledText {
id: txtTitle1 id: txtTitle
//% "Get your keys"
text: qsTrId("intro-wizard-title1") text: qsTrId("intro-wizard-title1")
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.padding
font.bold: true font.bold: true
@ -71,45 +75,168 @@ Page {
} }
StyledText { StyledText {
id: txtDesc1 id: txtDesc
color: Style.current.secondaryText color: Style.current.secondaryText
//% "A set of keys controls your account. Your keys live on your device, so only you can use them."
text: qsTrId("a-set-of-keys-controls-your-account.-your-keys-live-on-your-device,-so-only-you-can-use-them.") text: qsTrId("a-set-of-keys-controls-your-account.-your-keys-live-on-your-device,-so-only-you-can-use-them.")
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.right: parent.right anchors.right: parent.right
anchors.left: parent.left anchors.left: parent.left
anchors.top: txtTitle1.bottom anchors.top: txtTitle.bottom
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.padding
font.pixelSize: 15 font.pixelSize: 15
} }
ColumnLayout {
StatusButton {
id: btnGenKey
anchors.top: txtDesc1.bottom
anchors.topMargin: 40 anchors.topMargin: 40
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
//% "I'm new, generate keys" anchors.top: txtDesc.bottom
text: qsTrId("im-new,-generate-keys") spacing: Style.current.bigPadding
StatusButton {
id: button
Layout.alignment: Qt.AlignHCenter
onClicked: {
root.buttonClicked();
}
} }
StatusFlatButton { StatusBaseText {
id: btnExistingKey id: keycardLink
//% "Access existing key" Layout.alignment: Qt.AlignHCenter
text: qsTrId("access-existing-key") color: Theme.palette.primaryColor1
anchors.top: btnGenKey.bottom MouseArea {
anchors.topMargin: Style.current.padding anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
parent.font.underline = true
}
onExited: {
parent.font.underline = false
}
onClicked: {
root.keycardLinkClicked();
}
}
} }
StatusFlatButton { StatusBaseText {
id: btnKeycard id: seedLink
//% "I have a Keycard" Layout.alignment: Qt.AlignHCenter
text: qsTr("I have a Keycard") color: Theme.palette.primaryColor1
anchors.top: btnExistingKey.bottom MouseArea {
anchors.topMargin: Style.current.padding anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter cursorShape: Qt.PointingHandCursor
visible: isExperimental === "1" || localAccountSettings.isKeycardEnabled hoverEnabled: true
onEntered: {
parent.font.underline = true
}
onExited: {
parent.font.underline = false
}
onClicked: {
root.seedLinkClicked();
} }
} }
} }
}
}
StatusRoundButton {
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
icon.name: "arrow-left"
onClicked: {
root.backClicked();
}
}
states: [
State {
name: "connectkeys"
PropertyChanges {
target: txtTitle
text: qsTr("Connect your keys")
}
PropertyChanges {
target: txtDesc
text: qsTr("Use your existing Status keys to login to this device.")
}
PropertyChanges {
target: button
text: qsTr("Scan sync code")
}
PropertyChanges {
target: keycardLink
text: qsTr("Login with Keycard")
}
PropertyChanges {
target: seedLink
text: qsTr("Enter a seed phrase")
}
},
State {
name: "getkeys"
PropertyChanges {
target: txtTitle
text: qsTr("Get your keys")
}
PropertyChanges {
target: txtDesc
text: qsTr("A set of keys controls your account. Your keys live on your\ndevice, so only you can use them.")
}
PropertyChanges {
target: button
text: qsTr("Generate new keys")
}
PropertyChanges {
target: keycardLink
text: qsTr("Generate keys for a new Keycard")
}
PropertyChanges {
target: seedLink
text: qsTr("lmport a seed phrase")
}
},
State {
name: "importseed"
PropertyChanges {
target: txtTitle
text: qsTr("lmport a seed phrase")
}
PropertyChanges {
target: txtDesc
text: qsTr("Seed phrases are used to back up and restore your keys.\n
Only use this option if you already have a seed phrase.")
}
PropertyChanges {
target: button
text: qsTr("lmport a seed phrase")
}
PropertyChanges {
target: keycardLink
text: qsTr("lmport a seed phrase into a new Keycard")
}
PropertyChanges {
target: seedLink
text: ""
visible: false
}
}
]
}

View File

@ -0,0 +1,108 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Controls.Universal 2.12
import StatusQ.Controls 0.1
import shared 1.0
import shared.panels 1.0
import "../popups"
import utils 1.0
Page {
id: page
signal btnNewUserClicked()
signal btnExistingUserClicked()
background: Rectangle {
color: Style.current.background
}
Component.onCompleted: {
if(displayBeforeGetStartedModal) {
displayBeforeGetStartedModal = false
beforeGetStartedModal.open()
}
}
BeforeGetStartedModal {
id: beforeGetStartedModal
}
Item {
id: container
width: 425
height: {
let h = 0
const children = this.children
Object.keys(children).forEach(function (key) {
const child = children[key]
h += child.height + Style.current.padding
})
return h
}
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Image {
id: keysImg
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
fillMode: Image.PreserveAspectFit
source: Style.png("welcome")
width: 256
height: 256
mipmap: true
}
StyledText {
id: txtTitle1
//% "Get your keys"
text: qsTr("Welcome to Status")
anchors.topMargin: Style.current.padding
font.bold: true
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: keysImg.bottom
font.letterSpacing: -0.2
font.pixelSize: 22
}
StyledText {
id: txtDesc1
color: Style.current.secondaryText
text: qsTr("Your fully decentralized gateway to Ethereum and Web3.\nCrypto wallet, privacy first group chat, and dApp browser.")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
anchors.right: parent.right
anchors.left: parent.left
anchors.top: txtTitle1.bottom
anchors.topMargin: Style.current.padding
font.pixelSize: 15
}
StatusButton {
id: btnNewUser
anchors.top: txtDesc1.bottom
anchors.topMargin: 40
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("I am new to Status")
onClicked: {
page.btnNewUserClicked();
}
}
StatusButton {
id: btnExistingUser
text: qsTr("I already use Status")
anchors.top: btnNewUser.bottom
anchors.topMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
page.btnExistingUserClicked();
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

View File

@ -321,6 +321,7 @@ StatusWindow {
onOnBoardingStepChanged: { onOnBoardingStepChanged: {
loader.sourceComponent = view; loader.sourceComponent = view;
loader.item.state = state;
} }
} }