MDL-78184 badges: Improve user flow for connecting backpack

badges/classes/form/backpack.php

@@ -55,6 +55,7 @@ class backpack extends external_backpack {
         $mform->addElement('hidden', 'userid', $USER->id);
         $mform->setType('userid', PARAM_INT);
         $freeze = [];
+        $status = null;
         if (isset($this->_customdata['email'])) {
             // Email will be passed in when we're in the process of verifying the user's email address,
             // so set the connection status, lock the email field, and provide options to resend the verification
@@ -68,8 +69,10 @@ class backpack extends external_backpack {
                 array('class' => 'notconnected', 'id' => 'connection-status'));
         } else {
             $sitebackpacks = badges_get_site_backpacks();
-            $choices = [];
+            $choices = [
-            $restrictedoptions = [];
+                '' => get_string('choosedots'),
+            ];
+            $restrictedoptions = [''];
             foreach ($sitebackpacks as $backpack) {
                 $choices[$backpack->id] = $backpack->backpackweburl;
                 if ($backpack->apiversion == OPEN_BADGES_V2P1) {
@@ -78,17 +81,26 @@ class backpack extends external_backpack {
             }
             $mform->addElement('select', 'externalbackpackid', get_string('backpackprovider', 'badges'), $choices);
             $mform->setType('externalbackpackid', PARAM_INT);
-            $defaultbackpack = badges_get_site_primary_backpack();
+            $mform->addRule('externalbackpackid', get_string('required'), 'required');
-            $mform->setDefault('externalbackpackid', $defaultbackpack->id);
             $mform->hideIf('password', 'externalbackpackid', 'in', $restrictedoptions);
             $mform->hideIf('backpackemail', 'externalbackpackid', 'in', $restrictedoptions);
 
-            $status = html_writer::tag('span', get_string('notconnected', 'badges'),
+            // Static form element can't be used because they don't support hideIf. This is a workaround until MDL-66251 is fixed.
-                array('class' => 'notconnected', 'id' => 'connection-status'));
+            $group = [];
+            $group[] = $mform->createElement('static', 'loginbackpackgroup', '', get_string('loginbackpacktitle', 'badges'));
+            $mform->addGroup($group, 'loginbackpackgroup', '', '', false);
+            $mform->hideIf('loginbackpackgroup', 'externalbackpackid', 'in', $restrictedoptions);
+        }
+
+        if ($status) {
+            // Only display the status if it's set.
+            $mform->addElement('static', 'status', get_string('status'), $status);
         }
-        $mform->addElement('static', 'status', get_string('status'), $status);
 
         $this->add_auth_fields($this->_customdata['email'] ?? $USER->email, !isset($this->_customdata['email']));
+        // Only display email and password when the user has selected a backpack.
+        $mform->hideIf('backpackemail', 'externalbackpackid', 'eq', '');
+        $mform->hideIf('password', 'externalbackpackid', 'eq', '');
 
         $mform->setDisableShortforms(false);
 
@@ -125,6 +137,13 @@ class backpack extends external_backpack {
      * Validates form data
      */
     public function validation($data, $files) {
+        // Verify that the user has selected a backpack.
+        if (empty($data['externalbackpackid'])) {
+            $errors['externalbackpackid'] = get_string('externalbackpack_required', 'badges');
+            return $errors;
+        }
+
+        // We don't need to verify anything for OBv2.1.
         if (badges_open_badges_backpack_api() == OPEN_BADGES_V2P1) {
             return [];
         }

badges/classes/form/collections.php

@@ -63,14 +63,12 @@ class collections extends moodleform {
         $backpack = get_backpack_settings($USER->id);
         $sitebackpack = badges_get_site_backpack($backpack->backpackid);
 
-        $mform->addElement('header', 'backpackheader', get_string('backpackconnection', 'badges'));
+        $mform->addElement('header', 'backpackheader', get_string('backpackconnection_connected', 'badges'));
-        $mform->addHelpButton('backpackheader', 'backpackconnection', 'badges');
         $mform->addElement('static', 'url', get_string('url'), $backpackweburl);
 
         $status = html_writer::tag('span', get_string('connected', 'badges'), array('class' => 'connected'));
         $mform->addElement('static', 'status', get_string('status'), $status);
         $mform->addElement('static', 'email', get_string('email'), $email);
-        $mform->addHelpButton('email', 'backpackemail', 'badges');
         $mform->addElement('submit', 'disconnect', get_string('disconnect', 'badges'));
 
         $mform->addElement('header', 'collectionheader', get_string('backpackimport', 'badges'));

badges/classes/form/external_backpack.php

@@ -162,9 +162,11 @@ class external_backpack extends \moodleform {
         $mform = $this->_form;
         $emailstring = get_string('email');
         $passwordstring = get_string('password');
+        $showpasswordhelp = false;
         if (!isset($this->_customdata['userbackpack'])) {
             $emailstring = get_string('defaultissuercontact', 'core_badges');
             $passwordstring = get_string('defaultissuerpassword', 'core_badges');
+            $showpasswordhelp = true;
         }
 
         $mform->addElement('text', 'backpackemail', $emailstring);
@@ -174,7 +176,9 @@ class external_backpack extends \moodleform {
         if ($includepassword) {
             $mform->addElement('passwordunmask', 'password', $passwordstring);
             $mform->setType('password', PARAM_RAW);
-            $mform->addHelpButton('password', 'defaultissuerpassword', 'badges');
+            if ($showpasswordhelp) {
+                $mform->addHelpButton('password', 'defaultissuerpassword', 'badges');
+            }
         }
     }
 }

badges/mybackpack.php

@@ -124,7 +124,9 @@ if ($backpack) {
     if ($form->is_cancelled()) {
         redirect(new moodle_url('/badges/mybadges.php'));
     } else if ($form->is_submitted()) {
-        if (badges_open_badges_backpack_api($data->externalbackpackid) == OPEN_BADGES_V2P1) {
+        if (!empty($data->externalbackpackid) &&
+            badges_open_badges_backpack_api($data->externalbackpackid) == OPEN_BADGES_V2P1
+        ) {
             // If backpack is version 2.1 to redirect on the backpack site to login.
             // User input username/email/password on the backpack site
             // After confirm the scopes.
@@ -138,7 +140,7 @@ if ($backpack) {
             if (isset($data->revertbutton)) {
                 badges_disconnect_user_backpack($USER->id);
                 redirect(new moodle_url('/badges/mybackpack.php'));
-            } else if (isset($data->backpackemail)) {
+            } else if (isset($data->externalbackpackid) && isset($data->backpackemail)) {
                 // There are no errors, so the verification email can be sent.
                 if (badges_send_verification_email($data->backpackemail, $data->externalbackpackid, $data->password)) {
                     $a = get_user_preferences('badges_email_verify_backpackid');

badges/tests/behat/backpack.feature

@@ -54,8 +54,7 @@ Feature: Backpack badges
     When I log in as "student1"
     And I follow "Preferences" in the user menu
     And I follow "Backpack settings"
-    Then I should see "https://dc.imsglobal.org"
+    Then I should see "Choose..." in the "Backpack provider" "select"
-    And I should see "Not connected"
 
   @javascript
   Scenario: User has been connected backpack
@@ -172,7 +171,6 @@ Feature: Backpack badges
     And the field "Include authentication details with the backpack" matches value "0"
     And I click on "includeauthdetails" "checkbox"
     And I should not see "test@test.com"
-    And I log out
 
   @javascript
   Scenario: View backpack form as a student
@@ -180,9 +178,11 @@ Feature: Backpack badges
     And I follow "Preferences" in the user menu
     And I follow "Backpack settings"
     When I set the field "externalbackpackid" to "https://dc.imsglobal.org"
-    Then I should not see "Email address"
+    Then I should not see "Log in to your backpack"
+    And I should not see "Email address"
     And I should not see "Password"
-    And I set the field "externalbackpackid" to "https://test.com/"
+    But I set the field "externalbackpackid" to "https://test.com/"
+    And I should see "Log in to your backpack"
     And I should see "Email address"
     And I should see "Password"
 
@@ -191,6 +191,8 @@ Feature: Backpack badges
     Given I log in as "student1"
     And I follow "Preferences" in the user menu
     And I follow "Backpack settings"
+    When I click on "Connect to backpack" "button"
+    Then I should see "Backpack provider can't be blank"
     And I set the field "externalbackpackid" to "https://test.com/"
     And I set the field "password" to ""
     When I click on "Connect to backpack" "button"

lang/en/badges.php

@@ -100,8 +100,9 @@ $string['backpackbadgessummary'] = 'You have {$a->totalbadges} badge(s) displaye
 $string['backpackbadgessettings'] = 'Change backpack settings';
 $string['backpackcannotsendverification'] = 'Cannot send verification email';
 $string['backpackconnected'] = 'Backpack is connected';
-$string['backpackconnection'] = 'Backpack connection';
+$string['backpackconnection'] = 'Connect to a backpack';
-$string['backpackconnection_help'] = 'Connecting to a backpack enables you to share your badges from this site, and display public badge collections from your backpack on your profile page on this site.';
+$string['backpackconnection_help'] = 'Store and share your badges from this site and display public badges from other websites on your user profile.';
+$string['backpackconnection_connected'] = 'Your backpack';
 $string['backpackconnectioncancelattempt'] = 'Connect using a different email address';
 $string['backpackconnectionconnect'] = 'Connect to backpack';
 $string['backpackconnectionresendemail'] = 'Resend verification email';
@@ -109,25 +110,28 @@ $string['backpackconnectionunexpectedresult'] = 'There was a problem connecting
 $string['backpackconnectionunexpectedmessage'] = 'The backpack returned the error: "{$a}".';
 $string['backpackdetails'] = 'Backpack settings';
 $string['backpackdisconnected'] = 'Backpack is disconnected';
-$string['backpackemail'] = 'Email address';
 $string['backpackemail_required'] = 'Email address can\'t be blank';
-$string['backpackemail_help'] = 'The email address associated with your backpack. While you are connected, any badges earned on this site will be associated with this email address.';
 $string['backpackemailverificationpending'] = 'Verification pending';
-$string['backpackemailverifyemailbody'] = 'Hi,
+$string['backpackemailverifyemailbody'] = 'Hi {$a->userfirstname},
 
-A new connection to your badges backpack has been requested from \'{$a->sitename}\' using your email address.
+You\'re almost done connecting to your badges backpack on \'{$a->sitename}\'.
 
-To confirm and activate the connection to your backpack, please go to
+To finish connecting to your backpack, verify your email address through the following button:
 
+{$a->buttonlink}
+
+If the button doesn\'t work, you can copy and paste the following URL into your browser:
 {$a->link}
 
-In most mail programs, this should appear as a blue link which you can just click on. If that doesn\'t work, then cut and paste the address into the address line at the top of your web browser.
 
-If you need help, please contact the site administrator,
+If you didn\'t try to connect to your badges backpack, you can safely ignore this email.
+
+For any extra help, please contact your site support,
+
 {$a->admin}';
 $string['backpackemailverifyemailsubject'] = '{$a}: Badges backpack email verification';
-$string['backpackemailverifypending'] = 'A verification email has been sent to <strong>{$a}</strong>. Click on the verification link in the email to activate your Backpack connection.';
+$string['backpackemailverifypending'] = 'We have sent an email to <strong>{$a}</strong>. Click on the verification link in the email to activate your backpack connection.';
-$string['backpackemailverifysuccess'] = 'Thanks for verifying your email address. You are now connected to your backpack.';
+$string['backpackemailverifysuccess'] = 'You\'re now connected to your backpack.';
 $string['backpackemailverifytokenmismatch'] = 'The token in the link you clicked does not match the stored token. Make sure you clicked the link in most recent email you received.';
 $string['backpackexporterror'] = 'Can\'t export the badge to backpack';
 $string['backpackexporterrorwithinfo'] = 'Can\'t export the badge "{$a->badgename}" to backpack. Error: {$a->error}';
@@ -354,6 +358,7 @@ $string['expirydate'] = 'Expiry date';
 $string['expirydate_help'] = 'Optionally, badges can expire on a specific date, or the date can be calculated based on the date when the badge was issued to a user. ';
 $string['existsinbackpack'] = 'Badge already exists in backpack';
 $string['externalconnectto'] = 'To display external badges you need to <a href="{$a}">connect to a backpack</a>.';
+$string['externalbackpack_required'] = 'Backpack provider can\'t be blank';
 $string['externalbadges'] = 'My badges from other web sites';
 $string['externalbadgesp'] = 'Badges from other web sites:';
 $string['externalbadges_help'] = 'This area displays badges from your external backpack.';
@@ -394,6 +399,7 @@ You can manage your badges here by making them public or private for your profil
 
 You can download all of your badges or each badge separately and save them on your computer. Downloaded badges can be added to your external backpack service.';
 $string['localbadgesp'] = 'Badges from {$a}:';
+$string['loginbackpacktitle'] = '<strong>Log in to your backpack</strong>';
 $string['makeprivate'] = 'Make private';
 $string['makepublic'] = 'Make public';
 $string['managebadges'] = 'Manage badges';
@@ -574,6 +580,7 @@ $string['variablesubstitution_help'] = 'In a badge message, certain variables ca
 
 %badgelink%
 : This will be replaced by the public URL with information about the issued badge.';
+$string['verifyemail'] = 'Verify email';
 $string['viewbadge'] = 'View issued badge';
 $string['visible'] = 'Visible';
 $string['version'] = 'Version';
@@ -586,3 +593,7 @@ $string['includeauthdetails'] = "Include authentication details with the backpac
 $string['evidence'] = 'Evidence';
 $string['recipientdetails'] = 'Recipient details';
 $string['recipientidentificationproblem'] = 'Cannot find a recipient of this badge among the existing users.';
+
+// Deprecated since Moodle 4.3.
+$string['backpackemail'] = 'Email address';
+$string['backpackemail_help'] = 'The email address associated with your backpack. While you are connected, any badges earned on this site will be associated with this email address.';

lang/en/deprecated.txt

@@ -79,4 +79,6 @@ selectdevice,core_admin
 selecttheme,core_admin
 themenoselected,core_admin
 unsettheme,core_admin
-showmore,core_availability
+showmore,core_availability
+backpackemail,core_badges
+backpackemail_help,core_badges

lib/badgeslib.php

@@ -1264,10 +1264,35 @@ function badges_send_verification_email($email, $backpackid, $backpackpassword)
     $verificationpath = $verificationurl->out(false);
 
     $site = get_site();
-    $args = new stdClass();
+    $link = $verificationpath . '?data='. $secret;
-    $args->link = $verificationpath . '?data='. $secret;
+    // Hard-coded button styles, because CSS can't be used in emails.
-    $args->sitename = $site->fullname;
+    $buttonstyles = [
-    $args->admin = generate_email_signoff();
+        'background-color: #0f6cbf',
+        'border: none',
+        'color: white',
+        'padding: 12px',
+        'text-align: center',
+        'text-decoration: none',
+        'display: inline-block',
+        'font-size: 20px',
+        'font-weight: 800',
+        'margin: 4px 2px',
+        'cursor: pointer',
+        'border-radius: 8px',
+    ];
+    $button = html_writer::start_tag('center') .
+        html_writer::tag(
+            'button',
+            get_string('verifyemail', 'badges'),
+            ['style' => implode(';', $buttonstyles)]) .
+        html_writer::end_tag('center');
+    $args = [
+        'link' => html_writer::link($link, $link),
+        'buttonlink' => html_writer::link($link, $button),
+        'sitename' => $site->fullname,
+        'admin' => generate_email_signoff(),
+        'userfirstname' => $USER->firstname,
+    ];
 
     $messagesubject = get_string('backpackemailverifyemailsubject', 'badges', $site->fullname);
     $messagetext = get_string('backpackemailverifyemailbody', 'badges', $args);