Fix issues

.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*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]]

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)

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)

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)

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"
 	},

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>

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

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",
 			});
 		}

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>