i18n: i18n tailscale frontend features

Author: steveiliop56

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

@@ -80,5 +80,17 @@
     "profileScopeDescription": "Allows the app to access your profile information.",
     "groupsScopeName": "Groups",
     "groupsScopeDescription": "Allows the app to access your group information.",
-    "backToLoginButton": "Back to login"
+    "backToLoginButton": "Back to login",
+    "phoneScopeName": "Phone",
+    "phoneScopeDescription": "Allows the app to access your phone number.",
+    "addressScopeName": "Address",
+    "addressScopeDescription": "Allows the app to access your address.",
+    "loginTailscaleTitle": "Continue with Tailscale",
+    "loginTailscaleDescription": "We detected that you are accessing Tinyauth from an authorized Tailscale device. Would you like to continue with your Tailscale connection?",
+    "loginTailscaleDeviceName": "Device name:",
+    "loginTailscaleSubmit": "Continue with Tailscale",
+    "loginTailscaleOtherMethod": "Login with another method",
+    "loginTailscaleSuccess": "Successfully authenticated with Tailscale.",
+    "loginTailscaleFail": "Failed to authenticate with Tailscale. Please try again or use another login method.",
+    "logoutTailscaleSubtitle": "You are currently logged in with Tailscale on your device <code>{{deviceName}}</code>. Click the button below to logout."
 }

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

@@ -84,5 +84,13 @@
     "phoneScopeName": "Phone",
     "phoneScopeDescription": "Allows the app to access your phone number.",
     "addressScopeName": "Address",
-    "addressScopeDescription": "Allows the app to access your address."
+    "addressScopeDescription": "Allows the app to access your address.",
+    "loginTailscaleTitle": "Continue with Tailscale",
+    "loginTailscaleDescription": "We detected that you are accessing Tinyauth from an authorized Tailscale device. Would you like to continue with your Tailscale connection?",
+    "loginTailscaleDeviceName": "Device name:",
+    "loginTailscaleSubmit": "Continue with Tailscale",
+    "loginTailscaleOtherMethod": "Login with another method",
+    "loginTailscaleSuccess": "Successfully authenticated with Tailscale.",
+    "loginTailscaleFail": "Failed to authenticate with Tailscale. Please try again or use another login method.",
+    "logoutTailscaleSubtitle": "You are currently logged in with Tailscale on your device <code>{{deviceName}}</code>. Click the button below to logout."
 }

frontend/src/pages/login-page.tsx

@@ -158,8 +158,8 @@ export const LoginPage = () => {
       mutationFn: () => axios.post("/api/user/tailscale"),
       mutationKey: ["tailscale"],
       onSuccess: () => {
-        toast.success("Logged in", {
-          description: t("Tailscale session confirmed"),
+        toast.success(t("loginSuccessTitle"), {
+          description: t("loginTailscaleSuccess"),
         });
 
         redirectTimer.current = window.setTimeout(() => {
@@ -173,8 +173,8 @@ export const LoginPage = () => {
         }, 500);
       },
       onError: () => {
-        toast.error("Failed to login", {
-          description: "Failed to authenticate with Tailscale.",
+        toast.error(t("loginFailTitle"), {
+          description: t("loginTailscaleFail"),
         });
       },
     });
@@ -266,17 +266,15 @@ export const LoginPage = () => {
         <CardHeader className="gap-3">
           <TailscaleIcon className="mx-auto h-8 w-8" />
           <CardTitle className="text-center text-xl">
-            Tinyauth · Tailscale
+            {t("loginTailscaleTitle")}
           </CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
           <div className="text-muted-foreground text-sm">
-            We detected that you are accessing Tinyauth from an authorized
-            Tailscale device. Would you like to continue with your Tailscale
-            credentials?
+            {t("loginTailscaleDescription")}
           </div>
           <div className="text-muted-foreground text-sm">
-            Machine Name: <code>{tailscale.nodeName}</code>
+            {t("loginTailscaleDeviceName")} <code>{tailscale.nodeName}</code>
           </div>
         </CardContent>
         <CardFooter className="flex flex-col items-stretch gap-3">
@@ -285,15 +283,15 @@ export const LoginPage = () => {
             onClick={() => tailscaleMutate()}
             loading={tailscaleIsPending}
           >
-            Continue with Tailscale
+            {t("loginTailscaleSubmit")}
           </Button>
           <Button
             className="w-full"
             variant="outline"
             onClick={() => setUseTailscale(false)}
             disabled={tailscaleIsPending}
           >
-            Use other login method
+            {t("loginTailscaleOtherMethod")}
           </Button>
         </CardFooter>
       </Card>

frontend/src/pages/logout-page.tsx

@@ -75,9 +75,17 @@ export const LogoutPage = () => {
   if (auth.providerId === "tailscale") {
     return (
       <LogoutLayout logoutMutation={logoutMutation}>
-        You are currently logged in with the Tailscale integration identified by
-        the <code>{tailscale.nodeName}</code> node. Click the button below to
-        log out.
+        <Trans
+          i18nKey="logoutTailscaleSubtitle"
+          t={t}
+          components={{
+            code: <code />,
+          }}
+          values={{
+            deviceName: tailscale.nodeName,
+          }}
+          shouldUnescape={true}
+        />
       </LogoutLayout>
     );
   }

internal/bootstrap/app_bootstrap.go

@@ -396,7 +396,7 @@ func (app *BootstrapApp) serveUnix() error {
 }
 
 func (app *BootstrapApp) serveTailscale() error {
-	app.log.App.Info().Msgf("Starting Tailscale server on %s", app.services.tailscaleService.GetHostname())
+	app.log.App.Info().Msgf("Starting Tailscale server on %s", fmt.Sprintf("https://%s", app.services.tailscaleService.GetHostname()))
 
 	listener, err := app.services.tailscaleService.CreateListener()