feat: i18n

turbostarter · Nov 2, 2024 · f86ceb3 · f86ceb3
1 parent 7b75c89
commit f86ceb3
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 27 deletions.
diff --git a/assets/locales/en/messages.json b/assets/locales/en/messages.json
@@ -21,5 +21,47 @@
   },
   "contentScriptUI": {
     "message": "Content Script UI"
+  },
+  "light": {
+    "message": "Light"
+  },
+  "dark": {
+    "message": "Dark"
+  },
+  "system": {
+    "message": "System"
+  },
+  "name": {
+    "message": "Name"
+  },
+  "email": {
+    "message": "Email"
+  },
+  "password": {
+    "message": "Password"
+  },
+  "login": {
+    "message": "Login"
+  },
+  "loginDescription": {
+    "message": "Enter your email below to login to your account"
+  },
+  "register": {
+    "message": "Register"
+  },
+  "registerDescription": {
+    "message": "Enter your details below to register for an account"
+  },
+  "logout": {
+    "message": "Logout"
+  },
+  "continueWith": {
+    "message": "Or continue with"
+  },
+  "alreadyHaveAccount": {
+    "message": "Already have an account?"
+  },
+  "dontHaveAccount": {
+    "message": "Don't have an account?"
   }
 }
diff --git a/src/app/tabs/login.tsx b/src/app/tabs/login.tsx
@@ -3,8 +3,8 @@ import { Auth } from "~/components/auth";
 const LoginTab = () => {
   return (
     <Auth.Layout
-      title="Login"
-      description="Enter your email below to login to your account"
+      title={chrome.i18n.getMessage("login")}
+      description={chrome.i18n.getMessage("loginDescription")}
     >
       <Auth.Socials />
       <Auth.Separator />

diff --git a/src/app/tabs/register.tsx b/src/app/tabs/register.tsx
@@ -3,8 +3,8 @@ import { Auth } from "~/components/auth";
 const RegisterTab = () => {
   return (
     <Auth.Layout
-      title="Register"
-      description="Enter your details below to create your account"
+      title={chrome.i18n.getMessage("register")}
+      description={chrome.i18n.getMessage("registerDescription")}
     >
       <Auth.Socials />
       <Auth.Separator />

diff --git a/src/components/auth/index.tsx b/src/components/auth/index.tsx
@@ -46,7 +46,7 @@ const Separator = () => {
       </div>
       <div className="relative flex justify-center text-xs uppercase">
         <span className="bg-card px-2 text-muted-foreground">
-          Or continue with
+          {chrome.i18n.getMessage("continueWith")}
         </span>
       </div>
     </div>
@@ -58,7 +58,9 @@ const Socials = () => {
     mutationFn: (provider: Provider) =>
       supabase.auth.signInWithOAuth({
         provider,
-        options: { redirectTo: location.href },
+        options: {
+          redirectTo: `${new URL(location.href).origin}/options.html`,
+        },
       }),
     onError: (error) => toast.error(error.message),
   });

diff --git a/src/components/auth/login.tsx b/src/components/auth/login.tsx
@@ -52,7 +52,7 @@ export const Login = () => {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("email")}</FormLabel>
               <FormControl>
                 <Input placeholder="[email protected]" {...field} />
               </FormControl>
@@ -66,7 +66,7 @@ export const Login = () => {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("password")}</FormLabel>
               <FormControl>
                 <Input type="password" placeholder="••••••••" {...field} />
               </FormControl>
@@ -75,14 +75,18 @@ export const Login = () => {
           )}
         />
         <Button type="submit" className="w-full mt-2" disabled={isPending}>
-          {isPending ? <Loader2 className="size-4 animate-spin" /> : "Login"}
+          {isPending ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            chrome.i18n.getMessage("login")
+          )}
         </Button>
       </form>
 
       <div className="mt-4 text-center text-sm">
-        Don&apos;t have an account?{" "}
+        {chrome.i18n.getMessage("dontHaveAccount")}{" "}
         <a href="/tabs/register.html" className="underline hover:no-underline">
-          Sign up
+          {chrome.i18n.getMessage("register")}
         </a>
       </div>
     </Form>

diff --git a/src/components/auth/register.tsx b/src/components/auth/register.tsx
@@ -53,7 +53,7 @@ export const Register = () => {
           name="name"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Name</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("name")}</FormLabel>
               <FormControl>
                 <Input placeholder="John Doe" {...field} />
               </FormControl>
@@ -67,7 +67,7 @@ export const Register = () => {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("email")}</FormLabel>
               <FormControl>
                 <Input placeholder="[email protected]" {...field} />
               </FormControl>
@@ -81,7 +81,7 @@ export const Register = () => {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{chrome.i18n.getMessage("password")}</FormLabel>
               <FormControl>
                 <Input type="password" placeholder="••••••••" {...field} />
               </FormControl>
@@ -90,14 +90,18 @@ export const Register = () => {
           )}
         />
         <Button type="submit" className="w-full mt-2" disabled={isPending}>
-          {isPending ? <Loader2 className="size-4 animate-spin" /> : "Register"}
+          {isPending ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            chrome.i18n.getMessage("register")
+          )}
         </Button>
       </form>
 
       <div className="mt-4 text-center text-sm">
-        Already have an account?{" "}
+        {chrome.i18n.getMessage("alreadyHaveAccount")}{" "}
         <a href="/tabs/login.html" className="underline hover:no-underline">
-          Sign in
+          {chrome.i18n.getMessage("login")}
         </a>
       </div>
     </Form>

diff --git a/src/components/auth/user.tsx b/src/components/auth/user.tsx
@@ -89,7 +89,7 @@ export const User = () => {
             className="w-full"
             onClick={() => supabase.auth.signOut()}
           >
-            Logout
+            {chrome.i18n.getMessage("logout")}
           </button>
         </DropdownMenuItem>
       </DropdownMenuContent>

diff --git a/src/components/common/theme.tsx b/src/components/common/theme.tsx
@@ -37,12 +37,8 @@ export const ThemeSwitch = memo<ThemeSwitchProps>(({ className }) => {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         {Object.values(Theme).map((theme) => (
-          <DropdownMenuItem
-            key={theme}
-            onClick={() => setTheme(theme)}
-            className="capitalize"
-          >
-            {theme}
+          <DropdownMenuItem key={theme} onClick={() => setTheme(theme)}>
+            {chrome.i18n.getMessage(theme)}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>

diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -12,7 +12,7 @@ export const Footer = () => {
           className: "w-[6.5rem]",
         })}
       >
-        Star{" "}
+        {chrome.i18n.getMessage("star")}{" "}
         <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <title>GitHub</title>
           <path
@@ -31,7 +31,7 @@ export const Footer = () => {
           className: "w-[6.5rem]",
         })}
       >
-        Follow{" "}
+        {chrome.i18n.getMessage("follow")}{" "}
         <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <title>X</title>
           <path

diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
@@ -156,7 +156,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("text-xs font-medium text-destructive", className)}
       {...props}
     >
       {body}