resources/src/mediawiki.special.block/components/AdditionalDetailsField.vue

   1 <template>
   2         <cdx-field :is-fieldset="true">
   3                 <cdx-checkbox
   4                         v-if="autoBlockVisible"
   5                         v-model="autoBlock"
   6                         input-value="wpAutoBlock"
   7                 >
   8                         {{ $i18n( 'ipbenableautoblock', autoBlockExpiry ) }}
   9                 </cdx-checkbox>
  10                 <cdx-checkbox
  11                         v-if="hideNameVisible"
  12                         v-model="hideName"
  13                         input-value="wpHideUser"
  14                         class="mw-block-hideuser"
  15                 >
  16                         {{ $i18n( 'ipbhidename' ) }}
  17                 </cdx-checkbox>
  18                 <cdx-checkbox
  19                         v-model="watchUser"
  20                         input-value="wpWatch"
  21                 >
  22                         {{ $i18n( 'ipbwatchuser' ) }}
  23                 </cdx-checkbox>
  24                 <cdx-checkbox
  25                         v-if="hardBlockVisible"
  26                         v-model="hardBlock"
  27                         input-value="wpHardBlock"
  28                         class="mw-block-hardblock"
  29                 >
  30                         {{ $i18n( 'ipb-hardblock' ) }}
  31                 </cdx-checkbox>
  32                 <template #label>
  33                         {{ $i18n( 'block-options' ).text() }}
  34                         <span class="cdx-label__label__optional-flag">
  35                                 {{ $i18n( 'htmlform-optional-flag' ).text() }}
  36                         </span>
  37                 </template>
  38         </cdx-field>
  39 </template>
  40
  41 <script>
  42 const { computed, defineComponent } = require( 'vue' );
  43 const { storeToRefs } = require( 'pinia' );
  44 const { CdxCheckbox, CdxField } = require( '@wikimedia/codex' );
  45 const useBlockStore = require( '../stores/block.js' );
  46
  47 /**
  48  * The 'additional details' (aka 'block options') section contains:
  49  *  - AutoBlock (if the target is not an IP)
  50  *  - HideUser/HideName (if the user has the hideuser right, and the target is not an IP)
  51  *  - Watch (if the user is logged in)
  52  *  - HardBlock (if the target is an IP)
  53  */
  54
  55 module.exports = exports = defineComponent( {
  56         name: 'AdditionalDetailsField',
  57         components: { CdxCheckbox, CdxField },
  58         setup() {
  59                 const store = useBlockStore();
  60                 const {
  61                         autoBlock,
  62                         hideName,
  63                         hideNameVisible,
  64                         watchUser,
  65                         hardBlock
  66                 } = storeToRefs( store );
  67                 const autoBlockExpiry = mw.config.get( 'blockAutoblockExpiry' ) || '';
  68                 const autoBlockVisible = computed(
  69                         () => !mw.util.isIPAddress( store.targetUser, true )
  70                 );
  71                 const hardBlockVisible = computed(
  72                         () => mw.util.isIPAddress( store.targetUser, true ) || false
  73                 );
  74
  75                 return {
  76                         autoBlock,
  77                         autoBlockExpiry,
  78                         autoBlockVisible,
  79                         hideName,
  80                         hideNameVisible,
  81                         watchUser,
  82                         hardBlock,
  83                         hardBlockVisible
  84                 };
  85         }
  86 } );
  87 </script>