Better External Link Validation

apps/frontend/src/components/LinkCheckMessage.vue

@@ -0,0 +1,29 @@
+<template>
+	<div
+		v-if="check && check.severity !== 'valid'"
+		class="flex w-full items-center gap-1.5"
+		:class="check.severity === 'error' ? 'text-red' : 'text-orange'"
+	>
+		<component :is="icon" class="my-auto" />
+		{{ message }}
+	</div>
+</template>
+
+<script setup>
+import { TriangleAlertIcon, XCircleIcon } from '@modrinth/assets'
+import { useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+
+const props = defineProps({
+	check: { type: Object, default: null },
+})
+
+const { formatMessage } = useVIntl()
+
+const icon = computed(() => (props.check?.severity === 'error' ? XCircleIcon : TriangleAlertIcon))
+
+const message = computed(() => {
+	if (!props.check?.message) return undefined
+	return formatMessage(props.check.message, props.check.values)
+})
+</script>

apps/frontend/src/pages/[type]/[project]/settings/license.vue

@@ -72,7 +72,7 @@
 					</span>
 				</label>
 
-				<div class="w-1/2">
+				<div class="flex w-1/2 flex-col gap-2">
 					<StyledInput
 						id="license-url"
 						v-model="current.licenseUrl"
@@ -84,6 +84,7 @@
 						:disabled="!hasPermission || licenseId === 'LicenseRef-Unknown'"
 						wrapper-class="w-full"
 					/>
+					<LinkCheckMessage :check="effectiveLicenseCheck" />
 				</div>
 			</div>
 
@@ -145,7 +146,8 @@
 				!(
 					current.license.friendly === 'Custom' &&
 					(current.license.short === '' || current.licenseUrl === '')
-				)
+				) &&
+				effectiveLicenseCheck?.severity !== 'error'
 			"
 			@reset="reset"
 			@save="save"
@@ -154,6 +156,7 @@
 </template>
 
 <script setup lang="ts">
+import { useLinkCheck } from '@modrinth/moderation'
 import {
 	Checkbox,
 	Combobox,
@@ -168,6 +171,8 @@ import {
 import { builtinLicenses, formatProjectType, TeamMemberPermission } from '@modrinth/utils'
 import { computed } from 'vue'
 
+import LinkCheckMessage from '@/components/LinkCheckMessage.vue'
+
 const { projectV2: project, currentMember, patchProject } = injectProjectPageContext()
 
 const licenseOptions: ComboboxOption<string>[] = builtinLicenses.map((license) => ({
@@ -224,6 +229,15 @@ const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	},
 )
 
+const effectiveLicenseCheck = useLinkCheck(
+	computed(() => ({
+		field: 'license',
+		url: current.value.licenseUrl,
+		expectedLicense: current.value.license.short,
+		isCustom: current.value.license.friendly === 'Custom',
+	})),
+)
+
 const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
 
 const selectedLicense = computed({