status-desktop/ui/imports/shared/popups/addaccount/states/Main.qml

276 lines
10 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import utils 1.0
import StatusQ 0.1
import SortFilterProxyModel 0.2
import "../stores"
import "../panels"
import "../../common"
Item {
id: root
property AddAccountStore store
signal watchOnlyAccountsLimitReached()
signal keypairLimitReached()
implicitHeight: layout.implicitHeight
Component.onCompleted: {
if (root.store.addAccountModule.selectedColorId === "") {
colorSelection.selectedColorIndex = Math.floor(Math.random() * colorSelection.model.length)
}
else {
let ind = Utils.getColorIndexForId(root.store.addAccountModule.selectedColorId)
colorSelection.selectedColorIndex = ind
}
if (root.store.addAccountModule.selectedEmoji === "") {
// TODO: Reuse status-go RandomWalletEmoji
root.store.addAccountModule.selectedEmoji = StatusQUtils.Emoji.getRandomEmoji(StatusQUtils.Emoji.size.verySmall)
}
accountName.text = root.store.addAccountModule.accountName
if (root.store.addAccountModule.selectedEmoji !== "") {
accountName.input.asset.emoji = root.store.addAccountModule.selectedEmoji;
} else {
accountName.input.asset.isLetterIdenticon = true;
}
accountName.input.edit.forceActiveFocus()
accountName.validate(true)
}
QtObject {
id: d
readonly property bool isEdit: root.store.editMode
readonly property SortFilterProxyModel originModelWithoutWatchOnlyAcc: SortFilterProxyModel {
id: originModelWithoutWatchOnlyAcc
objectName: "originModelWithoutWatchOnlyAcc"
sourceModel: root.store.originModel
readonly property string addWatchOnlyAccKeyUid: Constants.appTranslatableConstants.addAccountLabelOptionAddWatchOnlyAcc
filters: [
FastExpressionFilter {
enabled: production
expression: model.keyPair.keyUid !== originModelWithoutWatchOnlyAcc.addWatchOnlyAccKeyUid
expectedRoles: ["keyPair"]
}
]
}
function openEmojiPopup(showLeft) {
if (!root.store.emojiPopup) {
return
}
let inputCoords = accountName.mapToItem(appMain, 0, 0)
root.store.emojiPopup.open()
root.store.emojiPopup.emojiSize = StatusQUtils.Emoji.size.verySmall
root.store.emojiPopup.x = inputCoords.x
if (!showLeft) {
root.store.emojiPopup.x += accountName.width - root.store.emojiPopup.width
}
root.store.emojiPopup.y = inputCoords.y + accountName.height + Theme.halfPadding
}
}
Connections {
target: root.store.emojiPopup
function onEmojiSelected (emojiText, atCursor) {
let emoji = StatusQUtils.Emoji.deparse(emojiText)
root.store.addAccountModule.selectedEmoji = emoji
accountName.input.asset.isLetterIdenticon = false
accountName.input.asset.emoji = emojiText
}
}
Component {
id: spacer
Rectangle {
color: Theme.palette.baseColor4
}
}
ColumnLayout {
id: layout
width: parent.width
spacing: 0
Loader {
Layout.preferredHeight: Theme.padding
Layout.fillWidth: true
sourceComponent: spacer
}
Column {
Layout.fillWidth: true
spacing: Theme.padding
topPadding: Theme.padding
bottomPadding: Theme.padding
StatusInput {
id: accountName
objectName: "AddAccountPopup-AccountName"
anchors.horizontalCenter: parent.horizontalCenter
placeholderText: qsTr("Account name")
label: qsTr("Name")
charLimit: 20
text: root.store.addAccountModule.accountName
input.isIconSelectable: true
input.leftPadding: Theme.padding
input.asset.color: Utils.getColorForId(root.store.addAccountModule.selectedColorId)
onIconClicked: {
d.openEmojiPopup(true)
}
input.rightComponent: StatusFlatRoundButton {
objectName: "AddAccountPopup-AccountEmoji"
width: 30
height: 30
radius: 30
icon.name: "emojis"
icon.width: 24
icon.height: 24
onClicked: {
d.openEmojiPopup(false)
}
}
validators: [
StatusMinLengthValidator {
errorMessage: qsTr("Account name must be at least %n character(s)", "", Constants.addAccountPopup.keyPairAccountNameMinLength)
minLength: Constants.addAccountPopup.keyPairAccountNameMinLength
},
StatusRegularExpressionValidator {
regularExpression: Constants.regularExpressions.alphanumericalWithSpace
errorMessage: Constants.errorMessages.alphanumericalWithSpaceRegExp
}
]
onTextChanged: {
root.store.addAccountModule.accountName = text
if (input.asset.emoji === "") {
input.letterIconName = text;
}
}
onKeyPressed: {
root.store.submitPopup(event)
}
onValidChanged: {
root.store.accountNameIsValid = accountName.valid
}
}
StatusColorSelectorGrid {
id: colorSelection
objectName: "AddAccountPopup-AccountColor"
anchors.horizontalCenter: parent.horizontalCenter
model: Theme.palette.customisationColorsArray
title.color: Theme.palette.directColor1
title.font.pixelSize: Constants.addAccountPopup.labelFontSize1
title.text: qsTr("Colour")
selectedColorIndex: -1
onSelectedColorChanged: {
root.store.addAccountModule.selectedColorId = Utils.getIdForColor(selectedColor)
}
}
SelectOrigin {
anchors.horizontalCenter: parent.horizontalCenter
userProfilePublicKey: root.store.userProfilePublicKey
originModel: root.store.editMode? [] : d.originModelWithoutWatchOnlyAcc
selectedOrigin: root.store.selectedOrigin
caretVisible: !root.store.editMode
enabled: !root.store.editMode
onOriginSelected: {
if (keyUid === Constants.appTranslatableConstants.addAccountLabelOptionAddWatchOnlyAcc) {
if (root.store.remainingWatchOnlyAccountCapacity() === 0) {
root.watchOnlyAccountsLimitReached()
return
}
}
if (keyUid === Constants.appTranslatableConstants.addAccountLabelOptionAddNewMasterKey) {
if (root.store.remainingKeypairCapacity() === 0) {
root.keypairLimitReached()
return
}
root.store.currentState.doSecondaryAction()
return
}
root.store.changeSelectedOrigin(keyUid)
}
}
WatchOnlyAddressSection {
width: parent.width - 2 * Theme.padding
anchors.horizontalCenter: parent.horizontalCenter
spacing: Theme.padding
visible: !root.store.editMode &&
root.store.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.unknown &&
root.store.selectedOrigin.keyUid === Constants.appTranslatableConstants.addAccountLabelOptionAddWatchOnlyAcc
store: root.store
onVisibleChanged: {
reset()
}
}
}
Loader {
Layout.preferredHeight: Theme.padding
Layout.fillWidth: true
sourceComponent: spacer
}
DerivationPathSection {
id: derivationPathSection
Layout.fillWidth: true
visible: root.store.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.profile ||
root.store.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.seedImport
store: root.store
}
AddressWithAddressDetails {
id: addressWithDetails
Layout.fillWidth: true
Layout.margins: Theme.padding
spacing: Theme.halfPadding
visible: root.store.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.privateKeyImport ||
root.store.editMode &&
root.store.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.unknown &&
root.store.selectedOrigin.keyUid === Constants.appTranslatableConstants.addAccountLabelOptionAddWatchOnlyAcc
addressText: root.store.editMode? qsTr("Account") : qsTr("Public address of private key")
addressDetailsItem: root.store.selectedOrigin.pairType === Constants.addAccountPopup.keyPairType.privateKeyImport?
root.store.privateKeyAccAddress
: root.store.watchOnlyAccAddress
displayDetails: !root.store.editMode
displayCopyButton: root.store.editMode
addressColor: root.store.editMode? Theme.palette.baseColor1 : Theme.palette.directColor1
}
Loader {
Layout.preferredHeight: Theme.padding
Layout.fillWidth: true
visible: derivationPathSection.visible || addressWithDetails.visible
sourceComponent: spacer
}
}
}