From bc886d94767cd2898529c0c17ff669bad4a19fad Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 10 Aug 2024 15:54:43 +0200
Subject: [PATCH] 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
---
 .../app/[locale]/auth/login/_login-form.tsx   | 40 +++++++++++++++++--
 packages/translation/src/lang/en.ts           |  4 ++
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
index 927e0c6f2..6b144d35a 100644
--- a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
+++ b/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">
-                    {t("action.login.label")}
-                  </SubmitButton>
+                  <Stack gap="sm">
+                    <SubmitButton isPending={isPending} form={form} credentialType="basic">
+                      {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>;
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 63a906311..77b75f197 100644
--- a/packages/translation/src/lang/en.ts
+++ b/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",