resources/src/mediawiki.tempUserBanner/tempUserBanner.js

   1 /**
   2  * Behavior related to the temporary user banner, specifically
   3  * the tooltip. Design: https://phabricator.wikimedia.org/T330510
   4  *
   5  * @ignore
   6  */
   7
   8 $( () => {
   9
  10         const config = require( './config.json' ),
  11                 $tempUserBannerEl = $( '.mw-temp-user-banner ' ),
  12                 $tempUserBannerTooltipEl = $( '.mw-temp-user-banner-tooltip ' ),
  13                 $tempUserBannerTooltipButtonEl = $( '#mw-temp-user-banner-tooltip-button' ),
  14                 TTL_DAY_MS = 86400000;
  15
  16         /**
  17          * Get the time since the account was created
  18          *
  19          * @ignore
  20          * @return {number} The duration since it was created until "now" in milliseconds
  21          */
  22         function getTemporaryAccountDurationMs() {
  23                 return Date.now() - mw.user.getFirstRegistration().getTime();
  24         }
  25
  26         /**
  27          * Whether the account will expire within the period defined
  28          * by notifyBeforeExpirationDays in AutoCreateTempUser configuration
  29          *
  30          * @ignore
  31          * @return {boolean}
  32          */
  33         function isWithinExpirationNotificationPeriod() {
  34                 const expirationDurationMs = TTL_DAY_MS * config.AutoCreateTempUser.expireAfterDays;
  35                 const notificationDurationMs = TTL_DAY_MS * config.AutoCreateTempUser.notifyBeforeExpirationDays;
  36                 return getTemporaryAccountDurationMs() > ( expirationDurationMs - notificationDurationMs );
  37         }
  38
  39         /**
  40          * Get the time until the account will expire
  41          *
  42          * @ignore
  43          * @return {number} The duration from "now" until the account expiration in milliseconds
  44          */
  45         function getTimeToExpirationMs() {
  46                 return ( TTL_DAY_MS * config.AutoCreateTempUser.expireAfterDays ) - getTemporaryAccountDurationMs();
  47         }
  48
  49         /**
  50          * Whether the expiration tooltip should be shown. The following criteria
  51          * must be met:
  52          *  - Expiration is set in AutoCreateTempUser configuration (expireAfterDays)
  53          *  - The evaluated temporary account expiration is within the notification period
  54          *  as defined in AutoCreateTempUser configuration (notifyBeforeExpirationDays)
  55          *  - The user didn't proactively dismiss the tooltip clicking on the close button,
  56          *  see showTooltip()
  57          *
  58          * @ignore
  59          * @return {boolean}
  60          */
  61         function shouldShowExpirationAlert() {
  62                 const tempUserExpirationAlertDismissed = localStorage.getItem( 'tempUserExpirationAlertDismissed' );
  63                 const expirationIsSet = typeof config.AutoCreateTempUser.expireAfterDays === 'number';
  64                 const notifyBeforeExpirationIsSet = typeof config.AutoCreateTempUser.notifyBeforeExpirationDays === 'number';
  65                 return expirationIsSet &&
  66                         notifyBeforeExpirationIsSet &&
  67                         !tempUserExpirationAlertDismissed &&
  68                         isWithinExpirationNotificationPeriod();
  69         }
  70
  71         /**
  72          * Retrieve the expiration descriptive text
  73          *
  74          * @ignore
  75          * @return {string}
  76          */
  77         function getExpirationDescriptionText() {
  78                 const timeToExpirationDays = Math.floor( getTimeToExpirationMs() / TTL_DAY_MS );
  79                 const params = [ timeToExpirationDays ];
  80                 let key = 'temp-user-banner-tooltip-description-expiration-soon';
  81                 if ( timeToExpirationDays < 1 ) {
  82                         key += '-day';
  83                         params.pop();
  84                 }
  85                 // Messages that can be used here:
  86                 // * temp-user-banner-tooltip-description-expiration-soon
  87                 // * temp-user-banner-tooltip-description-expiration-soon-day
  88                 return mw.message( key, params ).parseDom();
  89         }
  90
  91         /**
  92          * Retrieve the tooltip content
  93          *
  94          * @ignore
  95          * @param {boolean} shouldShowExpiration
  96          * @return {jQuery}
  97          */
  98         function getTooltipContent( shouldShowExpiration ) {
  99                 const descriptionText = shouldShowExpiration ?
 100                         getExpirationDescriptionText() :
 101                         mw.message( 'temp-user-banner-tooltip-description-learn-more' ).parseDom();
 102                 return $( '<div>' ).append(
 103                         $( '<p>' ).append( descriptionText ),
 104                         $( '<p>' ).append( mw.message( 'temp-user-banner-tooltip-description-login' ).parseDom() )
 105                 );
 106         }
 107
 108         /**
 109          * Builds a tooltip which is part of a banner for temporary account (IP masking) users.
 110          *
 111          * @ignore
 112          * @param {jQuery} $bannerEl
 113          * @param {jQuery} $tooltipEl
 114          * @param {jQuery} $buttonEl
 115          */
 116         function initTempUserBannerTooltip( $bannerEl, $tooltipEl, $buttonEl ) {
 117                 if ( !$bannerEl.length || !$tooltipEl.length || !$buttonEl.length ) {
 118                         return;
 119                 }
 120
 121                 let popup;
 122
 123                 /**
 124                  * Creates the tooltip if it doesn't already exist and toggles it.
 125                  *
 126                  * @ignore
 127                  */
 128                 function showTooltip() {
 129                         return mw.loader.using( [
 130                                 'codex-styles',
 131                                 'oojs-ui-core',
 132                                 'oojs-ui-widgets',
 133                                 'oojs-ui.styles.icons-interactions'
 134                         ] ).then( () => {
 135                                 const shouldShowExpiration = shouldShowExpirationAlert();
 136                                 if ( !popup ) {
 137                                         popup = new OO.ui.PopupWidget( {
 138                                                 icon: 'clock',
 139                                                 padded: true,
 140                                                 head: true,
 141                                                 label: mw.msg( 'temp-user-banner-tooltip-title' ),
 142                                                 $content: getTooltipContent( shouldShowExpiration ),
 143                                                 autoClose: !shouldShowExpiration,
 144                                                 $autoCloseIgnore: $buttonEl,
 145                                                 $floatableContainer: $tooltipEl,
 146                                                 position: 'below'
 147                                         } );
 148                                         $tooltipEl.append( popup.$element );
 149
 150                                         if ( shouldShowExpiration ) {
 151                                                 popup.on( 'toggle', ( visible ) => {
 152                                                         if ( !visible ) {
 153                                                                 localStorage.setItem( 'tempUserExpirationAlertDismissed', true );
 154                                                                 popup = null;
 155                                                         }
 156                                                 } );
 157                                         }
 158                                 }
 159                                 popup.toggle();
 160                         } );
 161                 }
 162
 163                 $buttonEl.on( 'click', showTooltip );
 164
 165                 if ( shouldShowExpirationAlert() ) {
 166                         showTooltip();
 167                 }
 168         }
 169
 170         initTempUserBannerTooltip( $tempUserBannerEl, $tempUserBannerTooltipEl, $tempUserBannerTooltipButtonEl );
 171
 172 } );