2022-03-07 22:59:38 +00:00
import QtQuick 2.13
import QtQuick . Layouts 1.12
2022-05-23 11:29:58 +00:00
import QtQuick . Controls 2.14
import QtQuick . Dialogs 1.3
2022-03-07 22:59:38 +00:00
import StatusQ . Components 0.1
import StatusQ . Controls 0.1
import StatusQ . Core 0.1
import StatusQ . Core . Theme 0.1
2022-05-23 11:29:58 +00:00
import StatusQ . Popups 0.1
2022-03-07 22:59:38 +00:00
import shared . panels 1.0
2022-05-23 11:29:58 +00:00
import shared 1.0
import shared . popups 1.0
2022-03-07 22:59:38 +00:00
import shared . controls 1.0
2022-07-14 11:03:36 +00:00
import utils 1.0
2022-03-07 22:59:38 +00:00
import "../popups"
import "../stores"
2022-05-23 11:29:58 +00:00
import "../shared"
2022-03-07 22:59:38 +00:00
Item {
id: root
2022-07-20 12:34:44 +00:00
property StartupStore startupStore
2022-03-07 22:59:38 +00:00
property string pubKey
property string address
property string displayName
signal createPassword ( )
2022-03-29 19:15:42 +00:00
Component.onCompleted: {
2022-07-20 12:34:44 +00:00
if ( ! ! root . startupStore . startupModuleInst . importedAccountPubKey ) {
root . address = root . startupStore . startupModuleInst . importedAccountAddress ;
root . pubKey = root . startupStore . startupModuleInst . importedAccountPubKey ;
2022-03-29 19:15:42 +00:00
}
2022-07-20 12:34:44 +00:00
nameInput . text = root . startupStore . getDisplayName ( ) ;
2022-05-10 15:42:35 +00:00
nameInput . input . edit . forceActiveFocus ( ) ;
2022-08-11 11:55:08 +00:00
userImage . asset . name = root . startupStore . getCroppedProfileImage ( ) ;
2022-03-29 19:15:42 +00:00
}
Loader {
2022-07-20 12:34:44 +00:00
active: ! root . startupStore . startupModuleInst . importedAccountPubKey
2022-07-14 11:03:36 +00:00
sourceComponent: StatusListView {
2022-07-20 12:34:44 +00:00
model: root . startupStore . startupModuleInst . generatedAccountsModel
2022-03-29 19:15:42 +00:00
delegate: Item {
Component.onCompleted: {
if ( index === 0 ) {
root . address = model . address ;
2022-03-15 22:27:36 +00:00
root . pubKey = model . pubKey ;
2022-03-29 19:15:42 +00:00
}
}
2022-03-07 22:59:38 +00:00
}
}
}
ColumnLayout {
2022-05-25 15:24:01 +00:00
height: 461
2022-06-20 09:50:57 +00:00
anchors.centerIn: parent
2022-03-07 22:59:38 +00:00
StyledText {
id: usernameText
text: qsTr ( "Your profile" )
font.weight: Font . Bold
font.pixelSize: 22
Layout.alignment: Qt . AlignHCenter
}
StyledText {
id: txtDesc
2022-07-20 12:34:44 +00:00
Layout.preferredWidth: root . state === Constants . startupState . userProfileCreate ? 338 : 643
2022-06-01 15:52:23 +00:00
Layout.alignment: Qt . AlignTop | Qt . AlignHCenter
2022-07-27 11:30:35 +00:00
Layout.topMargin: Style . current . smallPadding
2022-03-07 22:59:38 +00:00
color: Style . current . secondaryText
text: qsTr ( "Longer and unusual names are better as they are less likely to be used by someone else." )
horizontalAlignment: Text . AlignHCenter
wrapMode: Text . WordWrap
font.pixelSize: 15
2022-07-27 11:30:35 +00:00
lineHeight: 1.2
font.letterSpacing: - 0.2
2022-03-07 22:59:38 +00:00
}
Item {
2022-07-27 13:17:33 +00:00
Layout.preferredWidth: 86
Layout.preferredHeight: 86
2022-06-01 15:52:23 +00:00
Layout.alignment: Qt . AlignTop | Qt . AlignHCenter
2022-07-27 11:30:35 +00:00
Layout.topMargin: Style . current . bigPadding
2022-03-07 22:59:38 +00:00
StatusSmartIdenticon {
2022-06-01 15:52:23 +00:00
anchors.left: parent . left
2022-03-07 22:59:38 +00:00
id: userImage
2022-08-18 07:38:47 +00:00
objectName: "welcomeScreenUserProfileImage"
2022-08-11 11:55:08 +00:00
asset.width: 86
asset.height: 86
asset.letterSize: 32
asset.color: Utils . colorForPubkey ( root . pubKey )
asset.charactersLen: 2
asset.isImage: ! ! asset . name
asset.imgIsIdenticon: false
2022-04-06 11:12:11 +00:00
ringSettings {
ringSpecModel: Utils . getColorHashAsJson ( root . pubKey )
}
2022-03-07 22:59:38 +00:00
}
StatusRoundButton {
id: updatePicButton
width: 40
height: 40
anchors.top: parent . top
anchors.right: parent . right
2022-06-01 15:52:23 +00:00
anchors.rightMargin: - 20
2022-03-07 22:59:38 +00:00
type: StatusFlatRoundButton . Type . Secondary
icon.name: "add"
onClicked: {
2022-06-01 15:52:23 +00:00
cropperModal . chooseImageToCrop ( ) ;
2022-03-07 22:59:38 +00:00
}
}
}
2022-06-01 15:52:23 +00:00
Item {
id: nameInputItem
2022-07-27 11:30:35 +00:00
Layout.preferredWidth: 328
2022-07-27 13:17:33 +00:00
Layout.preferredHeight: 66
2022-06-01 15:52:23 +00:00
Layout.alignment: Qt . AlignHCenter | Qt . AlignTop
Layout.topMargin: 37
StatusInput {
id: nameInput
2022-07-29 22:51:34 +00:00
input.edit.objectName: "onboardingDisplayNameInput"
2022-06-01 15:52:23 +00:00
width: parent . width
2022-07-22 10:28:04 +00:00
placeholderText: qsTr ( "Display name" )
2022-06-01 15:52:23 +00:00
input.rightComponent: RoundedIcon {
width: 14
height: 14
iconWidth: 14
iconHeight: 14
visible: ( nameInput . input . text . length > 0 )
color: "transparent"
source: Style . svg ( "close-filled" )
onClicked: {
nameInput . input . edit . clear ( ) ;
}
2022-03-07 22:59:38 +00:00
}
2022-06-01 15:52:23 +00:00
errorMessageCmp.wrapMode: Text . NoWrap
errorMessageCmp.horizontalAlignment: Text . AlignHCenter
validators: Constants . validators . displayName
onTextChanged: {
userImage . name = text ;
}
input.acceptReturn: true
onKeyPressed: {
if ( input . edit . keyEvent === Qt . Key_Return || input . edit . keyEvent === Qt . Key_Enter ) {
event . accepted = true
2022-06-20 08:04:48 +00:00
if ( nextBtn . enabled ) {
nextBtn . clicked ( null )
}
2022-06-01 15:52:23 +00:00
}
2022-05-10 15:42:35 +00:00
}
}
2022-03-07 22:59:38 +00:00
}
StyledText {
id: chatKeyTxt
2022-07-27 13:17:33 +00:00
Layout.preferredHeight: 22
2022-03-07 22:59:38 +00:00
color: Style . current . secondaryText
2022-03-30 07:09:39 +00:00
text: qsTr ( "Chatkey:" ) + " " + Utils . getCompressedPk ( root . pubKey )
2022-03-07 22:59:38 +00:00
horizontalAlignment: Text . AlignHCenter
wrapMode: Text . WordWrap
2022-06-01 15:52:23 +00:00
Layout.alignment: Qt . AlignHCenter | Qt . AlignTop
Layout.topMargin: 13
2022-03-07 22:59:38 +00:00
font.pixelSize: 15
}
Item {
id: chainsChatKeyImg
2022-07-27 13:17:33 +00:00
Layout.alignment: Qt . AlignHCenter | Qt . AlignTop
2022-06-01 15:52:23 +00:00
Layout.topMargin: Style . current . padding
Layout.preferredWidth: 215
Layout.preferredHeight: 77
2022-07-27 13:17:33 +00:00
2022-03-07 22:59:38 +00:00
Image {
2022-06-01 15:52:23 +00:00
id: imgChains
2022-03-07 22:59:38 +00:00
anchors.horizontalCenter: parent . horizontalCenter
2022-06-01 15:52:23 +00:00
source: Style . svg ( "onboarding/chains" )
2022-03-07 22:59:38 +00:00
}
EmojiHash {
2022-04-14 08:26:46 +00:00
anchors {
bottom: parent . bottom
left: parent . left
}
2022-03-07 22:59:38 +00:00
publicKey: root . pubKey
}
StatusSmartIdenticon {
id: userImageCopy
2022-04-14 08:26:46 +00:00
anchors {
bottom: parent . bottom
right: parent . right
2022-06-01 15:52:23 +00:00
rightMargin: 25
2022-04-14 08:26:46 +00:00
}
2022-08-11 11:55:08 +00:00
asset.width: 44
asset.height: 44
asset.color: "transparent"
2022-03-07 22:59:38 +00:00
ringSettings { ringSpecModel: Utils . getColorHashAsJson ( root . pubKey ) }
}
}
2022-06-01 15:52:23 +00:00
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
2022-03-07 22:59:38 +00:00
StatusButton {
2022-05-10 15:42:35 +00:00
id: nextBtn
2022-07-29 22:51:34 +00:00
objectName: "onboardingDetailsViewNextButton"
2022-07-27 11:30:35 +00:00
Layout.alignment: Qt . AlignHCenter
2022-04-01 08:06:39 +00:00
enabled: ! ! nameInput . text && nameInput . valid
2022-07-27 11:30:35 +00:00
font.weight: Font . Medium
2022-03-07 22:59:38 +00:00
text: qsTr ( "Next" )
onClicked: {
2022-07-20 12:34:44 +00:00
if ( root . state === Constants . startupState . userProfileCreate ) {
root . startupStore . setDisplayName ( nameInput . text )
2022-03-07 22:59:38 +00:00
root . displayName = nameInput . text ;
}
2022-07-20 12:34:44 +00:00
root . startupStore . doPrimaryAction ( )
2022-03-07 22:59:38 +00:00
}
}
2022-06-01 14:00:57 +00:00
ImageCropWorkflow {
2022-05-23 11:29:58 +00:00
id: cropperModal
2022-05-31 09:07:45 +00:00
imageFileDialogTitle: qsTr ( "Choose an image for profile picture" )
title: qsTr ( "Profile picture" )
acceptButtonText: qsTr ( "Make this my profile picture" )
2022-05-23 11:29:58 +00:00
onImageCropped: {
2022-07-20 12:34:44 +00:00
const croppedImg = root . startupStore . generateImage ( image ,
2022-06-01 15:52:23 +00:00
cropRect . x . toFixed ( ) ,
cropRect . y . toFixed ( ) ,
( cropRect . x + cropRect . width ) . toFixed ( ) ,
( cropRect . y + cropRect . height ) . toFixed ( ) ) ;
2022-08-11 11:55:08 +00:00
userImage . asset . name = croppedImg ;
2022-04-04 12:45:27 +00:00
}
2022-03-07 22:59:38 +00:00
}
}
states: [
State {
2022-07-20 12:34:44 +00:00
name: Constants . startupState . userProfileCreate
when: root . startupStore . currentStartupState . stateType === Constants . startupState . userProfileCreate
2022-03-07 22:59:38 +00:00
PropertyChanges {
target: usernameText
text: qsTr ( "Your profile" )
}
PropertyChanges {
target: txtDesc
text: qsTr ( "Longer and unusual names are better as they are less likely to be used by someone else." )
}
PropertyChanges {
target: chatKeyTxt
visible: false
}
PropertyChanges {
target: chainsChatKeyImg
2022-05-25 15:24:01 +00:00
opacity: 0.0
2022-03-07 22:59:38 +00:00
}
PropertyChanges {
target: userImageCopy
2022-05-25 15:24:01 +00:00
opacity: 0.0
2022-03-07 22:59:38 +00:00
}
PropertyChanges {
target: updatePicButton
2022-05-25 15:24:01 +00:00
opacity: 1.0
2022-03-07 22:59:38 +00:00
}
PropertyChanges {
2022-06-01 15:52:23 +00:00
target: nameInputItem
2022-03-07 22:59:38 +00:00
visible: true
}
} ,
State {
2022-07-20 12:34:44 +00:00
name: Constants . startupState . userProfileChatKey
when: root . startupStore . currentStartupState . stateType === Constants . startupState . userProfileChatKey
2022-03-07 22:59:38 +00:00
PropertyChanges {
target: usernameText
text: qsTr ( "Your emojihash and identicon ring" )
}
PropertyChanges {
target: txtDesc
text: qsTr ( "This set of emojis and coloured ring around your avatar are unique and represent your chat key, so your friends can easily distinguish you from potential impersonators." )
}
PropertyChanges {
target: chatKeyTxt
visible: true
}
PropertyChanges {
target: chainsChatKeyImg
2022-05-25 15:24:01 +00:00
opacity: 1.0
2022-03-07 22:59:38 +00:00
}
PropertyChanges {
target: userImageCopy
2022-05-25 15:24:01 +00:00
opacity: 1.0
2022-03-07 22:59:38 +00:00
}
PropertyChanges {
target: updatePicButton
2022-05-25 15:24:01 +00:00
opacity: 0.0
2022-03-07 22:59:38 +00:00
}
PropertyChanges {
2022-06-01 15:52:23 +00:00
target: nameInputItem
2022-03-07 22:59:38 +00:00
visible: false
}
}
]
transitions: [
Transition {
from: "*"
to: "*"
SequentialAnimation {
PropertyAction {
target: root
property: "opacity"
value: 0.0
}
PropertyAction {
target: root
property: "opacity"
value: 1.0
}
}
}
]
}