refactor: 🌐 Internationalize every string

pages/oauth/authorize.vue

@@ -4,10 +4,11 @@ import { AlertCircle, Loader } from "lucide-vue-next";
 import UserAuthForm from "~/components/oauth/login.vue";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
+import * as m from "~/paraglide/messages.js";
 import { NuxtLink } from "#components";
 
 useHead({
-    title: "Sign In",
+    title: m.fuzzy_sea_moth_absorb(),
 });
 
 const host = new URL(useBaseUrl().value).host;
@@ -18,7 +19,7 @@ const { error, error_description } = useUrlSearchParams();
 <template>
     <div class="container relative flex h-svh flex-col items-center justify-center md:flex-row lg:max-w-none lg:px-0">
         <Button :as="NuxtLink" href="/register" variant="link" class="absolute right-4 top-4 md:right-8 md:top-8">
-            Register
+            {{ m.noble_cute_ocelot_aim() }}
         </Button>
         <div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex grow bg-center bg-no-repeat bg-cover"
             :style="{
@@ -55,10 +56,11 @@ const { error, error_description } = useUrlSearchParams();
                 </Alert>
                 <div class="flex flex-col space-y-2 text-center">
                     <h1 class="text-2xl font-semibold tracking-tight">
-                        Log in to your account.
+                        {{ m.novel_fine_stork_snap() }}
                     </h1>
-                    <p class="text-sm text-muted-foreground">
-                        Enter your credentials for <code>{{ host }}</code>.
+                    <p class="text-sm text-muted-foreground" v-html="m.smug_main_whale_snip({
+                        host,
+                    })">
                     </p>
                 </div>
                 <UserAuthForm v-if="instance" :instance="instance" />

pages/oauth/code.vue

@@ -4,8 +4,8 @@
     }">
         <Card class="w-full max-w-md">
             <CardHeader>
-                <CardTitle>Here's your code</CardTitle>
-                <CardDescription>You have signed in successfully.<br />Paste the following code into your app:
+                <CardTitle>{{ m.aware_awful_crow_spur() }}</CardTitle>
+                <CardDescription>{{ m.mushy_soft_lizard_propel() }}<br />{{ m.short_arable_leopard_zap() }}
                 </CardDescription>
             </CardHeader>
             <CardContent class="grid">
@@ -23,9 +23,10 @@ import {
     CardHeader,
     CardTitle,
 } from "~/components/ui/card";
+import * as m from "~/paraglide/messages.js";
 
 useHead({
-    title: "Authorization Code",
+    title: m.spare_aqua_warthog_mend(),
 });
 
 const { code } = useUrlSearchParams();

pages/oauth/consent.vue

@@ -5,7 +5,9 @@
         <Card class="w-full max-w-md" as="form"  method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
             <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
             <CardHeader>
-                <CardTitle as="h1" class="text-2xl break-words">Authorize &ldquo;{{ application }}&rdquo;?</CardTitle>
+                <CardTitle as="h1" class="text-2xl break-words">{{ m.fresh_broad_cockroach_radiate({
+                    application: application ?? "",
+                }) }}</CardTitle>
             </CardHeader>
             <CardContent>
                 <Card>
@@ -23,16 +25,17 @@
                     </li>
                 </ul>
                 <div class="flex-col flex gap-y-1 text-sm">
-                    <p>You are signing in to <b>{{ application }}</b> with your
-                        account.</p>
-                    <p>This allows <b>{{ application }}</b> to perform the above
-                        account
-                        actions.</p>
+                    <p v-html="m.gross_antsy_kangaroo_succeed({
+                        application: application ?? '',
+                    })"></p>
+                    <p v-html="m.hour_close_giraffe_mop({
+                        application: application ?? '',
+                    })"></p>
                 </div>
             </CardContent>
             <CardFooter class="grid gap-2">
-                <Button variant="default" type="submit">Authorize</Button>
-                <Button :as="NuxtLink" href="/" variant="secondary">Cancel</Button>
+                <Button variant="default" type="submit">{{ m.last_spare_polecat_reside() }}</Button>
+                <Button :as="NuxtLink" href="/" variant="secondary">{{ m.soft_bold_ant_attend() }}</Button>
             </CardFooter>
         </Card>
     </div>
@@ -42,10 +45,11 @@
 import { Check } from "lucide-vue-next";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import * as m from "~/paraglide/messages.js";
 import { NuxtLink } from "#components";
 
 useHead({
-    title: "Authorization",
+    title: m.lower_factual_frog_evoke(),
 });
 
 const url = useRequestURL();
@@ -62,20 +66,20 @@ const scope = params.scope ? decodeURIComponent(params.scope as string) : "";
 const validUrlParameters = application && redirectUri && clientId && scope;
 
 const oauthScopeText: Record<string, string> = {
-    "rw:accounts": "$VERB your account information",
-    "rw:blocks": "$VERB your block list",
-    "rw:bookmarks": "$VERB your bookmarks",
-    "rw:favourites": "$VERB your favourites",
-    "rw:filters": "$VERB your filters",
-    "rw:follows": "$VERB your follows",
-    "rw:lists": "$VERB your lists",
-    "rw:mutes": "$VERB your mutes",
-    "rw:notifications": "$VERB your notifications",
-    "r:search": "Perform searches",
-    "rw:statuses": "$VERB your statuses",
-    "w:conversations": "Edit your conversations",
-    "w:media": "Upload media",
-    "w:reports": "Report users",
+    "rw:accounts": m.awake_ago_capybara_kick(),
+    "rw:blocks": m.teary_zesty_racoon_transform(),
+    "rw:bookmarks": m.whole_flaky_nuthatch_rush(),
+    "rw:favourites": m.still_spicy_lionfish_quell(),
+    "rw:filters": m.away_mean_dolphin_empower(),
+    "rw:follows": m.sleek_empty_penguin_radiate(),
+    "rw:lists": m.every_silly_racoon_lift(),
+    "rw:mutes": m.top_careful_scallop_clip(),
+    "rw:notifications": m.this_short_bulldog_walk(),
+    "r:search": m.fresh_odd_rook_forgive(),
+    "rw:statuses": m.witty_whole_capybara_pull(),
+    "w:conversations": m.agent_warm_javelina_blink(),
+    "w:media": m.dirty_red_jellyfish_ascend(),
+    "w:reports": m.crisp_vivid_seahorse_tend(),
 };
 
 const scopes = scope.split(" ");
@@ -103,7 +107,7 @@ const getScopeText = (fullScopes: string[]) => {
         ) {
             if (oauthScopeText[possibleScope]?.includes("$VERB")) {
                 scopeTexts.push([
-                    "Read and write",
+                    m.teary_such_jay_fade(),
                     oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
                 ]);
             } else {
@@ -119,7 +123,7 @@ const getScopeText = (fullScopes: string[]) => {
         ) {
             if (oauthScopeText[possibleScope]?.includes("$VERB")) {
                 scopeTexts.push([
-                    "Read",
+                    m.smug_safe_warthog_dare(),
                     oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
                 ]);
             } else {
@@ -134,7 +138,7 @@ const getScopeText = (fullScopes: string[]) => {
         ) {
             if (oauthScopeText[possibleScope]?.includes("$VERB")) {
                 scopeTexts.push([
-                    "Write",
+                    m.loose_large_blackbird_peek(),
                     oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
                 ]);
             } else {

pages/oauth/reset.vue

@@ -4,14 +4,14 @@
     }">
         <Card v-if="params.success" class="w-full max-w-md">
             <CardHeader>
-                <CardTitle>Success</CardTitle>
+                <CardTitle>{{ m.late_mean_capybara_fade() }}</CardTitle>
                 <CardDescription>
-                    Your password has been reset. You can now log in with your new password.
+                    {{ m.brave_acidic_lobster_fetch() }}
                 </CardDescription>
             </CardHeader>
             <CardFooter class="grid">
                 <Button :as="NuxtLink" href="/" variant="default">
-                    Back to front page
+                    {{ m.every_tangy_koala_persist() }}
                 </Button>
             </CardFooter>
         </Card>
@@ -20,9 +20,9 @@
                 <CardHeader>
                     <Alert v-if="params.login_reset" variant="default" class="mb-4">
                         <AlertCircle class="size-4" />
-                        <AlertTitle>Info</AlertTitle>
+                        <AlertTitle>{{ m.east_loud_lobster_explore() }}</AlertTitle>
                         <AlertDescription>
-                            Your password has been reset by an administrator. Please change it here.
+                            {{ m.good_plane_gazelle_glow() }}
                         </AlertDescription>
                     </Alert>
                     <Alert v-if="params.error" variant="destructive" class="mb-4">
@@ -32,9 +32,9 @@
                             {{ params.error_description }}
                         </AlertDescription>
                     </Alert>
-                    <CardTitle as="h1">Reset your password</CardTitle>
+                    <CardTitle as="h1">{{ m.tired_green_sloth_evoke() }}</CardTitle>
                     <CardDescription>
-                        Enter your new password below. Make sure to put it in a password manager.
+                        {{ m.solid_slow_platypus_talk() }}
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="grid gap-6">
@@ -48,7 +48,7 @@
                     <FormField v-slot="{ componentField }" name="password">
                         <FormItem>
                             <FormLabel>
-                                New password
+                                {{ m.true_male_gadfly_stab() }}
                             </FormLabel>
                             <FormControl>
                                 <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-correct="off"
@@ -60,7 +60,7 @@
                     <FormField v-slot="{ componentField }" name="password-confirm">
                         <FormItem>
                             <FormLabel>
-                                Confirm password
+                                {{ m.awful_cozy_jannes_rise() }}
                             </FormLabel>
                             <FormControl>
                                 <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-correct="off"
@@ -71,7 +71,7 @@
                     </FormField>
                 </CardContent>
                 <CardFooter class="grid gap-2">
-                    <Button variant="default" type="submit">Reset</Button>
+                    <Button variant="default" type="submit">{{ m.noisy_round_skate_yell() }}</Button>
                 </CardFooter>
             </form>
         </Card>
@@ -100,10 +100,11 @@ import {
     FormMessage,
 } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
+import * as m from "~/paraglide/messages.js";
 import { NuxtLink } from "#components";
 
 useHead({
-    title: "Reset Password",
+    title: m.arable_arable_herring_lead(),
 });
 
 identity.value = null;
@@ -115,18 +116,26 @@ const formSchema = toTypedSchema(
             password: z
                 .string()
                 .min(3, {
-                    message: "Must be at least 3 characters long",
+                    message: m.smart_bold_macaw_aid({
+                        count: 3,
+                    }),
                 })
                 .max(100, {
-                    message: "Must be at most 100 characters long",
+                    message: m.dry_smug_goldfish_promise({
+                        count: 100,
+                    }),
                 }),
             "password-confirm": z
                 .string()
                 .min(3, {
-                    message: "Must be at least 3 characters long",
+                    message: m.smart_bold_macaw_aid({
+                        count: 3,
+                    }),
                 })
                 .max(100, {
-                    message: "Must be at most 100 characters long",
+                    message: m.dry_smug_goldfish_promise({
+                        count: 100,
+                    }),
                 }),
         })
         .superRefine((data, ctx) => {
@@ -134,7 +143,7 @@ const formSchema = toTypedSchema(
                 ctx.addIssue({
                     path: [...ctx.path, "password-confirm"],
                     code: "custom",
-                    message: "Passwords do not match",
+                    message: m.candid_fancy_leopard_prosper(),
                 });
             }
             return {};