GODT-1455 Adding links to setup guide.

internal/frontend/qml/BridgeTest/UserControl.qml

@@ -300,10 +300,11 @@ ColumnLayout {
         Button { colorScheme: root.colorScheme; text: "Toggle Finished"; onClicked: {user.toggleSplitModeFinished()}}
     }
 
-    TextArea {
+    TextArea { // TODO: this is causing binding loop on imlicitWidth
         colorScheme: root.colorScheme
         text: user && user.addresses ? user.addresses.join("\n") : "user@protonmail.com"
         Layout.fillWidth: true
+
         onEditingFinished: {
             user.addresses = text.split("\n")
         }

internal/frontend/qml/Bridge_test.qml

@@ -38,7 +38,7 @@ Window {
     x: 10
     y: 10
     width: 800
-    height: 600
+    height: 800
 
     property ColorScheme colorScheme: ProtonStyle.darkStyle
 
@@ -126,7 +126,7 @@ Window {
 
             property string password: "SMj975NnEYYsqu55GGmlpv"
             property var addresses: [
-                "janedoe@protonmail.com",
+                "jaanedoe@protonmail.com",
                 "jane@pm.me",
                 "jdoe@pm.me"
             ]
@@ -363,6 +363,15 @@ Window {
                         enabled: bridge === undefined || bridge === null
                         onClicked: {
                             bridge = bridgeComponent.createObject()
+                            var showSetupGuide = false
+                            if (showSetupGuide) {
+                                var newUserObject = root.userComponent.createObject(root)
+                                newUserObject.username = "LerooooyJenkins@protonmail.com"
+                                newUserObject.loggedIn = true
+                                newUserObject.setupGuideSeen = false
+                                root.users.append( { object: newUserObject } )
+                            }
+
                         }
                     }
 
@@ -656,7 +665,7 @@ Window {
 
     property Bridge bridge
 
-    property string goos: "linux"
+    property string goos: "darwin"
 
     property bool showOnStartup: true // this actually needs to be false, but since we use Bridge_test for testing purpose - lets default this to true just for convenience
     property bool dockIconVisible: false

internal/frontend/qml/MainWindow.qml

@@ -155,6 +155,13 @@ ApplicationWindow {
             onDismissed: {
                 root.showSetup(null,"")
             }
+
+            onFinished: {
+                // TODO: Do not close window. Trigger backend to check that
+                // there is a successfully connected client. Then backend
+                // should send another signal to close the setup guide.
+                root.showSetup(null,"")
+            }
         }
     }
 
@@ -176,6 +183,7 @@ ApplicationWindow {
     function showSetup(user, address) {
         setupGuide.user = user
         setupGuide.address = address
+        setupGuide.reset()
         if (setupGuide.user) {
             contentLayout._showSetup = true
         } else {

internal/frontend/qml/SetupGuide.qml

@@ -23,7 +23,7 @@ import QtQuick.Controls.impl 2.12
 
 import Proton 4.0
 
-Rectangle {
+Item {
     id:root
 
     property ColorScheme colorScheme
@@ -32,27 +32,85 @@ Rectangle {
     property string address
 
     signal dismissed()
+    signal finished()
 
     implicitHeight: children[0].implicitHeight
     implicitWidth: children[0].implicitWidth
 
+
+    ListModel {
+        id: clients
+        property string name : "Apple Mail"
+        property string iconSource : "./icons/ic-apple-mail.svg"
+        property bool haveAutoSetup: true
+        property string link: "https://protonmail.com/bridge/applemail"
+
+        Component.onCompleted : {
+            if (root.backend.goos == "darwin") {
+                append({
+                    "name"          : "Apple Mail",
+                    "iconSource"    : "./icons/ic-apple-mail.svg",
+                    "haveAutoSetup" : true,
+                    "link"          : "https://protonmail.com/bridge/applemail"
+                })
+                append({
+                    "name"          : "Microsoft Outlook",
+                    "iconSource"    : "./icons/ic-microsoft-outlook.svg",
+                    "haveAutoSetup" : false,
+                    "link"          : "https://protonmail.com/bridge/outlook2019-mac"
+                })
+            }
+            if (root.backend.goos == "windows") {
+                append({
+                    "name"          : "Microsoft Outlook",
+                    "iconSource"    : "./icons/ic-microsoft-outlook.svg",
+                    "haveAutoSetup" : false,
+                    "link"          : "https://protonmail.com/bridge/outlook2019"
+                })
+            }
+
+            append({
+                "name"          : "Mozilla Thunderbird",
+                "iconSource"    : "./icons/ic-mozilla-thunderbird.svg",
+                "haveAutoSetup" : false,
+                "link"          : "https://protonmail.com/bridge/thunderbird"
+            })
+
+            append({
+                "name"          : "Other",
+                "iconSource"    : "./icons/ic-other-mail-clients.svg",
+                "haveAutoSetup" : false,
+                "link"          : "https://protonmail.com/bridge/clients"
+            })
+
+        }
+    }
+
+    Rectangle {
+        anchors.fill: root
         color: root.colorScheme.background_norm
+    }
 
-    RowLayout {
+    StackLayout {
+        id: guidePages
         anchors.fill: parent
-        spacing: 0
+        anchors.leftMargin: 80
+        anchors.rightMargin: 80
+        anchors.topMargin: 30
+        anchors.bottomMargin: 70
 
-        ColumnLayout {
+
+        ColumnLayout { // 0: Client selection
+            id: clientView
             Layout.fillHeight: true
-            Layout.leftMargin: 80
+
-            Layout.rightMargin: 80
+            property int columnWidth: 268
-            Layout.topMargin: 30
+
-            Layout.bottomMargin: 70
+            spacing: 8
-            spacing: 0
 
             Label {
                 colorScheme: root.colorScheme
-                text: qsTr("Set up email client")
+                text: qsTr("Setting up email client")
                 type: Label.LabelType.Heading
             }
 
@@ -63,31 +121,40 @@ Rectangle {
                 type: Label.LabelType.Lead
             }
 
+            RowLayout {
+                Layout.topMargin: 32-clientView.spacing
+                spacing: 24
+
+                ColumnLayout {
+                    id: clientColumn
+                    Layout.alignment: Qt.AlignTop
+
                     Label {
+                        id: labelA
                         colorScheme: root.colorScheme
-                Layout.topMargin: 32
                         text: qsTr("Choose an email client")
                         type: Label.LabelType.Body_semibold
                     }
 
-            ListModel {
+                    ListView {
-                id: clients
+                        id: clientList
-                ListElement{name : "Apple Mail"          ; iconSource : "./icons/ic-apple-mail.svg"          }
+                        Layout.fillHeight: true
-                ListElement{name : "Microsoft Outlook"   ; iconSource : "./icons/ic-microsoft-outlook.svg"   }
+                        width: clientView.columnWidth
-                ListElement{name : "Mozilla Thunderbird" ; iconSource : "./icons/ic-mozilla-thunderbird.svg" }
-                ListElement{name : "Other"               ; iconSource : "./icons/ic-other-mail-clients.svg"  }
-            }
 
-
-            Repeater {
                         model: clients
 
-                Rectangle {
+                        highlight: Rectangle {
+                            color: root.colorScheme.interaction_default_active
+                            radius: 4
+                        }
+
+                        delegate: Item {
                             implicitWidth: clientRow.width
                             implicitHeight: clientRow.height
 
                             ColumnLayout {
                                 id: clientRow
+                                width: clientList.width
 
                                 RowLayout {
                                     Layout.topMargin: 12
@@ -116,18 +183,78 @@ Rectangle {
                                 }
                             }
 
+                            MouseArea {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    clientList.currentIndex = index
+                                    if (!model.haveAutoSetup) {
+                                        root.setupAction(1,index)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                ColumnLayout {
+                    id: actionColumn
+                    visible: clientList.currentIndex >= 0 && clients.get(clientList.currentIndex).haveAutoSetup
+                    Layout.alignment: Qt.AlignTop
+
+                    Label {
+                        colorScheme: root.colorScheme
+                        text: qsTr("Choose configuration mode")
+                        type: Label.LabelType.Body_semibold
+                    }
+
+                    ListView {
+                        id: actionList
+                        Layout.fillHeight: true
+                        width: clientView.columnWidth
+
+                        model: [
+                            qsTr("Configure automatically"),
+                            qsTr("Configure manually"),
+                        ]
+
+                        highlight: Rectangle {
+                            color: root.colorScheme.interaction_default_active
+                            radius: 4
+                        }
+
+                        delegate: Item {
+                            implicitWidth: children[0].width
+                            implicitHeight: children[0].height
+
+                            ColumnLayout {
+                                width: actionList.width
+
+                                Label {
+                                    Layout.topMargin: 20
+                                    Layout.bottomMargin: 20
+                                    Layout.leftMargin: 16
+                                    Layout.rightMargin: 16
+                                    colorScheme: root.colorScheme
+                                    text: modelData
+                                    type: Label.LabelType.Body
+                                }
+
+                                Rectangle {
+                                    Layout.fillWidth: true
+                                    Layout.preferredHeight: 1
+                                    color: root.colorScheme.border_weak
+                                }
+                            }
 
                             MouseArea {
                                 anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
                                 onClicked: {
-                            if (model.name != "Apple Mail") {
+                                    actionList.currentIndex = index
-                                console.log(" TODO configure ", model.name)
+                                    root.setupAction(index,clientList.currentIndex)
-                                return
                                 }
-                            if (user) {
-                                root.user.configureAppleMail(root.address)
                             }
-                            root.dismissed()
                         }
                     }
                 }
@@ -141,6 +268,7 @@ Rectangle {
                 flat: true
 
                 onClicked: {
+                    root.setupAction(-1,-1)
                     if (user) {
                         user.setupGuideSeen = true
                     }
@@ -149,4 +277,41 @@ Rectangle {
             }
         }
     }
+
+    function setupAction(actionID,clientID){
+        if (user) {
+            user.setupGuideSeen = true
+        }
+
+        switch (actionID) {
+            case -1: root.dismissed(); break; // dismiss
+            case 0: // automatic
+            if (user) {
+                switch (clientID) {
+                    case 0:
+                    root.user.configureAppleMail(root.address)
+                    break;
+                }
+            }
+            root.finished()
+            break;
+            case 1: // manual
+            var clientObj = clients.get(clientID)
+            if (clientObj != undefined && clientObj.link != "" ) {
+                Qt.openUrlExternally(clientObj.link)
+            } else {
+                console.log("unexpected client index", actionID, clientID)
+            }
+            root.finished();
+            break;
+            default:
+            console.log("unexpected client setup action", actionID, clientID)
+        }
+    }
+
+    function reset(){
+        guidePages.currentIndex = 0
+        clientList.currentIndex = -1
+        actionList.currentIndex = -1
+    }
 }