GODT-1316: Set default TextArea and TextField behavior

internal/frontend/qml/BugReportView.qml

@@ -37,7 +37,6 @@ SettingsView {
         id: description
         property int _minLength: 150
         property int _maxLength: 800
-        property bool _inputOK: description.text.length>=description._minLength && description.text.length<=description._maxLength
 
         label: qsTr("Description")
         colorScheme: root.colorScheme
@@ -46,71 +45,59 @@ SettingsView {
         hint: description.text.length + "/" + _maxLength
         placeholderText: qsTr("Tell us what went wrong or isn't working (min. %1 characters).").arg(_minLength)
 
-        onEditingFinished: {
+        validator: function(text) {
-            if (!description._inputOK) {
+            if (description.text.length < description._minLength) {
-                description.error = true
+                return qsTr("Enter a problem description (min. %1 characters).").arg(_minLength)
-                if (description.text.length <= description._minLength) {
+            }
-                    description.assistiveText = qsTr("Enter a problem description (min. %1 characters).").arg(_minLength)
+
-                } else {
+            if (description.text.length > description._maxLength) {
-                    description.assistiveText = qsTr("Enter a problem description (max. %1 characters).").arg(_maxLength)
+                return qsTr("Enter a problem description (max. %1 characters).").arg(_maxLength)
-                }
+            }
-            } else {
+
-                description.error = false
+            return
-                description.assistiveText = ""
+        }
+
+        onTextChanged: {
+            // Rise max length error imidiatly while typing
+            if (description.text.length > description._maxLength) {
+                validate()
             }
         }
-        onTextChanged: {
+
-            description.error = false
+        KeyNavigation.priority: KeyNavigation.BeforeItem
-            description.assistiveText = ""
+        KeyNavigation.tab: address
-        }
     }
 
 
     TextField {
         id: address
-        property bool _inputOK: root.isValidEmail(address.text)
 
         label: qsTr("Your contact email")
         colorScheme: root.colorScheme
         Layout.fillWidth: true
         placeholderText: qsTr("e.g. jane.doe@protonmail.com")
 
-        onEditingFinished: {
+        validator: function(str) {
-            if (!address._inputOK) {
+            if (!isValidEmail(str)) {
-                address.error = true
+                return qsTr("Enter valid email address")
-                address.assistiveText = qsTr("Enter valid email address")
-            } else {
-                address.assistiveText = ""
-                address.error = false
             }
-        }
+            return
-        onTextChanged: {
-            address.error = false
-            address.assistiveText = ""
         }
     }
 
     TextField {
         id: emailClient
-        property bool _inputOK: emailClient.text.length > 0
 
         label: qsTr("Your email client (including version)")
         colorScheme: root.colorScheme
         Layout.fillWidth: true
         placeholderText: qsTr("e.g. Apple Mail 14.0")
 
-        onEditingFinished: {
+        validator: function(str) {
-            if (!emailClient._inputOK) {
+            if (str.length === 0) {
-                emailClient.assistiveText = qsTr("Enter an email client name and version")
+                return qsTr("Enter an email client name and version")
-                emailClient.error = true
-            } else {
-                emailClient.assistiveText = ""
-                emailClient.error = false
             }
-        }
+            return
-        onTextChanged: {
-            emailClient.error = false
-            emailClient.assistiveText = ""
         }
     }
 
@@ -148,25 +135,26 @@ SettingsView {
         id: sendButton
         text: qsTr("Send")
         colorScheme: root.colorScheme
-        onClicked: root.submit()
+
-        enabled: description._inputOK && address._inputOK && emailClient._inputOK
+        onClicked: {
+            description.validate()
+            address.validate()
+            emailClient.validate()
+
+            if (description.error || address.error || emailClient.error) {
+                return
+            }
+
+            submit()
+        }
 
         Connections {target: root.backend; onReportBugFinished: sendButton.loading = false }
     }
 
     function setDefaultValue() {
         description.text = ""
-        description.error = false
-        description.assistiveText = ""
-
         address.text = root.selectedAddress
-        address.error = false
-        address.assistiveText = ""
-
         emailClient.text = root.backend.currentEmailClient
-        emailClient.error = false
-        emailClient.assistiveText = ""
-
         includeLogs.checked = true
     }
 
@@ -185,8 +173,6 @@ SettingsView {
         )
     }
 
-    Component.onCompleted: root.setDefaultValue()
-
     onVisibleChanged: {
         root.setDefaultValue()
     }

internal/frontend/qml/PortSettings.qml

@@ -25,10 +25,9 @@ import Proton 4.0
 SettingsView {
     id: root
 
-    property bool _valuesOK: !imapField.error && !smtpField.error
     property bool _valuesChanged: (
-        imapField.text*1 != root.backend.portIMAP ||
+        imapField.text*1 !== root.backend.portIMAP ||
-        smtpField.text*1 != root.backend.portSMTP
+        smtpField.text*1 !== root.backend.portSMTP
     )
 
     Label {
@@ -55,14 +54,14 @@ SettingsView {
             colorScheme: root.colorScheme
             label: qsTr("IMAP port")
             Layout.preferredWidth: 160
-            onEditingFinished: root.validate(imapField)
+            validator: root.validate
         }
         TextField {
             id: smtpField
             colorScheme: root.colorScheme
             label: qsTr("SMTP port")
             Layout.preferredWidth: 160
-            onEditingFinished: root.validate(smtpField)
+            validator: root.validate
         }
     }
 
@@ -79,10 +78,34 @@ SettingsView {
             id: submitButton
             colorScheme: root.colorScheme
             text: qsTr("Save and restart")
-            enabled: root._valuesOK && root._valuesChanged
+            enabled: root._valuesChanged
             onClicked: {
+                // removing error here because we may have set it manually (port occupied)
+                imapField.error = false
+                smtpField.error = false
+
+                // checking errors seperatly because we want to display "same port" error only once
+                imapField.validate()
+                if (imapField.error) {
+                    return
+                }
+                smtpField.validate()
+                if (smtpField.error) {
+                    return
+                }
+
                 submitButton.loading = true
-                root.submit()
+
+                // check both ports before returning an error
+                var err = false
+                err |= !isPortFree(imapField)
+                err |= !isPortFree(smtpField)
+                if (err) {
+                    submitButton.loading = false
+                    return
+                }
+
+                root.backend.changePorts(imapField.text, smtpField.text)
             }
         }
 
@@ -104,48 +127,32 @@ SettingsView {
         root.setDefaultValues()
     }
 
-    function validate(field) {
+    function validate(port) {
-        var num = field.text*1
+        var num = port*1
         if (! (num > 1 && num < 65536) )  {
-            field.error = true
+            return qsTr("Invalid port number")
-            field.assistiveText = qsTr("Invalid port number")
-            return
         }
 
         if (imapField.text == smtpField.text) {
-            field.error = true
+            return qsTr("Port numbers must be different")
-            field.assistiveText = qsTr("Port numbers must be different")
-            return
         }
 
-        field.error = false
+        return
-        field.assistiveText = ""
     }
 
     function isPortFree(field) {
-        field.error = false
-        field.assistiveText = ""
-
         var num = field.text*1
-        if (num == root.backend.portIMAP) return true
+        if (num === root.backend.portIMAP) return true
-        if (num == root.backend.portSMTP) return true
+        if (num === root.backend.portSMTP) return true
         if (!root.backend.isPortFree(num)) {
             field.error = true
-            field.assistiveText = qsTr("Port occupied")
+            field.errorString = qsTr("Port occupied")
-            submitButton.loading = false
             return false
         }
 
         return true
     }
 
-    function submit(){
-        submitButton.loading = true
-        if (!isPortFree(imapField)) return
-        if (!isPortFree(smtpField)) return
-        root.backend.changePorts(imapField.text, smtpField.text)
-    }
-
     function setDefaultValues(){
         imapField.text = backend.portIMAP
         smtpField.text = backend.portSMTP

internal/frontend/qml/Proton/TextArea.qml

@@ -20,10 +20,11 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12
 import QtQuick.Templates 2.12 as T
+import QtQuick.Layouts 1.12
 
 import "." as Proton
 
-Item {
+FocusScope {
     id: root
     property ColorScheme colorScheme
 
@@ -84,191 +85,269 @@ Item {
     property alias textFormat: control.textFormat
     property alias textMargin: control.textMargin
     property alias topPadding: control.topPadding
+    // We are using our own type of validators. It should be a function
+    // returning an error string in case of error and undefined if no error
+    property var validator
     property alias verticalAlignment: control.verticalAlignment
     property alias wrapMode: control.wrapMode
 
-    implicitWidth: background.width
+    implicitWidth: children[0].implicitWidth
-    implicitHeight: control.implicitHeight + Math.max(
+    implicitHeight: children[0].implicitHeight
-        label.implicitHeight + label.anchors.topMargin + label.anchors.bottomMargin,
-        hint.implicitHeight + hint.anchors.topMargin + hint.anchors.bottomMargin
-    ) + assistiveText.implicitHeight
 
     property alias label: label.text
     property alias hint: hint.text
-    property alias assistiveText: assistiveText.text
+    property string assistiveText
+    property string errorString
 
     property bool error: false
 
     signal editingFinished()
 
-    // Backgroud is moved away from within control as it will be clipped with scrollview
+    function append(text) { return control.append(text) }
-    Rectangle {
+    function clear() { return control.clear() }
-        id: background
+    function copy() { return control.copy() }
+    function cut() { return control.cut() }
+    function deselect() { return control.deselect() }
+    function getFormattedText(start, end) { return control.getFormattedText(start, end) }
+    function getText(start, end) { return control.getText(start, end) }
+    function insert(position, text) { return control.insert(position, text) }
+    function isRightToLeft(start, end) { return control.isRightToLeft(start, end) }
+    function linkAt(x, y) { return control.linkAt(x, y) }
+    function moveCursorSelection(position, mode) { return control.moveCursorSelection(position, mode) }
+    function paste() { return control.paste() }
+    function positionAt(x, y) { return control.positionAt(x, y) }
+    function positionToRectangle(position) { return control.positionToRectangle(position) }
+    function redo() { return control.redo() }
+    function remove(start, end) { return control.remove(start, end) }
+    function select(start, end) { return control.select(start, end) }
+    function selectAll() { return control.selectAll() }
+    function selectWord() { return control.selectWord() }
+    function undo() { return control.undo() }
 
-        anchors.fill: controlView
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
 
-        radius: 4
+        RowLayout {
-        visible: true
+            Layout.fillWidth: true
-        color: root.colorScheme.background_norm
+            spacing: 0
-        border.color: {
+
-            if (!control.enabled) {
+            Proton.Label {
-                return root.colorScheme.field_disabled
+                colorScheme: root.colorScheme
+                id: label
+
+                Layout.fillWidth: true
+
+                color: root.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
+
+                type: Proton.Label.LabelType.Body_semibold
             }
 
-            if (control.activeFocus) {
+            Proton.Label {
-                return root.colorScheme.interaction_norm
+                colorScheme: root.colorScheme
+                id: hint
+
+                Layout.fillWidth: true
+
+                color: root.enabled ? root.colorScheme.text_weak : root.colorScheme.text_disabled
+                horizontalAlignment: Text.AlignRight
+                type: Proton.Label.LabelType.Caption
             }
-
-            if (root.error) {
-                return root.colorScheme.signal_danger
-            }
-
-            if (control.hovered) {
-                return root.colorScheme.field_hover
-            }
-
-            return root.colorScheme.field_norm
-        }
-        border.width: 1
-    }
-
-    Proton.Label {
-        colorScheme: root.colorScheme
-        id: label
-
-        anchors.top: root.top
-        anchors.left: root.left
-        anchors.bottomMargin: 4
-
-        color: root.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
-
-        type: Proton.Label.LabelType.Body_semibold
-    }
-
-    Proton.Label {
-        colorScheme: root.colorScheme
-        id: hint
-
-        anchors.right: root.right
-        anchors.bottom: controlView.top
-        anchors.bottomMargin: 5
-
-        color: root.enabled ? root.colorScheme.text_weak : root.colorScheme.text_disabled
-
-        type: Proton.Label.LabelType.Caption
-    }
-
-    ColorImage {
-        id: errorIcon
-        visible: root.error
-        anchors.left: parent.left
-        anchors.top: assistiveText.top
-        anchors.bottom: assistiveText.bottom
-        source: "../icons/ic-exclamation-circle-filled.svg"
-        sourceSize.height: height
-        color: root.colorScheme.signal_danger
-    }
-
-    Proton.Label {
-        colorScheme: root.colorScheme
-        id: assistiveText
-
-        anchors.left: root.error ? errorIcon.right : parent.left
-        anchors.leftMargin: root.error ? 5 : 0
-        anchors.bottom: root.bottom
-        anchors.topMargin: 4
-
-        color: {
-            if (!root.enabled) {
-                return root.colorScheme.text_disabled
-            }
-
-            if (root.error) {
-                return root.colorScheme.signal_danger
-            }
-
-            return root.colorScheme.text_weak
         }
 
-        type: root.error ? Proton.Label.LabelType.Caption_semibold : Proton.Label.LabelType.Caption
+        ScrollView {
-    }
+            id: controlView
 
-    ScrollView {
+            Layout.fillHeight: true
-        id: controlView
+            Layout.fillWidth: true
 
-        anchors.top: label.bottom
+            clip: true
-        anchors.left: root.left
-        anchors.right: root.right
-        anchors.bottom: assistiveText.top
 
-        clip: true
+            T.TextArea {
+                id: control
 
-        T.TextArea {
+                implicitWidth: Math.max(
-            id: control
+                                   contentWidth + leftPadding + rightPadding,
+                                   implicitBackgroundWidth + leftInset + rightInset,
+                                   placeholder.implicitWidth + leftPadding + rightPadding
+                                   )
+                implicitHeight: Math.max(
+                                    contentHeight + topPadding + bottomPadding,
+                                    implicitBackgroundHeight + topInset + bottomInset,
+                                    placeholder.implicitHeight + topPadding + bottomPadding
+                                    )
 
-            implicitWidth: Math.max(
+                topPadding: 8
-                contentWidth + leftPadding + rightPadding,
+                bottomPadding: 8
-                implicitBackgroundWidth + leftInset + rightInset,
+                leftPadding: 12
-                placeholder.implicitWidth + leftPadding + rightPadding
+                rightPadding: 12
-            )
-            implicitHeight: Math.max(
-                contentHeight + topPadding + bottomPadding,
-                implicitBackgroundHeight + topInset + bottomInset,
-                placeholder.implicitHeight + topPadding + bottomPadding
-            )
 
-            padding: 8
+                font.family: Style.font_family
-            leftPadding: 12
+                font.weight: Style.fontWeight_400
+                font.pixelSize: Style.body_font_size
+                font.letterSpacing: Style.body_letter_spacing
 
-            color: control.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
+                color: control.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
-            placeholderTextColor: control.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled
+                placeholderTextColor: control.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled
+                selectionColor: control.palette.highlight
+                selectedTextColor: control.palette.highlightedText
 
-            selectionColor: control.palette.highlight
+                onEditingFinished: root.editingFinished()
-            selectedTextColor: control.palette.highlightedText
 
-            onEditingFinished: root.editingFinished()
+                wrapMode: TextInput.Wrap
 
-            cursorDelegate: Rectangle {
+                // enforcing default focus here within component
-                id: cursor
+                focus: root.focus
-                width: 1
-                color: root.colorScheme.interaction_norm
-                visible: control.activeFocus && !control.readOnly && control.selectionStart === control.selectionEnd
 
-                Connections {
+                KeyNavigation.priority: root.KeyNavigation.priority
-                    target: control
+                KeyNavigation.backtab: root.KeyNavigation.backtab
-                    onCursorPositionChanged: {
+                KeyNavigation.tab: root.KeyNavigation.tab
-                        // keep a moving cursor visible
+                KeyNavigation.up: root.KeyNavigation.up
-                        cursor.opacity = 1
+                KeyNavigation.down: root.KeyNavigation.down
-                        timer.restart()
+                KeyNavigation.left: root.KeyNavigation.left
+                KeyNavigation.right: root.KeyNavigation.right
+
+                selectByMouse: true
+
+                cursorDelegate: Rectangle {
+                    id: cursor
+                    width: 1
+                    color: root.colorScheme.interaction_norm
+                    visible: control.activeFocus && !control.readOnly && control.selectionStart === control.selectionEnd
+
+                    Connections {
+                        target: control
+                        onCursorPositionChanged: {
+                            // keep a moving cursor visible
+                            cursor.opacity = 1
+                            timer.restart()
+                        }
+                    }
+
+                    Timer {
+                        id: timer
+                        running: control.activeFocus && !control.readOnly
+                        repeat: true
+                        interval: Qt.styleHints.cursorFlashTime / 2
+                        onTriggered: cursor.opacity = !cursor.opacity ? 1 : 0
+                        // force the cursor visible when gaining focus
+                        onRunningChanged: cursor.opacity = 1
                     }
                 }
 
-                Timer {
+                PlaceholderText {
-                    id: timer
+                    id: placeholder
-                    running: control.activeFocus && !control.readOnly
+                    x: control.leftPadding
-                    repeat: true
+                    y: control.topPadding
-                    interval: Qt.styleHints.cursorFlashTime / 2
+                    width: control.width - (control.leftPadding + control.rightPadding)
-                    onTriggered: cursor.opacity = !cursor.opacity ? 1 : 0
+                    height: control.height - (control.topPadding + control.bottomPadding)
-                    // force the cursor visible when gaining focus
+
-                    onRunningChanged: cursor.opacity = 1
+                    text: control.placeholderText
+                    font: control.font
+                    color: control.placeholderTextColor
+                    verticalAlignment: control.verticalAlignment
+                    visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+                    elide: Text.ElideRight
+                    renderType: control.renderType
+                }
+
+                background: Rectangle {
+                    anchors.fill: parent
+
+                    radius: 4
+                    visible: true
+                    color: root.colorScheme.background_norm
+                    border.color: {
+                        if (!control.enabled) {
+                            return root.colorScheme.field_disabled
+                        }
+
+                        if (control.activeFocus) {
+                            return root.colorScheme.interaction_norm
+                        }
+
+                        if (root.error) {
+                            return root.colorScheme.signal_danger
+                        }
+
+                        if (control.hovered) {
+                            return root.colorScheme.field_hover
+                        }
+
+                        return root.colorScheme.field_norm
+                    }
+                    border.width: 1
                 }
             }
+        }
 
-            PlaceholderText {
+        RowLayout {
-                id: placeholder
+            Layout.fillWidth: true
-                x: control.leftPadding
+            spacing: 0
-                y: control.topPadding
-                width: control.width - (control.leftPadding + control.rightPadding)
-                height: control.height - (control.topPadding + control.bottomPadding)
 
-                text: control.placeholderText
+            ColorImage {
-                font: control.font
+                id: errorIcon
-                color: control.placeholderTextColor
+
-                verticalAlignment: control.verticalAlignment
+                Layout.rightMargin: 4
-                visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+
-                elide: Text.ElideRight
+                visible: root.error && (assistiveText.text.length > 0)
-                renderType: control.renderType
+                source: "../icons/ic-exclamation-circle-filled.svg"
+                color: root.colorScheme.signal_danger
+                height: assistiveText.height
+                sourceSize.height: assistiveText.height
+            }
+
+            Proton.Label {
+                colorScheme: root.colorScheme
+                id: assistiveText
+
+                Layout.fillWidth: true
+
+                text: root.error ? root.errorString : root.assistiveText
+
+                color: {
+                    if (!root.enabled) {
+                        return root.colorScheme.text_disabled
+                    }
+
+                    if (root.error) {
+                        return root.colorScheme.signal_danger
+                    }
+
+                    return root.colorScheme.text_weak
+                }
+
+                type: root.error ? Proton.Label.LabelType.Caption_semibold : Proton.Label.LabelType.Caption
             }
         }
     }
+
+    property bool validateOnEditingFinished: true
+    onEditingFinished: {
+        if (!validateOnEditingFinished) {
+            return
+        }
+        validate()
+    }
+
+    function validate() {
+        if (validator === undefined) {
+            return
+        }
+
+        var error = validator(text)
+
+        if (error) {
+            root.error = true
+            root.errorString = error
+        } else {
+            root.error = false
+            root.errorString = ""
+        }
+    }
+
+    onTextChanged: {
+        root.error = false
+        root.errorString = ""
+    }
 }

internal/frontend/qml/Proton/TextField.qml

@@ -24,7 +24,7 @@ import QtQuick.Layouts 1.12
 
 import "." as Proton
 
-Item {
+FocusScope {
     id: root
     property ColorScheme colorScheme
 
@@ -82,7 +82,9 @@ Item {
     property alias selectionEnd: control.selectionEnd
     property alias selectionStart: control.selectionStart
     property alias text: control.text
-    property alias validator: control.validator
+    // We are using our own type of validators. It should be a function
+    // returning an error string in case of error and undefined if no error
+    property var validator
     property alias verticalAlignment: control.verticalAlignment
     property alias wrapMode: control.wrapMode
 
@@ -91,7 +93,8 @@ Item {
 
     property alias label: label.text
     property alias hint: hint.text
-    property alias assistiveText: assistiveText.text
+    property string assistiveText
+    property string errorString
 
     property int echoMode: TextInput.Normal
 
@@ -200,18 +203,38 @@ Item {
                                              contentHeight + topPadding + bottomPadding,
                                              placeholder.implicitHeight + topPadding + bottomPadding)
 
-                    padding: 8
+                    topPadding: 8
+                    bottomPadding: 8
                     leftPadding: 12
+                    rightPadding: 12
+
+                    font.family: Style.font_family
+                    font.weight: Style.fontWeight_400
+                    font.pixelSize: Style.body_font_size
+                    font.letterSpacing: Style.body_letter_spacing
 
                     color: control.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
-
+                    placeholderTextColor: control.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled
                     selectionColor: control.palette.highlight
                     selectedTextColor: control.palette.highlightedText
-                    placeholderTextColor: control.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled
+
                     verticalAlignment: TextInput.AlignVCenter
 
                     echoMode: eyeButton.checked ? TextInput.Normal : root.echoMode
 
+                    // enforcing default focus here within component
+                    focus: true
+
+                    KeyNavigation.priority: root.KeyNavigation.priority
+                    KeyNavigation.backtab: root.KeyNavigation.backtab
+                    KeyNavigation.tab: root.KeyNavigation.tab
+                    KeyNavigation.up: root.KeyNavigation.up
+                    KeyNavigation.down: root.KeyNavigation.down
+                    KeyNavigation.left: root.KeyNavigation.left
+                    KeyNavigation.right: root.KeyNavigation.right
+
+                    selectByMouse: true
+
                     cursorDelegate: Rectangle {
                         id: cursor
                         width: 1
@@ -292,6 +315,8 @@ Item {
             ColorImage {
                 id: errorIcon
 
+                Layout.rightMargin: 4
+
                 visible: root.error && (assistiveText.text.length > 0)
                 source: "../icons/ic-exclamation-circle-filled.svg"
                 color: root.colorScheme.signal_danger
@@ -305,7 +330,8 @@ Item {
 
                 Layout.fillHeight: true
                 Layout.fillWidth: true
-                Layout.leftMargin: 4
+
+                text: root.error ? root.errorString : root.assistiveText
 
                 color: {
                     if (!root.enabled) {
@@ -323,4 +349,33 @@ Item {
             }
         }
     }
+
+    property bool validateOnEditingFinished: true
+    onEditingFinished: {
+        if (!validateOnEditingFinished) {
+            return
+        }
+        validate()
+    }
+
+    function validate() {
+        if (validator === undefined) {
+            return
+        }
+
+        var error = validator(text)
+
+        if (error) {
+            root.error = true
+            root.errorString = error
+        } else {
+            root.error = false
+            root.errorString = ""
+        }
+    }
+
+    onTextChanged: {
+        root.error = false
+        root.errorString = ""
+    }
 }

internal/frontend/qml/SignIn.qml

@@ -99,7 +99,7 @@ Item {
 
                 twoFactorPasswordTextField.enabled = true
                 twoFactorPasswordTextField.error = true
-                twoFactorPasswordTextField.assistiveText = qsTr("Your code is incorrect")
+                twoFactorPasswordTextField.errorString = qsTr("Your code is incorrect")
             }
             onLogin2FAErrorAbort: {
                 console.assert(stackLayout.currentIndex == 1, "Unexpected login2FAErrorAbort")
@@ -118,7 +118,7 @@ Item {
 
                 secondPasswordTextField.enabled = true
                 secondPasswordTextField.error = true
-                secondPasswordTextField.assistiveText = qsTr("Your mailbox password is incorrect")
+                secondPasswordTextField.errorString = qsTr("Your mailbox password is incorrect")
             }
             onLogin2PasswordErrorAbort: {
                 console.assert(stackLayout.currentIndex == 2, "Unexpected login2PasswordErrorAbort")
@@ -142,11 +142,11 @@ Item {
 
                 usernameTextField.enabled = true
                 usernameTextField.error = false
-                usernameTextField.assistiveText = ""
+                usernameTextField.errorString = ""
 
                 passwordTextField.enabled = true
                 passwordTextField.error = false
-                passwordTextField.assistiveText = ""
+                passwordTextField.errorString = ""
                 passwordTextField.text = ""
             }
 
@@ -202,18 +202,22 @@ Item {
                 Layout.fillWidth: true
                 Layout.topMargin: 24
 
-                onTextEdited: { // TODO: repeating?
+                onTextChanged: {
+                    // remove "invalid username / password error"
                     if (error || errorLabel.text.length > 0) {
                         errorLabel.text = ""
-
                         usernameTextField.error = false
-                        usernameTextField.assistiveText = ""
-
                         passwordTextField.error = false
-                        passwordTextField.assistiveText = ""
                     }
                 }
 
+                validator: function(str) {
+                    if (str.length === 0) {
+                        return qsTr("Enter username or email")
+                    }
+                    return
+                }
+
                 onAccepted: passwordTextField.forceActiveFocus()
             }
 
@@ -226,18 +230,22 @@ Item {
                 Layout.topMargin: 8
                 echoMode: TextInput.Password
 
-                onTextEdited: {
+                onTextChanged: {
+                    // remove "invalid username / password error"
                     if (error || errorLabel.text.length > 0) {
                         errorLabel.text = ""
-
                         usernameTextField.error = false
-                        usernameTextField.assistiveText = ""
-
                         passwordTextField.error = false
-                        passwordTextField.assistiveText = ""
                     }
                 }
 
+                validator: function(str) {
+                    if (str.length === 0) {
+                        return qsTr("Enter password")
+                    }
+                    return
+                }
+
                 onAccepted: signInButton.checkAndSignIn()
             }
 
@@ -253,27 +261,10 @@ Item {
                 onClicked: checkAndSignIn()
 
                 function checkAndSignIn() {
-                    var err = false
+                    usernameTextField.validate()
+                    passwordTextField.validate()
 
-                    if (usernameTextField.text.length == 0) {
+                    if (usernameTextField.error || passwordTextField.error) {
-                        usernameTextField.error = true
-                        usernameTextField.assistiveText = qsTr("Enter username or email")
-                        err = true
-                    } else {
-                        usernameTextField.error = false
-                        usernameTextField.assistiveText = qsTr("")
-                    }
-
-                    if (passwordTextField.text.length == 0) {
-                        passwordTextField.error = true
-                        passwordTextField.assistiveText = qsTr("Enter password")
-                        err = true
-                    } else {
-                        passwordTextField.error = false
-                        passwordTextField.assistiveText = qsTr("")
-                    }
-
-                    if (err) {
                         return
                     }
 
@@ -310,8 +301,8 @@ Item {
 
                 twoFactorPasswordTextField.enabled = true
                 twoFactorPasswordTextField.error = false
-                twoFactorPasswordTextField.assistiveText = ""
+                twoFactorPasswordTextField.errorString = ""
-                twoFactorPasswordTextField.text=""
+                twoFactorPasswordTextField.text = ""
             }
 
             spacing: 0
@@ -343,11 +334,11 @@ Item {
                 Layout.fillWidth: true
                 Layout.topMargin: 32
 
-                onTextEdited: {
+                validator: function(str) {
-                    if (error) {
+                    if (str.length === 0) {
-                        twoFactorPasswordTextField.error = false
+                        return qsTr("Enter username or email")
-                        twoFactorPasswordTextField.assistiveText = ""
                     }
+                    return
                 }
             }
 
@@ -360,18 +351,9 @@ Item {
                 Layout.topMargin: 24
 
                 onClicked: {
-                    var err = false
+                    twoFactorPasswordTextField.validate()
 
-                    if (twoFactorPasswordTextField.text.length == 0) {
+                    if (twoFactorPasswordTextField.error) {
-                        twoFactorPasswordTextField.error = true
-                        twoFactorPasswordTextField.assistiveText = qsTr("Enter username or email")
-                        err = true
-                    } else {
-                        twoFactorPasswordTextField.error = false
-                        twoFactorPasswordTextField.assistiveText = qsTr("")
-                    }
-
-                    if (err) {
                         return
                     }
 
@@ -393,7 +375,7 @@ Item {
 
                 secondPasswordTextField.enabled = true
                 secondPasswordTextField.error = false
-                secondPasswordTextField.assistiveText = ""
+                secondPasswordTextField.errorString = ""
                 secondPasswordTextField.text = ""
             }
 
@@ -416,11 +398,11 @@ Item {
                 Layout.topMargin: 8 + implicitHeight + 24 + subTitle.implicitHeight
                 echoMode: TextInput.Password
 
-                onTextEdited: {
+                validator: function(str) {
-                    if (error) {
+                    if (str.length === 0) {
-                        secondPasswordTextField.error = false
+                        return qsTr("Enter username or email")
-                        secondPasswordTextField.assistiveText = ""
                     }
+                    return
                 }
             }
 
@@ -433,18 +415,9 @@ Item {
                 Layout.topMargin: 24
 
                 onClicked: {
-                    var err = false
+                    secondPasswordTextField.validate()
 
-                    if (secondPasswordTextField.text.length == 0) {
+                    if (secondPasswordTextField.error) {
-                        secondPasswordTextField.error = true
-                        secondPasswordTextField.assistiveText = qsTr("Enter username or email")
-                        err = true
-                    } else {
-                        secondPasswordTextField.error = false
-                        secondPasswordTextField.assistiveText = qsTr("")
-                    }
-
-                    if (err) {
                         return
                     }
 

internal/frontend/qml/tests/TextAreas.qml

@@ -22,66 +22,92 @@ import QtQuick.Controls 2.12
 
 import "../Proton"
 
-RowLayout {
+ColumnLayout {
     id: root
     property ColorScheme colorScheme
 
-    ColumnLayout {
+    spacing: 10
+
+    TextArea {
+        colorScheme: root.colorScheme
         Layout.fillWidth: true
+        Layout.preferredHeight: 100
 
-        spacing: parent.spacing
+        placeholderText: "Placeholder"
+        label: "Label"
+        hint: "Hint"
+        assistiveText: "Assistive text"
 
-        TextArea {
+        wrapMode: TextInput.Wrap
-            colorScheme: root.colorScheme
+    }
-            Layout.fillWidth: true
-            Layout.preferredHeight: 100
 
-            placeholderText: "Placeholder"
+    TextArea {
-            label: "Label"
+        colorScheme: root.colorScheme
-            hint: "Hint"
+        Layout.fillWidth: true
-            assistiveText: "Assistive text"
+        Layout.preferredHeight: 100
-        }
 
-        TextArea {
+        text: "Value"
-            colorScheme: root.colorScheme
+        placeholderText: "Placeholder"
-            Layout.fillWidth: true
+        label: "Label"
-            Layout.preferredHeight: 100
+        hint: "Hint"
+        assistiveText: "Assistive text"
 
-            text: "Value"
+        wrapMode: TextInput.Wrap
-            placeholderText: "Placeholder"
+    }
-            label: "Label"
-            hint: "Hint"
-            assistiveText: "Assistive text"
-        }
 
 
-        TextArea {
+    TextArea {
-            colorScheme: root.colorScheme
+        colorScheme: root.colorScheme
-            Layout.fillWidth: true
+        Layout.fillWidth: true
-            Layout.preferredHeight: 100
+        Layout.preferredHeight: 100
 
-            error: true
+        error: true
 
-            text: "Value"
+        text: "Value"
-            placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
-            label: "Label"
+        label: "Label"
-            hint: "Hint"
+        hint: "Hint"
-            assistiveText: "Error message"
+        errorString: "Error message"
-        }
+
+        wrapMode: TextInput.Wrap
+    }
 
 
-        TextArea {
+    TextArea {
-            colorScheme: root.colorScheme
+        colorScheme: root.colorScheme
-            Layout.fillWidth: true
+        Layout.fillWidth: true
-            Layout.preferredHeight: 100
+        Layout.preferredHeight: 100
 
-            enabled: false
+        enabled: false
 
-            text: "Value"
+        text: "Value"
-            placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
-            label: "Label"
+        label: "Label"
-            hint: "Hint"
+        hint: "Hint"
-            assistiveText: "Assistive text"
+        assistiveText: "Assistive text"
+
+        wrapMode: TextInput.Wrap
+    }
+
+    TextArea {
+        colorScheme: root.colorScheme
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+
+        placeholderText: "Type 42 here"
+        label: "42 Validator"
+        hint: "Accepts only \"42\""
+        assistiveText: "Type sometihng here, preferably 42"
+
+        wrapMode: TextInput.Wrap
+
+        validator: function(str) {
+            if (str === "42") {
+                return
+            }
+
+            return "Not 42"
         }
     }
 }
+

internal/frontend/qml/tests/TextFields.qml

@@ -63,7 +63,7 @@ RowLayout {
             placeholderText: "Placeholder"
             label: "Label"
             hint: "Hint"
-            assistiveText: "Error message"
+            errorString: "Error message"
         }
 
 
@@ -119,7 +119,7 @@ RowLayout {
             placeholderText: "Password"
             label: "Label"
             hint: "Hint"
-            assistiveText: "Error message"
+            errorString: "Error message"
         }
 
         TextField {
@@ -146,10 +146,18 @@ RowLayout {
             colorScheme: root.colorScheme
             Layout.fillWidth: true
 
-            placeholderText: "Placeholder"
+            placeholderText: "Type 42 here"
-            label: "Label"
+            label: "42 Validator"
-            hint: "Hint"
+            hint: "Accepts only \"42\""
-            assistiveText: "Assistive text"
+            assistiveText: "Type sometihng here, preferably 42"
+
+            validator: function(str) {
+                if (str === "42") {
+                    return
+                }
+
+                return "Not 42"
+            }
         }
 
         TextField {