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

fix(@desktop/wallet): QR dialog - how to generate the QR on the other synced device instructions (point 5) 

Point 5 of #11968
This commit is contained in:
Sale Djenic 2023-08-23 09:09:16 +02:00 committed by saledjenic
parent 228de3715b
commit 70343c4b4f
8 changed files with 359 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
ui/imports/shared/controls/GetSyncCodeDesktopInstructions.qml
View File

@ -1,9 +1,5 @@
import QtQuick 2.0 import QtQuick 2.15
import QtQuick.Layouts 1.12
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import shared.views 1.0 import shared.views 1.0
@ -11,134 +7,159 @@ import shared.views 1.0
Column { Column {
id: root id: root
property int type: SyncingCodeInstructions.Type.AppSync property int purpose: SyncingCodeInstructions.Purpose.AppSync
property int type: SyncingCodeInstructions.Type.QRCode
spacing: 4 spacing: 4
QtObject { GetSyncCodeInstruction {
id: d order: "1."
readonly property int listItemHeight: 40 orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Open Status on the device you want to import from")
}
return qsTr("Open Status App on your desktop device")
}
text1Color: Theme.palette.baseColor1
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "2."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: qsTr("Open")
Layout.alignment: Qt.AlignVCenter text1Color: Theme.palette.baseColor1
font.pixelSize: 15 icon: "settings"
color: Theme.palette.baseColor1 text2: {
text: qsTr("1. Open Status App on your desktop device") if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Settings / Wallet")
} }
return qsTr("Settings")
}
text2Color: Theme.palette.directColor1
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "3."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: {
Layout.alignment: Qt.AlignVCenter if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
font.pixelSize: 15 return qsTr("Click")
color: Theme.palette.baseColor1
text: qsTr("2. Open")
} }
StatusRoundIcon { return qsTr("Navigate to the")
asset.name: "settings"
} }
StatusBaseText { text1Color: Theme.palette.baseColor1
Layout.alignment: Qt.AlignVCenter icon: {
font.pixelSize: 15 if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
color: Theme.palette.directColor1 return ""
text: qsTr("Settings")
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("3. Navigate to the ")
}
StatusRoundIcon {
asset.name: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return "wallet"
} }
return "rotate" return "rotate"
} }
} text2: {
StatusBaseText { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
Layout.alignment: Qt.AlignVCenter return qsTr("Show encrypted QR of keypairs on this device")
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("Wallet tab")
} }
return qsTr("Syncing tab") return qsTr("Syncing tab")
} }
font.pixelSize: 15 text2Color: Theme.palette.directColor1
color: Theme.palette.directColor1
}
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "4."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: {
Layout.alignment: Qt.AlignVCenter if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
text: qsTr("4. Click") if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
font.pixelSize: 15 return qsTr("Copy the")
color: Theme.palette.baseColor1
} }
StatusBaseText { return qsTr("Enable camera")
Layout.alignment: Qt.AlignVCenter }
text: { return qsTr("Click")
if (root.type === SyncingCodeInstructions.Type.KeypairSync) { }
return qsTr("Import missing keypairs") text1Color: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return qsTr("on this device")
} }
return qsTr("Setup Syncing") return qsTr("Setup Syncing")
} }
font.pixelSize: 15 text2Color: {
color: Theme.palette.directColor1 if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
} }
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "5."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: {
Layout.alignment: Qt.AlignVCenter if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
text: qsTr("5.") if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
font.pixelSize: 15 return qsTr("Paste the")
color: Theme.palette.baseColor1
} }
StatusBaseText { return qsTr("Scan or enter the encrypted QR with this device")
Layout.alignment: Qt.AlignVCenter
text: qsTr("Enable camera")
font.pixelSize: 15
color: Theme.palette.directColor1
} }
StatusBaseText { return ""
Layout.alignment: Qt.AlignVCenter
text: qsTr("on this device")
font.pixelSize: 15
color: Theme.palette.baseColor1
} }
text1Color: Theme.palette.baseColor1
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return ""
}
return qsTr("Enable camera")
}
text2Color: Theme.palette.directColor1
text3: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("to this device")
}
return ""
}
return qsTr("on this device")
}
text3Color: Theme.palette.baseColor1
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
StatusBaseText { if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
Layout.alignment: Qt.AlignVCenter return "6."
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("6. Scan or enter the encrypted key with this device")
} }
return qsTr("6. Scan or enter the code") return ""
}
font.pixelSize: 15
color: Theme.palette.baseColor1
} }
return "6."
}
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("For security, delete the code as soon as you are done")
}
return ""
}
return qsTr("Scan or enter the code")
}
text1Color: Theme.palette.baseColor1
} }
} }

49
ui/imports/shared/controls/GetSyncCodeInstruction.qml Normal file
View File

@ -0,0 +1,49 @@
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Components 0.1
RowLayout {
id: root
height: 40
property string order: ""
property string orderColor: ""
property string text1: ""
property string text1Color: ""
property string icon: ""
property string text2: ""
property string text2Color: ""
property string text3: ""
property string text3Color: ""
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.order
color: root.orderColor
text: root.order
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.text1
color: root.text1Color
text: "%1".arg(root.text1)
}
StatusRoundIcon {
visible: !!root.icon
asset.name: root.icon
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.text2
color: root.text2Color
text: "%1".arg(root.text2)
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.text3
color: root.text3Color
text: "%1".arg(root.text3)
}
}

230
ui/imports/shared/controls/GetSyncCodeMobileInstructions.qml
View File

@ -1,9 +1,5 @@
import QtQuick 2.0 import QtQuick 2.15
import QtQuick.Layouts 1.12
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import shared.views 1.0 import shared.views 1.0
@ -11,134 +7,164 @@ import shared.views 1.0
Column { Column {
id: root id: root
property int type: SyncingCodeInstructions.Type.AppSync property int purpose: SyncingCodeInstructions.Purpose.AppSync
property int type: SyncingCodeInstructions.Type.QRCode
spacing: 4 spacing: 4
QtObject { GetSyncCodeInstruction {
id: d order: "1."
readonly property int listItemHeight: 40 orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Open Status on the device you want to import from")
}
return qsTr("Open Status App on your mobile device")
}
text1Color: Theme.palette.baseColor1
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "2."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: qsTr("Open")
Layout.alignment: Qt.AlignVCenter text1Color: Theme.palette.baseColor1
font.pixelSize: 15 icon: {
color: Theme.palette.baseColor1 if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
text: qsTr("1. Open Status App on your mobile device") return "settings"
} }
return "profile"
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Settings / Wallet")
}
return qsTr("Settings")
}
text2Color: Theme.palette.directColor1
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "3."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: {
Layout.alignment: Qt.AlignVCenter if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
font.pixelSize: 15 return qsTr("Tap")
color: Theme.palette.baseColor1
text: qsTr("2. Open")
} }
StatusRoundIcon { return qsTr("Go to")
asset.name: "profile"
} }
StatusBaseText { text1Color: Theme.palette.baseColor1
Layout.alignment: Qt.AlignVCenter icon: {
font.pixelSize: 15 if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
color: Theme.palette.directColor1 return ""
text: qsTr("Settings")
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("3. Go to")
}
StatusRoundIcon {
asset.name: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return "wallet"
} }
return "rotate" return "rotate"
} }
} text2: {
StatusBaseText { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
Layout.alignment: Qt.AlignVCenter return qsTr("Show encrypted keypairs code")
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("Wallet")
} }
return qsTr("Syncing") return qsTr("Syncing")
} }
font.pixelSize: 15 text2Color: Theme.palette.directColor1
color: Theme.palette.directColor1
}
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "4."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: {
Layout.alignment: Qt.AlignVCenter if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
text: qsTr("4. Tap") if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
font.pixelSize: 15 return qsTr("Copy the")
color: Theme.palette.baseColor1
} }
StatusBaseText { return qsTr("Enable camera")
Layout.alignment: Qt.AlignVCenter }
text: { return qsTr("Tap")
if (root.type === SyncingCodeInstructions.Type.KeypairSync) { }
return qsTr("Import missing keypairs") text1Color: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return qsTr("on this device")
} }
return qsTr("Sync new device") return qsTr("Sync new device")
} }
font.pixelSize: 15 text2Color: {
color: Theme.palette.directColor1 if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
} }
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: "5."
orderColor: Theme.palette.baseColor1
StatusBaseText { text1: {
Layout.alignment: Qt.AlignVCenter if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
text: qsTr("5.") if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
font.pixelSize: 15 return qsTr("Paste the")
color: Theme.palette.baseColor1
} }
StatusBaseText { return qsTr("Scan or enter the encrypted QR with this device")
Layout.alignment: Qt.AlignVCenter
text: qsTr("Enable camera")
font.pixelSize: 15
color: Theme.palette.directColor1
} }
StatusBaseText { return qsTr("Tap")
Layout.alignment: Qt.AlignVCenter
text: qsTr("on this device")
font.pixelSize: 15
color: Theme.palette.baseColor1
} }
text1Color: Theme.palette.baseColor1
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return ""
}
return qsTr("Enable camera")
}
text2Color: Theme.palette.directColor1
text3: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("to this device")
}
return ""
}
return qsTr("on this device")
}
text3Color: Theme.palette.baseColor1
} }
RowLayout { GetSyncCodeInstruction {
height: d.listItemHeight order: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
StatusBaseText { if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
Layout.alignment: Qt.AlignVCenter return "6."
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("6. Scan or enter the encrypted key with this device")
} }
return qsTr("6. Scan or enter the code") return ""
}
font.pixelSize: 15
color: Theme.palette.baseColor1
} }
return "6."
}
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("For security, delete the code as soon as you are done")
}
return ""
}
return qsTr("Scan or enter the code")
}
text1Color: Theme.palette.baseColor1
} }
} }

6
ui/imports/shared/popups/keypairimport/KeypairImportPopup.qml
View File

@ -32,7 +32,10 @@ StatusModal {
case Constants.keypairImportPopup.state.importQr: case Constants.keypairImportPopup.state.importQr:
return qsTr("Scan encrypted keypair QR code") return qsTr("Scan encrypted keypair QR code")
case Constants.keypairImportPopup.state.displayInstructions: case Constants.keypairImportPopup.state.displayInstructions:
return qsTr("How to generate the encrypted QR") if (root.store.syncViaQr) {
return Constants.keypairImportPopup.instructionsLabelForQr
}
return Constants.keypairImportPopup.instructionsLabelForEncryptedKey
} }
return qsTr("Import %1 keypair").arg(root.store.selectedKeypair.name) return qsTr("Import %1 keypair").arg(root.store.selectedKeypair.name)
@ -137,6 +140,7 @@ StatusModal {
id: displayInstructionsComponent id: displayInstructionsComponent
DisplayInstructions { DisplayInstructions {
height: Constants.keypairImportPopup.contentHeight height: Constants.keypairImportPopup.contentHeight
store: root.store
} }
} }
} }

9
ui/imports/shared/popups/keypairimport/states/DisplayInstructions.qml
View File

@ -3,9 +3,13 @@ import QtQuick.Layouts 1.14
import shared.views 1.0 import shared.views 1.0
import "../stores"
Item { Item {
id: root id: root
property KeypairImportStore store
implicitHeight: layout.implicitHeight implicitHeight: layout.implicitHeight
SyncingCodeInstructions { SyncingCodeInstructions {
@ -14,6 +18,9 @@ Item {
anchors.fill: parent anchors.fill: parent
anchors.margins: 24 anchors.margins: 24
type: SyncingCodeInstructions.Type.KeypairSync purpose: SyncingCodeInstructions.Purpose.KeypairSync
type: root.store.syncViaQr?
SyncingCodeInstructions.Type.QRCode :
SyncingCodeInstructions.Type.EncryptedKey
} }
} }

6
ui/imports/shared/popups/keypairimport/states/ScanOrEnterQrCode.qml
View File

@ -3,6 +3,8 @@ import QtQuick.Layouts 1.14
import shared.views 1.0 import shared.views 1.0
import utils 1.0
import "../stores" import "../stores"
Item { Item {
@ -23,8 +25,8 @@ Item {
secondTabName: qsTr("Enter encrypted key") secondTabName: qsTr("Enter encrypted key")
syncQrErrorMessage: qsTr("This does not look like the correct keypair QR code") syncQrErrorMessage: qsTr("This does not look like the correct keypair QR code")
syncCodeErrorMessage: qsTr("This does not look like an encrypted keypair code") syncCodeErrorMessage: qsTr("This does not look like an encrypted keypair code")
firstInstructionButtonName: qsTr("How to display the QR code on your other device") firstInstructionButtonName: Constants.keypairImportPopup.instructionsLabelForQr
secondInstructionButtonName: qsTr("How to copy the encrypted key from your other device") secondInstructionButtonName: Constants.keypairImportPopup.instructionsLabelForEncryptedKey
syncCodeLabel: qsTr("Paste encrypted key") syncCodeLabel: qsTr("Paste encrypted key")
validateConnectionString: function(connectionString) { validateConnectionString: function(connectionString) {

12
ui/imports/shared/views/SyncingCodeInstructions.qml
View File

@ -8,12 +8,18 @@ import shared.controls 1.0
ColumnLayout { ColumnLayout {
id: root id: root
enum Type { enum Purpose {
AppSync, AppSync,
KeypairSync KeypairSync
} }
property int type: SyncingCodeInstructions.Type.AppSync enum Type {
QRCode,
EncryptedKey
}
property int purpose: SyncingCodeInstructions.Purpose.AppSync
property int type: SyncingCodeInstructions.Type.QRCode
spacing: 0 spacing: 0
@ -50,6 +56,7 @@ ColumnLayout {
Layout.fillWidth: false Layout.fillWidth: false
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
purpose: root.purpose
type: root.type type: root.type
} }
@ -59,6 +66,7 @@ ColumnLayout {
Layout.fillWidth: false Layout.fillWidth: false
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
purpose: root.purpose
type: root.type type: root.type
} }
} }

2
ui/imports/utils/Constants.qml
View File

@ -743,6 +743,8 @@ QtObject {
readonly property int contentHeight: 626 readonly property int contentHeight: 626
readonly property int footerButtonsHeight: 44 readonly property int footerButtonsHeight: 44
readonly property int labelFontSize1: 15 readonly property int labelFontSize1: 15
readonly property string instructionsLabelForQr: qsTr("How to display the QR code on your other device")
readonly property string instructionsLabelForEncryptedKey: qsTr("How to copy the encrypted key from your other device")
readonly property QtObject mode: QtObject { readonly property QtObject mode: QtObject {
readonly property int selectKeypair: 1 readonly property int selectKeypair: 1