Use the new ConfirmModal (#3458)

* style: copy from old modal

* chore: move to new modals

* eslint: fix sorting

---------

Signed-off-by: Aaron Müller <160637865+amueller0@users.noreply.github.com>

apps/frontend/src/components/ui/ModalConfirm.vue

@@ -1,126 +0,0 @@
-<template>
-  <Modal ref="modal" :header="title">
-    <div class="modal-delete">
-      <div class="markdown-body" v-html="renderString(description)" />
-      <label v-if="hasToType" for="confirmation" class="confirmation-label">
-        <span>
-          <strong>To verify, type</strong>
-          <em class="confirmation-text">{{ confirmationText }}</em>
-          <strong>below:</strong>
-        </span>
-      </label>
-      <div class="confirmation-input">
-        <input
-          v-if="hasToType"
-          id="confirmation"
-          v-model="confirmation_typed"
-          type="text"
-          placeholder="Type here..."
-          @input="type"
-        />
-      </div>
-      <div class="button-group">
-        <button class="iconified-button" @click="cancel">
-          <XIcon />
-          Cancel
-        </button>
-        <button class="iconified-button danger-button" :disabled="action_disabled" @click="proceed">
-          <TrashIcon />
-          {{ proceedLabel }}
-        </button>
-      </div>
-    </div>
-  </Modal>
-</template>
-
-<script>
-import { renderString } from "@modrinth/utils";
-import { TrashIcon, XIcon } from "@modrinth/assets";
-import Modal from "~/components/ui/Modal.vue";
-
-export default {
-  components: {
-    XIcon,
-    TrashIcon,
-    Modal,
-  },
-  props: {
-    confirmationText: {
-      type: String,
-      default: "",
-    },
-    hasToType: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: "No title defined",
-      required: true,
-    },
-    description: {
-      type: String,
-      default: "No description defined",
-      required: true,
-    },
-    proceedLabel: {
-      type: String,
-      default: "Proceed",
-    },
-  },
-  emits: ["proceed"],
-  data() {
-    return {
-      action_disabled: this.hasToType,
-      confirmation_typed: "",
-    };
-  },
-  methods: {
-    renderString,
-    cancel() {
-      this.$refs.modal.hide();
-    },
-    proceed() {
-      this.$refs.modal.hide();
-      this.$emit("proceed");
-    },
-    type() {
-      if (this.hasToType) {
-        this.action_disabled =
-          this.confirmation_typed.toLowerCase() !== this.confirmationText.toLowerCase();
-      }
-    },
-    show() {
-      this.$refs.modal.show();
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.modal-delete {
-  padding: var(--spacing-card-bg);
-  display: flex;
-  flex-direction: column;
-
-  .markdown-body {
-    margin-bottom: 1rem;
-  }
-
-  .confirmation-label {
-    margin-bottom: 0.5rem;
-  }
-
-  .confirmation-text {
-    padding-right: 0.25ch;
-    margin: 0 0.25rem;
-  }
-
-  .confirmation-input {
-    input {
-      width: 20rem;
-      max-width: 100%;
-    }
-  }
-}
-</style>

apps/frontend/src/pages/[type]/[id]/settings/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ModalConfirm
+    <ConfirmModal
       ref="modal_confirm"
       title="Are you sure you want to delete this project?"
       description="If you proceed, all versions and any attached data will be removed from our servers. This may break other projects, so be careful."
@@ -242,8 +242,8 @@
 import { formatProjectStatus } from "@modrinth/utils";
 import { UploadIcon, SaveIcon, TrashIcon, XIcon, IssuesIcon, CheckIcon } from "@modrinth/assets";
 import { Multiselect } from "vue-multiselect";
+import { ConfirmModal } from "@modrinth/ui";
 import Avatar from "~/components/ui/Avatar.vue";
-import ModalConfirm from "~/components/ui/ModalConfirm.vue";
 import FileInput from "~/components/ui/FileInput.vue";
 
 const props = defineProps({

apps/frontend/src/pages/[type]/[id]/settings/members.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ModalConfirm
+    <ConfirmModal
       ref="modal_remove"
       title="Are you sure you want to remove this project from the organization?"
       description="If you proceed, this project will no longer be managed by the organization."
@@ -530,8 +530,7 @@ import {
   OrganizationIcon,
   CrownIcon,
 } from "@modrinth/assets";
-import { Avatar, Badge, Card, Checkbox } from "@modrinth/ui";
+import { Avatar, Badge, Card, Checkbox, ConfirmModal } from "@modrinth/ui";
-import ModalConfirm from "~/components/ui/ModalConfirm.vue";
 import { removeSelfFromTeam } from "~/helpers/teams.js";
 
 const props = defineProps({

apps/frontend/src/pages/settings/account.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ModalConfirm
+    <ConfirmModal
       ref="modal_confirm"
       title="Are you sure you want to delete your account?"
       description="This will **immediately delete all of your user data and follows**. This will not delete your projects. Deleting your account cannot be reversed.<br><br>If you need help with your account, get support on the [Modrinth Discord](https://discord.modrinth.com)."
@@ -421,6 +421,7 @@ import {
   DownloadIcon,
 } from "@modrinth/assets";
 import QrcodeVue from "qrcode.vue";
+import { ConfirmModal } from "@modrinth/ui";
 import GitHubIcon from "assets/icons/auth/sso-github.svg";
 import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
 import GoogleIcon from "assets/icons/auth/sso-google.svg";
@@ -428,7 +429,6 @@ import SteamIcon from "assets/icons/auth/sso-steam.svg";
 import DiscordIcon from "assets/icons/auth/sso-discord.svg";
 import KeyIcon from "assets/icons/auth/key.svg";
 import GitLabIcon from "assets/icons/auth/sso-gitlab.svg";
-import ModalConfirm from "~/components/ui/ModalConfirm.vue";
 import Modal from "~/components/ui/Modal.vue";
 
 useHead({