feat: add i18n

internal/api/api.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"io/fs"
 	"net/http"
+	"os"
 	"strings"
 	"time"
 	"tinyauth/internal/assets"
@@ -69,7 +70,18 @@ func (api *API) Init() {
 	router.Use(func(c *gin.Context) {
 		// If not an API request, serve the UI
 		if !strings.HasPrefix(c.Request.URL.Path, "/api") {
+			// Check if the file exists
+			_, err := fs.Stat(dist, strings.TrimPrefix(c.Request.URL.Path, "/"))
+
+			// If the file doesn't exist, serve the index.html
+			if os.IsNotExist(err) {
+				c.Request.URL.Path = "/"
+			}
+
+			// Serve the file
 			fileServer.ServeHTTP(c.Writer, c.Request)
+
+			// Stop further processing
 			c.Abort()
 		}
 	})

site/package.json

@@ -16,8 +16,12 @@
     "@mantine/notifications": "^7.16.0",
     "@tanstack/react-query": "4",
     "axios": "^1.7.9",
+    "i18next": "^24.2.3",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-resources-to-backend": "^1.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.4.1",
     "react-router": "^7.1.3",
     "zod": "^3.24.1"
   },

site/src/components/auth/login-forn.tsx

@@ -1,6 +1,7 @@
 import { TextInput, PasswordInput, Button } from "@mantine/core";
 import { useForm, zodResolver } from "@mantine/form";
 import { LoginFormValues, loginSchema } from "../../schemas/login-schema";
+import { useTranslation } from "react-i18next";
 
 interface LoginFormProps {
   isLoading: boolean;
@@ -9,6 +10,7 @@ interface LoginFormProps {
 
 export const LoginForm = (props: LoginFormProps) => {
   const { isLoading, onSubmit } = props;
+  const { t } = useTranslation();
 
   const form = useForm({
     mode: "uncontrolled",
@@ -22,7 +24,7 @@ export const LoginForm = (props: LoginFormProps) => {
   return (
     <form onSubmit={form.onSubmit(onSubmit)}>
       <TextInput
-        label="Username"
+        label={t("loginUsername")}
         placeholder="user@example.com"
         required
         disabled={isLoading}
@@ -30,7 +32,7 @@ export const LoginForm = (props: LoginFormProps) => {
         {...form.getInputProps("username")}
       />
       <PasswordInput
-        label="Password"
+        label={t("loginPassword")}
         placeholder="password"
         required
         mt="md"
@@ -39,7 +41,7 @@ export const LoginForm = (props: LoginFormProps) => {
         {...form.getInputProps("password")}
       />
       <Button fullWidth mt="xl" type="submit" loading={isLoading}>
-        Login
+        {t("loginSubmit")}
       </Button>
     </form>
   );

site/src/lib/i18n/i18n.ts

@@ -0,0 +1,20 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .use(resourcesToBackend((language: string) => import(`./locales/${language}.json`)))
+  .init({
+    fallbackLng: 'en',
+    debug: import.meta.env.MODE === 'development',
+
+    interpolation: {
+      escapeValue: false,
+    }
+  });
+
+
+export default i18n;

site/src/lib/i18n/locales/af-ZA.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/ar-SA.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/ca-ES.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/cs-CZ.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/da-DK.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/de-DE.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/el-GR.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/en-US.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/en.json

@@ -0,0 +1,45 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider",
+    "continueRedirectingTitle": "Redirecting...",
+    "continueRedirectingSubtitle": "You should be redirected to the app soon",
+    "continueInvalidRedirectTitle": "Invalid redirect",
+    "continueInvalidRedirectSubtitle": "The redirect URL is invalid",
+    "continueInsecureRedirectTitle": "Insecure redirect",
+    "continueInsecureRedirectSubtitle": "You are trying to redirect from <Code>https</Code> to <Code>http</Code>, are you sure you want to continue?",
+    "continueTitle": "Continue",
+    "continueSubtitle": "Click the button to continue to your app.",
+    "internalErrorTitle": "Internal Server Error",
+    "internalErrorSubtitle": "An error occured on the server and it currently cannot serve your request.",
+    "internalErrorButton": "Try again",
+    "logoutFailTitle": "Failed to logout",
+    "logoutFailSubtitle": "Please try again",
+    "logoutSuccessTitle": "Logged out",
+    "logoutSuccessSubtitle": "You have been logged out",
+    "logoutTitle": "Logout",
+    "logoutUsernameSubtitle": "You are currently logged in as <Code>{{username}}</Code>, click the button below to logout.",
+    "logoutOauthSubtitle": "You are currently logged in as <Code>{{username}}</Code> using the {{provider}} OAuth provider, click the button below to logout.",
+    "notFoundTitle": "Page not found",
+    "notFoundSubtitle": "The page you are looking for does not exist.",
+    "notFoundButton": "Go home",
+    "totpFailTitle": "Failed to verify code",
+    "totpFailSubtitle": "Please check your code and try again",
+    "totpSuccessTitle": "Verified",
+    "totpSuccessSubtitle": "Redirecting to your app",
+    "totpTitle": "Enter your TOTP code",
+    "unauthorizedTitle": "Unauthorized",
+    "unauthorizedResourceSubtitle": "The user with username {{username}} is not authorized to access the resource <Code>{{resource}}</Code>.",
+    "unaothorizedLoginSubtitle": "The user with username {{username}} is not authorized to login.",
+    "unauthorizedButton": "Try again"
+}

site/src/lib/i18n/locales/es-ES.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/fi-FI.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/fr-FR.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/he-IL.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/hu-HU.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/it-IT.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/ja-JP.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/ko-KR.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/nl-NL.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/no-NO.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/pl-PL.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/pt-BR.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/pt-PT.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/ro-RO.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/ru-RU.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/sr-SP.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/sv-SE.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/tr-TR.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/uk-UA.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/vi-VN.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/zh-CN.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/lib/i18n/locales/zh-TW.json

@@ -0,0 +1,15 @@
+{
+    "loginTitle": "Welcome back, login with",
+    "loginDivider": "Or continue with password",
+    "loginUsername": "Username",
+    "loginPassword": "Password",
+    "loginSubmit": "Login",
+    "loginFailTitle": "Failed to login",
+    "loginFailSubtitle": "Please check your username and password",
+    "loginSuccessTitle": "Logged in",
+    "loginSuccessSubtitle": "Welcome back!",
+    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailSubtitle": "Failed to get OAuth URL",
+    "loginOauthSuccessTitle": "Redirecting",
+    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider"
+}

site/src/main.tsx

@@ -17,6 +17,7 @@ import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
 import { InternalServerError } from "./pages/internal-server-error.tsx";
 import { TotpPage } from "./pages/totp-page.tsx";
 import { AppContextProvider } from "./context/app-context.tsx";
+import "./lib/i18n/i18n.ts";
 
 const queryClient = new QueryClient({
   defaultOptions: {

site/src/pages/continue-page.tsx

@@ -6,6 +6,7 @@ import { Layout } from "../components/layouts/layout";
 import { ReactNode } from "react";
 import { isQueryValid } from "../utils/utils";
 import { useAppContext } from "../context/app-context";
+import { Trans, useTranslation } from "react-i18next";
 
 export const ContinuePage = () => {
   const queryString = window.location.search;
@@ -14,6 +15,7 @@ export const ContinuePage = () => {
 
   const { isLoggedIn } = useUserContext();
   const { disableContinue } = useAppContext();
+  const { t } = useTranslation();
 
   if (!isLoggedIn) {
     return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
@@ -25,8 +27,8 @@ export const ContinuePage = () => {
 
   const redirect = () => {
     notifications.show({
-      title: "Redirecting",
+      title: t("continueRedirectingTitle"),
-      message: "You should be redirected to the app soon",
+      message: t("continueRedirectingSubtitle"),
       color: "blue",
     });
     setTimeout(() => {
@@ -42,12 +44,9 @@ export const ContinuePage = () => {
     return (
       <ContinuePageLayout>
         <Text size="xl" fw={700}>
-          Invalid Redirect
+          {t("Invalid redirect")}
-        </Text>
-        <Text>
-          The redirect URL is invalid, please contact the app owner to fix the
-          issue.
         </Text>
+        <Text>{t("The redirect URL is invalid")}</Text>
       </ContinuePageLayout>
     );
   }
@@ -57,9 +56,9 @@ export const ContinuePage = () => {
     return (
       <ContinuePageLayout>
         <Text size="xl" fw={700}>
-          Redirecting
+          {t("continueRedirectingTitle")}
         </Text>
-        <Text>You should be redirected to your app soon.</Text>
+        <Text>{t("continueRedirectingSubtitle")}</Text>
       </ContinuePageLayout>
     );
   }
@@ -68,14 +67,17 @@ export const ContinuePage = () => {
     return (
       <ContinuePageLayout>
         <Text size="xl" fw={700}>
-          Insecure Redirect
+          {t("continueInsecureRedirectTitle")}
         </Text>
         <Text>
-          Your are trying to redirect from <Code>https</Code> to{" "}
+          <Trans
-          <Code>http</Code>, are you sure you want to continue?
+            i18nKey="continueInsecureRedirectSubtitle"
+            t={t}
+            components={{ Code: <Code /> }}
+          />
         </Text>
         <Button fullWidth mt="xl" color="yellow" onClick={redirect}>
-          Continue
+          {t("continueTitle")}
         </Button>
       </ContinuePageLayout>
     );
@@ -84,11 +86,11 @@ export const ContinuePage = () => {
   return (
     <ContinuePageLayout>
       <Text size="xl" fw={700}>
-        Continue
+        {t("continueTitle")}
       </Text>
-      <Text>Click the button to continue to your app.</Text>
+      <Text>{t("continueSubtitle")}</Text>
       <Button fullWidth mt="xl" onClick={redirect}>
-        Continue
+        {t("continueTitle")}
       </Button>
     </ContinuePageLayout>
   );

site/src/pages/internal-server-error.tsx

@@ -1,19 +1,18 @@
 import { Button, Paper, Text } from "@mantine/core";
 import { Layout } from "../components/layouts/layout";
+import { useTranslation } from "react-i18next";
 
 export const InternalServerError = () => {
+  const { t } = useTranslation();
   return (
     <Layout>
       <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
         <Text size="xl" fw={700}>
-          Internal Server Error
+          {t("internalErrorTitle")}
-        </Text>
-        <Text>
-          An error occured on the server and it currently cannot serve your
-          request.
         </Text>
+        <Text>{t("internalErrorSubtitle")}</Text>
         <Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
-          Try again
+          {t("internalErrorButton")}
         </Button>
       </Paper>
     </Layout>

site/src/pages/login-page.tsx

@@ -10,6 +10,7 @@ import { LoginFormValues } from "../schemas/login-schema";
 import { LoginForm } from "../components/auth/login-forn";
 import { isQueryValid } from "../utils/utils";
 import { useAppContext } from "../context/app-context";
+import { useTranslation } from "react-i18next";
 
 export const LoginPage = () => {
   const queryString = window.location.search;
@@ -18,6 +19,7 @@ export const LoginPage = () => {
 
   const { isLoggedIn } = useUserContext();
   const { configuredProviders, title, genericName } = useAppContext();
+  const { t } = useTranslation();
 
   const oauthProviders = configuredProviders.filter(
     (value) => value !== "username",
@@ -33,8 +35,8 @@ export const LoginPage = () => {
     },
     onError: () => {
       notifications.show({
-        title: "Failed to login",
+        title: t("loginFailTitle"),
-        message: "Check your username and password",
+        message: t("loginFailSubtitle"),
         color: "red",
       });
     },
@@ -45,8 +47,8 @@ export const LoginPage = () => {
       }
 
       notifications.show({
-        title: "Logged in",
+        title: t("loginSuccessTitle"),
-        message: "Welcome back!",
+        message: t("loginSuccessSubtitle"),
         color: "green",
       });
 
@@ -69,15 +71,15 @@ export const LoginPage = () => {
     },
     onError: () => {
       notifications.show({
-        title: "Internal error",
+        title: t("loginOauthFailTitle"),
-        message: "Failed to get OAuth URL",
+        message: t("loginOauthFailSubtitle"),
         color: "red",
       });
     },
     onSuccess: (data) => {
       notifications.show({
-        title: "Redirecting",
+        title: t("loginOauthSuccessTitle"),
-        message: "Redirecting to your OAuth provider",
+        message: t("loginOauthSuccessSubtitle"),
         color: "blue",
       });
       setTimeout(() => {
@@ -97,7 +99,7 @@ export const LoginPage = () => {
         {oauthProviders.length > 0 && (
           <>
             <Text size="lg" fw={500} ta="center">
-              Welcome back, login with
+              {t("loginTitle")}
             </Text>
             <OAuthButtons
               oauthProviders={oauthProviders}
@@ -107,7 +109,7 @@ export const LoginPage = () => {
             />
             {configuredProviders.includes("username") && (
               <Divider
-                label="Or continue with password"
+                label={t("loginDivider")}
                 labelPosition="center"
                 my="lg"
               />

site/src/pages/logout-page.tsx

@@ -7,10 +7,12 @@ import { Navigate } from "react-router";
 import { Layout } from "../components/layouts/layout";
 import { capitalize } from "../utils/utils";
 import { useAppContext } from "../context/app-context";
+import { Trans, useTranslation } from "react-i18next";
 
 export const LogoutPage = () => {
   const { isLoggedIn, username, oauth, provider } = useUserContext();
   const { genericName } = useAppContext();
+  const { t } = useTranslation();
 
   if (!isLoggedIn) {
     return <Navigate to="/login" />;
@@ -22,15 +24,15 @@ export const LogoutPage = () => {
     },
     onError: () => {
       notifications.show({
-        title: "Failed to logout",
+        title: t("logoutFailTitle"),
-        message: "Please try again",
+        message: t("logoutFailSubtitle"),
         color: "red",
       });
     },
     onSuccess: () => {
       notifications.show({
-        title: "Logged out",
+        title: t("logoutSuccessTitle"),
-        message: "Goodbye!",
+        message: t("logoutSuccessSubtitle"),
         color: "green",
       });
       setTimeout(() => {
@@ -43,13 +45,30 @@ export const LogoutPage = () => {
     <Layout>
       <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
         <Text size="xl" fw={700}>
-          Logout
+          {t("logoutTitle")}
         </Text>
         <Text>
-          You are currently logged in as <Code>{username}</Code>
+          {oauth ? (
-          {oauth &&
+            <Trans
-            ` using ${capitalize(provider === "generic" ? genericName : provider)} OAuth`}
+              i18nKey="logoutOauthSubtitle"
-          . Click the button below to log out.
+              t={t}
+              components={{ Code: <Code /> }}
+              values={{
+                provider:
+                  provider === "generic" ? genericName : capitalize(provider),
+                username: username,
+              }}
+            />
+          ) : (
+            <Trans
+              i18nKey="logoutUsernameSubtitle"
+              t={t}
+              components={{ Code: <Code /> }}
+              values={{
+                username: username,
+              }}
+            />
+          )}
         </Text>
         <Button
           fullWidth
@@ -57,7 +76,7 @@ export const LogoutPage = () => {
           onClick={() => logoutMutation.mutate()}
           loading={logoutMutation.isLoading}
         >
-          Logout
+          {t("logoutTitle")}
         </Button>
       </Paper>
     </Layout>

site/src/pages/not-found-page.tsx

@@ -1,16 +1,18 @@
 import { Button, Paper, Text } from "@mantine/core";
 import { Layout } from "../components/layouts/layout";
+import { useTranslation } from "react-i18next";
 
 export const NotFoundPage = () => {
+  const { t } = useTranslation();
   return (
     <Layout>
       <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
         <Text size="xl" fw={700}>
-          Not found
+          {t("notFoundTitle")}
         </Text>
-        <Text>The page you are looking for does not exist.</Text>
+        <Text>{t("notFoundSubtitle")}</Text>
         <Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
-          Go home
+          {t("notFoundButton")}
         </Button>
       </Paper>
     </Layout>

site/src/pages/totp-page.tsx

@@ -7,6 +7,7 @@ import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
 import { notifications } from "@mantine/notifications";
 import { useAppContext } from "../context/app-context";
+import { useTranslation } from "react-i18next";
 
 export const TotpPage = () => {
   const queryString = window.location.search;
@@ -15,6 +16,7 @@ export const TotpPage = () => {
 
   const { totpPending, isLoggedIn } = useUserContext();
   const { title } = useAppContext();
+  const { t } = useTranslation();
 
   if (isLoggedIn) {
     return <Navigate to={`/logout`} />;
@@ -30,15 +32,15 @@ export const TotpPage = () => {
     },
     onError: () => {
       notifications.show({
-        title: "Failed to verify code",
+        title: t("totpFailTitle"),
-        message: "Please try again",
+        message: t("totpFailSubtitle"),
         color: "red",
       });
     },
     onSuccess: () => {
       notifications.show({
-        title: "Verified",
+        title: t("totpSuccessTitle"),
-        message: "Redirecting to your app",
+        message: t("totpSuccessSubtitle"),
         color: "green",
       });
       setTimeout(() => {
@@ -52,7 +54,7 @@ export const TotpPage = () => {
       <Title ta="center">{title}</Title>
       <Paper shadow="md" p="xl" mt={30} radius="md" withBorder>
         <Text size="lg" fw={500} mb="md" ta="center">
-          Enter your TOTP code
+          {t("totpTitle")}
         </Text>
         <TotpForm
           isLoading={totpMutation.isLoading}

site/src/pages/unauthorized-page.tsx

@@ -2,6 +2,7 @@ import { Button, Code, Paper, Text } from "@mantine/core";
 import { Layout } from "../components/layouts/layout";
 import { Navigate } from "react-router";
 import { isQueryValid } from "../utils/utils";
+import { Trans, useTranslation } from "react-i18next";
 
 export const UnauthorizedPage = () => {
   const queryString = window.location.search;
@@ -9,6 +10,8 @@ export const UnauthorizedPage = () => {
   const username = params.get("username") ?? "";
   const resource = params.get("resource") ?? "";
 
+  const { t } = useTranslation();
+
   if (!isQueryValid(username)) {
     return <Navigate to="/" />;
   }
@@ -17,16 +20,26 @@ export const UnauthorizedPage = () => {
     <Layout>
       <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
         <Text size="xl" fw={700}>
-          Unauthorized
+          {t("Unauthorized")}
         </Text>
         <Text>
-          The user with username <Code>{username}</Code> is not authorized to{" "}
           {isQueryValid(resource) ? (
-            <span>
+            <Text>
-              access the <Code>{resource}</Code> resource.
+              <Trans
-            </span>
+                i18nKey="unauthorizedResourceSubtitle"
+                t={t}
+                components={{ Code: <Code /> }}
+                values={{ resource, username }}
+              />
+            </Text>
           ) : (
-            "login."
+            <Text>
+              <Trans
+                i18nKey="unauthorizedLoginSubtitle"
+                t={t}
+                values={{ username }}
+              />
+            </Text>
           )}
         </Text>
         <Button
@@ -34,7 +47,7 @@ export const UnauthorizedPage = () => {
           mt="xl"
           onClick={() => window.location.replace("/login")}
         >
-          Try again
+          {t("unauthorizedButton")}
         </Button>
       </Paper>
     </Layout>