added password input component and integrated password change functionality in Header; updated LoginPage for localized labels

FrontendV2/src/components/Header.tsx

@@ -1,4 +1,15 @@
-import { Badge, Button, Flex, Heading, Stack, Text } from "@chakra-ui/react";
+import {
+  Badge,
+  Button,
+  Flex,
+  Heading,
+  Stack,
+  Text,
+  CloseButton,
+  Dialog,
+  Portal,
+} from "@chakra-ui/react";
+import { PasswordInput } from "@/components/ui/password-input";
 import Cookies from "js-cookie";
 import { useAtom } from "jotai";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
@@ -12,15 +23,64 @@ import {
   CalendarPlus,
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
+import { useState } from "react";
+import MyAlert from "./myChakra/MyAlert";
+
+const API_BASE =
+  (import.meta as any).env?.VITE_BACKEND_URL ||
+  import.meta.env.VITE_BACKEND_URL ||
+  "http://localhost:8002";
 
 export const Header = () => {
   const navigate = useNavigate();
 
   const userData = useUserContext();
 
+  // Error handling states
+  const [isMsg, setIsMsg] = useState(false);
+  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
+  const [msgTitle, setMsgTitle] = useState("");
+  const [msgDescription, setMsgDescription] = useState("");
+
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
   const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
 
+  const changePassword = async () => {
+    if (newPassword !== confirmPassword) {
+      setMsgTitle("Passwortänderung fehlgeschlagen");
+      setMsgDescription("Passwörter stimmen nicht überein");
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    const response = await fetch(`${API_BASE}/api/changePassword`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token")}`,
+      },
+      body: JSON.stringify({ oldPassword, newPassword }),
+    });
+
+    if (!response.ok) {
+      setMsgTitle("Passwortänderung fehlgeschlagen");
+      setMsgDescription("Bitte überprüfen Sie Ihre Eingaben");
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    setMsgTitle("Passwort erfolgreich geändert");
+    setMsgDescription("Ihr Passwort wurde erfolgreich geändert");
+    setMsgStatus("success");
+    setIsMsg(true);
+  };
+
   return (
     <Stack as="header" gap={3} className="mb-16">
       <Flex
@@ -61,9 +121,60 @@ export const Header = () => {
         <Button onClick={() => navigate("/my-loans", { replace: true })}>
           <CircleUserRound /> Meine Ausleihen
         </Button>
-        <Button>
-          <RotateCcwKey /> Passwort ändern
-        </Button>
+        <Dialog.Root>
+          <Dialog.Trigger asChild>
+            <Button>
+              <RotateCcwKey /> Passwort ändern
+            </Button>
+          </Dialog.Trigger>
+          <Portal>
+            <Dialog.Backdrop />
+            <Dialog.Positioner>
+              <Dialog.Content>
+                <Dialog.Header>
+                  <Dialog.Title>Passwort ändern</Dialog.Title>
+                </Dialog.Header>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    changePassword();
+                  }}
+                >
+                  <Dialog.Body>
+                    <PasswordInput
+                      onChange={(e) => setOldPassword(e.target.value)}
+                      placeholder="Altes Passwort"
+                    />
+                    <PasswordInput
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      placeholder="Neues Passwort"
+                    />
+                    <PasswordInput
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      placeholder="Neues Passwort wiederholen"
+                    />
+                  </Dialog.Body>
+                  <Dialog.Footer>
+                    {isMsg && (
+                      <MyAlert
+                        status={msgStatus}
+                        title={msgTitle}
+                        description={msgDescription}
+                      />
+                    )}
+                    <Dialog.ActionTrigger asChild>
+                      <Button variant="outline">Cancel</Button>
+                    </Dialog.ActionTrigger>
+                    <Button type="submit">Save</Button>
+                  </Dialog.Footer>
+                </form>
+                <Dialog.CloseTrigger asChild>
+                  <CloseButton size="sm" />
+                </Dialog.CloseTrigger>
+              </Dialog.Content>
+            </Dialog.Positioner>
+          </Portal>
+        </Dialog.Root>
         <a
           href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki"
           target="_blank"

FrontendV2/src/components/ui/password-input.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import type {
+  ButtonProps,
+  GroupProps,
+  InputProps,
+  StackProps,
+} from "@chakra-ui/react"
+import {
+  Box,
+  HStack,
+  IconButton,
+  Input,
+  InputGroup,
+  Stack,
+  mergeRefs,
+  useControllableState,
+} from "@chakra-ui/react"
+import * as React from "react"
+import { LuEye, LuEyeOff } from "react-icons/lu"
+
+export interface PasswordVisibilityProps {
+  /**
+   * The default visibility state of the password input.
+   */
+  defaultVisible?: boolean
+  /**
+   * The controlled visibility state of the password input.
+   */
+  visible?: boolean
+  /**
+   * Callback invoked when the visibility state changes.
+   */
+  onVisibleChange?: (visible: boolean) => void
+  /**
+   * Custom icons for the visibility toggle button.
+   */
+  visibilityIcon?: { on: React.ReactNode; off: React.ReactNode }
+}
+
+export interface PasswordInputProps
+  extends InputProps,
+    PasswordVisibilityProps {
+  rootProps?: GroupProps
+}
+
+export const PasswordInput = React.forwardRef<
+  HTMLInputElement,
+  PasswordInputProps
+>(function PasswordInput(props, ref) {
+  const {
+    rootProps,
+    defaultVisible,
+    visible: visibleProp,
+    onVisibleChange,
+    visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
+    ...rest
+  } = props
+
+  const [visible, setVisible] = useControllableState({
+    value: visibleProp,
+    defaultValue: defaultVisible || false,
+    onChange: onVisibleChange,
+  })
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  return (
+    <InputGroup
+      endElement={
+        <VisibilityTrigger
+          disabled={rest.disabled}
+          onPointerDown={(e) => {
+            if (rest.disabled) return
+            if (e.button !== 0) return
+            e.preventDefault()
+            setVisible(!visible)
+          }}
+        >
+          {visible ? visibilityIcon.off : visibilityIcon.on}
+        </VisibilityTrigger>
+      }
+      {...rootProps}
+    >
+      <Input
+        {...rest}
+        ref={mergeRefs(ref, inputRef)}
+        type={visible ? "text" : "password"}
+      />
+    </InputGroup>
+  )
+})
+
+const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function VisibilityTrigger(props, ref) {
+    return (
+      <IconButton
+        tabIndex={-1}
+        ref={ref}
+        me="-2"
+        aspectRatio="square"
+        size="sm"
+        variant="ghost"
+        height="calc(100% - {spacing.2})"
+        aria-label="Toggle password visibility"
+        {...props}
+      />
+    )
+  },
+)
+
+interface PasswordStrengthMeterProps extends StackProps {
+  max?: number
+  value: number
+}
+
+export const PasswordStrengthMeter = React.forwardRef<
+  HTMLDivElement,
+  PasswordStrengthMeterProps
+>(function PasswordStrengthMeter(props, ref) {
+  const { max = 4, value, ...rest } = props
+
+  const percent = (value / max) * 100
+  const { label, colorPalette } = getColorPalette(percent)
+
+  return (
+    <Stack align="flex-end" gap="1" ref={ref} {...rest}>
+      <HStack width="full" {...rest}>
+        {Array.from({ length: max }).map((_, index) => (
+          <Box
+            key={index}
+            height="1"
+            flex="1"
+            rounded="sm"
+            data-selected={index < value ? "" : undefined}
+            layerStyle="fill.subtle"
+            colorPalette="gray"
+            _selected={{
+              colorPalette,
+              layerStyle: "fill.solid",
+            }}
+          />
+        ))}
+      </HStack>
+      {label && <HStack textStyle="xs">{label}</HStack>}
+    </Stack>
+  )
+})
+
+function getColorPalette(percent: number) {
+  switch (true) {
+    case percent < 33:
+      return { label: "Low", colorPalette: "red" }
+    case percent < 66:
+      return { label: "Medium", colorPalette: "orange" }
+    default:
+      return { label: "High", colorPalette: "green" }
+  }
+}

FrontendV2/src/pages/LoginPage.tsx

@@ -5,6 +5,7 @@ import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
 import { Navigate, useNavigate } from "react-router-dom";
+import { PasswordInput } from "@/components/ui/password-input";
 
 const API_BASE =
   (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -79,16 +80,15 @@ export const LoginPage = () => {
           <Card.Body>
             <Stack gap="4" w="full">
               <Field.Root>
-                <Field.Label>username</Field.Label>
+                <Field.Label>Benutzername</Field.Label>
                 <Input
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
                 />
               </Field.Root>
               <Field.Root>
-                <Field.Label>password</Field.Label>
-                <Input
-                  type="password"
+                <Field.Label>Passwort</Field.Label>
+                <PasswordInput
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                 />