status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: design gen new key modal

This commit is contained in:
Jonathan Rainville 2020-06-13 11:17:54 -04:00 committed by Iuri Matias
parent ccb43acd85
commit 7873a0ff58
9 changed files with 104 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/onboarding/view.nim
View File

@ -14,7 +14,7 @@ type
AccountRoles {.pure.} = enum
Username = UserRole + 1,
Identicon = UserRole + 2,
Key = UserRole + 3
Address = UserRole + 3
QtObject:
type OnboardingView* = ref object of QAbstractListModel
@ -60,12 +60,12 @@ QtObject:
case assetRole:
of AccountRoles.Username: result = newQVariant(asset.name)
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] =
{ AccountRoles.Username.int:"username",
AccountRoles.Identicon.int:"identicon",
AccountRoles.Key.int:"key" }.toTable
AccountRoles.Address.int:"address" }.toTable
proc storeAccountAndLogin(self: OnboardingView, selectedAccountIndex: int, password: string): string {.slot.} =
try:

4
ui/main.qml
View File

@ -168,7 +168,9 @@ ApplicationWindow {
Component {
id: genKey
GenKey {
btnExistingKey.onClicked: applicationWindow.navigateTo("ExistingKey")
onClosed: function () {
applicationWindow.navigateTo("InitialState")
}
}
}

1
ui/nim-status-client.pro
View File

@ -140,6 +140,7 @@ DISTFILES += \
onboarding/EnterSeedPhraseModal.qml \
onboarding/ExistingKey.qml \
onboarding/GenKey.qml \
onboarding/GenKeyModal.qml \
onboarding/Intro.qml \
onboarding/KeysMain.qml \
onboarding/Login.qml \

285
ui/onboarding/GenKey.qml
View File

@ -6,281 +6,34 @@ import QtQuick.Dialogs 1.3
import "../imports"
import "../shared"
SwipeView {
id: swipeView
Item {
property var onClosed: function () {}
id: genKeyView
anchors.fill: parent
currentIndex: 0
property alias btnExistingKey: btnExistingKey
onCurrentItemChanged: {
currentItem.txtPassword.textField.focus = true;
Component.onCompleted: {
genKeyModal.open()
}
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
GenKeyModal {
property bool wentNext: false
id: genKeyModal
onNextClick: function (selectedIndex) {
wentNext = true
onboardingModel.setCurrentAccount(selectedIndex)
createPasswordModal.open()
}
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: {
this.textField.echoMode = TextInput.Password
}
Keys.onReturnPressed: {
btnNext.clicked()
}
}
StyledButton {
id: btnNext
label: "Next"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
onClicked: {
swipeView.incrementCurrentIndex();
onClosed: function () {
if (!wentNext) {
genKeyView.onClosed()
}
}
}
Item {
id: wizardStep3
property Item txtPassword: txtConfirmPassword
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)
}
CreatePasswordModal {
id: createPasswordModal
onClosed: function () {
existingKeyView.onClosed()
}
}
}

62
ui/onboarding/GenKeyModal.qml Normal file
View File

@ -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}
}
##^##*/

4
ui/onboarding/Login/AccountList.qml
View File

@ -7,6 +7,7 @@ import "../../imports"
ListView {
property var accounts: AccountsData {}
property var isSelected: function () {}
property var onAccountSelect: function () {}
id: addressesView
@ -19,6 +20,9 @@ ListView {
username: model.username
address: model.address
identicon: model.identicon
isSelected: function (index, address) {
return addressesView.isSelected(index, address)
}
onAccountSelect: function (index) {
addressesView.onAccountSelect(index)
}

8
ui/onboarding/Login/AddressView.qml
View File

@ -10,7 +10,10 @@ Rectangle {
property string address: "0x123345677890987654321123456"
property url identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
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
id: addressViewDelegate
@ -31,6 +34,9 @@ Rectangle {
Text {
id: usernameText
text: username
elide: Text.ElideRight
anchors.right: parent.right
anchors.rightMargin: Theme.padding
font.pixelSize: 17
anchors.top: accountImage.top
anchors.left: accountImage.right

4
ui/onboarding/Login/SelectAnotherAccountModal.qml
View File

@ -15,6 +15,10 @@ ModalPopup {
anchors.fill: parent
accounts: loginModel
isSelected: function (index, address) {
return loginModel.currentAccount.address === address
}
onAccountSelect: function(index) {
popup.onAccountSelect(index)
popup.close()

2
ui/onboarding/qmldir
View File

@ -7,4 +7,4 @@ OnboardingMain 1.0 OnboardingMain.qml
Slide 1.0 Slide.qml
EnterSeedPhraseModal 1.0 EnterSeedPhraseModal.qml
CreatePasswordModal 1.0 CreatePasswordModal.qml
GenKeyModal 1.0 GenKeyModal.qml