fix: don't escape backend values in the frontend (translations)

.gitignore

@@ -39,6 +39,3 @@ __debug_*
 
 # infisical
 /.infisical.json
-
-# traefik data
-/traefik

Makefile

@@ -10,7 +10,7 @@ BUILD_TIMESTAMP := $(shell date '+%Y-%m-%dT%H:%M:%S')
 BIN_NAME := tinyauth-$(GOARCH)
 
 # Development vars
-DEV_COMPOSE := $(shell test -f "docker-compose.test.yml" && echo "docker-compose.test.yml" || echo "docker-compose.yml" )
+DEV_COMPOSE := $(shell test -f "docker-compose.test.yml" && echo "docker-compose.test.yml" || echo "docker-compose.dev.yml" )
 PROD_COMPOSE := $(shell test -f "docker-compose.test.prod.yml" && echo "docker-compose.test.prod.yml" || echo "docker-compose.example.yml" )
 
 # Deps

docker-compose.dev.yml

@@ -13,7 +13,7 @@ services:
     image: traefik/whoami:latest
     labels:
       traefik.enable: true
-      traefik.http.routers.whoami.rule: Host(`whoami.example.com`)
+      traefik.http.routers.whoami.rule: Host(`whoami.127.0.0.1.sslip.io`)
       traefik.http.routers.whoami.middlewares: tinyauth
 
   tinyauth-frontend:
@@ -27,7 +27,7 @@ services:
       - 5173:5173
     labels:
       traefik.enable: true
-      traefik.http.routers.tinyauth.rule: Host(`tinyauth.example.com`)
+      traefik.http.routers.tinyauth.rule: Host(`tinyauth.127.0.0.1.sslip.io`)
 
   tinyauth-backend:
     container_name: tinyauth-backend

frontend/src/components/domain-warning/domain-warning.tsx

@@ -33,6 +33,7 @@ export const DomainWarning = (props: Props) => {
             i18nKey="domainWarningSubtitle"
             values={{ appUrl, currentUrl }}
             components={{ code: <code /> }}
+            shouldUnescape={true}
           />
         </CardDescription>
       </CardHeader>

frontend/src/pages/continue-page.tsx

@@ -32,43 +32,34 @@ export const ContinuePage = () => {
     cookieDomain,
   );
 
-  const urlHref = url?.href;
+  const handleRedirect = useCallback(() => {
+    hasRedirected.current = true;
+    setIsLoading(true);
+    window.location.assign(url!);
+  }, [url]);
 
-  const hasValidRedirect = valid && allowedProto;
-  const showUntrustedWarning =
-    hasValidRedirect && !trusted && !disableUiWarnings;
-  const showInsecureWarning =
-    hasValidRedirect && httpsDowngrade && !disableUiWarnings;
-  const shouldAutoRedirect =
-    isLoggedIn &&
-    hasValidRedirect &&
-    !showUntrustedWarning &&
-    !showInsecureWarning;
-
-  const redirectToTarget = useCallback(() => {
-    if (!urlHref || hasRedirected.current) {
+  useEffect(() => {
+    if (!isLoggedIn) {
       return;
     }
 
-    hasRedirected.current = true;
-    window.location.assign(urlHref);
-  }, [urlHref]);
+    if (hasRedirected.current) {
+      return;
+    }
 
-  const handleRedirect = useCallback(() => {
-    setIsLoading(true);
-    redirectToTarget();
-  }, [redirectToTarget]);
-
-  useEffect(() => {
-    if (!shouldAutoRedirect) {
+    if (
+      (!valid || !allowedProto || !trusted || httpsDowngrade) &&
+      !disableUiWarnings
+    ) {
       return;
     }
 
     const auto = setTimeout(() => {
-      redirectToTarget();
+      handleRedirect();
     }, 100);
 
     const reveal = setTimeout(() => {
+      setIsLoading(false);
       setShowRedirectButton(true);
     }, 5000);
 
@@ -76,7 +67,18 @@ export const ContinuePage = () => {
       clearTimeout(auto);
       clearTimeout(reveal);
     };
-  }, [shouldAutoRedirect, redirectToTarget]);
+  }, [
+    isLoggedIn,
+    hasRedirected,
+    valid,
+    allowedProto,
+    trusted,
+    httpsDowngrade,
+    disableUiWarnings,
+    setIsLoading,
+    handleRedirect,
+    setShowRedirectButton,
+  ]);
 
   if (!isLoggedIn) {
     return (
@@ -87,11 +89,11 @@ export const ContinuePage = () => {
     );
   }
 
-  if (!hasValidRedirect) {
+  if (!valid || !allowedProto) {
     return <Navigate to="/logout" replace />;
   }
 
-  if (showUntrustedWarning) {
+  if (!trusted && !disableUiWarnings) {
     return (
       <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
         <CardHeader>
@@ -106,12 +108,13 @@ export const ContinuePage = () => {
                 code: <code />,
               }}
               values={{ cookieDomain }}
+              shouldUnescape={true}
             />
           </CardDescription>
         </CardHeader>
         <CardFooter className="flex flex-col items-stretch gap-2">
           <Button
-            onClick={handleRedirect}
+            onClick={() => handleRedirect()}
             loading={isLoading}
             variant="destructive"
           >
@@ -129,7 +132,7 @@ export const ContinuePage = () => {
     );
   }
 
-  if (showInsecureWarning) {
+  if (httpsDowngrade && !disableUiWarnings) {
     return (
       <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
         <CardHeader>
@@ -148,7 +151,7 @@ export const ContinuePage = () => {
         </CardHeader>
         <CardFooter className="flex flex-col items-stretch gap-2">
           <Button
-            onClick={handleRedirect}
+            onClick={() => handleRedirect()}
             loading={isLoading}
             variant="warning"
           >
@@ -176,7 +179,7 @@ export const ContinuePage = () => {
       </CardHeader>
       {showRedirectButton && (
         <CardFooter className="flex flex-col items-stretch">
-          <Button onClick={handleRedirect}>
+          <Button onClick={() => handleRedirect()}>
             {t("continueRedirectManually")}
           </Button>
         </CardFooter>

frontend/src/pages/logout-page.tsx

@@ -67,6 +67,7 @@ export const LogoutPage = () => {
                 username: email,
                 provider: oauthName,
               }}
+              shouldUnescape={true}
             />
           ) : (
             <Trans
@@ -78,6 +79,7 @@ export const LogoutPage = () => {
               values={{
                 username,
               }}
+              shouldUnescape={true}
             />
           )}
         </CardDescription>