Improve Onborading flow (#21097)

* Improve Onborading flow, #PG-2720 * Updated code and added screenshot * Fixed Integration tests
matomo-org · Aug 3, 2023 · cc2ff14 · cc2ff14
1 parent 4fbb399
commit cc2ff14
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 66 deletions.
diff --git a/lang/en.json b/lang/en.json
@@ -540,7 +540,9 @@
         "YourChangesHaveBeenSaved": "Your changes have been saved.",
         "YourSessionHasExpired": "Your session has expired due to inactivity. Please log in to continue.",
         "Update": "Update",
-        "Create": "Create"
+        "Create": "Create",
+        "CreatePassword": "Create Password",
+        "ConfirmPassword": "Confirm Password"
     },
     "Mobile": {
         "AboutPiwikMobile": "About Matomo Mobile",

diff --git a/plugins/Login/images/invitation-image.png b/plugins/Login/images/invitation-image.png
diff --git a/plugins/Login/lang/en.json b/plugins/Login/lang/en.json
@@ -68,6 +68,7 @@
         "BySigningUpPrivacyPolicyAndTermsAndCondition": "By signing up, I accept the %1$sprivacy policy%2$s and the %3$sterms &amp; conditions%4$s",
         "AcceptPrivacyPolicy": "You need to accept the privacy policy.",
         "AcceptTermsAndCondition": "You need to accept the terms &amp; conditions.",
-        "AcceptPrivacyPolicyAndTermsAndCondition": "You need to accept the privacy policy and the terms &amp; conditions."
+        "AcceptPrivacyPolicyAndTermsAndCondition": "You need to accept the privacy policy and the terms &amp; conditions.",
+        "CreatePasswordDescription": "Make sure you remember this password and keep it in a safe place."
     }
 }
diff --git a/plugins/Login/stylesheets/login.less b/plugins/Login/stylesheets/login.less
@@ -112,3 +112,60 @@
         color: gray;
     }
 }
+
+.onboarding {
+    background: white;
+
+    h1 {
+        margin-top: 4rem;
+        margin-bottom: 1.5rem;
+        line-height: 24px;
+    }
+
+    .description {
+        margin-bottom: 1.5rem;
+        line-height: 24px;
+    }
+
+    label {
+        font-weight: 600;
+        color: unset !important;
+    }
+
+    .formSubmitButton {
+        text-transform: uppercase;
+        float: unset;
+    }
+
+    #footerLinks {
+        display: none;
+    }
+
+    .onboardingImage {
+        max-width: 620px;
+    }
+
+    .actions {
+        label {
+            font-weight: unset;
+        }
+    }
+
+    @media screen {
+        @media (max-width: 999px) {
+            .formSubmitButtonRow {
+                position: fixed;
+                width: 100%;
+                bottom: 0;
+            }
+
+            .formSubmitButton {
+                width: 100% !important;
+            }
+
+            h1 {
+                margin-top: 0;
+            }
+        }
+    }
+}
diff --git a/plugins/Login/templates/invitation.twig b/plugins/Login/templates/invitation.twig
@@ -1,48 +1,55 @@
+{% set isCenteredLogo = false %}
+{% set showImageDiv = true %}
+{% set imageToShow = 'plugins/Login/images/invitation-image.png' %}
+{% set colClassOverride = 'col l4 offset-l2 m12' %}
+{% set bodyClass = 'onboarding' %}
 {% extends '@Login/loginLayout.twig' %}
 
 {% block loginContent %}
-    <div class="contentForm invitationForm">
-        <div class="card">
-            <div class="card-content">
-                <div class="card-title">
-                    {{ "Login_InvitationTitle"|translate }}
-                </div>
+    <div class="contentForm invitationForm" id="invitationForm">
+        <h1>{{ 'General_CreatePassword'|translate }}</h1>
+        <p class="description">{{ 'Login_CreatePasswordDescription'|translate }}</p>
 
-                {% if AccessErrorString is defined %}
-                    <div piwik-notification
-                         noclear="true"
-                         context="error">
-                        <strong>{{ 'General_Error'|translate }}</strong>: {{ AccessErrorString|raw }}<br/>
+        {% if AccessErrorString is defined %}
+            <div vue-entry="CoreHome.Notification"
+                 noclear="true"
+                 context="error">
+                <strong>{{ 'General_Error'|translate }}</strong>: {{ AccessErrorString|raw }}<br/>
+            </div>
+        {% endif %}
+        {% block content %}
+            <form method="post"
+                  action="{{ linkTo({'module': loginPlugin, 'action': 'acceptInvitation', 'token': null}) }}">
+                <input type="hidden" name="token" value="{{ token }}"/>
+                <div class="row">
+                    <div class="col l10 s12 input-field">
+                        <input type="text" name="email" id="email" value="{{ user.email }}" size="20" readonly="readonly"
+                               tabindex="0"/>
+                        <label for="email">{{ 'UsersManager_Email'|translate }}</label>
                     </div>
-                {% endif %}
-                {% block content %}
-                    <form method="post" action="{{ linkTo({'module': loginPlugin, 'action': 'acceptInvitation', 'token': null}) }}">
-                        <input type="hidden" name="token" value="{{ token }}"/>
-                        <div class="row">
-                            <div class="col s12 input-field">
-                                <input type="text" name="email" value="{{ user.email }}" size="20" readonly="readonly"
-                                       tabindex="0"/>
-                                <label><i class="icon-user icon"></i> {{ 'UsersManager_Email'|translate }}</label>
-                            </div>
-                            <div class="col s12 input-field">
-                                <input type="password" placeholder="" name="password" id="password" class="input" value="" size="20"
-                                       autocorrect="off" autocapitalize="none"
-                                       tabindex="1" required/>
-                                <label for="password"><i class="icon-locked icon"></i> {{ 'Login_NewPassword'|translate }}</label>
-                            </div>
-                            <div class="col s12 input-field">
-                                <input type="password" placeholder="" name="passwordConfirmation" id="password_confirm" class="input" value="" size="20"
-                                       autocorrect="off" autocapitalize="none"
-                                       tabindex="2" required/>
-                                <label for="password_confirm"><i class="icon-locked icon"></i> {{ 'Login_NewPasswordRepeat'|translate }}</label>
-                            </div>
-                        </div>
-                        <div class="row actions">
-                            {% if privacyPolicyUrl|default('') is not empty or termsAndCondition|default('') is not empty %}
-                                <div class="col s12">
-                                    <label>
-                                        <input name="conditionCheck" type="checkbox" id="conditionCheck" value="1" tabindex="89"/>
-                                        <span>
+                    <div class="col l10 s12 input-field">
+                        <input type="password" placeholder="" name="password" id="password" class="input" value=""
+                               size="20"
+                               autocorrect="off" autocapitalize="none" spellcheck="false"
+                               tabindex="1" required/>
+                        <label for="password">{{ 'General_Password'|translate }}
+                        </label>
+                    </div>
+                    <div class="col l10 s12 input-field">
+                        <input type="password" placeholder="" name="passwordConfirmation" id="password_confirm"
+                               class="input" value="" size="20"
+                               autocorrect="off" autocapitalize="none" spellcheck="false"
+                               tabindex="2" required/>
+                        <label for="password_confirm">{{ 'General_ConfirmPassword'|translate }}</label>
+                    </div>
+                </div>
+                <div class="row actions">
+                    {% if privacyPolicyUrl|default('') is not empty or termsAndCondition|default('') is not empty %}
+                        <div class="col l10 s12">
+                            <label>
+                                <input name="conditionCheck" type="checkbox" id="conditionCheck" value="1"
+                                       tabindex="89"/>
+                                <span>
                                             {% if privacyPolicyUrl|default('') is not empty and termsAndCondition|default('') is empty %}
                                                 {{ 'Login_BySigningUpPrivacyPolicy'|translate(
                                                     '<a target="_blank" rel="noreferrer noopener" href="' ~ privacyPolicyUrl|safelink|e('html_attr') ~ '">',
@@ -62,22 +69,23 @@
                                                 )|raw }}
                                             {% endif %}
                                     </span>
-                                    </label>
-                                </div>
-                            {% endif %}
-                            <div style="margin-top:10px" class="col s12">
-                                <input class="submit btn" name="invitation_form" id="login_form_submit" type="submit" value="{{ 'Login_Accept'|translate }}"
-                                       tabindex="100"/>
-                            </div>
+                            </label>
                         </div>
-                    </form>
-                    {% if isCustomLogo %}
-                        <p id="piwik">
-                            <i><a href="https://matomo.org/" rel="noreferrer noopener" target="_blank">{{ linkTitle }}</a></i>
-                        </p>
                     {% endif %}
-                {% endblock %}
-            </div>
-        </div>
+                </div>
+                <div class="row actions invitation_form_row formSubmitButtonRow">
+                    <div class="col l10 s12">
+                        <input class="submit btn formSubmitButton" name="invitation_form" id="login_form_submit" type="submit"
+                               value="{{ 'General_Confirm'|translate }}"
+                               tabindex="100"/>
+                    </div>
+                </div>
+            </form>
+            {% if isCustomLogo %}
+                <p id="piwik">
+                    <i><a href="https://matomo.org/" rel="noreferrer noopener" target="_blank">{{ linkTitle }}</a></i>
+                </p>
+            {% endif %}
+        {% endblock %}
     </div>
 {% endblock %}
diff --git a/plugins/Login/templates/loginLayout.twig b/plugins/Login/templates/loginLayout.twig
@@ -8,12 +8,14 @@
     {{ parent() }}
 {% endblock %}
 
-{% set title %}{{ 'Login_LogIn'|translate }}{% endset %}
+{% set title %}{{ pageTitle|default('Login_LogIn'|translate) }}{% endset %}
 
 {% block pageDescription %}{{ 'General_OpenSourceWebAnalytics'|translate }}{% endblock %}
 
 {% set bodyId = 'loginPage' %}
 
+{% set colClass %}{{ colClassOverride|default('col s12 m6 push-m3 l4 push-l4') }}{% endset %}
+
 {% block body %}
 
     {{ postEvent("Template.beforeTopBar", "login") }}
@@ -25,12 +27,12 @@
     </div>
     <nav>
         <div class="nav-wrapper">
-            {% include "@CoreHome/_logo.twig" with { 'logoLink': 'https://matomo.org', 'centeredLogo': true, 'useLargeLogo': false } %}
+            {% include "@CoreHome/_logo.twig" with { 'logoLink': 'https://matomo.org', 'centeredLogo': (isCenteredLogo ?? true), 'useLargeLogo': false } %}
         </div>
     </nav>
 
     <section class="loginSection row">
-        <div class="col s12 m6 push-m3 l4 push-l4">
+        <div class="{{ colClass }}">
 
         {# untrusted host warning #}
         {% if (isValidHost is defined and invalidHostMessage is defined and isValidHost == false) %}
@@ -41,6 +43,12 @@
         {% endif %}
 
         </div>
+
+        {% if showImageDiv is defined and imageToShow is defined %}
+            <div class="col l4 hide-on-med-and-down onboardingImage">
+                <img class="responsive-img" src="{{ imageToShow }}">
+            </div>
+        {% endif %}
     </section>
 
 {% endblock %}
diff --git a/plugins/Login/tests/UI/expected-screenshots/Invite_set_password.png b/plugins/Login/tests/UI/expected-screenshots/Invite_set_password.png
diff --git a/plugins/Login/tests/UI/expected-screenshots/Invite_wrong_password.png b/plugins/Login/tests/UI/expected-screenshots/Invite_wrong_password.png
diff --git a/plugins/UsersManager/tests/Integration/UserInviteTest.php b/plugins/UsersManager/tests/Integration/UserInviteTest.php
@@ -49,6 +49,13 @@ public function setUp(): void
         $this->model = new Model();
     }
 
+    protected static function configureFixture($fixture)
+    {
+        parent::configureFixture($fixture);
+
+        $fixture->extraTestEnvVars['loadRealTranslations'] = true;
+    }
+
     public function testCopyLink()
     {
         Request::processRequest(
@@ -74,7 +81,7 @@ public function testCopyLink()
             10
         );
 
-        $this->assertStringContainsString('Accept invitation', $response, 'error on accept invite page');
+        $this->assertStringContainsString('Create Password', $response, 'error on accept invite page');
     }
 
     public function testInviteUser()
@@ -99,7 +106,7 @@ public function testInviteUser()
             10
         );
 
-        $this->assertStringContainsString('Accept invitation', $response, 'error on accept invite page');
+        $this->assertStringContainsString('Create Password', $response, 'error on accept invite page');
 
         $response = Http::sendHttpRequest(
             Fixture::getRootUrl() . 'tests/PHPUnit/proxy/index.php?module=Login&action=declineInvitation&token=' . $this->capturedToken,