Feat/new UI (#153)

* wip * feat: make forms functional * feat: finalize pages * chore: remove unused translations * feat: app context * feat: user context * feat: finalize username login * fix: use correct tab order in login form * feat: add oauth logic * chore: update readme and assets * chore: rename docs back to assets * feat: favicons * feat: custom background image config option * chore: add acknowledgements for background image * feat: sanitize redirect URL * feat: sanitize redirect URL on check * chore: fix dependabot config * refactor: bot suggestions * fix: correctly redirect to app and check for untrusted redirects * fix: run oauth auto redirect only when there is a redirect URI * refactor: change select color * fix: fix dockerfiles * fix: fix hook rendering * chore: remove translations cdn * chore: formatting * feat: validate api response against zod schema * fix: use axios error instead of generic error in login page
2025-11-01 14:45:47 +00:00 · 2025-05-20 17:17:12 +03:00
parent 4d061db29a
commit 318f00993e
84 changed files with 3012 additions and 6009 deletions
--- a/frontend/src/lib/hooks/use-is-mounted.ts
+++ b/frontend/src/lib/hooks/use-is-mounted.ts
@@ -1,26 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from "react";

-/**
- * Custom hook that determines if the component is currently mounted.
- * @returns {() => boolean} A function that returns a boolean value indicating whether the component is mounted.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-is-mounted)
- * @example
- * ```tsx
- * const isComponentMounted = useIsMounted();
- * // Use isComponentMounted() to check if the component is currently mounted before performing certain actions.
- * ```
- */
 export function useIsMounted(): () => boolean {
-  const isMounted = useRef(false)
+  const isMounted = useRef(false);

  useEffect(() => {
-    isMounted.current = true
+    isMounted.current = true;

    return () => {
-      isMounted.current = false
-    }
-  }, [])
+      isMounted.current = false;
+    };
+  }, []);

-  return useCallback(() => isMounted.current, [])
-}
+  return useCallback(() => isMounted.current, []);
+}
--- a/frontend/src/lib/i18n/i18n.ts
+++ b/frontend/src/lib/i18n/i18n.ts
@@ -1,28 +1,16 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import ChainedBackend from "i18next-chained-backend";
 import resourcesToBackend from "i18next-resources-to-backend";
-import HttpBackend from "i18next-http-backend";
-
-const backends = [
-  HttpBackend,
-  resourcesToBackend(
-    (language: string) => import(`./locales/${language}.json`),
-  ),
-]
-
-const backendOptions =  [
-  {
-    loadPath: "https://cdn.tinyauth.app/i18n/v1/{{lng}}.json",
-  },
-  {}
-]

 i18n
-  .use(ChainedBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
+  .use(
+    resourcesToBackend(
+      (language: string) => import(`./locales/${language}.json`),
+    ),
+  )
  .init({
    fallbackLng: "en",
    debug: import.meta.env.MODE === "development",
@@ -32,11 +20,6 @@ i18n
    },

    load: "currentOnly",
-
-    backend: {
-      backends: import.meta.env.MODE !== "development" ? backends : backends.reverse(),
-      backendOptions: import.meta.env.MODE !== "development" ? backendOptions : backendOptions.reverse()
-    },
  });

 export default i18n;
--- a/frontend/src/lib/i18n/locales.ts
+++ b/frontend/src/lib/i18n/locales.ts
@@ -1,36 +1,37 @@
 export const languages = {
-    "af-ZA": "Afrikaans",
-    "ar-SA": "العربية",
-    "ca-ES": "Català",
-    "cs-CZ": "Čeština",
-    "da-DK": "Dansk",
-    "de-DE": "Deutsch",
-    "el-GR": "Ελληνικά",
-    "en-US": "English",
-    "es-ES": "Español",
-    "fi-FI": "Suomi",
-    "fr-FR": "Français",
-    "he-IL": "עברית",
-    "hu-HU": "Magyar",
-    "it-IT": "Italiano",
-    "ja-JP": "日本語",
-    "ko-KR": "한국어",
-    "nl-NL": "Nederlands",
-    "no-NO": "Norsk",
-    "pl-PL": "Polski",
-    "pt-BR": "Português",
-    "pt-PT": "Português",
-    "ro-RO": "Română",
-    "ru-RU": "Русский",
-    "sr-SP": "Српски",
-    "sv-SE": "Svenska",
-    "tr-TR": "Türkçe",
-    "uk-UA": "Українська",
-    "vi-VN": "Tiếng Việt",
-    "zh-CN": "中文",
-    "zh-TW": "中文"
-}
+  "af-ZA": "Afrikaans",
+  "ar-SA": "العربية",
+  "ca-ES": "Català",
+  "cs-CZ": "Čeština",
+  "da-DK": "Dansk",
+  "de-DE": "Deutsch",
+  "el-GR": "Ελληνικά",
+  "en-US": "English",
+  "es-ES": "Español",
+  "fi-FI": "Suomi",
+  "fr-FR": "Français",
+  "he-IL": "עברית",
+  "hu-HU": "Magyar",
+  "it-IT": "Italiano",
+  "ja-JP": "日本語",
+  "ko-KR": "한국어",
+  "nl-NL": "Nederlands",
+  "no-NO": "Norsk",
+  "pl-PL": "Polski",
+  "pt-BR": "Português",
+  "pt-PT": "Português",
+  "ro-RO": "Română",
+  "ru-RU": "Русский",
+  "sr-SP": "Српски",
+  "sv-SE": "Svenska",
+  "tr-TR": "Türkçe",
+  "uk-UA": "Українська",
+  "vi-VN": "Tiếng Việt",
+  "zh-CN": "中文",
+  "zh-TW": "中文",
+};

 export type SupportedLanguage = keyof typeof languages;

-export const getLanguageName = (language: SupportedLanguage): string => languages[language];
+export const getLanguageName = (language: SupportedLanguage): string =>
+  languages[language];
--- a/frontend/src/lib/i18n/locales/en-US.json
+++ b/frontend/src/lib/i18n/locales/en-US.json
@@ -1,15 +1,16 @@
 {
    "loginTitle": "Welcome back, login with",
-    "loginDivider": "Or continue with password",
+    "loginTitleSimple": "Welcome back, please login",
+    "loginDivider": "Or",
    "loginUsername": "Username",
    "loginPassword": "Password",
    "loginSubmit": "Login",
    "loginFailTitle": "Failed to log in",
    "loginFailSubtitle": "Please check your username and password",
-    "loginFailRateLimit": "You failed to login too many times, please try again later",
+    "loginFailRateLimit": "You failed to login too many times. Please try again later",
    "loginSuccessTitle": "Logged in",
    "loginSuccessSubtitle": "Welcome back!",
-    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailTitle": "An error occurred",
    "loginOauthFailSubtitle": "Failed to get OAuth URL",
    "loginOauthSuccessTitle": "Redirecting",
    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider",
@@ -18,19 +19,16 @@
    "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?",
+    "continueInsecureRedirectSubtitle": "You are trying to redirect from <code>https</code> to <code>http</code> which is not secure. 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 occurred on the server and it currently cannot serve your request.",
-    "internalErrorButton": "Try again",
    "logoutFailTitle": "Failed to log out",
    "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.",
+    "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",
@@ -39,13 +37,17 @@
    "totpSuccessTitle": "Verified",
    "totpSuccessSubtitle": "Redirecting to your app",
    "totpTitle": "Enter your TOTP code",
+    "totpSubtitle": "Please enter the code from your authenticator app.",
    "unauthorizedTitle": "Unauthorized",
-    "unauthorizedResourceSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to access the resource <Code>{{resource}}</Code>.",
-    "unauthorizedLoginSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to login.",
-    "unauthorizedGroupsSubtitle": "The user with username <Code>{{username}}</Code> is not in the groups required by the resource <Code>{{resource}}</Code>.",
+    "unauthorizedResourceSubtitle": "The user with username <code>{{username}}</code> is not authorized to access the resource <code>{{resource}}</code>.",
+    "unauthorizedLoginSubtitle": "The user with username <code>{{username}}</code> is not authorized to login.",
+    "unauthorizedGroupsSubtitle": "The user with username <code>{{username}}</code> is not in the groups required by the resource <code>{{resource}}</code>.",
    "unauthorizedButton": "Try again",
    "untrustedRedirectTitle": "Untrusted redirect",
-    "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<Code>{{domain}}</Code>). Are you sure you want to continue?",
+    "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{domain}}</code>). Are you sure you want to continue?",
    "cancelTitle": "Cancel",
-    "forgotPasswordTitle": "Forgot your password?"
+    "forgotPasswordTitle": "Forgot your password?",
+    "failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
+    "errorTitle": "An error occurred",
+    "errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information."
 }
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -1,15 +1,16 @@
 {
    "loginTitle": "Welcome back, login with",
-    "loginDivider": "Or continue with password",
+    "loginTitleSimple": "Welcome back, please login",
+    "loginDivider": "Or",
    "loginUsername": "Username",
    "loginPassword": "Password",
    "loginSubmit": "Login",
    "loginFailTitle": "Failed to log in",
    "loginFailSubtitle": "Please check your username and password",
-    "loginFailRateLimit": "You failed to login too many times, please try again later",
+    "loginFailRateLimit": "You failed to login too many times. Please try again later",
    "loginSuccessTitle": "Logged in",
    "loginSuccessSubtitle": "Welcome back!",
-    "loginOauthFailTitle": "Internal error",
+    "loginOauthFailTitle": "An error occurred",
    "loginOauthFailSubtitle": "Failed to get OAuth URL",
    "loginOauthSuccessTitle": "Redirecting",
    "loginOauthSuccessSubtitle": "Redirecting to your OAuth provider",
@@ -18,19 +19,16 @@
    "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?",
+    "continueInsecureRedirectSubtitle": "You are trying to redirect from <code>https</code> to <code>http</code> which is not secure. 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 occurred on the server and it currently cannot serve your request.",
-    "internalErrorButton": "Try again",
    "logoutFailTitle": "Failed to log out",
    "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.",
+    "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",
@@ -39,13 +37,17 @@
    "totpSuccessTitle": "Verified",
    "totpSuccessSubtitle": "Redirecting to your app",
    "totpTitle": "Enter your TOTP code",
+    "totpSubtitle": "Please enter the code from your authenticator app.",
    "unauthorizedTitle": "Unauthorized",
-    "unauthorizedResourceSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to access the resource <Code>{{resource}}</Code>.",
-    "unauthorizedLoginSubtitle": "The user with username <Code>{{username}}</Code> is not authorized to login.",
-    "unauthorizedGroupsSubtitle": "The user with username <Code>{{username}}</Code> is not in the groups required by the resource <Code>{{resource}}</Code>.",
+    "unauthorizedResourceSubtitle": "The user with username <code>{{username}}</code> is not authorized to access the resource <code>{{resource}}</code>.",
+    "unauthorizedLoginSubtitle": "The user with username <code>{{username}}</code> is not authorized to login.",
+    "unauthorizedGroupsSubtitle": "The user with username <code>{{username}}</code> is not in the groups required by the resource <code>{{resource}}</code>.",
    "unauthorizedButton": "Try again",
    "untrustedRedirectTitle": "Untrusted redirect",
-    "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<Code>{{domain}}</Code>). Are you sure you want to continue?",
+    "untrustedRedirectSubtitle": "You are trying to redirect to a domain that does not match your configured domain (<code>{{domain}}</code>). Are you sure you want to continue?",
    "cancelTitle": "Cancel",
-    "forgotPasswordTitle": "Forgot your password?"
+    "forgotPasswordTitle": "Forgot your password?",
+    "failedToFetchProvidersTitle": "Failed to load authentication providers. Please check your configuration.",
+    "errorTitle": "An error occurred",
+    "errorSubtitle": "An error occurred while trying to perform this action. Please check the console for more information."
 }
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,19 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const isValidUrl = (url: string) => {
+  try {
+    new URL(url);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};