Split login jid/password into two steps with checks

3 files changed, 317 insertions, 20 deletions

diff --git a/main/data/icons/dino-party-popper-symbolic.svg b/main/data/icons/dino-party-popper-symbolic.svg
new file mode 100644
index 00000000..084d6f1b
--- /dev/null
+++ b/main/data/icons/dino-party-popper-symbolic.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="m34.139 52.305c-2.3304-0.11119-4.1522 0.452-5.3574 1.6562-0.40199 0.38434-0.9571 1.1617-1.2525 2.0357l-22.228 61.974c-1.29 3.58 2.1698 7.0398 5.7598 5.7598l59.266-21.23c2.3204 0.10655 4.1346-0.45724 5.3359-1.6582 4.9723-4.9769-1.4894-19.503-14.434-32.447-9.4181-9.4182-20.088-15.756-27.09-16.09z" style="fill-rule:evenodd;opacity:.9"/>
+    <defs>
+        <path id="b" d="m27.98 54.66 46.39 46.39-63.31 22.68c-3.59 1.28-7.05-2.18-5.76-5.76z"/>
+    </defs>
+    <clipPath id="a">
+        <use width="100%" height="100%" xlink:href="#b"/>
+    </clipPath>
+    <g clip-path="url(#a)">
+        <path d="m39.4 123.94c-8.46-1.78-16.1-3.92-23.29-8.95-6.74-4.71-13.66-11.78-16.33-19.71-2.08-6.18-11.36-1.8-7.97 3.36 5.52 8.4 11.16 15.77 19.73 21.31 7.8 5.05 17.82 8.93 27.23 8.69 2.59-0.07 3.36-4.12 0.63-4.7z"/>
+    </g>
+    <g clip-path="url(#a)">
+        <path d="m51.07 113.71c-8.46-1.78-16.1-3.92-23.29-8.95-6.74-4.71-13.66-11.78-16.33-19.71-2.08-6.18-11.36-1.8-7.97 3.36 5.52 8.4 11.16 15.77 19.73 21.31 7.8 5.05 17.82 8.93 27.23 8.69 2.6-0.07 3.36-4.13 0.63-4.7z"/>
+    </g>
+    <g clip-path="url(#a)">
+        <path d="m76.71 106.66c-12.95-2.49-24.54-5.73-35.55-13.37-10.36-7.19-20.33-17.69-24.86-29.64-2.27-5.98-11.16-2.02-7.97 3.36 7.39 12.46 16.01 23.17 28.23 31.23 11.23 7.41 25.85 13.37 39.52 13.12 2.59-0.05 3.37-4.17 0.63-4.7z"/>
+    </g>
+    <g>
+        <path d="m35.57 57.28c9.2175 1.8218 16.207 9.1337 21.496 14.423 13.01 13.01 17.945 23.085 14.474 25.007-8.0418 4.4531-19.213-8.8965-23.493-13.181-13.01-13.01-17.947-22.649-15.137-25.449m0.66-5.8c-2.01 0-3.64 0.54-4.78 1.68-4.97 4.97 1.49 19.5 14.43 32.45 9.98 9.98 20.91 16.11 27.66 16.11 2.01 0 3.64-0.54 4.78-1.68 4.97-4.97-1.49-19.5-14.43-32.45-9.98-9.98-20.9-16.11-27.66-16.11z"/>
+    </g>
+    <polygon points="20.39 25.85 15.71 26.72 11.75 16.74 18.47 15.49"/>
+    <polygon points="52.22 5.16 56.65 4 61.17 13.31 54.8 14.98"/>
+    <polygon points="108.97 18.61 111.86 22.73 104 30.92 99.85 25"/>
+    <path d="m60.83 95.45c3.1-7.97 8.61-12.19 17.53-12.3 9.08-0.11 23.89 5.35 24.6 16.07 0-1.64 0-3.27 0.01-4.91-0.7 3.91-4.75 5.54-8.42 4.7-3.9-0.89-6.46-4.17-6.96-8.02 0 1.64 0 3.27 0.01 4.91 0.41-8.89 9.96-11.79 17.47-11.68 7.84 0.12 13.44 5.39 17.73 11.45-0.77-1.09 0.8-3.87 0-5-4.51-6.36-10.34-11.61-18.57-11.46-6.69 0.13-15.43 2.68-16.58 10.35-0.39 2.62-0.48 6.55 0.51 9.02 2.03 5.09 12.11 8.84 14.58 1.99 3.56-9.87-6.38-18.08-14.62-20.79-6.16-2.02-13.22-2.44-19.21 0.42-4.45 2.13-6.38 5.85-8.09 10.24-0.56 1.47 0.56 3.58 0.01 5.01z"/>
+    <path d="m71.16 65.22c3.5 1.86 7.48 4.44 11.45 2.32 2.29-1.23 3.47-3.57 4.44-5.87 2.22-5.25 3.25-8.25 9.34-5.45 3.58 1.64 11.87 7.07 13.38 0.12 0.78-3.61-0.5-7.45-0.69-11 0 1.64 0 3.27-0.01 4.91 0.91-6.28 10.05-4.1 13.91-2.43-0.58-0.25 0.64-4.72 0-5-4.17-1.81-13.12-3.8-13.92 2.77-0.4 3.29 0.42 6.5 0.76 9.73 0-1.64 0-3.27-0.01-4.91-0.56 11.37-15.22-3.27-19.74 0.15-2.51 1.9-2.8 6.55-4.49 9.09-3.8 5.73-9.4 3.26-14.43 0.58 0.67 0.34-0.71 4.61 0.01 4.99z"/>
+    <path d="m34.79 63.81c6.64-0.72 8.01-7.46 6.97-13.04-1.49-8.01-13.26-8.73-14-16.54 0 1.64 0 3.27 0.01 4.91 0.24-4.21 3.5-7.19 6.93-9.13 3.18-1.79 4.95-3.96 5.37-7.81 0.59-5.5-1.21-9.32-6.26-12.17 0.69 0.39-0.74 4.58 0 5 2.52 1.42 5.95 4.07 6.26 7.17v-5c-1.12 6.35-4.44 6.26-8.53 9.91-3.08 2.75-3.8 5.76-3.8 9.62 0 3.69 0.89 6.05 3.99 8.44 4.28 3.29 9.11 5.33 10.13 11.23 0-1.64 0-3.27-0.01-4.91-0.19 4.14-3.06 6.89-7.07 7.32-0.21 0.02 0.15 4.98 0.01 5z"/>
+    <path d="m43.73 80.2c5.3 2.27 12.95-2.87 14.41-7.96 0.73-2.53 0.78-6.18 0.44-8.8-0.48-3.71-3.58-6.08-4.94-9.42-1.09-2.68-0.45-4.97 1.1-7.86 2.5-4.65 13.7-11.7 15.52-2.67 0-1.55-0.01-3.11-0.01-4.66-0.04 2.86-1.76 5.08-4.8 4.49-2.96-0.57-4.25-3.27-4.64-5.96 0.01 1.42 0.01 2.85 0.02 4.27 0.16-12.17 13.35-16.69 23.37-17.33 0.14-0.01-0.07-5 0-5-12.76 0.81-23.41 6.79-23.41 20.56 0 3.68 1.02 9.04 5.96 8.56 4.04-0.39 3.64-5.1 3.54-8.1-0.14-4.15-2.95-7.01-7.49-5.9-5.2 1.28-8.7 6.36-9.73 11.35-0.55 2.66-0.48 5.59-0.35 8.3 0.26 5.77 4.96 9.01 5.86 14.36 0-1.64 0-3.27-0.01-4.91-0.3 4.27-1.71 7.38-5.45 9.87-2.54 1.69-6.42 3.07-9.4 1.79 0.58 0.26-0.63 4.75 0.01 5.02z"/>
+</svg>
diff --git a/main/data/manage_accounts/add_account_dialog.ui b/main/data/manage_accounts/add_account_dialog.ui
index 52f91481..bdf0837b 100644
--- a/main/data/manage_accounts/add_account_dialog.ui
+++ b/main/data/manage_accounts/add_account_dialog.ui
@@ -19,16 +19,16 @@
                                         <property name="expand">True</property>
                                         <property name="visible">True</property>
                                         <child>
-                                            <object class="GtkBox" id="sign_in_box">
+                                            <object class="GtkBox" id="sign_in_jid_box">
                                                 <property name="orientation">vertical</property>
                                                 <property name="margin">20</property>
                                                 <property name="margin-start">50</property>
                                                 <property name="margin-end">50</property>
+                                                <property name="spacing">20</property>
                                                 <property name="visible">True</property>
                                                 <child>
                                                     <object class="GtkLabel">
                                                         <property name="label" translatable="yes">Sign in</property>
-                                                        <property name="margin-bottom">10</property>
                                                         <property name="visible">True</property>
                                                         <attributes>
                                                             <attribute name="scale" value="1.3"/>
@@ -58,8 +58,7 @@
                                                             </object>
                                                         </child>
                                                         <child>
-                                                            <object class="GtkLabel">
-                                                                <property name="label" translatable="yes">Password</property>
+                                                            <object class="GtkLabel" id="sign_in_jid_error_label">
                                                                 <property name="xalign">0</property>
                                                                 <property name="margin-top">7</property>
                                                                 <property name="visible">True</property>
@@ -68,19 +67,149 @@
                                                                 </attributes>
                                                             </object>
                                                         </child>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="orientation">horizontal</property>
+                                                        <property name="visible">True</property>
                                                         <child>
-                                                            <object class="GtkEntry" id="password_entry">
-                                                                <property name="activates_default">True</property>
-                                                                <property name="hexpand">True</property>
-                                                                <property name="input_purpose">password</property>
-                                                                <property name="width_request">200</property>
+                                                            <object class="GtkButton" id="sign_in_jid_serverlist_button">
+                                                                <property name="label" translatable="yes">Create account</property>
                                                                 <property name="visible">True</property>
-                                                                <property name="visibility">False</property>
                                                             </object>
+                                                            <packing>
+                                                                <property name="pack_type">start</property>
+                                                            </packing>
+                                                        </child>
+                                                        <child>
+                                                            <object class="GtkButton" id="sign_in_jid_continue_button">
+                                                                <property name="sensitive">False</property>
+                                                                <property name="can_default">True</property>
+                                                                <property name="visible">True</property>
+                                                                <style>
+                                                                    <class name="text-button"/>
+                                                                    <class name="suggested-action"/>
+                                                                </style>
+                                                                <child>
+                                                                    <object class="GtkStack" id="sign_in_jid_continue_stack">
+                                                                        <property name="visible">True</property>
+                                                                        <child>
+                                                                            <object class="GtkLabel">
+                                                                                <property name="label" translatable="yes">Next</property>
+                                                                                <property name="visible">True</property>
+                                                                            </object>
+                                                                            <packing>
+                                                                                <property name="name">label</property>
+                                                                            </packing>
+                                                                        </child>
+                                                                        <child>
+                                                                            <object class="GtkSpinner">
+                                                                                <property name="active">True</property>
+                                                                                <property name="visible">True</property>
+                                                                            </object>
+                                                                            <packing>
+                                                                                <property name="name">spinner</property>
+                                                                            </packing>
+                                                                        </child>
+                                                                    </object>
+
+                                                                </child>
+                                                            </object>
+                                                            <packing>
+                                                                <property name="pack_type">end</property>
+                                                            </packing>
                                                         </child>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                            <packing>
+                                                <property name="name">login_jid</property>
+                                            </packing>
+                                        </child>
+                                        <child>
+                                            <object class="GtkBox" id="sign_in_tls_box">
+                                                <property name="orientation">vertical</property>
+                                                <property name="margin-top">30</property>
+                                                <property name="margin-bottom">20</property>
+                                                <property name="margin-start">50</property>
+                                                <property name="margin-end">50</property>
+                                                <property name="spacing">20</property>
+                                                <property name="visible">True</property>
+                                                <child>
+                                                    <object class="GtkImage">
+                                                        <property name="visible">True</property>
+                                                        <property name="icon-name">channel-insecure-symbolic</property>
+                                                        <property name="icon-size">4</property>
+                                                        <property name="pixel-size">72</property>
+                                                        <property name="margin-top">10</property>
+                                                        <style>
+                                                            <class name="dim-label"/>
+                                                        </style>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkLabel">
+                                                        <property name="label" translatable="yes">Could not establish a secure connection</property>
+                                                        <property name="visible">True</property>
+                                                        <attributes>
+                                                            <attribute name="scale" value="1.1"/>
+                                                        </attributes>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkLabel" id="sign_in_tls_label">
+                                                        <property name="justify">fill</property>
+                                                        <property name="wrap">True</property>
+                                                        <property name="use-markup">True</property>
+                                                        <property name="hexpand">True</property>
+                                                        <property name="visible">True</property>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="orientation">horizontal</property>
+                                                        <property name="visible">True</property>
+                                                        <child>
+                                                            <object class="GtkButton" id="sign_in_tls_back_button">
+                                                                <property name="label" translatable="yes">Back</property>
+                                                                <property name="visible">True</property>
+                                                            </object>
+                                                            <packing>
+                                                                <property name="pack_type">start</property>
+                                                            </packing>
+                                                        </child>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                            <packing>
+                                                <property name="name">tls_error</property>
+                                            </packing>
+                                        </child>
+                                        <child>
+                                            <object class="GtkBox" id="sign_in_password_box">
+                                                <property name="orientation">vertical</property>
+                                                <property name="margin">20</property>
+                                                <property name="margin-start">50</property>
+                                                <property name="margin-end">50</property>
+                                                <property name="spacing">20</property>
+                                                <property name="visible">True</property>
+                                                <child>
+                                                    <object class="GtkLabel" id="sign_in_password_title">
+                                                        <property name="label">Sign in</property>
+                                                        <property name="visible">True</property>
+                                                        <attributes>
+                                                            <attribute name="scale" value="1.3"/>
+                                                        </attributes>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="orientation">vertical</property>
+                                                        <property name="visible">True</property>
                                                         <child>
                                                             <object class="GtkLabel">
-                                                                <property name="label" translatable="yes">Local alias</property>
+                                                                <property name="label" translatable="yes">Password</property>
                                                                 <property name="xalign">0</property>
                                                                 <property name="margin-top">7</property>
                                                                 <property name="visible">True</property>
@@ -90,23 +219,53 @@
                                                             </object>
                                                         </child>
                                                         <child>
-                                                            <object class="GtkEntry" id="alias_entry">
+                                                            <object class="GtkEntry" id="password_entry">
                                                                 <property name="activates_default">True</property>
                                                                 <property name="hexpand">True</property>
+                                                                <property name="input_purpose">password</property>
                                                                 <property name="width_request">200</property>
                                                                 <property name="visible">True</property>
+                                                                <property name="visibility">False</property>
+                                                            </object>
+                                                        </child>
+                                                        <child>
+                                                            <object class="GtkLabel" id="sign_in_password_error_label">
+                                                                <property name="xalign">0</property>
+                                                                <property name="margin-top">7</property>
+                                                                <property name="visible">True</property>
+                                                                <attributes>
+                                                                    <attribute name="scale" value="0.9"/>
+                                                                </attributes>
                                                             </object>
                                                         </child>
+                                                        <!--<child>-->
+                                                            <!--<object class="GtkLabel">-->
+                                                                <!--<property name="label" translatable="yes">Local alias</property>-->
+                                                                <!--<property name="xalign">0</property>-->
+                                                                <!--<property name="margin-top">7</property>-->
+                                                                <!--<property name="visible">True</property>-->
+                                                                <!--<attributes>-->
+                                                                    <!--<attribute name="scale" value="0.9"/>-->
+                                                                <!--</attributes>-->
+                                                            <!--</object>-->
+                                                        <!--</child>-->
+                                                        <!--<child>-->
+                                                            <!--<object class="GtkEntry" id="alias_entry">-->
+                                                                <!--<property name="activates_default">True</property>-->
+                                                                <!--<property name="hexpand">True</property>-->
+                                                                <!--<property name="width_request">200</property>-->
+                                                                <!--<property name="visible">True</property>-->
+                                                            <!--</object>-->
+                                                        <!--</child>-->
                                                     </object>
                                                 </child>
                                                 <child>
                                                     <object class="GtkBox">
                                                         <property name="orientation">horizontal</property>
-                                                        <property name="margin-top">20</property>
                                                         <property name="visible">True</property>
                                                         <child>
-                                                            <object class="GtkButton" id="serverlist_button">
-                                                                <property name="label" translatable="yes">Create account</property>
+                                                            <object class="GtkButton" id="sign_in_password_back_button">
+                                                                <property name="label" translatable="yes">Back</property>
                                                                 <property name="visible">True</property>
                                                             </object>
                                                             <packing>
@@ -114,14 +273,38 @@
                                                             </packing>
                                                         </child>
                                                         <child>
-                                                            <object class="GtkButton" id="sign_in_continue">
-                                                                <property name="can_default">True</property>
-                                                                <property name="label" translatable="yes">Save</property>
+                                                            <object class="GtkButton" id="sign_in_password_continue_button">
                                                                 <property name="sensitive">False</property>
+                                                                <property name="can_default">True</property>
                                                                 <property name="visible">True</property>
                                                                 <style>
+                                                                    <class name="text-button"/>
                                                                     <class name="suggested-action"/>
                                                                 </style>
+                                                                <child>
+                                                                    <object class="GtkStack" id="sign_in_password_continue_stack">
+                                                                        <property name="visible">True</property>
+                                                                        <child>
+                                                                            <object class="GtkLabel">
+                                                                                <property name="label" translatable="yes">Connect</property>
+                                                                                <property name="visible">True</property>
+                                                                            </object>
+                                                                            <packing>
+                                                                                <property name="name">label</property>
+                                                                            </packing>
+                                                                        </child>
+                                                                        <child>
+                                                                            <object class="GtkSpinner">
+                                                                                <property name="active">True</property>
+                                                                                <property name="visible">True</property>
+                                                                            </object>
+                                                                            <packing>
+                                                                                <property name="name">spinner</property>
+                                                                            </packing>
+                                                                        </child>
+                                                                    </object>
+
+                                                                </child>
                                                             </object>
                                                             <packing>
                                                                 <property name="pack_type">end</property>
@@ -131,7 +314,7 @@
                                                 </child>
                                             </object>
                                             <packing>
-                                                <property name="name">login</property>
+                                                <property name="name">login_password</property>
                                             </packing>
                                         </child>
                                         <child>
@@ -335,6 +518,79 @@
                                                 <property name="name">form</property>
                                             </packing>
                                         </child>
+                                        <child>
+                                            <object class="GtkBox" id="success_box">
+                                                <property name="margin">50</property>
+                                                <property name="margin-top">5</property>
+                                                <property name="margin-bottom">5</property>
+                                                <property name="orientation">vertical</property>
+                                                <property name="spacing">10</property>
+                                                <property name="valign">center</property>
+                                                <property name="visible">True</property>
+                                                <child>
+                                                    <object class="GtkImage">
+                                                        <property name="visible">True</property>
+                                                        <property name="icon-name">dino-party-popper-symbolic</property>
+                                                        <property name="icon-size">4</property>
+                                                        <property name="pixel-size">72</property>
+                                                        <property name="margin-bottom">10</property>
+                                                        <style>
+                                                            <class name="dim-label"/>
+                                                        </style>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkLabel">
+                                                        <property name="label" translatable="yes">All set up!</property>
+                                                        <property name="xalign">0.5</property>
+                                                        <property name="yalign">0.5</property>
+                                                        <property name="visible">True</property>
+                                                        <attributes>
+                                                            <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                                            <attribute name="scale" value="1.3"/>
+                                                        </attributes>
+                                                        <style>
+                                                            <class name="dim-label"/>
+                                                        </style>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkLabel" id="success_description">
+                                                        <property name="wrap">True</property>
+                                                        <property name="margin">5</property>
+                                                        <property name="xalign">0.5</property>
+                                                        <property name="yalign">0.5</property>
+                                                        <property name="use-markup">True</property>
+                                                        <property name="visible">True</property>
+                                                        <style>
+                                                            <class name="dim-label"/>
+                                                        </style>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="orientation">horizontal</property>
+                                                        <property name="halign">center</property>
+                                                        <property name="margin-top">20</property>
+                                                        <property name="visible">True</property>
+                                                        <child>
+                                                            <object class="GtkButton" id="success_continue_button">
+                                                                <property name="can_default">True</property>
+                                                                <property name="label" translatable="yes">Finish</property>
+                                                                <property name="visible">True</property>
+                                                                <style>
+                                                                    <class name="text-button"/>
+                                                                    <class name="suggested-action"/>
+                                                                </style>
+                                                            </object>
+                                                        </child>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                            <packing>
+                                                <property name="name">success</property>
+                                            </packing>
+                                        </child>
                                     </object>
                                 </child>
                             </object>
diff --git a/main/data/unified_window_placeholder.ui b/main/data/unified_window_placeholder.ui
index 429c95c6..a16d98d4 100644
--- a/main/data/unified_window_placeholder.ui
+++ b/main/data/unified_window_placeholder.ui
@@ -23,6 +23,18 @@
                     </object>
                 </child>
                 <child>
+                    <object class="GtkLabel" id="title_label">
+                        <property name="xalign">0.5</property>
+                        <property name="yalign">0.5</property>
+                        <style>
+                            <class name="dim-label"/>
+                        </style>
+                        <attributes>
+                            <attribute name="scale" value="1.3"/>
+                        </attributes>
+                    </object>
+                </child>
+                <child>
                     <object class="GtkLabel" id="label">
                         <property name="xalign">0.5</property>
                         <property name="yalign">0.5</property>
@@ -54,4 +66,4 @@
             </object>
         </child>
     </template>
-</interface>
\ No newline at end of file
+</interface>