feat: malware warning modal changes

apps/app-frontend/src/App.vue

@@ -855,12 +855,13 @@ async function handleCommand(e) {
 		if (e.path.endsWith('.mrpack')) {
 			const location = { type: 'fromFile', path: e.path }
 			const preview = await install_get_modpack_preview(location).catch(handleError)
-			if (preview?.unknownFile) {
+			if (preview?.unknownFile || preview?.externalFilesInModpack.length > 0) {
 				const splitPath = e.path.split(/[\\/]/)
 				const fileName = splitPath ? splitPath[splitPath.length - 1] : e.path
 				unknownPackWarningModal.value?.show(
 					() => install_create_modpack_instance(location).then(() => undefined),
 					fileName,
+					preview.externalFilesInModpack,
 				)
 			} else {
 				await install_create_modpack_instance(location).catch(handleError)
@@ -1736,8 +1737,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		@create-anyway="handleContentInstallModpackDuplicateCreateAnyway"
 		@go-to-instance="handleContentInstallModpackDuplicateGoToInstance"
 	/>
-	<InstallToPlayModal ref="installToPlayModal" />
-	<UpdateToPlayModal ref="updateToPlayModal" />
+	<InstallToPlayModal ref="installToPlayModal" :show-external-warnings="false" />
+	<UpdateToPlayModal ref="updateToPlayModal" :show-external-warnings="false" />
 </template>
 
 <style lang="scss" scoped>

apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue

@@ -1,108 +1,41 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" :on-hide="reset">
-		<div class="max-w-[31rem] flex flex-col gap-6">
-			<Admonition
-				type="warning"
-				:header="formatMessage(messages.warningTitle)"
-				:body="formatMessage(messages.warningBody)"
-			/>
-			<div v-if="fileName" class="overflow-x-auto whitespace-nowrap text-sm text-secondary">
-				{{ fileName }}
-			</div>
-			<div>
-				<p class="mt-0 leading-tight">
-					{{ formatMessage(messages.body) }}
-				</p>
-				<p class="text-orange font-semibold mb-0 leading-tight">
-					{{ formatMessage(messages.malwareStatement) }}
-				</p>
-			</div>
-			<Checkbox v-model="dontShowAgain" :label="formatMessage(messages.dontShowAgain)" />
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="cancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button :disabled="isProceeding" @click="proceed">
-						<SpinnerIcon v-if="isProceeding" class="animate-spin" />
-						<CircleArrowRightIcon v-else />
-						{{ formatMessage(messages.installAnyway) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</NewModal>
+	<UnknownFileWarningModal
+		ref="modal"
+		:mode="externalFilesInModpack.length > 0 ? 'modpack' : 'mod'"
+		:file-name="fileName"
+		:external-files-in-modpack="externalFilesInModpack"
+		@cancel="reset"
+		@continue="proceed"
+	/>
 </template>
 
 <script setup lang="ts">
-import { CircleArrowRightIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	ButtonStyled,
-	Checkbox,
-	commonMessages,
-	defineMessages,
-	NewModal,
-	useVIntl,
-} from '@modrinth/ui'
+import { UnknownFileWarningModal } from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'
 
 import { get as getSettings, set as setSettings } from '@/helpers/settings'
 import { useTheming } from '@/store/state'
 import type { FeatureFlag } from '@/store/theme.ts'
 
-const { formatMessage } = useVIntl()
 const themeStore = useTheming()
 const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
 
-const dontShowAgain = ref(false)
 const modal = useTemplateRef('modal')
 const onProceed = ref<() => Promise<void>>()
-const isProceeding = ref(false)
 const fileName = ref('')
+const externalFilesInModpack = ref<string[]>([])
 
-const messages = defineMessages({
-	header: {
-		id: 'unknown-pack-warning-modal.header',
-		defaultMessage: 'Confirm installation',
-	},
-	warningTitle: {
-		id: 'unknown-pack-warning-modal.warning.title',
-		defaultMessage: 'Unknown file warning',
-	},
-	warningBody: {
-		id: 'unknown-pack-warning-modal.warning.body',
-		defaultMessage: `We couldn't find this file on Modrinth. We strongly recommend only installing files from sources you trust.`,
-	},
-	body: {
-		id: 'unknown-pack-warning-modal.body',
-		defaultMessage: `A file is only reviewed if it’s uploaded to Modrinth, regardless of its file format (including .mrpack).`,
-	},
-	malwareStatement: {
-		id: 'unknown-pack-warning-modal.malware-statement',
-		defaultMessage: `Malware is often distributed through modpack files by sharing them on platforms like Discord.`,
-	},
-	dontShowAgain: {
-		id: 'unknown-pack-warning-modal.dont-show-again',
-		defaultMessage: `Don't show this warning again`,
-	},
-	installAnyway: {
-		id: 'unknown-pack-warning-modal.install-anyway',
-		defaultMessage: `Install anyway`,
-	},
-})
-
-function show(createInstance: () => Promise<void>, selectedFileName = '') {
+function show(
+	createInstance: () => Promise<void>,
+	selectedFileName = '',
+	selectedExternalFiles: string[] = [],
+) {
 	onProceed.value = createInstance
 	fileName.value = selectedFileName
-	dontShowAgain.value = false
+	externalFilesInModpack.value = selectedExternalFiles
 
 	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
-		// noinspection ES6MissingAwait
-		createInstance()
+		void createInstance()
 		return
 	}
 
@@ -112,28 +45,20 @@ function show(createInstance: () => Promise<void>, selectedFileName = '') {
 function reset() {
 	onProceed.value = undefined
 	fileName.value = ''
+	externalFilesInModpack.value = []
 }
 
-function cancel() {
-	modal.value?.hide()
-}
-
-async function proceed() {
-	if (!onProceed.value) {
-		return
-	}
-
-	if (dontShowAgain.value) {
+async function proceed(dontShowAgain: boolean) {
+	if (dontShowAgain) {
 		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
 		const settings = await getSettings()
 		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
 		await setSettings(settings)
 	}
 
 	const createInstance = onProceed.value
-	modal.value?.hide()
-	// noinspection ES6MissingAwait
-	createInstance()
+	reset()
+	if (createInstance) void createInstance()
 }
 
 defineExpose({ show })