[feat] add ui message to help new mail users

Add a UI message for the user to know where to go next.
This message goes away after 60 seconds or right after a MUA logs in.

- Resolves: #7552

3 files changed, 83 insertions, 40 deletions

diff --git a/changes/feature-7552_mail-help-message-on-ui b/changes/feature-7552_mail-help-message-on-ui
new file mode 100644
index 00000000..44ab8fa7
--- /dev/null
+++ b/changes/feature-7552_mail-help-message-on-ui
@@ -0,0 +1 @@
+- Add UI message to help new mail users to get started. Closes feature #7552.
diff --git a/src/leap/bitmask/gui/mail_status.py b/src/leap/bitmask/gui/mail_status.py
index eebae49b..8b4329d7 100644
--- a/src/leap/bitmask/gui/mail_status.py
+++ b/src/leap/bitmask/gui/mail_status.py
@@ -58,6 +58,8 @@ class MailStatusWidget(QtGui.QWidget):
         self.ui = Ui_MailStatusWidget()
         self.ui.setupUi(self)
 
+        self.ui.lblMailReadyHelp.setVisible(False)
+
         # set systray tooltip status
         self._mx_status = ""
         self._service_name = get_service_display_name(MX_SERVICE)
@@ -103,6 +105,8 @@ class MailStatusWidget(QtGui.QWidget):
                  callback=self._mail_handle_imap_events)
         register(event=catalog.SMTP_SERVICE_STARTED,
                  callback=self._mail_handle_imap_events)
+        register(event=catalog.IMAP_CLIENT_LOGIN,
+                 callback=self._mail_handle_imap_events)
 
         self._soledad_event.connect(
             self._mail_handle_soledad_events_slot)
@@ -415,6 +419,10 @@ class MailStatusWidget(QtGui.QWidget):
                 self._show_unread_mails()
         elif event == catalog.IMAP_SERVICE_STARTED:
             self._imap_started = True
+        elif event == catalog.IMAP_CLIENT_LOGIN:
+            # If a MUA has logged in then we don't need to show this.
+            self._hide_mail_ready_help()
+
         if ext_status is not None:
             self._set_mail_status(ext_status, ready=1)
 
@@ -483,6 +491,15 @@ class MailStatusWidget(QtGui.QWidget):
         """
         self._set_mail_status(self.tr("ON"), 2)
 
+        # this help message will hide when the MUA connects
+        self.ui.lblMailReadyHelp.setVisible(True)
+
+    def _hide_mail_ready_help(self):
+        """
+        Hide the mail help message on the UI.
+        """
+        self.ui.lblMailReadyHelp.setVisible(False)
+
     def mail_state_disabled(self):
         """
         Display the correct UI for the disabled state.
diff --git a/src/leap/bitmask/gui/ui/mail_status.ui b/src/leap/bitmask/gui/ui/mail_status.ui
index 6fd63aec..8e8f1848 100644
--- a/src/leap/bitmask/gui/ui/mail_status.ui
+++ b/src/leap/bitmask/gui/ui/mail_status.ui
@@ -6,12 +6,12 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>400</width>
-    <height>79</height>
+    <width>417</width>
+    <height>185</height>
    </rect>
   </property>
   <property name="sizePolicy">
-   <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
+   <sizepolicy hsizetype="Preferred" vsizetype="Minimum">
     <horstretch>0</horstretch>
     <verstretch>0</verstretch>
    </sizepolicy>
@@ -23,9 +23,9 @@
    <property name="topMargin">
     <number>0</number>
    </property>
-   <item row="0" column="1" rowspan="2">
+   <item row="0" column="0">
     <layout class="QGridLayout" name="gridLayout_3">
-     <item row="1" column="1">
+     <item row="0" column="2">
       <spacer name="horizontalSpacer_4">
        <property name="orientation">
         <enum>Qt::Horizontal</enum>
@@ -38,17 +38,20 @@
        </property>
       </spacer>
      </item>
-     <item row="2" column="0" colspan="3">
-      <widget class="QLabel" name="lblMailStatus">
-       <property name="styleSheet">
-        <string notr="true">color: rgb(80, 80, 80);</string>
+     <item row="0" column="1">
+      <widget class="QLabel" name="label_4">
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
        </property>
        <property name="text">
-        <string>You must login to use encrypted email.</string>
+        <string>Email</string>
        </property>
       </widget>
      </item>
-     <item row="1" column="3">
+     <item row="0" column="4">
       <widget class="QLabel" name="lblMailStatusIcon">
        <property name="maximumSize">
         <size>
@@ -67,47 +70,69 @@
        </property>
       </widget>
      </item>
-     <item row="1" column="0">
-      <widget class="QLabel" name="label_4">
-       <property name="sizePolicy">
-        <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
-         <horstretch>0</horstretch>
-         <verstretch>0</verstretch>
-        </sizepolicy>
+     <item row="3" column="1" colspan="2">
+      <widget class="QLabel" name="lblMailReadyHelp">
+       <property name="autoFillBackground">
+        <bool>false</bool>
+       </property>
+       <property name="styleSheet">
+        <string notr="true">background-color: #e0efd8;
+padding: 10px;</string>
+       </property>
+       <property name="frameShape">
+        <enum>QFrame::NoFrame</enum>
+       </property>
+       <property name="frameShadow">
+        <enum>QFrame::Plain</enum>
+       </property>
+       <property name="lineWidth">
+        <number>0</number>
        </property>
        <property name="text">
-        <string>Email</string>
+        <string>Congratulations! You are ready to use Bitmask to encrypt your email. Go to &lt;a href=&quot;https://bitmask.net/en/help/email&quot;&gt;https://bitmask.net/en/help/email&lt;/a&gt; for instructions on how to set up your mail client.</string>
+       </property>
+       <property name="textFormat">
+        <enum>Qt::AutoText</enum>
+       </property>
+       <property name="scaledContents">
+        <bool>false</bool>
+       </property>
+       <property name="alignment">
+        <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter</set>
+       </property>
+       <property name="wordWrap">
+        <bool>true</bool>
+       </property>
+       <property name="margin">
+        <number>0</number>
+       </property>
+       <property name="indent">
+        <number>-1</number>
        </property>
       </widget>
      </item>
      <item row="0" column="0">
-      <spacer name="verticalSpacer">
-       <property name="orientation">
-        <enum>Qt::Vertical</enum>
+      <widget class="QLabel" name="label">
+       <property name="text">
+        <string/>
        </property>
-       <property name="sizeType">
-        <enum>QSizePolicy::Fixed</enum>
+       <property name="pixmap">
+        <pixmap resource="../../../../../data/resources/icons.qrc">:/images/black/32/email.png</pixmap>
        </property>
-       <property name="sizeHint" stdset="0">
-        <size>
-         <width>0</width>
-         <height>5</height>
-        </size>
+      </widget>
+     </item>
+     <item row="2" column="1" colspan="2">
+      <widget class="QLabel" name="lblMailStatus">
+       <property name="styleSheet">
+        <string notr="true">color: rgb(80, 80, 80);</string>
        </property>
-      </spacer>
+       <property name="text">
+        <string>You must login to use encrypted email.</string>
+       </property>
+      </widget>
      </item>
     </layout>
    </item>
-   <item row="0" column="0">
-    <widget class="QLabel" name="label">
-     <property name="text">
-      <string/>
-     </property>
-     <property name="pixmap">
-      <pixmap resource="../../../../../data/resources/icons.qrc">:/images/black/32/email.png</pixmap>
-     </property>
-    </widget>
-   </item>
   </layout>
  </widget>
  <resources>