status-desktop/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml

import QtQuick 2.13
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.14
import QtQuick.Dialogs 1.3

import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Popups 0.1


import shared.panels 1.0
import shared 1.0
import shared.popups 1.0

import utils 1.0
import shared.controls 1.0
import "../popups"
import "../stores"
import "../shared"

Item {
    id: root

    property string pubKey
    property string address
    property string displayName
    signal createPassword()

    state: "username"

    Component.onCompleted: {
        if (!!OnboardingStore.onboardingModuleInst.importedAccountPubKey) {
            root.address = OnboardingStore.onboardingModuleInst.importedAccountAddress ;
            root.pubKey = OnboardingStore.onboardingModuleInst.importedAccountPubKey;
        }
        nameInput.input.edit.forceActiveFocus();
    }

    Loader {
        active: !OnboardingStore.onboardingModuleInst.importedAccountPubKey
        sourceComponent: ListView {
            model: OnboardingStore.onboardingModuleInst.accountsModel
            delegate: Item {
                Component.onCompleted: {
                    if (index === 0) {
                        root.address = model.address;
                        root.pubKey = model.pubKey;
                    }
                }
            }
        }
    }

    ColumnLayout {
        anchors.centerIn: parent
        spacing: Style.current.padding

        StyledText {
            id: usernameText
            text: qsTr("Your profile")
            font.weight: Font.Bold
            font.pixelSize: 22
            Layout.alignment: Qt.AlignHCenter
        }

        StyledText {
            id: txtDesc
            Layout.preferredWidth: (root.state === "username") ? 338 : 643
            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
            Layout.alignment: Qt.AlignHCenter
            font.pixelSize: 15
        }

        Item {
            implicitWidth: 100
            implicitHeight: 100
            Layout.alignment: Qt.AlignHCenter
            StatusSmartIdenticon {
                id: userImage
                image {
                    width: 80
                    height: 80
                    isIdenticon: false
                }

                icon {
                    width: 80
                    height: 80
                    letterSize: 32
                    color: Theme.palette.miscColor5
                    charactersLen: 2
                }

                ringSettings {
                    ringSpecModel: Utils.getColorHashAsJson(root.pubKey)
                }
            }
            StatusRoundButton {
                id: updatePicButton
                width: 40
                height: 40
                anchors.top: parent.top
                anchors.right: parent.right
                type: StatusFlatRoundButton.Type.Secondary
                icon.name: "add"
                onClicked: {
                    cropperModal.chooseImageToCrop()
                }
            }
        }

        StatusInput {
            id: nameInput
            implicitWidth: 328
            Layout.preferredHeight: 78
            Layout.alignment: Qt.AlignHCenter
            input.placeholderText: qsTr("Display name")
            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();
                }
            }
            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
                    nextBtn.clicked(null)
                }
            }
        }

        StyledText {
            id: chatKeyTxt
            color: Style.current.secondaryText
            text: qsTr("Chatkey:") + " " + Utils.getCompressedPk(root.pubKey)
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            Layout.alignment: Qt.AlignHCenter
            font.pixelSize: 15
        }

        Item {
            id: chainsChatKeyImg
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: 400
            Layout.preferredHeight: 84
            Image {
                anchors.horizontalCenter: parent.horizontalCenter
                source: Style.png("onboarding/chains")
            }
            EmojiHash {
                anchors {
                    bottom: parent.bottom
                    left: parent.left
                    leftMargin: 80
                }

                publicKey: root.pubKey
            }
            StatusSmartIdenticon {
                id: userImageCopy

                anchors {
                    bottom: parent.bottom
                    right: parent.right
                    rightMargin: 116
                }

                icon.width: 44
                icon.height: 44
                icon.color: "transparent"
                ringSettings { ringSpecModel: Utils.getColorHashAsJson(root.pubKey) }
            }
        }
        StatusButton {
            id: nextBtn
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
            Layout.topMargin: 125
            enabled: !!nameInput.text && nameInput.valid
            text: qsTr("Next")
            onClicked: {
                if (root.state === "username") {
                    if (OnboardingStore.accountCreated) {
                        OnboardingStore.updatedDisplayName(nameInput.text);
                    }
                    OnboardingStore.displayName = nameInput.text
                    root.displayName = nameInput.text;
                    root.state = "chatkey";
                } else {
                    createPassword();
                }
            }
        }

        BannerCropperModal {
            id: cropperModal
            onImageCropped: {
                const croppedImg = OnboardingStore.generateImage(image,
                                              cropRect.x.toFixed(),
                                              cropRect.y.toFixed(),
                                              (cropRect.x + cropRect.width).toFixed(),
                                              (cropRect.y + cropRect.height).toFixed())
                userImage.image.source = image
            }
        }
    }

    states: [
        State {
            name: "username"
            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
                visible: false
            }
            PropertyChanges {
                target: userImageCopy
                visible: false
            }
            PropertyChanges {
                target: updatePicButton
                visible: true
            }
            PropertyChanges {
                target: nameInput
                visible: true
            }
        },
        State {
            name: "chatkey"
            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
                visible: true
            }
            PropertyChanges {
                target: userImageCopy
                visible: true
            }
            PropertyChanges {
                target: updatePicButton
                visible: false
            }
            PropertyChanges {
                target: nameInput
                visible: false
            }
        }
    ]

    transitions: [
        Transition {
            from: "*"
            to: "*"
            SequentialAnimation {
                PropertyAction {
                    target: root
                    property: "opacity"
                    value: 0.0
                }
                PropertyAction {
                    target: root
                    property: "opacity"
                    value: 1.0
                }
            }
        }
    ]
}