From c6c87783979b1053fd6068920c412c20547bab69 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Tue, 27 Feb 2024 21:53:53 +0100
Subject: [PATCH] feat: add password input field (#160)

---
 .../create/_components/stepper.component.tsx  | 34 ++++++++++++++++---
 packages/translation/src/lang/en.ts           | 10 ++++--
 packages/validation/src/user.ts               |  1 +
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper.component.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper.component.tsx
index 33fda941b..6a8041f1e 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper.component.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper.component.tsx
@@ -9,13 +9,14 @@ import {
   Avatar,
   Card,
   IconUserCheck,
+  PasswordInput,
   Stack,
   Stepper,
   Text,
   TextInput,
   Title,
 } from "@homarr/ui";
-import { z } from "@homarr/validation";
+import { validation, z } from "@homarr/validation";
 
 import { StepperNavigationComponent } from "./stepper-navigation.component";
 
@@ -48,7 +49,20 @@ export const UserCreateStepperComponent = () => {
     validateInputOnChange: true,
   });
 
-  const allForms = [generalForm];
+  const securityForm = useForm({
+    initialValues: {
+      password: "",
+    },
+    validate: zodResolver(
+      z.object({
+        password: validation.user.password
+      }),
+    ),
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
+  });
+
+  const allForms = [generalForm, securityForm];
 
   const canNavigateToNextStep = allForms[active]?.isValid() ?? true;
 
@@ -104,12 +118,22 @@ export const UserCreateStepperComponent = () => {
           </form>
         </Stepper.Step>
         <Stepper.Step
-          label={t("step.preferences.label")}
-          description={t("step.preferences.description")}
+          label={t("step.security.label")}
           allowStepSelect={false}
           allowStepClick={false}
         >
-          Step 2
+          <form>
+            <Card p="xl">
+              <Stack gap="md">
+                <PasswordInput
+                  label={t("step.security.field.password.label")}
+                  variant="filled"
+                  withAsterisk
+                  {...securityForm.getInputProps("password")}
+                />
+              </Stack>
+            </Card>
+          </form>
         </Stepper.Step>
         <Stepper.Step
           label={t("step.permissions.label")}
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 2b1e6d38f..f0deaf658 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -423,9 +423,13 @@ export default {
                 },
               },
             },
-            preferences: {
-              label: "Preferences",
-              description: "Coming soon",
+            security: {
+              label: "Security",
+              field: {
+                password: {
+                  label: "Password"
+                }
+              }
             },
             permissions: {
               label: "Permissions",
diff --git a/packages/validation/src/user.ts b/packages/validation/src/user.ts
index 7d02a2c2a..818890ba2 100644
--- a/packages/validation/src/user.ts
+++ b/packages/validation/src/user.ts
@@ -22,4 +22,5 @@ const signInSchema = z.object({
 export const userSchemas = {
   signIn: signInSchema,
   init: initUserSchema,
+  password: passwordSchema,
 };