From 59d121db2c9629838b739fcca3e358f45f6a7556 Mon Sep 17 00:00:00 2001
From: Toby Nguyen <208221158+tobynguyen27@users.noreply.github.com>
Date: Mon, 23 Feb 2026 13:33:31 +0700
Subject: [PATCH 1/2] chore: replace valibot with arktype

---
 .vscode/settings.json                         |  1 +
 apps/frontend/package.json                    |  2 +-
 .../app/components/form/QrGeneratorForm.vue   | 14 ++---
 .../app/components/form/UrlShortenerForm.vue  | 54 +++++++------------
 pnpm-lock.yaml                                | 35 ++++++++++--
 5 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index aade13c..5e70447 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -15,6 +15,7 @@
 	"files.associations": {
 		"*.css": "tailwindcss"
 	},
+	"typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"],
 
 	"tailwindCSS.classAttributes": ["class", "ui"],
 	"tailwindCSS.experimental.classRegex": [["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]]
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 2b29eb5..c89b210 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -16,12 +16,12 @@
 		"@nuxt/ui": "^4.4.0",
 		"@nuxtjs/seo": "^3.4.0",
 		"@vueuse/integrations": "^14.2.1",
+		"arktype": "^2.1.29",
 		"dayjs": "^1.11.19",
 		"nuxt": "^4.3.1",
 		"qrcode": "^1.5.4",
 		"tailwindcss": "^4.2.0",
 		"ufo": "^1.6.3",
-		"valibot": "^1.2.0",
 		"vue": "^3.5.28",
 		"vue-router": "^4.6.4"
 	},
diff --git a/apps/frontend/src/app/components/form/QrGeneratorForm.vue b/apps/frontend/src/app/components/form/QrGeneratorForm.vue
index d601dfa..483a8e6 100644
--- a/apps/frontend/src/app/components/form/QrGeneratorForm.vue
+++ b/apps/frontend/src/app/components/form/QrGeneratorForm.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
 import { QrCodeModal } from "#components";
 import type { FormSubmitEvent } from "@nuxt/ui";
-import * as v from "valibot";
+import { type } from "arktype";
 
-const schema = v.object({
-	url: v.pipe(v.string("URL is required"), v.url("Invalid URL")),
+const schema = type({
+	url: "string.url",
 });
 
-const state = ref({
-	url: undefined,
+type Schema = typeof schema.infer;
+
+const state = ref<Schema>({
+	url: "",
 });
 
 const overlay = useOverlay();
 const modal = overlay.create(QrCodeModal);
 
-async function onSubmit(event: FormSubmitEvent<v.InferOutput<typeof schema>>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
 	event.preventDefault();
 
 	modal.open({
diff --git a/apps/frontend/src/app/components/form/UrlShortenerForm.vue b/apps/frontend/src/app/components/form/UrlShortenerForm.vue
index 46bec16..fe62757 100644
--- a/apps/frontend/src/app/components/form/UrlShortenerForm.vue
+++ b/apps/frontend/src/app/components/form/UrlShortenerForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import * as v from "valibot";
 import type { FormSubmitEvent, SelectItem } from "@nuxt/ui";
 import { ShortenedUrlModal } from "#components";
 import { joinURL } from "ufo";
+import { type } from "arktype";
 
 const selectItems: SelectItem[] = [
 	{
@@ -35,38 +35,22 @@ const selectItems: SelectItem[] = [
 	},
 ];
 
-const schema = v.object({
-	longUrl: v.pipe(
-		v.string(),
-		v.regex(
-			/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/,
-			"Invalid URL",
-		),
-	),
-	alias: v.optional(
-		v.pipe(
-			v.string(),
-			v.regex(/^[a-zA-Z0-9_-]*$/, "Invalid alias"),
-			v.minLength(7, "Alias must be at least 7 characters"),
-			v.maxLength(255, "Alias is too long"),
-		),
-	),
-	password: v.optional(
-		v.pipe(
-			v.string(),
-			v.minLength(3, "Password must be at least 3 characters"),
-			v.maxLength(255, "Password is too long"),
-		),
-	),
-	neverExpire: v.boolean(),
-	expireTime: v.number(),
-	expireUnit: v.pipe(v.string(), v.picklist(expireUnits)),
+const schema = type({
+	longUrl:
+		/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/,
+	"alias?": "'' | 7 <= string <= 255",
+	"password?": "'' | 3 <= string <= 255",
+	neverExpire: "boolean",
+	expireTime: "number",
+	expireUnit: "'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'",
 });
 
-const state = ref({
+type Schema = typeof schema.infer;
+
+const state = ref<Schema>({
 	longUrl: "",
-	alias: undefined,
-	password: undefined,
+	alias: "",
+	password: "",
 	neverExpire: true,
 	expireTime: 30,
 	expireUnit: "second",
@@ -80,15 +64,15 @@ const siteConfig = useSiteConfig();
 
 const modal = overlay.create(ShortenedUrlModal);
 
-async function onSubmit(event: FormSubmitEvent<v.InferOutput<typeof schema>>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
 	event.preventDefault();
 
 	const { longUrl, alias, neverExpire, password } = event.data;
 
 	const body: UrlShortenerBody = {
 		url: longUrl,
-		alias,
-		password,
+		alias: alias === "" ? undefined : alias,
+		password: password === "" ? undefined : password,
 		...(!neverExpire && {
 			expireTime: generateExpireTime(event.data.expireTime, event.data.expireUnit),
 		}),
@@ -106,8 +90,8 @@ async function onSubmit(event: FormSubmitEvent<v.InferOutput<typeof schema>>) {
 			});
 		} else {
 			toast.add({
-				title: error.data.error,
-				description: error.data.message,
+				title: error.data.title,
+				description: error.data.detail,
 				color: "error",
 			});
 		}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f17cd51..d857b8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,9 @@ importers:
       '@vueuse/integrations':
         specifier: ^14.2.1
         version: 14.2.1(fuse.js@7.1.0)(qrcode@1.5.4)(vue@3.5.28(typescript@5.9.2))
+      arktype:
+        specifier: ^2.1.29
+        version: 2.1.29
       dayjs:
         specifier: ^1.11.19
         version: 1.11.19
@@ -52,9 +55,6 @@ importers:
       ufo:
         specifier: ^1.6.3
         version: 1.6.3
-      valibot:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.9.2)
       vue:
         specifier: ^3.5.28
         version: 3.5.28(typescript@5.9.2)
@@ -96,6 +96,12 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
+  '@ark/schema@0.56.0':
+    resolution: {integrity: sha512-ECg3hox/6Z/nLajxXqNhgPtNdHWC9zNsDyskwO28WinoFEnWow4IsERNz9AnXRhTZJnYIlAJ4uGn3nlLk65vZA==}
+
+  '@ark/util@0.56.0':
+    resolution: {integrity: sha512-BghfRC8b9pNs3vBoDJhcta0/c1J1rsoS1+HgVUreMFPdhz/CRAKReAu57YEllNaSy98rWAdY1gE+gFup7OXpgA==}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -2677,6 +2683,12 @@ packages:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
+  arkregex@0.0.5:
+    resolution: {integrity: sha512-ncYjBdLlh5/QnVsAA8De16Tc9EqmYM7y/WU9j+236KcyYNUXogpz3sC4ATIZYzzLxwI+0sEOaQLEmLmRleaEXw==}
+
+  arktype@2.1.29:
+    resolution: {integrity: sha512-jyfKk4xIOzvYNayqnD8ZJQqOwcrTOUbIU4293yrzAjA3O1dWh61j71ArMQ6tS/u4pD7vabSPe7nG3RCyoXW6RQ==}
+
   ast-kit@2.2.0:
     resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
     engines: {node: '>=20.19.0'}
@@ -5441,6 +5453,12 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.0.2
 
+  '@ark/schema@0.56.0':
+    dependencies:
+      '@ark/util': 0.56.0
+
+  '@ark/util@0.56.0': {}
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -7980,6 +7998,16 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  arkregex@0.0.5:
+    dependencies:
+      '@ark/util': 0.56.0
+
+  arktype@2.1.29:
+    dependencies:
+      '@ark/schema': 0.56.0
+      '@ark/util': 0.56.0
+      arkregex: 0.0.5
+
   ast-kit@2.2.0:
     dependencies:
       '@babel/parser': 7.29.0
@@ -10877,6 +10905,7 @@ snapshots:
   valibot@1.2.0(typescript@5.9.2):
     optionalDependencies:
       typescript: 5.9.2
+    optional: true
 
   vaul-vue@0.4.1(reka-ui@2.7.0(typescript@5.9.2)(vue@3.5.28(typescript@5.9.2)))(vue@3.5.28(typescript@5.9.2)):
     dependencies:

From 50435840cad442f69a10fd28943d16caaa7e234e Mon Sep 17 00:00:00 2001
From: Toby Nguyen <208221158+tobynguyen27@users.noreply.github.com>
Date: Mon, 23 Feb 2026 14:31:13 +0700
Subject: [PATCH 2/2] feat: add password form

---
 .../solitar/exception/UrlException.kt         |  2 +
 .../solitar/exception/UrlExceptionHandler.kt  |  4 +
 .../tobynguyen/solitar/service/UrlService.kt  |  3 +-
 .../src/app/components/SecureWarning.vue      | 62 +++++++++++++
 apps/frontend/src/app/pages/[shortCode].vue   | 80 ++++------------
 apps/frontend/src/app/pages/unlock.vue        | 91 +++++++++++++++++++
 6 files changed, 178 insertions(+), 64 deletions(-)
 create mode 100644 apps/frontend/src/app/components/SecureWarning.vue
 create mode 100644 apps/frontend/src/app/pages/unlock.vue

diff --git a/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlException.kt b/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlException.kt
index 1e1e752..a00005b 100644
--- a/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlException.kt
+++ b/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlException.kt
@@ -7,3 +7,5 @@ class UrlExpiredException(override val message: String) : RuntimeException(messa
 class UrlDisabledException(override val message: String) : RuntimeException(message)
 
 class UrlShortCodeConflictedException(override val message: String) : RuntimeException(message)
+
+class UrlProtectedException(override val message: String) : RuntimeException(message)
diff --git a/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlExceptionHandler.kt b/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlExceptionHandler.kt
index a7552e3..395c313 100644
--- a/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlExceptionHandler.kt
+++ b/apps/backend/src/main/kotlin/org/tobynguyen/solitar/exception/UrlExceptionHandler.kt
@@ -35,6 +35,10 @@ class UrlExceptionHandler : ResponseEntityExceptionHandler() {
         return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(problemDetail)
     }
 
+    @ExceptionHandler(UrlProtectedException::class)
+    fun onUrlProtected(e: UrlProtectedException) =
+        ProblemDetail.forStatusAndDetail(HttpStatus.UNAUTHORIZED, e.message)
+
     @ExceptionHandler(UrlNotFoundException::class)
     fun onUrlNotFound(e: UrlNotFoundException) =
         ProblemDetail.forStatusAndDetail(HttpStatus.NOT_FOUND, e.message)
diff --git a/apps/backend/src/main/kotlin/org/tobynguyen/solitar/service/UrlService.kt b/apps/backend/src/main/kotlin/org/tobynguyen/solitar/service/UrlService.kt
index c0df132..e035ae6 100644
--- a/apps/backend/src/main/kotlin/org/tobynguyen/solitar/service/UrlService.kt
+++ b/apps/backend/src/main/kotlin/org/tobynguyen/solitar/service/UrlService.kt
@@ -8,6 +8,7 @@ import org.sqids.Sqids
 import org.tobynguyen.solitar.exception.UrlDisabledException
 import org.tobynguyen.solitar.exception.UrlExpiredException
 import org.tobynguyen.solitar.exception.UrlNotFoundException
+import org.tobynguyen.solitar.exception.UrlProtectedException
 import org.tobynguyen.solitar.exception.UrlShortCodeConflictedException
 import org.tobynguyen.solitar.mapper.toResponseDto
 import org.tobynguyen.solitar.model.dto.UrlCreateDto
@@ -43,7 +44,7 @@ class UrlService(
             UrlForwardResponseDto(urlEntity.toResponseDto().originalUrl)
         } else {
             if (password == null)
-                throw UrlDisabledException("Please provide a valid password to unlock this URL.")
+                throw UrlProtectedException("Please provide a valid password to unlock this URL.")
 
             if (argon2Encoder.matches(password, urlEntity.password)) {
                 UrlForwardResponseDto(urlEntity.toResponseDto().originalUrl)
diff --git a/apps/frontend/src/app/components/SecureWarning.vue b/apps/frontend/src/app/components/SecureWarning.vue
new file mode 100644
index 0000000..5da9cbd
--- /dev/null
+++ b/apps/frontend/src/app/components/SecureWarning.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const { url } = defineProps<{ url: string }>();
+
+const forceHttps = () => {
+	const secureUrl = url.replace(/^http:/, "https:");
+	navigateTo(secureUrl, { external: true });
+};
+
+const acceptRisk = () => {
+	navigateTo(url, { external: true });
+};
+</script>
+
+<template>
+	<div class="flex flex-col justify-center items-center gap-5">
+		<UIcon name="i-tabler-alert-triangle" class="size-12 text-warning" />
+		<UPageCard class="max-w-lg" :reverse="false">
+			<template #title>
+				<p>Insecure Connection Warning</p>
+			</template>
+
+			<template #description>
+				<div class="flex flex-col gap-3">
+					<p>
+						The link you're about to visit does
+						<span class="font-bold">not use HTTPS</span>, which means your connection is
+						<span class="font-bold">not encrypted</span>. Your data could be intercepted
+						by third parties.
+					</p>
+					<UCard>
+						<template #header>
+							<p class="text-warning">{{ url }}</p>
+						</template>
+					</UCard>
+					<ULink
+						class="text-left"
+						to="https://www.cloudflare.com/learning/ssl/why-is-http-not-secure/"
+						:external="true"
+						target="_blank"
+						>What is HTTPS and why is it important?</ULink
+					>
+				</div>
+			</template>
+
+			<template #footer>
+				<div class="flex flex-row gap-3">
+					<UButton
+						label="Enforce HTTPS"
+						icon="i-tabler-lock"
+						@click="forceHttps"
+						class="hover:cursor-pointer" />
+					<UButton
+						label="Accept Risk & Continue"
+						variant="ghost"
+						color="error"
+						@click="acceptRisk"
+						class="hover:cursor-pointer" />
+				</div>
+			</template>
+		</UPageCard>
+	</div>
+</template>
diff --git a/apps/frontend/src/app/pages/[shortCode].vue b/apps/frontend/src/app/pages/[shortCode].vue
index 438c8e1..ca7e126 100644
--- a/apps/frontend/src/app/pages/[shortCode].vue
+++ b/apps/frontend/src/app/pages/[shortCode].vue
@@ -10,13 +10,22 @@ const shortCode = route.params.shortCode!.toString();
 const { data, error } = await useAsyncData(() => urlRepository.getLongUrl({ shortCode }));
 
 if (error.value) {
-	const e = error.value.data as { error: string; message: string };
-
-	throw createError({
-		statusCode: error.value?.status || 500,
-		statusMessage: e.error || "Internal Server Error",
-		message: e.message || "Failed to resolve short URL",
-	});
+	if (error.value.status == 401) {
+		await navigateTo({
+			path: "/unlock",
+			query: {
+				c: shortCode,
+			},
+		});
+	} else {
+		const e = error.value.data as { title: string; detail: string };
+
+		throw createError({
+			statusCode: error.value?.status || 500,
+			statusMessage: e.title || "Internal Server Error",
+			message: e.detail || "Failed to resolve short URL",
+		});
+	}
 }
 
 const originalUrl = data.value as string;
@@ -29,65 +38,10 @@ if (isSecure) {
 		redirectCode: 302,
 	});
 }
-
-const forceHttps = () => {
-	const secureUrl = originalUrl.replace(/^http:/, "https:");
-	navigateTo(secureUrl, { external: true });
-};
-
-const acceptRisk = () => {
-	navigateTo(originalUrl, { external: true });
-};
 </script>
 
 <template>
 	<div class="w-full h-screen grid place-items-center" v-if="!isSecure">
-		<div class="flex flex-col justify-center items-center gap-5">
-			<UIcon name="i-tabler-alert-triangle" class="size-12 text-warning" />
-			<UPageCard class="max-w-lg" :reverse="false">
-				<template #title>
-					<p>Insecure Connection Warning</p>
-				</template>
-
-				<template #description>
-					<div class="flex flex-col gap-3">
-						<p>
-							The link you're about to visit does
-							<span class="font-bold">not use HTTPS</span>, which means your
-							connection is <span class="font-bold">not encrypted</span>. Your data
-							could be intercepted by third parties.
-						</p>
-						<UCard>
-							<template #header>
-								<p class="text-warning">{{ originalUrl }}</p>
-							</template>
-						</UCard>
-						<ULink
-							class="text-left"
-							to="https://www.cloudflare.com/learning/ssl/why-is-http-not-secure/"
-							:external="true"
-							target="_blank"
-							>What is HTTPS and why is it important?</ULink
-						>
-					</div>
-				</template>
-
-				<template #footer>
-					<div class="flex flex-row gap-3">
-						<UButton
-							label="Enforce HTTPS"
-							icon="i-tabler-lock"
-							@click="forceHttps"
-							class="hover:cursor-pointer" />
-						<UButton
-							label="Accept Risk & Continue"
-							variant="ghost"
-							color="error"
-							@click="acceptRisk"
-							class="hover:cursor-pointer" />
-					</div>
-				</template>
-			</UPageCard>
-		</div>
+		<SecureWarning :url="originalUrl" />
 	</div>
 </template>
diff --git a/apps/frontend/src/app/pages/unlock.vue b/apps/frontend/src/app/pages/unlock.vue
new file mode 100644
index 0000000..fbf2100
--- /dev/null
+++ b/apps/frontend/src/app/pages/unlock.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from "@nuxt/ui";
+import { type } from "arktype";
+
+const route = useRoute();
+
+const shortCode = route.query.c!.toString();
+
+if (!shortCode) {
+	await navigateTo("/");
+}
+
+const { $api } = useNuxtApp();
+const urlRepository = repository($api);
+const toast = useToast();
+
+const schema = type({
+	password: "3 <= string <= 255",
+});
+
+type Schema = typeof schema.infer;
+
+const state = ref<Schema>({
+	password: "",
+});
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+	event.preventDefault();
+
+	const password = event.data.password;
+
+	try {
+		const originalUrl = await urlRepository.getLongUrl({ shortCode, password });
+
+		await navigateTo(originalUrl, {
+			external: true,
+			redirectCode: 302,
+		});
+	} catch (error: any) {
+		const e = error.data as { title: string; detail: string };
+
+		toast.add({
+			title: e.title,
+			description: e.detail,
+			color: "error",
+		});
+	}
+}
+</script>
+
+<template>
+	<div class="grid place-items-center h-screen">
+		<div class="flex flex-col justify-center items-center gap-5">
+			<UIcon name="i-carbon:locked" class="size-12 text-warning" />
+			<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+				<UPageCard class="max-w-lg" :reverse="false">
+					<template #title>
+						<p>Protected by password</p>
+					</template>
+
+					<template #description>
+						<div class="flex flex-col gap-3">
+							<p>
+								This link has been protected by a password, please enter the
+								password to unlock it
+							</p>
+							<UFormField name="password" label="Password">
+								<UInput
+									type="password"
+									v-model="state.password"
+									class="w-full"
+									size="xl" />
+							</UFormField>
+						</div>
+					</template>
+
+					<template #footer>
+						<div class="flex flex-row gap-3">
+							<UButton
+								label="Unlock"
+								icon="i-carbon:unlocked"
+								type="submit"
+								class="hover:cursor-pointer"
+								color="success" />
+						</div>
+					</template>
+				</UPageCard>
+			</UForm>
+		</div>
+	</div>
+</template>