feat: add new checkbox to confirm inability to recreate space with sa…

…me name (#4515)

* feat: add new checkbox to confirm inability to recreate space with same name

* fix: fix label

* fix: improve space deletion confirmation message

src/locales/default.json

@@ -372,7 +372,7 @@
   "settings": {
     "header": "Settings",
     "confirmLeaveMessage": " Do you really want to leave? You have unsaved changes that will be lost.",
-    "confirmDeleteSpace": " Do you really want to delete this space? This action cannot be undone and you will not be able to create a new space with the same ENS domain name.",
+    "confirmDeleteSpace": " Do you really want to delete this space? This action cannot be undone and you will not be able to use {name} again to create another space.",
     "validationErrorsMessage": "Please fix the following fields before saving:",
     "confirmInputDeleteSpace": "Enter {space} to continue:",
     "noticeSavedTitle": "Settings saved",

src/views/SpaceSettings.vue

@@ -69,6 +69,7 @@ const loaded = ref(false);
 const modalControllerEditOpen = ref(false);
 const currentPage = ref(Page.GENERAL);
 const modalDeleteSpaceConfirmation = ref('');
+const modalDeleteSpaceAcknowledge = ref(false);
 const modalSettingsSavedOpen = ref(false);
 const modalSettingsSavedIgnore = useStorage(
   'snapshot.settings.saved.ignore',
@@ -115,11 +116,12 @@ const settingsPages = computed(() => [
 
 async function handleDelete() {
   modalDeleteSpaceConfirmation.value = '';
+  modalDeleteSpaceAcknowledge.value = false;
 
   const result = await send(props.space, 'delete-space', {});
   console.log(':handleDelete result', result);
 
-  if (result && result.id) {
+  if (result?.id) {
     if (domain) {
       return window.open(`https://snapshot.org/#/`, '_self');
     } else {
@@ -399,13 +401,16 @@ onBeforeRouteLeave(async () => {
     />
     <ModalConfirmAction
       :open="isConfirmDeleteOpen"
-      :disabled="modalDeleteSpaceConfirmation !== space.id"
+      :disabled="
+        modalDeleteSpaceConfirmation !== space.id ||
+        !modalDeleteSpaceAcknowledge
+      "
       show-cancel
       @close="cancelDelete"
       @confirm="handleDelete"
     >
-      <BaseMessageBlock level="warning" class="m-4">
-        {{ $t('settings.confirmDeleteSpace') }}
+      <BaseMessageBlock level="warning-red" class="m-4">
+        {{ $t('settings.confirmDeleteSpace', { name: space.id }) }}
       </BaseMessageBlock>
       <div class="px-4 pb-4">
         <BaseInput
@@ -414,6 +419,12 @@ onBeforeRouteLeave(async () => {
           focus-on-mount
         >
         </BaseInput>
+        <TuneCheckbox
+          id="space-delete-acknowledge"
+          v-model="modalDeleteSpaceAcknowledge"
+          :hint="`I acknowledge that I will not be able to use ${space.id} again to create a new space.`"
+          class="mt-3"
+        />
       </div>
     </ModalConfirmAction>
     <ModalNotice