[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/application-passwords.js
   3   */
   4  
   5  /**
   6   * Handles the Application Passwords functionality in the user profile screen.
   7   *
   8   * @param {JQueryStatic} $ The jQuery object.
   9   */
  10  ( function( $ ) {
  11      var $appPassSection = $( '#application-passwords-section' ),
  12          $newAppPassForm = $appPassSection.find( '.create-application-password' ),
  13          $newAppPassField = $newAppPassForm.find( '.input' ),
  14          $newAppPassButton = $newAppPassForm.find( '.button' ),
  15          $appPassTwrapper = $appPassSection.find( '.application-passwords-list-table-wrapper' ),
  16          $appPassTbody = $appPassSection.find( 'tbody' ),
  17          $appPassTrNoItems = $appPassTbody.find( '.no-items' ),
  18          $removeAllBtn = $( '#revoke-all-application-passwords' ),
  19          tmplNewAppPass = wp.template( 'new-application-password' ),
  20          tmplAppPassRow = wp.template( 'application-password-row' ),
  21          userId = $( '#user_id' ).val();
  22  
  23      $newAppPassButton.on( 'click', function( e ) {
  24          e.preventDefault();
  25  
  26          if ( $newAppPassButton.prop( 'aria-disabled' ) ) {
  27              return;
  28          }
  29  
  30          var name = $newAppPassField.val();
  31  
  32          if ( 0 === name.length ) {
  33              $newAppPassField.trigger( 'focus' );
  34              return;
  35          }
  36  
  37          clearNotices();
  38          $newAppPassButton.prop( 'aria-disabled', true ).addClass( 'disabled' );
  39  
  40          var request = {
  41              name: name
  42          };
  43  
  44          /**
  45           * Filters the request data used to create a new Application Password.
  46           *
  47           * @since 5.6.0
  48           *
  49           * @param {Object} request The request data.
  50           * @param {number} userId  The id of the user the password is added for.
  51           */
  52          request = wp.hooks.applyFilters( 'wp_application_passwords_new_password_request', request, userId );
  53  
  54          wp.apiRequest( {
  55              path: '/wp/v2/users/' + userId + '/application-passwords?_locale=user',
  56              method: 'POST',
  57              data: request
  58          } ).always( function() {
  59              $newAppPassButton.removeProp( 'aria-disabled' ).removeClass( 'disabled' );
  60          } ).done( function( response ) {
  61              $newAppPassField.val( '' );
  62              $newAppPassButton.prop( 'disabled', false );
  63  
  64              $newAppPassForm.after( tmplNewAppPass( {
  65                  name: response.name,
  66                  password: response.password
  67              } ) );
  68              $( '.new-application-password-notice' ).attr( 'tabindex', '-1' ).trigger( 'focus' );
  69  
  70              $appPassTbody.prepend( tmplAppPassRow( response ) );
  71  
  72              $appPassTwrapper.show();
  73              $appPassTrNoItems.remove();
  74  
  75              /**
  76               * Fires after an application password has been successfully created.
  77               *
  78               * @since 5.6.0
  79               *
  80               * @param {Object} response The response data from the REST API.
  81               * @param {Object} request  The request data used to create the password.
  82               */
  83              wp.hooks.doAction( 'wp_application_passwords_created_password', response, request );
  84          } ).fail( handleErrorResponse );
  85      } );
  86  
  87      $appPassTbody.on( 'click', '.delete', function( e ) {
  88          e.preventDefault();
  89  
  90          if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke this password? This action cannot be undone.' ) ) ) {
  91              return;
  92          }
  93  
  94          var $submitButton = $( this ),
  95              $tr = $submitButton.closest( 'tr' ),
  96              uuid = $tr.data( 'uuid' );
  97  
  98          clearNotices();
  99          $submitButton.prop( 'disabled', true );
 100  
 101          wp.apiRequest( {
 102              path: '/wp/v2/users/' + userId + '/application-passwords/' + uuid + '?_locale=user',
 103              method: 'DELETE'
 104          } ).always( function() {
 105              $submitButton.prop( 'disabled', false );
 106          } ).done( function( response ) {
 107              if ( response.deleted ) {
 108                  if ( 0 === $tr.siblings().length ) {
 109                      $appPassTwrapper.hide();
 110                  }
 111                  $tr.remove();
 112  
 113                  addNotice( wp.i18n.__( 'Application password revoked.' ), 'success' ).trigger( 'focus' );
 114              }
 115          } ).fail( handleErrorResponse );
 116      } );
 117  
 118      $removeAllBtn.on( 'click', function( e ) {
 119          e.preventDefault();
 120  
 121          if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke all passwords? This action cannot be undone.' ) ) ) {
 122              return;
 123          }
 124  
 125          var $submitButton = $( this );
 126  
 127          clearNotices();
 128          $submitButton.prop( 'disabled', true );
 129  
 130          wp.apiRequest( {
 131              path: '/wp/v2/users/' + userId + '/application-passwords?_locale=user',
 132              method: 'DELETE'
 133          } ).always( function() {
 134              $submitButton.prop( 'disabled', false );
 135          } ).done( function( response ) {
 136              if ( response.deleted ) {
 137                  $appPassTbody.children().remove();
 138                  $appPassSection.children( '.new-application-password' ).remove();
 139                  $appPassTwrapper.hide();
 140  
 141                  addNotice( wp.i18n.__( 'All application passwords revoked.' ), 'success' ).trigger( 'focus' );
 142              }
 143          } ).fail( handleErrorResponse );
 144      } );
 145  
 146      $appPassSection.on( 'click', '.notice-dismiss', function( e ) {
 147          e.preventDefault();
 148          var $el = $( this ).parent();
 149          $el.removeAttr( 'role' );
 150          $el.fadeTo( 100, 0, function () {
 151              $el.slideUp( 100, function () {
 152                  $el.remove();
 153                  $newAppPassField.trigger( 'focus' );
 154              } );
 155          } );
 156      } );
 157  
 158      $newAppPassField.on( 'keypress', function ( e ) {
 159          if ( 13 === e.which ) {
 160              e.preventDefault();
 161              $newAppPassButton.trigger( 'click' );
 162          }
 163      } );
 164  
 165      // If there are no items, don't display the table yet.  If there are, show it.
 166      if ( 0 === $appPassTbody.children( 'tr' ).not( $appPassTrNoItems ).length ) {
 167          $appPassTwrapper.hide();
 168      }
 169  
 170      /**
 171       * Handles an error response from the REST API.
 172       *
 173       * @since 5.6.0
 174       *
 175       * @param {jqXHR}  xhr         The XHR object from the ajax call.
 176       * @param {string} textStatus  The string categorizing the ajax request's status.
 177       * @param {string} errorThrown The HTTP status error text.
 178       */
 179  	function handleErrorResponse( xhr, textStatus, errorThrown ) {
 180          var errorMessage = errorThrown;
 181  
 182          if ( xhr.responseJSON && xhr.responseJSON.message ) {
 183              errorMessage = xhr.responseJSON.message;
 184          }
 185  
 186          addNotice( errorMessage, 'error' );
 187      }
 188  
 189      /**
 190       * Displays a message in the Application Passwords section.
 191       *
 192       * @since 5.6.0
 193       *
 194       * @param {string} message The message to display.
 195       * @param {string} type    The notice type. Either 'success' or 'error'.
 196       * @return {jQuery} The notice element.
 197       */
 198  	function addNotice( message, type ) {
 199          var $notice = $( '<div></div>' )
 200              .attr( 'role', 'alert' )
 201              .attr( 'tabindex', '-1' )
 202              .addClass( 'is-dismissible notice notice-' + type )
 203              .append( $( '<p></p>' ).text( message ) )
 204              .append(
 205                  $( '<button></button>' )
 206                      .attr( 'type', 'button' )
 207                      .addClass( 'notice-dismiss' )
 208                      .append( $( '<span></span>' ).addClass( 'screen-reader-text' ).text( wp.i18n.__( 'Dismiss this notice.' ) ) )
 209              );
 210  
 211          $newAppPassForm.after( $notice );
 212  
 213          return $notice;
 214      }
 215  
 216      /**
 217       * Clears notice messages from the Application Passwords section.
 218       *
 219       * @since 5.6.0
 220       */
 221  	function clearNotices() {
 222          $( '.notice', $appPassSection ).remove();
 223      }
 224  }( jQuery ) );