diff --git a/ui/app/AppLayouts/Onboarding/OnboardingLayout.qml b/ui/app/AppLayouts/Onboarding/OnboardingLayout.qml index 2223bb7f17..9159b969f5 100644 --- a/ui/app/AppLayouts/Onboarding/OnboardingLayout.qml +++ b/ui/app/AppLayouts/Onboarding/OnboardingLayout.qml @@ -9,7 +9,7 @@ QtObject { id: root property bool hasAccounts signal loadApp() - signal onBoardingStepChanged(var view) + signal onBoardingStepChanged(var view, string state) property var stateMachine: DSM.StateMachine { id: stateMachine @@ -22,7 +22,7 @@ QtObject { DSM.State { id: keysMainState - onEntered: { onBoardingStepChanged(keysMain); } + onEntered: { onBoardingStepChanged(welcomeMain, ""); } DSM.SignalTransition { targetState: genKeyState @@ -33,7 +33,7 @@ QtObject { DSM.State { id: existingKeyState - onEntered: { onBoardingStepChanged(existingKey); } + onEntered: { onBoardingStepChanged(existingKey, ""); } DSM.SignalTransition { targetState: appState @@ -44,7 +44,7 @@ QtObject { DSM.State { id: genKeyState - onEntered: { onBoardingStepChanged(genKey); } + onEntered: { onBoardingStepChanged(genKey, ""); } DSM.SignalTransition { targetState: appState @@ -55,7 +55,7 @@ QtObject { DSM.State { id: keycardState - onEntered: { onBoardingStepChanged(keycardFlowSelection); } + onEntered: { onBoardingStepChanged(keycardFlowSelection, ""); } DSM.SignalTransition { targetState: appState @@ -66,7 +66,7 @@ QtObject { DSM.State { id: stateLogin - onEntered: { onBoardingStepChanged(login); } + onEntered: { onBoardingStepChanged(login, ""); } DSM.SignalTransition { 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 { id: keysMain KeysMainView { - btnGenKey.onClicked: Global.applicationWindow.navigateTo("GenKey") - btnExistingKey.onClicked: Global.applicationWindow.navigateTo("ExistingKey") - btnKeycard.onClicked: Global.applicationWindow.navigateTo("KeycardFlowSelection") + onButtonClicked: { + Global.applicationWindow.navigateTo("GenKey"); + } + onKeycardLinkClicked: { + Global.applicationWindow.navigateTo("KeycardFlowSelection"); + } + onSeedLinkClicked: { + Global.applicationWindow.navigateTo("ExistingKey"); + } + onBackClicked: { + onBoardingStepChanged(welcomeMain, ""); + } } } diff --git a/ui/app/AppLayouts/Onboarding/popups/BeforeGetStartedModal.qml b/ui/app/AppLayouts/Onboarding/popups/BeforeGetStartedModal.qml index 30e096c606..b959725e9b 100644 --- a/ui/app/AppLayouts/Onboarding/popups/BeforeGetStartedModal.qml +++ b/ui/app/AppLayouts/Onboarding/popups/BeforeGetStartedModal.qml @@ -13,7 +13,6 @@ StatusModal { id: popup anchors.centerIn: parent - //% "Before you get started..." header.title: qsTrId("before-you-get-started---") hasCloseButton: false closePolicy: Popup.NoAutoClose @@ -34,7 +33,6 @@ StatusModal { id: acknowledge objectName: "acknowledgeCheckBox" 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-") } @@ -47,16 +45,14 @@ StatusModal { leftPadding: termsOfUse.indicator.width + termsOfUse.spacing StatusBaseText { - //% "I accept" - text: qsTrId("i-accept") + text: qsTr("I accept Status") color: Theme.palette.directColor1 } StatusBaseText { - //% "Terms of Use" + objectName: "termsOfUseLink" text: qsTrId("terms-of-service") color: Theme.palette.primaryColor1 - objectName: "termsOfUseLink" MouseArea { anchors.fill: parent @@ -73,6 +69,32 @@ StatusModal { } } } + + StatusBaseText { + text: " & " + color: Theme.palette.directColor1 + } + + StatusBaseText { + objectName: "privacyPolicyLink" + text: qsTr("Privacy Policy") + color: Theme.palette.primaryColor1 + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: { + parent.font.underline = true + } + onExited: { + parent.font.underline = false + } + onClicked: { + Qt.openUrlExternally("https://status.im/privacy-policy/") + } + } + } } } @@ -80,39 +102,11 @@ StatusModal { } } - leftButtons: [ - StatusBaseText { - id: ppText - //% "Privacy Policy" - objectName: "privacyPolicyLink" - text: qsTrId("privacy-policy") - color: Theme.palette.primaryColor1 - anchors.verticalCenter: parent.verticalCenter - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - onEntered: { - parent.font.underline = true - } - onExited: { - parent.font.underline = false - } - onClicked: { - Qt.openUrlExternally("https://status.im/privacy-policy/") - } - } - } - - ] - rightButtons: [ StatusButton { id: getStartedButton objectName: "getStartedStatusButton" enabled: acknowledge.checked && termsOfUse.checked - //% "Get Started" text: qsTrId("get-started") onClicked: { popup.close() diff --git a/ui/app/AppLayouts/Onboarding/views/KeycardFlowSelectionView.qml b/ui/app/AppLayouts/Onboarding/views/KeycardFlowSelectionView.qml index 1d144c2c9b..b3ff40a6d3 100644 --- a/ui/app/AppLayouts/Onboarding/views/KeycardFlowSelectionView.qml +++ b/ui/app/AppLayouts/Onboarding/views/KeycardFlowSelectionView.qml @@ -13,7 +13,7 @@ Item { property var onClosed: function () {} property bool connected: false - property int flow: OnboardingFlow.Recover + property int flow: KeycardFlowSelectionView.OnboardingFlow.Recover id: keycardView Component.onCompleted: { diff --git a/ui/app/AppLayouts/Onboarding/views/KeysMainView.qml b/ui/app/AppLayouts/Onboarding/views/KeysMainView.qml index 3ed57ca4d2..05d48093eb 100644 --- a/ui/app/AppLayouts/Onboarding/views/KeysMainView.qml +++ b/ui/app/AppLayouts/Onboarding/views/KeysMainView.qml @@ -1,8 +1,11 @@ import QtQuick 2.13 +import QtQuick.Layouts 1.12 import QtQuick.Controls 2.13 import QtQuick.Controls.Universal 2.12 import StatusQ.Controls 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import shared 1.0 import shared.panels 1.0 @@ -11,10 +14,12 @@ import "../popups" import utils 1.0 Page { - id: page - property alias btnExistingKey: btnExistingKey - property alias btnGenKey: btnGenKey - property alias btnKeycard: btnKeycard + id: root + + signal buttonClicked() + signal keycardLinkClicked() + signal seedLinkClicked() + signal backClicked() background: Rectangle { color: Style.current.background @@ -59,8 +64,7 @@ Page { } StyledText { - id: txtTitle1 - //% "Get your keys" + id: txtTitle text: qsTrId("intro-wizard-title1") anchors.topMargin: Style.current.padding font.bold: true @@ -71,45 +75,168 @@ Page { } StyledText { - id: txtDesc1 + id: txtDesc 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.") horizontalAlignment: Text.AlignHCenter wrapMode: Text.WordWrap anchors.right: parent.right anchors.left: parent.left - anchors.top: txtTitle1.bottom + anchors.top: txtTitle.bottom anchors.topMargin: Style.current.padding font.pixelSize: 15 } - - StatusButton { - id: btnGenKey - anchors.top: txtDesc1.bottom + ColumnLayout { anchors.topMargin: 40 anchors.horizontalCenter: parent.horizontalCenter - //% "I'm new, generate keys" - text: qsTrId("im-new,-generate-keys") - } + anchors.top: txtDesc.bottom + spacing: Style.current.bigPadding + StatusButton { + id: button + Layout.alignment: Qt.AlignHCenter + onClicked: { + root.buttonClicked(); + } + } - StatusFlatButton { - id: btnExistingKey - //% "Access existing key" - text: qsTrId("access-existing-key") - anchors.top: btnGenKey.bottom - anchors.topMargin: Style.current.padding - anchors.horizontalCenter: parent.horizontalCenter - } + StatusBaseText { + id: keycardLink + Layout.alignment: Qt.AlignHCenter + color: Theme.palette.primaryColor1 + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: { + parent.font.underline = true + } + onExited: { + parent.font.underline = false + } + onClicked: { + root.keycardLinkClicked(); + } + } + } - StatusFlatButton { - id: btnKeycard - //% "I have a Keycard" - text: qsTr("I have a Keycard") - anchors.top: btnExistingKey.bottom - anchors.topMargin: Style.current.padding - anchors.horizontalCenter: parent.horizontalCenter - visible: isExperimental === "1" || localAccountSettings.isKeycardEnabled + StatusBaseText { + id: seedLink + Layout.alignment: Qt.AlignHCenter + color: Theme.palette.primaryColor1 + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + 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 + } + } + ] } diff --git a/ui/app/AppLayouts/Onboarding/views/WelcomeView.qml b/ui/app/AppLayouts/Onboarding/views/WelcomeView.qml new file mode 100644 index 0000000000..1c72af46ed --- /dev/null +++ b/ui/app/AppLayouts/Onboarding/views/WelcomeView.qml @@ -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(); + } + } + } +} diff --git a/ui/imports/assets/images/welcome.png b/ui/imports/assets/images/welcome.png new file mode 100644 index 0000000000..31fa90739f Binary files /dev/null and b/ui/imports/assets/images/welcome.png differ diff --git a/ui/main.qml b/ui/main.qml index 2469bccf3a..164ebef088 100644 --- a/ui/main.qml +++ b/ui/main.qml @@ -321,6 +321,7 @@ StatusWindow { onOnBoardingStepChanged: { loader.sourceComponent = view; + loader.item.state = state; } }