GODT-1179 GODT-658: Components and login flows

internal/frontend/qml/tests/Buttons.qml

@@ -0,0 +1,71 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    // Primary buttons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        iconLoading: "../icons/Loader_16.svg"
+    }
+
+    // Secondary buttons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        secondary: true
+        iconLoading: "../icons/Loader_16.svg"
+    }
+
+    // Secondary icons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        secondary: true
+        textNormal: ""
+        iconNormal: "../icons/ic-cross-close.svg"
+        textDisabled: ""
+        iconDisabled: "../icons/ic-cross-close.svg"
+        textLoading: ""
+        iconLoading: "../icons/Loader_16.svg"
+    }
+
+    // Icons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        textNormal: ""
+        iconNormal: "../icons/ic-cross-close.svg"
+        textDisabled: ""
+        iconDisabled: "../icons/ic-cross-close.svg"
+        textLoading: ""
+        iconLoading: "../icons/Loader_16.svg"
+    }
+}

internal/frontend/qml/tests/ButtonsColumn.qml

@@ -0,0 +1,72 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick.Layouts 1.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import Proton 4.0
+
+ColumnLayout {
+    id: root
+    property var colorScheme: parent.colorScheme
+
+    property string textNormal: "Button"
+    property string iconNormal: ""
+    property string textDisabled: "Disabled"
+    property string iconDisabled: ""
+    property string textLoading: "Loading"
+    property string iconLoading: ""
+    property bool secondary: false
+
+    Button {
+        Layout.fillWidth: true
+
+        Layout.minimumHeight: implicitHeight
+        Layout.minimumWidth: implicitWidth
+
+        text: root.textNormal
+        icon.source: iconNormal
+        secondary: root.secondary
+    }
+
+
+    Button {
+        Layout.fillWidth: true
+
+        Layout.minimumHeight: implicitHeight
+        Layout.minimumWidth: implicitWidth
+
+        text: root.textDisabled
+        icon.source: iconDisabled
+        secondary: root.secondary
+
+        enabled: false
+    }
+
+    Button {
+        Layout.fillWidth: true
+
+        Layout.minimumHeight: implicitHeight
+        Layout.minimumWidth: implicitWidth
+
+        text: root.textLoading
+        icon.source: iconLoading
+        secondary: root.secondary
+
+        loading: true
+    }
+}

internal/frontend/qml/tests/CheckBoxes.qml

@@ -0,0 +1,101 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        CheckBox {
+            text: "Checkbox"
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            error: true
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            enabled: false
+        }
+        CheckBox {
+            text: ""
+        }
+
+        CheckBox {
+            text: ""
+            error: true
+        }
+
+        CheckBox {
+            text: ""
+            enabled: false
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        CheckBox {
+            text: "Checkbox"
+            checked: true
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            checked: true
+            error: true
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            checked: true
+            enabled: false
+        }
+        CheckBox {
+            text: ""
+            checked: true
+        }
+
+        CheckBox {
+            text: ""
+            checked: true
+            error: true
+        }
+
+        CheckBox {
+            text: ""
+            checked: true
+            enabled: false
+        }
+    }
+}

internal/frontend/qml/tests/RadioButtons.qml

@@ -0,0 +1,101 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        RadioButton {
+            text: "Radio"
+        }
+
+        RadioButton {
+            text: "Radio"
+            error: true
+        }
+
+        RadioButton {
+            text: "Radio"
+            enabled: false
+        }
+        RadioButton {
+            text: ""
+        }
+
+        RadioButton {
+            text: ""
+            error: true
+        }
+
+        RadioButton {
+            text: ""
+            enabled: false
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        RadioButton {
+            text: "Radio"
+            checked: true
+        }
+
+        RadioButton {
+            text: "Radio"
+            checked: true
+            error: true
+        }
+
+        RadioButton {
+            text: "Radio"
+            checked: true
+            enabled: false
+        }
+        RadioButton {
+            text: ""
+            checked: true
+        }
+
+        RadioButton {
+            text: ""
+            checked: true
+            error: true
+        }
+
+        RadioButton {
+            text: ""
+            checked: true
+            enabled: false
+        }
+    }
+}

internal/frontend/qml/tests/Switches.qml

@@ -0,0 +1,103 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        Switch {
+            text: "Toggle"
+        }
+
+        Switch {
+            text: "Toggle"
+            enabled: false
+        }
+
+        Switch {
+            text: "Toggle"
+            loading: true
+        }
+
+        Switch {
+            text: ""
+        }
+
+        Switch {
+            text: ""
+            enabled: false
+        }
+
+        Switch {
+            text: ""
+            loading: true
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        Switch {
+            text: "Toggle"
+            checked: true
+        }
+
+        Switch {
+            text: "Toggle"
+            checked: true
+            enabled: false
+        }
+
+        Switch {
+            text: "Toggle"
+            checked: true
+            loading: true
+        }
+
+        Switch {
+            text: ""
+            checked: true
+        }
+
+        Switch {
+            text: ""
+            checked: true
+            enabled: false
+        }
+
+        Switch {
+            text: ""
+            checked: true
+            loading: true
+        }
+    }
+}

internal/frontend/qml/tests/TestComponents.qml

@@ -0,0 +1,65 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+Rectangle {
+    property var colorScheme
+    color: colorScheme.background_norm
+    clip: true
+
+    ColumnLayout {
+        anchors.fill: parent
+        property var colorScheme: parent.colorScheme
+
+        spacing: 5
+
+        Buttons {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        TextFields {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        TextAreas {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        CheckBoxes {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        RadioButtons {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        Switches {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+    }
+}

internal/frontend/qml/tests/TextAreas.qml

@@ -0,0 +1,83 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            error: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Error message"
+        }
+
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            enabled: false
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+    }
+}

internal/frontend/qml/tests/TextFields.qml

@@ -0,0 +1,181 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge 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.
+//
+// ProtonMail Bridge 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    // Norm
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+
+        TextField {
+            Layout.fillWidth: true
+            error: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Error message"
+        }
+
+
+        TextField {
+            Layout.fillWidth: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+
+            enabled: false
+        }
+    }
+
+    // Masked
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextField {
+            Layout.fillWidth: true
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+            text: "Password"
+
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+            text: "Password"
+            error: true
+
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Error message"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+            text: "Password"
+            enabled: false
+
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+    }
+
+    // Varia
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: "red"
+                border.width: 1
+                z: parent.z - 1
+            }
+        }
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+            assistiveText: "Assistive text"
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: "red"
+                border.width: 1
+                z: parent.z - 1
+            }
+        }
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: "red"
+                border.width: 1
+                z: parent.z - 1
+            }
+        }
+    }
+}