feat: register T0

web/src/components/PasswordStrengthHint.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface PasswordRule {
+	label: string
+	met: boolean
+}
+
+const props = defineProps<{
+	rules: PasswordRule[]
+	showErrors: boolean
+}>()
+
+function itemClass(rule: PasswordRule) {
+	if (rule.met) {
+		return 'text-success'
+	}
+	return props.showErrors ? 'text-error' : 'text-toned'
+}
+
+function itemIcon(rule: PasswordRule) {
+	if (rule.met) {
+		return 'i-lucide-circle-check'
+	}
+	return props.showErrors ? 'i-lucide-circle-alert' : 'i-lucide-circle'
+}
+
+const items = computed(() =>
+	props.rules.map((rule) => ({
+		...rule,
+		classes: itemClass(rule),
+		icon: itemIcon(rule),
+	})),
+)
+</script>
+
+<template>
+	<ul class="flex flex-col gap-1">
+		<li
+			v-for="item in items"
+			:key="item.label"
+			:class="['flex items-center gap-1.5 text-sm', item.classes]"
+		>
+			<UIcon :name="item.icon" class="shrink-0" />
+			{{ item.label }}
+			<span class="sr-only">{{ item.met ? 'met' : 'not met' }}</span>
+		</li>
+	</ul>
+</template>