Migrate to Turborepo (#1251)

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

@@ -0,0 +1,127 @@
+<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">
+          <CrossIcon />
+          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 CrossIcon from '~/assets/images/utils/x.svg?component'
+import TrashIcon from '~/assets/images/utils/trash.svg?component'
+import Modal from '~/components/ui/Modal.vue'
+
+export default {
+  components: {
+    CrossIcon,
+    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>