feat(auth): signupm, forgot passowrd, reset password all added

lstV2/frontend/src/utils/formStuff/options/InputPasswordField.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+import { useFieldContext } from "..";
+import { Input } from "@/components/ui/input";
+import { FieldErrors } from "./FieldErrors";
+import { Button } from "@/components/ui/button";
+import { Eye, EyeOff } from "lucide-react";
+
+type PasswordInputProps = {
+    label: string;
+    required?: boolean;
+};
+
+export const InputPassword = ({
+    label,
+    required = false,
+}: PasswordInputProps) => {
+    const field = useFieldContext<any>();
+    const [show, setShow] = useState(false);
+
+    return (
+        <div className="grid gap-3">
+            <Label htmlFor={field.name}>{label}</Label>
+            <div className="relative">
+                <Input
+                    id={field.name}
+                    type={show ? "text" : "password"}
+                    value={field.state.value}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    onBlur={field.handleBlur}
+                    required={required}
+                    className="pr-10"
+                />
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setShow((p) => !p)}
+                    className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7"
+                    tabIndex={-1} // prevent messing with tab order
+                >
+                    {show ? (
+                        <EyeOff className="h-4 w-4" />
+                    ) : (
+                        <Eye className="h-4 w-4" />
+                    )}
+                </Button>
+            </div>
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};