From 14eb86e1f6d1f339a10c26425cddb77bdbc7b5b8 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:18:25 -0500
Subject: [PATCH] form changes and i18n

---
 web/public/locales/en/components/auth.json |  1 +
 web/src/components/auth/AuthForm.tsx       | 30 +++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/web/public/locales/en/components/auth.json b/web/public/locales/en/components/auth.json
index 05c2a779f..56b750070 100644
--- a/web/public/locales/en/components/auth.json
+++ b/web/public/locales/en/components/auth.json
@@ -3,6 +3,7 @@
     "user": "Username",
     "password": "Password",
     "login": "Login",
+    "firstTimeLogin": "Trying to log in for the first time? Credentials are printed in the Frigate logs.",
     "errors": {
       "usernameRequired": "Username is required",
       "passwordRequired": "Password is required",
diff --git a/web/src/components/auth/AuthForm.tsx b/web/src/components/auth/AuthForm.tsx
index 12e8f777e..8798b5d00 100644
--- a/web/src/components/auth/AuthForm.tsx
+++ b/web/src/components/auth/AuthForm.tsx
@@ -22,14 +22,24 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { AuthContext } from "@/context/auth-context";
 import { useTranslation } from "react-i18next";
+import useSWR from "swr";
+import { LuExternalLink } from "react-icons/lu";
+import { useDocDomain } from "@/hooks/use-doc-domain";
+import { Card, CardContent } from "@/components/ui/card";
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
-  const { t } = useTranslation(["components/auth"]);
+  const { t } = useTranslation(["components/auth", "common"]);
+  const { getLocaleDocUrl } = useDocDomain();
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const { login } = React.useContext(AuthContext);
 
+  // need to use local fetcher because useSWR default fetcher is not set up in this context
+  const fetcher = (path: string) => axios.get(path).then((res) => res.data);
+  const { data } = useSWR("/auth/first_time_login", fetcher);
+  const showFirstTimeLink = data?.admin_first_time_login === true;
+
   const formSchema = z.object({
     user: z.string().min(1, t("form.errors.usernameRequired")),
     password: z.string().min(1, t("form.errors.passwordRequired")),
@@ -136,6 +146,24 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
           </div>
         </form>
       </Form>
+      {showFirstTimeLink && (
+        <Card className="mt-4 p-4 text-center text-sm">
+          <CardContent className="p-2">
+            <p className="mb-2 text-primary-variant">
+              {t("form.firstTimeLogin")}
+            </p>
+            <a
+              href={getLocaleDocUrl("configuration/authentication#onboarding")}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-primary"
+            >
+              {t("readTheDocumentation", { ns: "common" })}
+              <LuExternalLink className="ml-2 size-3" />
+            </a>
+          </CardContent>
+        </Card>
+      )}
       <Toaster />
     </div>
   );