[Summary view] [Print] [Text view]

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