summaryrefslogtreecommitdiffstats
path: root/resources/qml/pages/RegisterPage.qml
blob: eaec29414b84d56acf327bf15e89ed414744951a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
// SPDX-FileCopyrightText: 2022 Nheko Contributors
//
// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.2
import QtQuick.Window 2.15
import im.nheko 1.0
import "../components/"
import "../ui/"
import "../"

Item {
    id: registrationPage
    property int maxExpansion: 400

    property string error: regis.error

    Registration {
        id: regis
    }

    ScrollView {
        id: scroll

        clip: false
        palette: timelineRoot.palette
        ScrollBar.horizontal.visible: false
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        height: Math.min(registrationPage.height, col.implicitHeight)
        anchors.margins: Nheko.paddingLarge

        contentWidth: availableWidth

        ColumnLayout {
            id: col

            spacing: Nheko.paddingMedium

            anchors.horizontalCenter: parent.horizontalCenter
            width: Math.min(registrationPage.maxExpansion, scroll.width- Nheko.paddingLarge*2)

            Image {
                Layout.alignment: Qt.AlignHCenter
                source: "qrc:/logos/login.png"
                height: 128
                width: 128
            }

            RowLayout {
                spacing: Nheko.paddingLarge

                Layout.fillWidth: true
                MatrixTextField {
                    id: hsLabel
                    label: qsTr("Homeserver")
                    placeholderText: qsTr("your.server")
                    onEditingFinished: regis.setServer(text)

                    ToolTip.text: qsTr("A server that allows registration. Since matrix is decentralized, you need to first find a server you can register on or host your own.")
                }


                Spinner {
                    height: hsLabel.height/2
                    Layout.alignment: Qt.AlignBottom

                    visible: running
                    running: regis.lookingUpHs
                    foreground: timelineRoot.palette.mid
                }
            }

            MatrixText {
                textFormat: Text.PlainText
                color: Nheko.theme.error
                text: regis.hsError
                visible: text
            }

            RowLayout {
                spacing: Nheko.paddingLarge

                visible: regis.supported

                Layout.fillWidth: true
                MatrixTextField {
                    id: usernameLabel
                    Layout.fillWidth: true
                    label: qsTr("Username")
                    ToolTip.text: qsTr("The username must not be empty, and must contain only the characters a-z, 0-9, ., _, =, -, and /.")
                    onEditingFinished: regis.checkUsername(text)
                }
                Spinner {
                    height: usernameLabel.height/2
                    Layout.alignment: Qt.AlignBottom

                    visible: running
                    running: regis.lookingUpUsername
                    foreground: timelineRoot.palette.mid
                }

                Image {
                    width: usernameLabel.height/2
                    height: width
                    Layout.preferredHeight: usernameLabel.height/2
                    Layout.preferredWidth: usernameLabel.height/2
                    Layout.alignment: Qt.AlignBottom
                    source: regis.usernameAvailable ? ("image://colorimage/:/icons/icons/ui/checkmark.svg?green") : ("image://colorimage/:/icons/icons/ui/dismiss.svg?"+Nheko.theme.error)
                    visible: regis.usernameAvailable || regis.usernameUnavailable
                    ToolTip.visible: ma.hovered
                    ToolTip.text: qsTr("Back")
                    sourceSize.height: height * Screen.devicePixelRatio
                    sourceSize.width: width * Screen.devicePixelRatio
                    HoverHandler {
                        id: ma
                    }
                }
            }

            MatrixText {
                textFormat: Text.PlainText
                color: Nheko.theme.error
                text: regis.usernameError
                visible: text
            }


            MatrixTextField {
                visible: regis.supported
                id: passwordLabel
                Layout.fillWidth: true
                label: qsTr("Password")
                echoMode: TextInput.Password
                ToolTip.text: qsTr("Please choose a secure password. The exact requirements for password strength may depend on your server.")
            }

            MatrixTextField {
                visible: regis.supported
                id: passwordConfirmationLabel
                Layout.fillWidth: true
                label: qsTr("Password confirmation")
                echoMode: TextInput.Password
            }

            MatrixText {
                visible: regis.supported
                textFormat: Text.PlainText
                color: Nheko.theme.error
                text: passwordLabel.text != passwordConfirmationLabel.text ? qsTr("Your passwords do not match!") : ""
            }

            MatrixTextField {
                visible: regis.supported
                id: deviceNameLabel
                Layout.fillWidth: true
                label: qsTr("Device name")
                placeholderText: regis.initialDeviceName()
                ToolTip.text: qsTr("A name for this device, which will be shown to others, when verifying your devices. If none is provided a default is used.")
            }

            Item {
                height: Nheko.avatarSize
                Layout.fillWidth: true

                Spinner {
                    height: parent.height
                    anchors.centerIn: parent

                    visible: running
                    running: regis.registering
                    foreground: timelineRoot.palette.mid
                }
            }

            MatrixText {
                textFormat: Text.PlainText
                color: Nheko.theme.error
                text: registrationPage.error
                visible: text
            }

            FlatButton {
                id: regisBtn
                visible: regis.supported
                enabled: usernameLabel.text && passwordLabel.text && passwordLabel.text == passwordConfirmationLabel.text
                Layout.alignment: Qt.AlignHCenter
                text: qsTr("REGISTER")
                function register() {
                    regis.startRegistration(usernameLabel.text, passwordLabel.text, deviceNameLabel.text)
                }
                onClicked: regisBtn.register()
                Keys.onEnterPressed: regisBtn.register()
                Keys.onReturnPressed: regisBtn.register()
                Keys.enabled: regisBtn.enabled && regis.supported
            }
        }
    }

    ImageButton {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: Nheko.paddingMedium
        width: Nheko.avatarSize
        height: Nheko.avatarSize
        image: ":/icons/icons/ui/angle-arrow-left.svg"
        ToolTip.visible: hovered
        ToolTip.text: qsTr("Back")
        onClicked: mainWindow.pop()
    }
}