[Summary view] [Print] [Text view]

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