Merge pull request #19 from Since-3/refactor/chores

fixed and refactored some code

src/components/layout/DropdownComponent.tsx

@@ -10,6 +10,12 @@ import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { ChevronDown } from "lucide-react";
 
+const GENDER_OPTIONS = [
+  { value: "Men", label: "Männlich" },
+  { value: "Woman", label: "Weiblich" },
+  { value: "Various", label: "Divers" },
+] as const;
+
 interface DropdownComponentProps {
   label: string;
   selected: string;
@@ -23,6 +29,8 @@ const DropdownComponent: React.FC<DropdownComponentProps> = ({
   onSelect,
   error,
 }) => {
+  const selectedLabel = GENDER_OPTIONS.find((g) => g.value === selected)?.label ?? "";
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -30,7 +38,7 @@ const DropdownComponent: React.FC<DropdownComponentProps> = ({
           <Label className="p-1 mb-2 text-blue text-lg font-semibold">{label}</Label>
           <Input
             className="h-[50px] border-blue rounded-xl w-full cursor-pointer pr-10"
-            value={selected}
+            value={selectedLabel}
             readOnly
           />
           <ChevronDown
@@ -40,14 +48,16 @@ const DropdownComponent: React.FC<DropdownComponentProps> = ({
           {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
         <DropdownMenuGroup>
           <DropdownMenuItem onSelect={() => onSelect("")} className="text-gray-500">
             Auswahl löschen
           </DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => onSelect("Men")}>Männlich</DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => onSelect("Woman")}>Weiblich</DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => onSelect("Various")}>Divers</DropdownMenuItem>
+          {GENDER_OPTIONS.map((option) => (
+            <DropdownMenuItem key={option.value} onSelect={() => onSelect(option.value)}>
+              {option.label}
+            </DropdownMenuItem>
+          ))}
         </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>

src/components/layout/InputComponent.tsx

@@ -1,5 +1,8 @@
+"use client";
 import { Label } from "../ui/label";
 import { Input } from "../ui/input";
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
 
 interface InputProps {
   label?: string;
@@ -10,6 +13,7 @@ interface InputProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   value?: string;
   error?: string;
+  max?: string;
 }
 
 const InputComponent: React.FC<InputProps> = ({
@@ -20,8 +24,13 @@ const InputComponent: React.FC<InputProps> = ({
   isLabel,
   onChange,
   value,
+  max,
   error,
 }) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const isPassword = type === "password";
+
   return (
     <div>
       {isLabel && (
@@ -29,14 +38,28 @@ const InputComponent: React.FC<InputProps> = ({
           {label}
         </Label>
       )}
-      <Input
-        type={type}
-        id={id}
-        placeholder={placeholder}
-        onChange={onChange}
-        value={value}
-        className="h-[50px] border-blue rounded-xl w-full"
-      />
+
+      <div className="relative">
+        <Input
+          type={isPassword && showPassword ? "text" : type}
+          id={id}
+          placeholder={placeholder}
+          onChange={onChange}
+          value={value}
+          max={max}
+          className="h-[50px] border-blue rounded-xl w-full"
+        />
+
+        {isPassword && (
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
+          >
+            {showPassword ? <Eye size={20} /> : <EyeOff size={20} />}
+          </button>
+        )}
+      </div>
       {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
     </div>
   );

src/modules/auth/ui/components/AuthSidebarComponent.tsx

@@ -36,9 +36,12 @@ const AuthSidebarComponent: React.FC<AuthSidebarComponentProps> = ({
           <MultiStepProzess step={step} totalSteps={totalSteps} onStepChange={onStepChange} />
         )}
       </CardContent>
-      <CardFooter>
+      <CardFooter className="pointer-events-auto">
         <p className="text-yellow">
-          Bei Fragen: <span className=" cursor-pointer hover:underline">{footer}</span>
+          Bei Fragen:{" "}
+          <a href={`mailto:${footer}`} className="hover:underline">
+            {footer}
+          </a>
         </p>
       </CardFooter>
     </Card>

src/modules/auth/ui/views/register-admin-view.tsx

@@ -281,7 +281,12 @@ const RegisterAdmin = () => {
 
           <div className="flex flex-col sm:flex-row gap-2 items-center mt-8 text-sm">
             <p>Ich habe schon einen Account</p>
-            <p className="text-yellow hover:underline cursor-pointer">Login</p>
+            <p
+              onClick={() => router.push("/login")}
+              className="text-yellow hover:underline cursor-pointer"
+            >
+              Login
+            </p>
           </div>
         </div>
       </div>

src/modules/auth/ui/views/register-user-view.tsx

@@ -141,6 +141,7 @@ const RegisterUserView = () => {
                 label="Geburtsdatum"
                 type="date"
                 id="register-user-birthday"
+                max={new Date().toISOString().split("T")[0]}
                 value={formData.birthday}
                 onChange={(e) => handleChange("birthday", e.target.value)}
                 error={errors.birthday}
@@ -196,7 +197,12 @@ const RegisterUserView = () => {
 
           <div className="flex flex-col sm:flex-row gap-2 items-center mt-8 text-sm">
             <p>Ich habe schon einen Account</p>
-            <p className="text-yellow hover:underline cursor-pointer">Login</p>
+            <p
+              onClick={() => router.push("/login")}
+              className="text-yellow hover:underline cursor-pointer"
+            >
+              Login
+            </p>
           </div>
         </div>
       </div>

src/modules/auth/validation/userRegisterSchema.ts

@@ -30,7 +30,22 @@ export const userRegisterSchema = z
         "Passwort muss mindestens 8 Zeichen haben, Großbuchstaben, Kleinbuchstaben, Nummer und ein spezielles Zeichen beinhalten"
       ),
     passwordConfirm: z.string(),
-    birthday: z.string().min(1, "Geburtsdatum erforderlich"),
+    birthday: z.iso
+      .date({
+        message: "Ungültiges Datumsformat",
+      })
+      .refine(
+        (date) => {
+          const selectedDate = new Date(date);
+          selectedDate.setHours(0, 0, 0, 0);
+          const today = new Date();
+          today.setHours(0, 0, 0, 0);
+          return selectedDate <= today;
+        },
+        {
+          message: "Geburtsdatum darf nicht in der Zukunft liegen",
+        }
+      ),
     plz: z.string().min(1, "PLZ erforderlich"),
     place: z.string().min(1, "Wohnort erforderlich"),
     street: z.string().min(1, "Straße erforderlich"),