Feature co2757 widget improvements (#587)

* Fixes to password dashboard widget with minor improvements to all widgets (CO-2757) * Fixes to email address dashboard widget (CO-2757) --------- Co-authored-by: Arlen Johnson <[email protected]>
Internet2 · Mar 1, 2024 · c9faf0f · c9faf0f
1 parent 3a9f56e
commit c9faf0f
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 15 deletions.
diff --git a/app/AvailablePlugin/EmailAddressWidget/Lib/lang.php b/app/AvailablePlugin/EmailAddressWidget/Lib/lang.php
@@ -43,9 +43,10 @@
   'er.emailaddresswidget.req.params'                    => 'Incorrect request parameters.',
 
   // Info
-  'pl.emailaddresswidget.deleted'                       => 'Deleted',
+  'pl.emailaddresswidget.deleted'                       => 'Email address deleted.',
   'pl.emailaddresswidget.limit'                         => 'Email address limit reached. You must first delete an address before adding another.',
   'pl.emailaddresswidget.limit.replace'                 => 'Email address limit reached. You must delete or replace an address to add another.',
+  'pl.emailaddresswidget.verified'                      => 'Email address verified.',
 
   // Actions
   'pl.emailaddresswidget.add'                           => 'Add an email address',

diff --git a/app/AvailablePlugin/EmailAddressWidget/View/CoEmailAddressWidgets/display.ctp b/app/AvailablePlugin/EmailAddressWidget/View/CoEmailAddressWidgets/display.ctp
@@ -86,7 +86,8 @@
           token:               "<?php print _txt('pl.emailaddresswidget.fd.token'); ?>",
           tokenMsg:            "<?php print _txt('pl.emailaddresswidget.fd.token.msg'); ?>",
           tokenError:          "<?php print _txt('er.emailaddresswidget.fd.token'); ?>",
-          verify:              "<?php print _txt('op.verify'); ?>"
+          verify:              "<?php print _txt('op.verify'); ?>",
+          verified:             "<?php print _txt('pl.emailaddresswidget.verified'); ?>"
         }
       }
     },
@@ -99,7 +100,10 @@
         let xhr = callRegistryAPI(url, 'GET', 'json', this.setEmailAddresses, '', this.generalXhrFailCallback);
       },
       setEmailAddresses: function(xhr){
-        let allEmailAddresses = xhr.responseJSON.EmailAddresses;
+        let allEmailAddresses = [];
+        if(xhr.responseJSON !== undefined && xhr.responseJSON.EmailAddresses !== undefined) {
+          allEmailAddresses = xhr.responseJSON.EmailAddresses;
+        }
         // limit the email addresses to the emailType:
         let emailAddressesOfType = [];
         emailAddressesOfType = allEmailAddresses.filter((address) => address.Type == this.core.emailType);

diff --git a/app/AvailablePlugin/EmailAddressWidget/webroot/js/email-panel.js b/app/AvailablePlugin/EmailAddressWidget/webroot/js/email-panel.js
@@ -135,7 +135,7 @@ export default {
       this.resetForm();
       this.clearInvalid();
       this.refreshDisplay();
-      this.$parent.successTxt = xhr.statusText;
+      this.$parent.successTxt = this.txt.verified;
       this.$parent.setError('');
     },
     verifyFailCallback(xhr) {

diff --git a/app/AvailablePlugin/PasswordAuthenticator/Lib/lang.php b/app/AvailablePlugin/PasswordAuthenticator/Lib/lang.php
@@ -46,7 +46,7 @@
   ),
 
   // Error messages
-  'er.passwordauthenticator.current'   => 'Current password is required',
+  'er.passwordauthenticator.current'   => 'Incorrect current password',
   'er.passwordauthenticator.match'     => 'New passwords do not match',
   'er.passwordauthenticator.len.max'   => 'Password cannot be more than %1$s characters',
   'er.passwordauthenticator.len.min'   => 'Password must be at least %1$s characters',

diff --git a/app/AvailablePlugin/PasswordWidget/Lib/lang.php b/app/AvailablePlugin/PasswordWidget/Lib/lang.php
@@ -39,15 +39,16 @@
   // Error
   'er.passwordwidget.add'                           => 'The password could not be added.',
   'er.passwordwidget.req.params'                    => 'Incorrect request parameters.',
+  'er.passwordwidget.currentpassword'               => 'Current password is required.',
   'er.passwordwidget.no.passwordauthenticators'     => 'There are no password authenticators. You must first create a PasswordAuthenticator before this plugin can be configured.',
   'er.passwordwidget.match'                         => 'The passwords do not match.',
   'er.passwordwidget.maxlength'                     => 'The password may not exceed %1$s characters.',
   'er.passwordwidget.minlength'                     => 'The password must be at least %1$s characters.',
 
   // Actions
   'pl.passwordwidget.add'                           => 'Add Password',
+  'pl.passwordwidget.change'                        => 'Change Password',
   'pl.passwordwidget.edit'                          => 'Edit', // this allows localization
-  'pl.passwordwidget.reset'                         => 'Reset Password',
 
   // Fields
   'pl.passwordwidget.fd.authenticator'              => 'Password Authenticator',
@@ -58,9 +59,8 @@
 
   //  Information
   'pl.passwordwidget.info.add.success'        => 'The password was added.',
+  'pl.passwordwidget.info.change.success'     => 'The password was changed.',
   'pl.passwordwidget.info.dependency'         => 'This widget is dependent on the PasswordAuthenticator plugin.',
   'pl.passwordwidget.info.password.set'       => 'Your password is set.',
-  'pl.passwordwidget.info.password.not.set'   => 'No password is set.',
-  'pl.passwordwidget.info.update.success'     => 'The password was changed.'
-
+  'pl.passwordwidget.info.password.not.set'   => 'No password is set.'
 );
diff --git a/app/AvailablePlugin/PasswordWidget/View/CoPasswordWidgets/display.ctp b/app/AvailablePlugin/PasswordWidget/View/CoPasswordWidgets/display.ctp
@@ -73,9 +73,11 @@
         },
         txt: {
           add:                 "<?php print _txt('pl.passwordwidget.add'); ?>",
+          addSuccess:          "<?php print _txt('pl.passwordwidget.info.add.success'); ?>",
           addFail:             "<?php print _txt('er.passwordwidget.add'); ?>",
           cancel:              "<?php print _txt('op.cancel'); ?>",
-          reset:               "<?php print _txt('pl.passwordwidget.reset'); ?>",
+          change:              "<?php print _txt('pl.passwordwidget.change'); ?>",
+          changeSuccess:       "<?php print _txt('pl.passwordwidget.info.change.success'); ?>",
           confirm:             "<?php print _txt('op.confirm'); ?>",
           done:                "<?php print _txt('op.done'); ?>",
           edit:                "<?php print _txt('pl.passwordwidget.edit'); ?>",
@@ -87,6 +89,7 @@
           passwordNew:         "<?php print _txt('pl.passwordwidget.fd.password.new'); ?>",
           passwordIsSet:       "<?php print _txt('pl.passwordwidget.info.password.set'); ?>",
           passwordIsNotSet:    "<?php print _txt('pl.passwordwidget.info.password.not.set'); ?>",
+          errorCurrent:        "<?php print _txt('er.passwordwidget.currentpassword'); ?>",
           errorMatch:          "<?php print _txt('er.passwordwidget.match'); ?>",
           errorMaxLength:      "<?php print _txt('er.passwordwidget.maxlength', array($vv_pw_authenticator['PasswordAuthenticator']['max_length'])); ?>",
           errorMinLength:      "<?php print _txt('er.passwordwidget.minlength', array($vv_pw_authenticator['PasswordAuthenticator']['min_length'])); ?>"

diff --git a/app/AvailablePlugin/PasswordWidget/webroot/js/password-panel.js b/app/AvailablePlugin/PasswordWidget/webroot/js/password-panel.js
@@ -34,7 +34,10 @@ export default {
     return {
       editing: false,
       passwordInvalid: false,
-      passwordErrorMessage: ''
+      passwordInvalidClass: '',
+      passwordErrorMessage: '',
+      passwordCurrentErrorMessage: '',
+      passwordCurrentInvalidClass: ''
     }
   },
   methods: {
@@ -64,6 +67,8 @@ export default {
       this.passwordInvalid = false;
       this.passwordInvalidClass = '';
       this.passwordErrorMessage = '';
+      this.passwordCurrentErrorMessage = '';
+      this.passwordCurrentInvalidClass = '';
     },
     submitPassword() {
       const pw = this.$refs.passwordNew.value;
@@ -77,12 +82,21 @@ export default {
 
       // basic front-end validation: do the passwords match?
       if(pw != pwConf) {
+        this.clearInvalid();
         this.passwordErrorMessage = this.txt.errorMatch;
         this.passwordInvalidClass = 'is-invalid';
         this.passwordInvalid = true;
         return;
       }
-      // basic front-end validation: is it empty?
+      // basic front-end validation: is the current password present?
+      if(pwCurr == '') {
+        this.clearInvalid();
+        this.passwordCurrentErrorMessage = this.txt.errorCurrent;
+        this.passwordCurrentInvalidClass = 'is-invalid';
+        this.passwordInvalid = true;
+        return;
+      }
+      // basic front-end validation: is the password empty?
       if(pw == '') {
         return;
       }
@@ -129,7 +143,11 @@ export default {
       if(xhr.responseJSON !== undefined) {
         this.hideEdit();
         this.refreshDisplay();
-        this.$parent.successTxt = xhr.statusText;
+        if(this.pwinfo.id == '') {
+          this.$parent.successTxt = this.txt.addSuccess;
+        } else {
+          this.$parent.successTxt = this.txt.changeSuccess;
+        }
         this.$parent.setError('');
       } else {
         this.passwordInvalid = true;
@@ -141,6 +159,8 @@ export default {
       stopSpinner();
       this.passwordInvalid = true;
       this.passwordInvalidClass = 'is-invalid';
+      this.passwordCurrentInvalid = true;
+      this.passwordCurrentInvalidClass = 'is-invalid';
       this.$parent.generalXhrFailCallback(xhr);
     }
   },
@@ -160,7 +180,7 @@ export default {
     </div>
     <div v-if="editing" class="cm-ssw-add-container">
       <div class="cm-ssw-add-form">
-        <form action="#">
+        <form action="#" ref="passwordForm">
           <div class="cm-ssw-form-row">
             <span class="cm-ssw-form-row-fields">
               <span v-if="this.pwinfo.id != ''" 
@@ -174,9 +194,13 @@ export default {
                   type="password" 
                   :id="generateId('cm-ssw-password-current')"
                   class="form-control cm-ssw-form-field-password"
+                  :class="this.passwordCurrentInvalidClass"
                   value="" 
                   required="required"
                   ref="passwordCurrent"/>
+                  <div v-if="this.passwordCurrentErrorMessage" class="invalid-feedback">
+                    {{ this.passwordCurrentErrorMessage }}
+                  </div>
               </span>
               <span class="cm-ssw-form-field form-group">
                 <label :for="generateId('cm-ssw-password')">
@@ -219,7 +243,7 @@ export default {
             </span>
             <div class="cm-ssw-submit-buttons">
               <button @click.prevent="submitPassword" class="btn btm-small btn-primary cm-ssw-add-email-save-link">
-                {{ this.pwinfo.id == '' ? txt.add : txt.reset }}
+                {{ this.pwinfo.id == '' ? txt.add : txt.change }}
               </button>
             </div>
           </div>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -2779,6 +2779,13 @@ td.indented {
 }
 .invalid-feedback {
   font-size: 1em;
+  color: var(--cmg-color-red-002);
+}
+.form-control.is-invalid, 
+.was-validated .form-control:invalid {
+  border-color: var(--cmg-color-red-002);
+  /* The following is an override to change the color of the SVG output from _forms.scss - for accessibility color contrast */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23cc0000' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23cc0000' stroke='none'/%3e%3c/svg%3e");
 }
 /* SELF-SERVICE WIDGETS (PLUGIN) Common Styles */
 .cm-ssw {
@@ -2855,6 +2862,9 @@ ul.cm-ssw-field-list ul.dropdown-menu button.btn {
   margin-left: 0;
   top: 0;
 }
+.cm-ssw-password-message {
+  padding: 0 1em;
+}
 .cm-ssw .alert {
   margin-bottom: 0;
   border-radius: 0;