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({