feat: design gen new key modal
This commit is contained in:
parent
ccb43acd85
commit
7873a0ff58
|
@ -14,7 +14,7 @@ type
|
||||||
AccountRoles {.pure.} = enum
|
AccountRoles {.pure.} = enum
|
||||||
Username = UserRole + 1,
|
Username = UserRole + 1,
|
||||||
Identicon = UserRole + 2,
|
Identicon = UserRole + 2,
|
||||||
Key = UserRole + 3
|
Address = UserRole + 3
|
||||||
|
|
||||||
QtObject:
|
QtObject:
|
||||||
type OnboardingView* = ref object of QAbstractListModel
|
type OnboardingView* = ref object of QAbstractListModel
|
||||||
|
@ -60,12 +60,12 @@ QtObject:
|
||||||
case assetRole:
|
case assetRole:
|
||||||
of AccountRoles.Username: result = newQVariant(asset.name)
|
of AccountRoles.Username: result = newQVariant(asset.name)
|
||||||
of AccountRoles.Identicon: result = newQVariant(asset.photoPath)
|
of AccountRoles.Identicon: result = newQVariant(asset.photoPath)
|
||||||
of AccountRoles.Key: result = newQVariant(asset.derived.whisper.publicKey)
|
of AccountRoles.Address: result = newQVariant(asset.keyUid)
|
||||||
|
|
||||||
method roleNames(self: OnboardingView): Table[int, string] =
|
method roleNames(self: OnboardingView): Table[int, string] =
|
||||||
{ AccountRoles.Username.int:"username",
|
{ AccountRoles.Username.int:"username",
|
||||||
AccountRoles.Identicon.int:"identicon",
|
AccountRoles.Identicon.int:"identicon",
|
||||||
AccountRoles.Key.int:"key" }.toTable
|
AccountRoles.Address.int:"address" }.toTable
|
||||||
|
|
||||||
proc storeAccountAndLogin(self: OnboardingView, selectedAccountIndex: int, password: string): string {.slot.} =
|
proc storeAccountAndLogin(self: OnboardingView, selectedAccountIndex: int, password: string): string {.slot.} =
|
||||||
try:
|
try:
|
||||||
|
|
|
@ -168,7 +168,9 @@ ApplicationWindow {
|
||||||
Component {
|
Component {
|
||||||
id: genKey
|
id: genKey
|
||||||
GenKey {
|
GenKey {
|
||||||
btnExistingKey.onClicked: applicationWindow.navigateTo("ExistingKey")
|
onClosed: function () {
|
||||||
|
applicationWindow.navigateTo("InitialState")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -140,6 +140,7 @@ DISTFILES += \
|
||||||
onboarding/EnterSeedPhraseModal.qml \
|
onboarding/EnterSeedPhraseModal.qml \
|
||||||
onboarding/ExistingKey.qml \
|
onboarding/ExistingKey.qml \
|
||||||
onboarding/GenKey.qml \
|
onboarding/GenKey.qml \
|
||||||
|
onboarding/GenKeyModal.qml \
|
||||||
onboarding/Intro.qml \
|
onboarding/Intro.qml \
|
||||||
onboarding/KeysMain.qml \
|
onboarding/KeysMain.qml \
|
||||||
onboarding/Login.qml \
|
onboarding/Login.qml \
|
||||||
|
|
|
@ -6,281 +6,34 @@ import QtQuick.Dialogs 1.3
|
||||||
import "../imports"
|
import "../imports"
|
||||||
import "../shared"
|
import "../shared"
|
||||||
|
|
||||||
SwipeView {
|
Item {
|
||||||
id: swipeView
|
property var onClosed: function () {}
|
||||||
|
id: genKeyView
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
currentIndex: 0
|
|
||||||
|
|
||||||
property alias btnExistingKey: btnExistingKey
|
|
||||||
|
|
||||||
onCurrentItemChanged: {
|
|
||||||
currentItem.txtPassword.textField.focus = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
id: wizardStep1
|
|
||||||
property int selectedIndex: 0
|
|
||||||
Layout.fillHeight: true
|
|
||||||
Layout.fillWidth: true
|
|
||||||
|
|
||||||
Text {
|
|
||||||
id: title
|
|
||||||
text: "Generated accounts"
|
|
||||||
font.pointSize: 36
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: 20
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
anchors.top: title.bottom
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.topMargin: 20
|
|
||||||
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
Text {
|
|
||||||
text: key
|
|
||||||
width: 160
|
|
||||||
elide: Text.ElideMiddle
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ListView {
|
|
||||||
id: addressesView
|
|
||||||
contentWidth: 200
|
|
||||||
model: onboardingModel
|
|
||||||
delegate: addressViewDelegate
|
|
||||||
anchors.fill: parent
|
|
||||||
Layout.fillHeight: true
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
id: footer
|
|
||||||
width: btnExistingKey.width + selectBtn.width + Theme.padding
|
|
||||||
height: btnExistingKey.height
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.bottomMargin: Theme.padding
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
|
|
||||||
StyledButton {
|
|
||||||
id: btnExistingKey
|
|
||||||
label: "Access existing key"
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledButton {
|
|
||||||
id: selectBtn
|
|
||||||
anchors.left: btnExistingKey.right
|
|
||||||
anchors.leftMargin: Theme.padding
|
|
||||||
label: "Select"
|
|
||||||
|
|
||||||
onClicked: {
|
|
||||||
onboardingModel.setCurrentAccount(wizardStep1.selectedIndex)
|
|
||||||
swipeView.incrementCurrentIndex()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
id: wizardStep2
|
|
||||||
property Item txtPassword: txtPassword
|
|
||||||
|
|
||||||
Text {
|
|
||||||
id: step2Title
|
|
||||||
text: "Enter password"
|
|
||||||
font.pointSize: 36
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: 20
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
Row {
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
anchors.top: step2Title.bottom
|
|
||||||
anchors.topMargin: 30
|
|
||||||
Column {
|
|
||||||
Image {
|
|
||||||
source: onboardingModel.currentAccount.identicon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Column {
|
|
||||||
Text {
|
|
||||||
text: onboardingModel.currentAccount.username
|
|
||||||
}
|
|
||||||
Text {
|
|
||||||
text: onboardingModel.currentAccount.address
|
|
||||||
width: 160
|
|
||||||
elide: Text.ElideMiddle
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Input {
|
|
||||||
id: txtPassword
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.rightMargin: Theme.padding
|
|
||||||
anchors.leftMargin: Theme.padding
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
placeholderText: "Enter password"
|
|
||||||
|
|
||||||
Component.onCompleted: {
|
Component.onCompleted: {
|
||||||
this.textField.echoMode = TextInput.Password
|
genKeyModal.open()
|
||||||
}
|
|
||||||
Keys.onReturnPressed: {
|
|
||||||
btnNext.clicked()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
StyledButton {
|
GenKeyModal {
|
||||||
id: btnNext
|
property bool wentNext: false
|
||||||
label: "Next"
|
id: genKeyModal
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
onNextClick: function (selectedIndex) {
|
||||||
anchors.bottom: parent.bottom
|
wentNext = true
|
||||||
anchors.bottomMargin: 20
|
onboardingModel.setCurrentAccount(selectedIndex)
|
||||||
onClicked: {
|
createPasswordModal.open()
|
||||||
swipeView.incrementCurrentIndex();
|
}
|
||||||
|
onClosed: function () {
|
||||||
|
if (!wentNext) {
|
||||||
|
genKeyView.onClosed()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
CreatePasswordModal {
|
||||||
id: wizardStep3
|
id: createPasswordModal
|
||||||
property Item txtPassword: txtConfirmPassword
|
onClosed: function () {
|
||||||
|
existingKeyView.onClosed()
|
||||||
Text {
|
|
||||||
id: step3Title
|
|
||||||
text: "Confirm password"
|
|
||||||
font.pointSize: 36
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: 20
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
Row {
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
anchors.top: step3Title.bottom
|
|
||||||
anchors.topMargin: 30
|
|
||||||
Column {
|
|
||||||
Image {
|
|
||||||
source: onboardingModel.currentAccount.identicon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Column {
|
|
||||||
Text {
|
|
||||||
text: onboardingModel.currentAccount.username
|
|
||||||
}
|
|
||||||
Text {
|
|
||||||
text: onboardingModel.currentAccount.address
|
|
||||||
width: 160
|
|
||||||
elide: Text.ElideMiddle
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Input {
|
|
||||||
id: txtConfirmPassword
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
anchors.rightMargin: Theme.padding
|
|
||||||
anchors.leftMargin: Theme.padding
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
placeholderText: "Confirm entered password"
|
|
||||||
|
|
||||||
Component.onCompleted: {
|
|
||||||
this.textField.echoMode = TextInput.Password
|
|
||||||
}
|
|
||||||
Keys.onReturnPressed: {
|
|
||||||
btnFinish.clicked()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
MessageDialog {
|
|
||||||
id: passwordsDontMatchError
|
|
||||||
title: "Error"
|
|
||||||
text: "Passwords don't match"
|
|
||||||
icon: StandardIcon.Warning
|
|
||||||
standardButtons: StandardButton.Ok
|
|
||||||
onAccepted: {
|
|
||||||
txtConfirmPassword.clear();
|
|
||||||
swipeView.currentIndex = 1;
|
|
||||||
txtPassword.focus = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
MessageDialog {
|
|
||||||
id: storeAccountAndLoginError
|
|
||||||
title: "Error storing account and logging in"
|
|
||||||
text: "An error occurred while storing your account and logging in: "
|
|
||||||
icon: StandardIcon.Critical
|
|
||||||
standardButtons: StandardButton.Ok
|
|
||||||
}
|
|
||||||
|
|
||||||
Connections {
|
|
||||||
target: onboardingModel
|
|
||||||
ignoreUnknownSignals: true
|
|
||||||
onLoginResponseChanged: {
|
|
||||||
if(error){
|
|
||||||
storeAccountAndLoginError.text += error;
|
|
||||||
storeAccountAndLoginError.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StyledButton {
|
|
||||||
id: btnFinish
|
|
||||||
label: "Finish"
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.bottomMargin: 20
|
|
||||||
onClicked: {
|
|
||||||
if (txtConfirmPassword.textField.text != txtPassword.textField.text) {
|
|
||||||
return passwordsDontMatchError.open();
|
|
||||||
}
|
|
||||||
const selectedAccountIndex = wizardStep1.selectedIndex
|
|
||||||
onboardingModel.storeAccountAndLogin(selectedAccountIndex, txtPassword.textField.text)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
import QtQuick 2.12
|
||||||
|
import QtQuick.Controls 2.3
|
||||||
|
import QtQuick.Layouts 1.3
|
||||||
|
import "../imports"
|
||||||
|
import "../shared"
|
||||||
|
import "./Login"
|
||||||
|
|
||||||
|
ModalPopup {
|
||||||
|
property int selectedIndex: 0
|
||||||
|
property var onClosed: function () {}
|
||||||
|
property var onNextClick: function () {}
|
||||||
|
id: popup
|
||||||
|
title: qsTr("Choose a chat name")
|
||||||
|
|
||||||
|
AccountList {
|
||||||
|
id: accountList
|
||||||
|
anchors.fill: parent
|
||||||
|
|
||||||
|
accounts: onboardingModel
|
||||||
|
isSelected: function (index, address) {
|
||||||
|
return index === selectedIndex
|
||||||
|
}
|
||||||
|
onAccountSelect: function(index) {
|
||||||
|
selectedIndex = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer: Button {
|
||||||
|
id: submitBtn
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.topMargin: Theme.padding
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Theme.padding
|
||||||
|
width: 44
|
||||||
|
height: 44
|
||||||
|
background: Rectangle {
|
||||||
|
radius: 50
|
||||||
|
color: Theme.lightBlue
|
||||||
|
}
|
||||||
|
|
||||||
|
Image {
|
||||||
|
sourceSize.height: 15
|
||||||
|
sourceSize.width: 20
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
source: "../app/img/leave_chat.svg"
|
||||||
|
rotation: 180
|
||||||
|
fillMode: Image.PreserveAspectFit
|
||||||
|
}
|
||||||
|
|
||||||
|
onClicked : {
|
||||||
|
onNextClick(selectedIndex);
|
||||||
|
popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*##^##
|
||||||
|
Designer {
|
||||||
|
D{i:0;formeditorColor:"#ffffff";height:500;width:400}
|
||||||
|
}
|
||||||
|
##^##*/
|
|
@ -7,6 +7,7 @@ import "../../imports"
|
||||||
|
|
||||||
ListView {
|
ListView {
|
||||||
property var accounts: AccountsData {}
|
property var accounts: AccountsData {}
|
||||||
|
property var isSelected: function () {}
|
||||||
property var onAccountSelect: function () {}
|
property var onAccountSelect: function () {}
|
||||||
|
|
||||||
id: addressesView
|
id: addressesView
|
||||||
|
@ -19,6 +20,9 @@ ListView {
|
||||||
username: model.username
|
username: model.username
|
||||||
address: model.address
|
address: model.address
|
||||||
identicon: model.identicon
|
identicon: model.identicon
|
||||||
|
isSelected: function (index, address) {
|
||||||
|
return addressesView.isSelected(index, address)
|
||||||
|
}
|
||||||
onAccountSelect: function (index) {
|
onAccountSelect: function (index) {
|
||||||
addressesView.onAccountSelect(index)
|
addressesView.onAccountSelect(index)
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,10 @@ Rectangle {
|
||||||
property string address: "0x123345677890987654321123456"
|
property string address: "0x123345677890987654321123456"
|
||||||
property url identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
|
property url identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
|
||||||
property var onAccountSelect: function() {}
|
property var onAccountSelect: function() {}
|
||||||
property bool selected: loginModel.currentAccount.address === address
|
property var isSelected: function() {}
|
||||||
|
property bool selected: {
|
||||||
|
return isSelected(index, address)
|
||||||
|
}
|
||||||
property bool isHovered: false
|
property bool isHovered: false
|
||||||
|
|
||||||
id: addressViewDelegate
|
id: addressViewDelegate
|
||||||
|
@ -31,6 +34,9 @@ Rectangle {
|
||||||
Text {
|
Text {
|
||||||
id: usernameText
|
id: usernameText
|
||||||
text: username
|
text: username
|
||||||
|
elide: Text.ElideRight
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Theme.padding
|
||||||
font.pixelSize: 17
|
font.pixelSize: 17
|
||||||
anchors.top: accountImage.top
|
anchors.top: accountImage.top
|
||||||
anchors.left: accountImage.right
|
anchors.left: accountImage.right
|
||||||
|
|
|
@ -15,6 +15,10 @@ ModalPopup {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
||||||
accounts: loginModel
|
accounts: loginModel
|
||||||
|
isSelected: function (index, address) {
|
||||||
|
return loginModel.currentAccount.address === address
|
||||||
|
}
|
||||||
|
|
||||||
onAccountSelect: function(index) {
|
onAccountSelect: function(index) {
|
||||||
popup.onAccountSelect(index)
|
popup.onAccountSelect(index)
|
||||||
popup.close()
|
popup.close()
|
||||||
|
|
|
@ -7,4 +7,4 @@ OnboardingMain 1.0 OnboardingMain.qml
|
||||||
Slide 1.0 Slide.qml
|
Slide 1.0 Slide.qml
|
||||||
EnterSeedPhraseModal 1.0 EnterSeedPhraseModal.qml
|
EnterSeedPhraseModal 1.0 EnterSeedPhraseModal.qml
|
||||||
CreatePasswordModal 1.0 CreatePasswordModal.qml
|
CreatePasswordModal 1.0 CreatePasswordModal.qml
|
||||||
|
GenKeyModal 1.0 GenKeyModal.qml
|
||||||
|
|
Loading…
Reference in New Issue