feat: Add extra confirmation step to "block domain" (#3520)

app/components/modal/ModalConfirm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ConfirmDialogChoice, ConfirmDialogOptions } from '#shared/types'
 
-const { extraOptionType } = defineProps<ConfirmDialogOptions>()
+const { extraOptionType, domainToBlock } = defineProps<ConfirmDialogOptions>()
 
 const emit = defineEmits<{
   (evt: 'choice', choice: ConfirmDialogChoice): void
@@ -13,17 +13,31 @@ const duration = ref(60 * 60) // default to 1 hour
 const shouldMuteNotifications = ref(true)
 const isMute = computed(() => extraOptionType === 'mute')
 
+const domainInput = ref('')
+const isBlockDomain = computed(() => extraOptionType === 'block_domain')
+const isDomainConfirmed = computed(() => domainInput.value === domainToBlock)
+
 function handleChoice(choice: ConfirmDialogChoice['choice']) {
-  const dialogChoice = {
+  const dialogChoice: ConfirmDialogChoice = {
     choice,
-    ...isMute.value && {
-      extraOptions: {
-        mute: {
-          duration: hasDuration.value ? duration.value : 0,
-          notifications: shouldMuteNotifications.value,
-        },
+  }
+
+  if (isMute.value) {
+    dialogChoice.extraOptions = {
+      mute: {
+        duration: hasDuration.value ? duration.value : 0,
+        notifications: shouldMuteNotifications.value,
       },
-    },
+    }
+  }
+
+  if (isBlockDomain.value) {
+    dialogChoice.extraOptions = {
+      ...dialogChoice.extraOptions,
+      block_domain: {
+        confirmed: isDomainConfirmed.value,
+      },
+    }
   }
 
   emit('choice', dialogChoice)
@@ -44,11 +58,24 @@ function handleChoice(choice: ConfirmDialogChoice['choice']) {
       <CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
     </div>
 
+    <div v-if="isBlockDomain" flex-col flex gap-2>
+      <label text-sm text-secondary>
+        {{ $t('confirm.block_domain.type_to_confirm', [domainToBlock]) }}
+      </label>
+      <input
+        v-model="domainInput"
+        type="text"
+        :placeholder="domainToBlock"
+        class="px-3 py-2 border border-base rounded"
+        autocomplete="off"
+      >
+    </div>
+
     <div flex justify-end gap-2>
       <button btn-text @click="handleChoice('cancel')">
         {{ cancel || $t('confirm.common.cancel') }}
       </button>
-      <button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
+      <button btn-solid :disabled="!isValidDuration || (isBlockDomain && !isDomainConfirmed)" @click="handleChoice('confirm')">
         {{ confirm || $t('confirm.common.confirm') }}
       </button>
     </div>

app/composables/masto/relationship.ts

@@ -88,8 +88,8 @@ export async function toggleMuteAccount(relationship: mastodon.v1.Relationship,
     if (confirmMute.choice !== 'confirm')
       return
 
-    duration = confirmMute.extraOptions!.mute.duration
-    notifications = confirmMute.extraOptions!.mute.notifications
+    duration = confirmMute.extraOptions?.mute?.duration ?? 0
+    notifications = confirmMute.extraOptions?.mute?.notifications ?? true
   }
 
   relationship!.muting = !relationship!.muting
@@ -125,11 +125,14 @@ export async function toggleBlockDomain(relationship: mastodon.v1.Relationship,
   const i18n = useNuxtApp().$i18n
 
   if (!relationship!.domainBlocking) {
+    const domain = getServerName(account)
     const confirmDomainBlock = await openConfirmDialog({
       title: i18n.t('confirm.block_domain.title'),
-      description: i18n.t('confirm.block_domain.description', [getServerName(account)]),
+      description: i18n.t('confirm.block_domain.description', [domain]),
       confirm: i18n.t('confirm.block_domain.confirm'),
       cancel: i18n.t('confirm.block_domain.cancel'),
+      extraOptionType: 'block_domain',
+      domainToBlock: domain,
     })
     if (confirmDomainBlock.choice !== 'confirm')
       return

locales/en.json

@@ -136,8 +136,9 @@
     "block_domain": {
       "cancel": "Cancel",
       "confirm": "Block",
-      "description": "Are you sure you want to block {0}?",
-      "title": "Block domain"
+      "description": "Are you sure you want to block {0}? This will block all users on this domain and permanently remove follows/followers.",
+      "title": "Block domain",
+      "type_to_confirm": "Type {0} to confirm"
     },
     "common": {
       "cancel": "No",

shared/types/index.ts

@@ -64,15 +64,19 @@ export interface ConfirmDialogOptions {
   description?: string
   confirm?: string
   cancel?: string
-  extraOptionType?: 'mute'
+  extraOptionType?: 'mute' | 'block_domain'
+  domainToBlock?: string
 }
 export interface ConfirmDialogChoice {
   choice: 'confirm' | 'cancel'
   extraOptions?: {
-    mute: {
+    mute?: {
       duration: number
       notifications: boolean
     }
+    block_domain?: {
+      confirmed: boolean
+    }
   }
 }