harbour-fernschreiber/qml/pages/InitializationPage.qml

/*
    Copyright (C) 2020 Sebastian J. Wolf and other contributors

    This file is part of Fernschreiber.

    Fernschreiber is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Fernschreiber is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Fernschreiber. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.6
import Sailfish.Silica 1.0
import WerkWolf.Fernschreiber 1.0

Page {
    id: initializationPage
    allowedOrientations: Orientation.All
    backNavigation: false

    property bool loading: true
    property int authorizationState: TelegramAPI.Closed
    property var authorizationStateData: null

    Component.onCompleted: {
        initializationPage.authorizationState = tdLibWrapper.getAuthorizationState();
        initializationPage.authorizationStateData = tdLibWrapper.getAuthorizationStateData();
        initializationPage.loading = false;

        switch (authorizationState) {
        case TelegramAPI.WaitCode:
            initializationPage.loading = false;
            welcomeColumn.visible = false;
            enterPinColumn.visible = true;
            enterPinField.focus = true
            enterPasswordColumn.visible = false;
            waitRegistrationColumn.visible = false;
            break;
        case TelegramAPI.WaitPassword:
            initializationPage.loading = false;
            welcomeColumn.visible = false;
            enterPinColumn.visible = false;
            enterPasswordColumn.visible = true;
            waitRegistrationColumn.visible = false;
            break;
        case TelegramAPI.WaitRegistration:
            initializationPage.loading = false;
            welcomeColumn.visible = false;
            enterPinColumn.visible = false;
            enterPasswordColumn.visible = false;
            waitRegistrationColumn.visible = true;
            pageHeader.title = qsTr("User Registration")
            break;
        default:
            // Nothing ;)
        }
    }

    Connections {
        target: tdLibWrapper
        onAuthorizationStateChanged: {
            switch (authorizationState) {
            case TelegramAPI.WaitCode:
                initializationPage.loading = false;
                enterPinColumn.visible = true;
                enterPinField.focus = true
                enterPasswordColumn.visible = false;
                waitRegistrationColumn.visible = false;
                break;
            case TelegramAPI.WaitPassword:
                initializationPage.loading = false;
                enterPinColumn.visible = false;
                enterPasswordColumn.visible = true;
                waitRegistrationColumn.visible = false;
                break;
            case TelegramAPI.WaitRegistration:
                initializationPage.loading = false;
                enterPinColumn.visible = false;
                enterPasswordColumn.visible = false;
                waitRegistrationColumn.visible = true;
                break;
            case TelegramAPI.AuthorizationReady:
                initializationPage.loading = false;
                pageStack.completeAnimation();
                pageStack.pop();
                break;
            default:
                // Nothing ;)
            }
            initializationPage.authorizationStateData = authorizationStateData;
        }
    }


    SilicaFlickable {
        id: welcomeFlickable
        contentHeight: content.height
        Behavior on contentHeight { NumberAnimation {} }
        anchors.fill: parent

        PullDownMenu {
            MenuItem {
                text: qsTr("About Fernschreiber")
                onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
            }
        }

        Column {
            id: content
            width: parent.width
            spacing: Theme.paddingLarge

            PageHeader {
                id: pageHeader
                title: qsTr("Welcome to Fernschreiber!")
            }

            Image {
                source: "../../images/fernschreiber.svg"
                anchors {
                    horizontalCenter: parent.horizontalCenter
                }
                sourceSize {
                    width: width
                    height: height
                }
                fillMode: Image.PreserveAspectFit
                asynchronous: true
                width: Math.min(2 * Theme.itemSizeHuge, Math.min(Screen.width, Screen.height) / 2)
                height: width
            }

            BusyLabel {
                text: qsTr("Loading...")
                running: initializationPage.loading
                Behavior on opacity { FadeAnimation {} }
                visible: opacity > 0
            }

            Column {
                id: welcomeColumn
                width: parent.width
                spacing: Theme.paddingLarge

                Behavior on opacity { FadeAnimation {} }
                opacity: visible ? 1 : 0

                InfoLabel {
                    text: qsTr("Please enter your phone number to continue.")
                }

                TextField {
                    id: phoneNumberTextField
                    placeholderText: qsTr("Use the international format, e.g. %1").arg("+4912342424242")
                    inputMethodHints: Qt.ImhDialableCharactersOnly
                    labelVisible: false
                    width: parent.width
                    readonly property bool validInput: text.match(/\+[1-9][0-9]{4,}/g)
                    EnterKey.iconSource: "image://theme/icon-m-enter-next"
                    EnterKey.enabled: validInput
                    EnterKey.onClicked: {
                        validator = filledValidator
                        if(acceptableInput) {
                            continueWithPhoneNumberButton.focus = true
                            continueWithPhoneNumberButton.enter()
                        }
                    }
                }

                Button {
                    id: continueWithPhoneNumberButton
                    text: qsTr("Continue")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    enabled: phoneNumberTextField.validInput
                    onClicked: enter()
                    function enter() {
                        initializationPage.loading = true;
                        welcomeColumn.visible = false;
                        tdLibWrapper.setAuthenticationPhoneNumber(phoneNumberTextField.text);
                    }
                }
            }

            Column {
                id: pinErrorColumn
                width: parent.width
                spacing: Theme.paddingLarge

                Behavior on opacity { FadeAnimation {} }
                opacity: visible ? 1 : 0
                visible: false

                InfoLabel {
                    id: errorInfoLabel
                    font.pixelSize: Theme.fontSizeLarge
                    text: ""
                }

                Button {
                    text: qsTr("OK")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    onClicked: {
                        pinErrorColumn.visible = false;
                        welcomeColumn.visible = true;
                    }
                }
            }

            Column {
                id: enterPasswordColumn
                width: parent.width
                spacing: Theme.paddingLarge

                Behavior on opacity { FadeAnimation {} }
                opacity: visible ? 1.0 : 0.0
                visible: false

                InfoLabel {
                    font.pixelSize: Theme.fontSizeLarge
                    text: qsTr("Please enter your password:")
                }

                PasswordField {
                    id: enterPasswordField
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    font.pixelSize: Theme.fontSizeLarge
                    width: parent.width - 2 * Theme.horizontalPageMargin
                    horizontalAlignment: TextInput.AlignHCenter
                }

                Button {
                    text: qsTr("OK")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    onClicked: {
                        initializationPage.loading = true;
                        enterPasswordColumn.visible = false;
                        tdLibWrapper.setAuthenticationPassword(enterPasswordField.text);
                    }
                }
            }

            Column {
                id: enterPinColumn
                width: parent.width
                spacing: Theme.paddingLarge

                Behavior on opacity { FadeAnimation {} }
                opacity: visible ? 1.0 : 0.0
                visible: false

                InfoLabel {
                    font.pixelSize: Theme.fontSizeLarge
                    text: qsTr("Please enter the code that you received:")
                }

                TextField {
                    id: enterPinField
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    inputMethodHints: Qt.ImhDigitsOnly
                    font.pixelSize: Theme.fontSizeExtraLarge
                    width: parent.width - 4 * Theme.paddingLarge
                    horizontalAlignment: TextInput.AlignHCenter
                    EnterKey.iconSource: "image://theme/icon-m-enter-next"
                    EnterKey.enabled: text.length > 0
                    EnterKey.onClicked: enterPinButton.enter()
                }

                Button {
                    id: enterPinButton
                    text: qsTr("OK")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    onClicked: enter()
                    function enter() {
                        initializationPage.loading = true;
                        enterPinColumn.visible = false;
                        tdLibWrapper.setAuthenticationCode(enterPinField.text);
                    }
                }
            }

            Column {
                id: linkingErrorColumn
                width: parent.width
                spacing: Theme.paddingLarge

                Behavior on opacity { FadeAnimation {} }
                opacity: visible ? 1.0 : 0.0
                visible: false

                InfoLabel {
                    font.pixelSize: Theme.fontSizeLarge
                    text: qsTr("Unable to authenticate you with the entered code.")
                }

                Button {
                    text: qsTr("Enter code again")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    onClicked: {
                        linkingErrorColumn.visible = false;
                        enterPinColumn.visible = true;
                    }
                }

                Button {
                    text: qsTr("Restart authentication")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    onClicked: {
                        linkingErrorColumn.visible = false;
                        welcomeColumn.visible = true;
                    }
                }
            }

            Column {
                id: waitRegistrationColumn
                width: parent.width
                spacing: Theme.paddingLarge

                Behavior on opacity { FadeAnimation {} }
                opacity: visible ? 1.0 : 0.0
                visible: false

                InfoLabel {
                    id: waitRegistrationInfoLabel
                    property bool acknowledged
                    font.pixelSize: Theme.fontSizeExtraSmall
                    textFormat: Text.StyledText
                    horizontalAlignment: Text.AlignLeft
                    linkColor: Theme.primaryColor
                    property var stateText: initializationPage.authorizationStateData.authorization_state && initializationPage.authorizationStateData.authorization_state.terms_of_service ?
                                                   initializationPage.authorizationStateData.authorization_state.terms_of_service.text :
                                                   null
                    visible: !!stateText && !acknowledged
                    text: {
                        if(!stateText) {
                            return '';
                        }
                        var entities = stateText.entities;
                        if(entities && entities.length > 0 && entities[0]["type"]["@type"] === "textEntityTypeTextUrl") { //we just use the first entity for now.
                            var offset = entities[0].offset;
                            var length = entities[0].length;
                            return (stateText.text.slice(0,entities[0].offset)
                                    + "<a href=\""+entities[0]["type"]["url"]+"\">"
                                    + stateText.text.slice(entities[0].offset, entities[0].offset + entities[0].length)
                                    + '</a>'
                                    + stateText.text.slice(entities[0].offset + entities[0].length)).replace(/\n/gm, "<br>");
                        }
                        return stateText.text.replace(/\n/gm, "<br>");
                    }
                }

                Button {
                    visible: waitRegistrationInfoLabel.visible
                    text: qsTr("OK")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    onClicked: {
                        waitRegistrationInfoLabel.acknowledged = true;
                        userFirstNameTextField.focus = true
                    }
                }
                RegExpValidator {
                    id: filledValidator
                    regExp: /.+/
                }
                TextField {
                    id: userFirstNameTextField
                    visible: !waitRegistrationInfoLabel.visible
                    opacity: visible ? 1.0 : 0.0
                    Behavior on opacity { FadeAnimation {} }
                    placeholderText: qsTr("Enter your First Name")
                    labelVisible: false
                    width: parent.width
                    EnterKey.iconSource: !!text ? "image://theme/icon-m-enter-next" : "image://theme/icon-m-text-input"
                    EnterKey.onClicked: {
                        validator = filledValidator
                        if(acceptableInput) userLastNameTextField.focus = true;
                    }
                }
                TextField {
                    id: userLastNameTextField
                    visible: !waitRegistrationInfoLabel.visible
                    opacity: visible ? 1.0 : 0.0
                    Behavior on opacity { FadeAnimation {} }
                    placeholderText: qsTr("Enter your Last Name")
                    labelVisible: false
                    width: parent.width
                    EnterKey.iconSource: !!text ? "image://theme/icon-m-enter-accept" : "image://theme/icon-m-text-input"
                    EnterKey.onClicked: {
                        validator = filledValidator
                        if(acceptableInput) registerUserButton.onClicked(null);
                    }
                }
                Button {
                    id: registerUserButton
                    visible: !waitRegistrationInfoLabel.visible
                    opacity: visible ? 1.0 : 0.0
                    Behavior on opacity { FadeAnimation {} }
                    text: qsTr("Register User")
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                    }
                    onClicked: {
                        userFirstNameTextField.validator = filledValidator
                        userLastNameTextField.validator = filledValidator
                        if(userFirstNameTextField.acceptableInput && userLastNameTextField.acceptableInput) {
                            tdLibWrapper.registerUser(userFirstNameTextField.text, userLastNameTextField.text);
                        } else if(!userFirstNameTextField.acceptableInput) {
                            userFirstNameTextField.focus = true;
                        } else {
                            userLastNameTextField.focus = true;
                        }

                    }
                }
            }

            Item {
                width: 1
                height: Theme.paddingLarge
            }
        }
    }
}