style login page

frontend/src/components/basics/PasswordField.tsx

@@ -0,0 +1,39 @@
+import { Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
+
+type PasswordFieldProps = {
+    onPasswordChanged: (password : string) => void
+}
+
+/**
+ * Password field component
+ */
+export default function PasswordField({onPasswordChanged} : PasswordFieldProps){
+    const [showPassword, setShowPassword] = useState(false);
+    const [password, setPassword] = useState<string>("");
+    const iconSize = 20;
+    
+    const changePassword = (password : string) => {
+        setPassword(password);
+        onPasswordChanged(password)
+    }
+    return (
+        <div className="relative">
+            <input
+            className="input-field pr-10"
+            type={showPassword ? "text" : "password"}
+            placeholder="Passwort"
+            value={password}
+            onChange={(e) => changePassword(e.target.value)}
+            />
+            <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+            aria-label={showPassword ? "Passwort ausblenden" : "Passwort anzeigen"}
+            >
+            {showPassword ? <EyeOff size={iconSize} /> : <Eye size={iconSize} />}
+            </button>
+        </div>
+    );
+}