harbour-fernschreiber/qml/pages/InitializationPage.qml

449 lines
17 KiB
QML
Raw Permalink Normal View History

/*
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/>.
*/
2020-10-31 22:49:03 +03:00
import QtQuick 2.6
import Sailfish.Silica 1.0
import WerkWolf.Fernschreiber 1.0
Page {
id: initializationPage
allowedOrientations: Orientation.All
2020-08-18 00:44:37 +03:00
backNavigation: false
property bool loading: true
property int authorizationState: TelegramAPI.Closed
2020-10-01 01:55:26 +03:00
property var authorizationStateData: null
Component.onCompleted: {
initializationPage.authorizationState = tdLibWrapper.getAuthorizationState();
2020-10-01 01:55:26 +03:00
initializationPage.authorizationStateData = tdLibWrapper.getAuthorizationStateData();
initializationPage.loading = false;
2020-10-01 01:55:26 +03:00
switch (authorizationState) {
case TelegramAPI.WaitCode:
initializationPage.loading = false;
welcomeColumn.visible = false;
enterPinColumn.visible = true;
enterPinField.focus = true
2020-09-16 23:36:43 +03:00
enterPasswordColumn.visible = false;
2020-10-01 01:55:26 +03:00
waitRegistrationColumn.visible = false;
break;
case TelegramAPI.WaitPassword:
initializationPage.loading = false;
welcomeColumn.visible = false;
2020-09-16 23:36:43 +03:00
enterPinColumn.visible = false;
enterPasswordColumn.visible = true;
2020-10-01 01:55:26 +03:00
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")
2020-10-01 01:55:26 +03:00
break;
default:
// Nothing ;)
}
}
Connections {
target: tdLibWrapper
onAuthorizationStateChanged: {
switch (authorizationState) {
case TelegramAPI.WaitCode:
initializationPage.loading = false;
enterPinColumn.visible = true;
enterPinField.focus = true
2020-09-16 23:36:43 +03:00
enterPasswordColumn.visible = false;
2020-10-01 01:55:26 +03:00
waitRegistrationColumn.visible = false;
2020-09-16 23:36:43 +03:00
break;
case TelegramAPI.WaitPassword:
initializationPage.loading = false;
enterPinColumn.visible = false;
enterPasswordColumn.visible = true;
2020-10-01 01:55:26 +03:00
waitRegistrationColumn.visible = false;
break;
case TelegramAPI.WaitRegistration:
initializationPage.loading = false;
enterPinColumn.visible = false;
enterPasswordColumn.visible = false;
waitRegistrationColumn.visible = true;
break;
case TelegramAPI.AuthorizationReady:
2020-08-18 00:44:37 +03:00
initializationPage.loading = false;
pageStack.completeAnimation();
2020-08-18 00:44:37 +03:00
pageStack.pop();
break;
default:
// Nothing ;)
}
2020-10-01 01:55:26 +03:00
initializationPage.authorizationStateData = authorizationStateData;
}
}
2020-10-01 01:55:26 +03:00
SilicaFlickable {
id: welcomeFlickable
contentHeight: content.height
2020-10-01 01:55:26 +03:00
Behavior on contentHeight { NumberAnimation {} }
anchors.fill: parent
PullDownMenu {
MenuItem {
text: qsTr("About Fernschreiber")
onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
}
}
2020-10-01 01:55:26 +03:00
Column {
id: content
2020-10-01 01:55:26 +03:00
width: parent.width
spacing: Theme.paddingLarge
2020-10-01 01:55:26 +03:00
PageHeader {
id: pageHeader
2020-10-01 01:55:26 +03:00
title: qsTr("Welcome to Fernschreiber!")
}
2020-10-01 01:55:26 +03:00
Image {
source: "../../images/fernschreiber.svg"
2020-10-01 01:55:26 +03:00
anchors {
horizontalCenter: parent.horizontalCenter
}
sourceSize {
width: width
height: height
}
2020-10-01 01:55:26 +03:00
fillMode: Image.PreserveAspectFit
asynchronous: true
width: Math.min(2 * Theme.itemSizeHuge, Math.min(Screen.width, Screen.height) / 2)
height: width
2020-10-01 01:55:26 +03:00
}
BusyLabel {
text: qsTr("Loading...")
running: initializationPage.loading
Behavior on opacity { FadeAnimation {} }
visible: opacity > 0
}
2020-10-01 01:55:26 +03:00
Column {
id: welcomeColumn
2020-10-01 01:55:26 +03:00
width: parent.width
spacing: Theme.paddingLarge
2020-09-16 23:36:43 +03:00
Behavior on opacity { FadeAnimation {} }
opacity: visible ? 1 : 0
2020-10-01 01:55:26 +03:00
InfoLabel {
text: qsTr("Please enter your phone number to continue.")
2020-10-01 01:55:26 +03:00
}
2020-09-16 23:36:43 +03:00
TextField {
id: phoneNumberTextField
2020-10-19 17:02:34 +03:00
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()
}
}
2020-10-01 01:55:26 +03:00
}
2020-09-16 23:36:43 +03:00
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);
}
2020-10-01 01:55:26 +03:00
}
}
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: ""
2020-10-01 01:55:26 +03:00
}
Button {
text: qsTr("OK")
anchors {
horizontalCenter: parent.horizontalCenter
}
onClicked: {
pinErrorColumn.visible = false;
welcomeColumn.visible = true;
}
2020-10-01 01:55:26 +03:00
}
}
Column {
id: enterPasswordColumn
width: parent.width
spacing: Theme.paddingLarge
2020-10-01 01:55:26 +03:00
Behavior on opacity { FadeAnimation {} }
opacity: visible ? 1.0 : 0.0
visible: false
2020-10-01 01:55:26 +03:00
InfoLabel {
font.pixelSize: Theme.fontSizeLarge
text: qsTr("Please enter your password:")
2020-10-01 01:55:26 +03:00
}
PasswordField {
id: enterPasswordField
anchors {
horizontalCenter: parent.horizontalCenter
}
font.pixelSize: Theme.fontSizeLarge
width: parent.width - 2 * Theme.horizontalPageMargin
horizontalAlignment: TextInput.AlignHCenter
2020-10-01 01:55:26 +03:00
}
Button {
text: qsTr("OK")
anchors {
horizontalCenter: parent.horizontalCenter
}
onClicked: {
initializationPage.loading = true;
enterPasswordColumn.visible = false;
tdLibWrapper.setAuthenticationPassword(enterPasswordField.text);
}
2020-10-01 01:55:26 +03:00
}
}
Column {
id: enterPinColumn
width: parent.width
spacing: Theme.paddingLarge
2020-10-01 01:55:26 +03:00
Behavior on opacity { FadeAnimation {} }
opacity: visible ? 1.0 : 0.0
visible: false
2020-10-01 01:55:26 +03:00
InfoLabel {
font.pixelSize: Theme.fontSizeLarge
text: qsTr("Please enter the code that you received:")
2020-10-01 01:55:26 +03:00
}
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()
2020-10-01 01:55:26 +03:00
}
Button {
id: enterPinButton
text: qsTr("OK")
anchors {
horizontalCenter: parent.horizontalCenter
}
onClicked: enter()
function enter() {
initializationPage.loading = true;
enterPinColumn.visible = false;
tdLibWrapper.setAuthenticationCode(enterPinField.text);
}
2020-10-01 01:55:26 +03:00
}
}
Column {
id: linkingErrorColumn
width: parent.width
spacing: Theme.paddingLarge
2020-10-01 01:55:26 +03:00
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
2020-10-01 01:55:26 +03:00
}
onClicked: {
linkingErrorColumn.visible = false;
enterPinColumn.visible = true;
2020-10-01 01:55:26 +03:00
}
}
2020-10-01 01:55:26 +03:00
Button {
text: qsTr("Restart authentication")
anchors {
horizontalCenter: parent.horizontalCenter
}
onClicked: {
linkingErrorColumn.visible = false;
welcomeColumn.visible = true;
}
2020-10-01 01:55:26 +03:00
}
}
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
}
2020-10-01 01:55:26 +03:00
}
RegExpValidator {
id: filledValidator
regExp: /.+/
2020-10-01 01:55:26 +03:00
}
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;
}
2020-10-01 01:55:26 +03:00
}
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
2020-10-01 01:55:26 +03:00
}
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;
}
2020-10-01 01:55:26 +03:00
}
}
}
Item {
width: 1
height: Theme.paddingLarge
}
}
}
}