feat: add custom forgot password message

frontend/package.json

@@ -24,6 +24,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.4.1",
+    "react-markdown": "^10.1.0",
     "react-router": "^7.1.3",
     "zod": "^3.24.1"
   },

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

@@ -1,4 +1,4 @@
-import { TextInput, PasswordInput, Button } from "@mantine/core";
+import { TextInput, PasswordInput, Button, Anchor, Group, Text } from "@mantine/core";
 import { useForm, zodResolver } from "@mantine/form";
 import { LoginFormValues, loginSchema } from "../../schemas/login-schema";
 import { useTranslation } from "react-i18next";
@@ -26,16 +26,25 @@ export const LoginForm = (props: LoginFormProps) => {
       <TextInput
         label={t("loginUsername")}
         placeholder="username"
-        required
         disabled={isPending}
+        required
+        withAsterisk={false}
         key={form.key("username")}
         {...form.getInputProps("username")}
       />
+      <Group justify="space-between" mb={5} mt="md">
+        <Text component="label" htmlFor=".password-input" size="sm" fw={500}>
+        {t("loginPassword")}
+        </Text>
+
+        <Anchor href="#" onClick={() => window.location.replace("/forgot-password")} pt={2} fw={500} fz="xs">
+          {t('forgotPasswordTitle')}
+        </Anchor>
+      </Group>
       <PasswordInput
-        label={t("loginPassword")}
+        className="password-input"
         placeholder="password"
         required
-        mt="md"
         disabled={isPending}
         key={form.key("password")}
         {...form.getInputProps("password")}

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

@@ -45,5 +45,6 @@
     "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?",
-    "cancelTitle": "Cancel"
+    "cancelTitle": "Cancel",
+    "forgotPasswordTitle": "Forgot your password?"
 }

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

@@ -45,5 +45,6 @@
     "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?",
-    "cancelTitle": "Cancel"
+    "cancelTitle": "Cancel",
+    "forgotPasswordTitle": "Forgot your password?"
 }

frontend/src/main.tsx

@@ -18,6 +18,7 @@ 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";
+import { ForgotPasswordPage } from "./pages/forgot-password-page.tsx";
 
 const queryClient = new QueryClient();
 
@@ -37,6 +38,7 @@ createRoot(document.getElementById("root")!).render(
                 <Route path="/continue" element={<ContinuePage />} />
                 <Route path="/unauthorized" element={<UnauthorizedPage />} />
                 <Route path="/error" element={<InternalServerError />} />
+                <Route path="/forgot-password" element={<ForgotPasswordPage />} />
                 <Route path="*" element={<NotFoundPage />} />
               </Routes>
             </BrowserRouter>

frontend/src/pages/forgot-password-page.tsx

@@ -0,0 +1,25 @@
+import { Paper, Text, TypographyStylesProvider } from "@mantine/core";
+import { Layout } from "../components/layouts/layout";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "../context/app-context";
+import Markdown from 'react-markdown'
+
+export const ForgotPasswordPage = () => {
+  const { t } = useTranslation();
+  const { forgotPasswordMessage } = useAppContext();
+
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          {t("forgotPasswordTitle")}
+        </Text>
+        <TypographyStylesProvider>
+            <Markdown>
+                {forgotPasswordMessage}
+            </Markdown>
+        </TypographyStylesProvider>
+      </Paper>
+    </Layout>
+  );
+};

frontend/src/schemas/app-context-schema.ts

@@ -6,6 +6,7 @@ export const appContextSchema = z.object({
   title: z.string(),
   genericName: z.string(),
   domain: z.string(),
+  forgotPasswordMessage: z.string(),
 });
 
 export type AppContextSchemaType = z.infer<typeof appContextSchema>;