feat: add collapse to login screen with cli command for password reset (#963)

* feat: add collapse to login screen with cli command for password reset

* refactor: add translations

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -3,7 +3,8 @@
 import type { PropsWithChildren } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { Button, Divider, PasswordInput, Stack, TextInput } from "@mantine/core";
+import { Anchor, Button, Card, Code, Collapse, Divider, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 
 import { signIn } from "@homarr/auth/client";
 import type { useForm } from "@homarr/form";
@@ -101,9 +102,12 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
                 <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
 
                 {providers.includes("credentials") && (
-                  <SubmitButton isPending={isPending} form={form} credentialType="basic">
+                  <Stack gap="sm">
-                    {t("action.login.label")}
+                    <SubmitButton isPending={isPending} form={form} credentialType="basic">
-                  </SubmitButton>
+                      {t("action.login.label")}
+                    </SubmitButton>
+                    <PasswordForgottenCollapse username={form.values.name} />
+                  </Stack>
                 )}
 
                 {providers.includes("ldap") && (
@@ -150,4 +154,32 @@ const SubmitButton = ({ isPending, form, credentialType, children }: PropsWithCh
   );
 };
 
+interface PasswordForgottenCollapseProps {
+  username: string;
+}
+const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps) => {
+  const [visible, { toggle }] = useDisclosure(false);
+  const tForgotPassword = useScopedI18n("user.action.login.forgotPassword");
+
+  const commandUsername = username.trim().length >= 1 ? username.trim() : "<username>";
+
+  return (
+    <>
+      <Anchor type="button" component="button" onClick={toggle}>
+        {tForgotPassword("label")}
+      </Anchor>
+
+      <Collapse in={visible}>
+        <Card>
+          <Stack gap="xs">
+            <Text size="sm">{tForgotPassword("description")}</Text>
+
+            <Code>homarr reset-password -u {commandUsername}</Code>
+          </Stack>
+        </Card>
+      </Collapse>
+    </>
+  );
+};
+
 type FormType = z.infer<typeof validation.user.signIn>;

packages/translation/src/lang/en.ts

@@ -58,6 +58,10 @@ export default {
             message: "Your login failed",
           },
         },
+        forgotPassword: {
+          label: "Forgotten your password?",
+          description: "An administrator can use the following command to reset your password:",
+        },
       },
       register: {
         label: "Create account",