added enter usuability for auth forms

2026-10-12 19:51:17 +00:00 · 2026-01-14 17:16:20 +01:00 · 2026-01-14 17:16:20 +01:00 · 6ac000f687
commit 6ac000f687
parent 26ac2d8e8e
5 changed files with 95 additions and 84 deletions
--- a/src/modules/auth/ui/views/forgot-password-view.tsx
+++ b/src/modules/auth/ui/views/forgot-password-view.tsx
@ -15,7 +15,8 @@ const ForgotPasswordView = () => {
  const router = useRouter();
  const supabase = createClient();

-  const handleReset = async () => {
+  const handleReset = async (e: React.FormEvent) => {
+    e.preventDefault();
    setEmailError("");
    setLoading(true);

@ -41,8 +42,8 @@ const ForgotPasswordView = () => {
  return (
    <div className="flex min-h-screen">
      {/* Sidebar */}
-      <div className="hidden lg:flex lg:w-1/6 ">
-        <div className="fixed p-4 left-0 top-0 h-screen w-1/2 z-10">
+      <div className="hidden lg:block lg:w-[40%] ">
+        <div className="fixed left-0 top-0 h-screen w-[40%] p-2 z-10">
          <AuthSidebarComponent
            title="Passwort zurücksetzen"
            description="Keine Sorge, wir helfen Ihnen dabei, wieder Zugang zu Ihrem Konto zu erhalten."
@ -56,13 +57,13 @@ const ForgotPasswordView = () => {
        <div className="w-full max-w-lg flex flex-col gap-4 z-20">
          <h1 className="text-2xl font-extrabold text-blue mb-8">Passwort vergessen?</h1>

-          {!emailSent ? (
-            <>
-              <p className="text-sm text-gray-600 mb-4">
-                Geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Link zum Zurücksetzen
-                Ihres Passworts.
-              </p>
+          <p className="text-sm text-gray-600 mb-4">
+            Geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Link zum Zurücksetzen Ihres
+            Passworts.
+          </p>

+          {!emailSent ? (
+            <form onSubmit={handleReset} className="space-y-5">
              <InputComponent
                isLabel
                label="E-mail Adresse"
@ -73,10 +74,10 @@ const ForgotPasswordView = () => {
                error={emailError}
              />

-              <Button onClick={handleReset} disabled={loading} className="w-full mt-6">
+              <Button type="submit" disabled={loading} className="w-full mt-6">
                {loading ? <Spinner /> : "Link zum Zurücksetzen senden"}
              </Button>
-            </>
+            </form>
          ) : (
            <div className="bg-green-50 border border-green-200 rounded-lg p-6 mt-4">
              <h2 className="text-lg font-semibold text-green-800 mb-2">E-Mail wurde versendet!</h2>
--- a/src/modules/auth/ui/views/login-view.tsx
+++ b/src/modules/auth/ui/views/login-view.tsx
@ -18,7 +18,8 @@ const LoginView = () => {
  const [remember, setRemember] = useState(false);
  const router = useRouter();

-  const handleLogin = async () => {
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
    const success = await loginUser(email, password, remember);
    if (success) {
      router.push("/dashboard");
@ -42,49 +43,52 @@ const LoginView = () => {
      <div className="w-full lg:w-[60%] lg:ml-auto flex justify-center items-center min-h-screen px-4">
        <div className="w-full max-w-lg flex flex-col gap-4 z-20">
          <h1 className="text-2xl font-extrabold text-blue mb-8 ">Login</h1>
-
-          <InputComponent
-            isLabel
-            label="E-mail Adresse"
-            type="email"
-            id="login-email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            error={errors.email}
-          />
-          <InputComponent
-            isLabel
-            label="Passwort"
-            type="password"
-            id="login-password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            error={errors.password}
-          />
-
-          <div className="flex flex-col sm:flex-row sm:justify-between w-full mt-6 gap-4 text-sm">
-            <div className="flex items-center gap-2">
-              <Checkbox
-                id="remembering"
-                checked={remember}
-                onCheckedChange={(val: boolean) => setRemember(val)}
-                className="shadow-none h-5 w-5 bg-white border-blue cursor-pointer"
+          <form onSubmit={handleLogin}>
+            <div className="space-y-5">
+              <InputComponent
+                isLabel
+                label="E-mail Adresse"
+                type="email"
+                id="login-email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                error={errors.email}
+              />
+              <InputComponent
+                isLabel
+                label="Passwort"
+                type="password"
+                id="login-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                error={errors.password}
              />
-              <Label htmlFor="remembering" className="cursor-pointer">
-                Beim nächsten Mal an mich erinnern
-              </Label>
            </div>
-            <p
-              className="hover:underline cursor-pointer text-blue"
-              onClick={() => router.push("/forgot-password")}
-            >
-              Passwort vergessen?
-            </p>
-          </div>

-          <Button onClick={handleLogin} disabled={loading} className="w-full mt-6">
-            {loading ? <Spinner /> : "Anmelden"}
-          </Button>
+            <div className="flex flex-col sm:flex-row sm:justify-between w-full mt-6 gap-4 text-sm">
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="remembering"
+                  checked={remember}
+                  onCheckedChange={(val: boolean) => setRemember(val)}
+                  className="shadow-none h-5 w-5 bg-white border-blue cursor-pointer"
+                />
+                <Label htmlFor="remembering" className="cursor-pointer">
+                  Beim nächsten Mal an mich erinnern
+                </Label>
+              </div>
+              <p
+                className="hover:underline cursor-pointer text-blue"
+                onClick={() => router.push("/forgot-password")}
+              >
+                Passwort vergessen?
+              </p>
+            </div>
+
+            <Button type="submit" disabled={loading} className="w-full mt-6">
+              {loading ? <Spinner /> : "Anmelden"}
+            </Button>
+          </form>

          <hr className="mt-6 border-blue" />

--- a/src/modules/auth/ui/views/register-admin-view.tsx
+++ b/src/modules/auth/ui/views/register-admin-view.tsx
@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import React, { useState } from "react";
 import AuthSidebarComponent from "../components/AuthSidebarComponent";
 import InputComponent from "@/src/components/layout/InputComponent";
 import { Button } from "@/src/components/ui/button";
@ -24,7 +24,8 @@ const RegisterAdmin = () => {
    formData.setField(field, value);
  };

-  const handleNext = () => {
+  const handleNext = (e: React.FormEvent) => {
+    e.preventDefault();
    setErrors({});
    try {
      if (step === 1) {
@ -58,7 +59,8 @@ const RegisterAdmin = () => {
    }
  };

-  const handleRegister = async () => {
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
    setErrors({});
    try {
      adminRegisterStep3Schema.parse({
@ -125,7 +127,7 @@ const RegisterAdmin = () => {
          <h1 className="text-2xl font-extrabold text-blue mb-8 mt-8 ">Sign up for free</h1>

          {step === 1 && (
-            <>
+            <form onSubmit={handleNext} className="space-y-5">
              <InputComponent
                isLabel
                label="Vor- und Nachname"
@ -172,14 +174,14 @@ const RegisterAdmin = () => {
                error={errors.passwordConfirm}
              />

-              <Button className="w-full mt-6" onClick={handleNext} disabled={loading}>
+              <Button className="w-full mt-6" type="submit" disabled={loading}>
                {loading ? <Spinner /> : "Weiter"}
              </Button>
-            </>
+            </form>
          )}

          {step === 2 && (
-            <>
+            <form onSubmit={handleNext} className="space-y-5">
              <InputComponent
                isLabel
                label="PLZ"
@ -209,14 +211,14 @@ const RegisterAdmin = () => {
                error={errors.street}
              />

-              <Button className="w-full mt-6" onClick={handleNext} disabled={loading}>
+              <Button className="w-full mt-6" type="submit" disabled={loading}>
                {loading ? <Spinner /> : "Weiter"}
              </Button>
-            </>
+            </form>
          )}

          {step === 3 && (
-            <>
+            <form onSubmit={handleRegister} className="space-y-5">
              <InputComponent
                isLabel
                label="Unternehmensname"
@ -273,10 +275,10 @@ const RegisterAdmin = () => {
                error={errors.companyNumber}
              />

-              <Button className="w-full mt-6" onClick={handleRegister} disabled={loading}>
+              <Button className="w-full mt-6" type="submit" disabled={loading}>
                {loading ? <Spinner /> : "Anmelden"}
              </Button>
-            </>
+            </form>
          )}

          <div className="flex flex-col sm:flex-row gap-2 items-center mt-8 text-sm">
--- a/src/modules/auth/ui/views/register-user-view.tsx
+++ b/src/modules/auth/ui/views/register-user-view.tsx
@ -23,7 +23,8 @@ const RegisterUserView = () => {
    formData.setField(field, value);
  };

-  const handleNext = () => {
+  const handleNext = (e: React.FormEvent) => {
+    e.preventDefault();
    setErrors({});
    try {
      if (step === 1) {
@ -49,7 +50,8 @@ const RegisterUserView = () => {
    }
  };

-  const handleRegister = async () => {
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
    const success = await registerUser({
      fullName: formData.fullName,
      email: formData.email,
@ -89,7 +91,7 @@ const RegisterUserView = () => {
          <h1 className="text-2xl font-extrabold text-blue mb-8 mt-8 ">Sign up for free</h1>

          {step === 1 && (
-            <>
+            <form onSubmit={handleNext} className="space-y-5">
              <InputComponent
                isLabel
                label="Vor- und Nachname"
@ -128,14 +130,14 @@ const RegisterUserView = () => {
                error={errors.passwordConfirm}
              />

-              <Button className="w-full mt-6" onClick={handleNext}>
+              <Button className="w-full mt-6" type="submit">
                {loading ? <Spinner /> : "Weiter"}
              </Button>
-            </>
+            </form>
          )}

          {step === 2 && (
-            <>
+            <form onSubmit={handleRegister} className="space-y-5">
              <InputComponent
                isLabel
                label="Geburtsdatum"
@ -182,10 +184,10 @@ const RegisterUserView = () => {
                error={errors.gender}
              />

-              <Button onClick={handleRegister} disabled={loading} className="w-full mt-6">
+              <Button type="submit" disabled={loading} className="w-full mt-6">
                {loading ? <Spinner /> : "Anmelden"}
              </Button>
-            </>
+            </form>
          )}

          <hr className="mt-6 border-blue" />
--- a/src/modules/auth/ui/views/reset-password-view.tsx
+++ b/src/modules/auth/ui/views/reset-password-view.tsx
@ -2,7 +2,7 @@
 import InputComponent from "@/src/components/layout/InputComponent";
 import AuthSidebarComponent from "../components/AuthSidebarComponent";
 import { Button } from "@/src/components/ui/button";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Spinner } from "@/src/components/ui/spinner";
 import { createClient } from "@/src/lib/supabase/client";
@ -25,7 +25,9 @@ const ResetPasswordView = () => {
    });
  }, [router, supabase]);

-  const handleResetPassword = async () => {
+  const handleResetPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+
    setLoading(true);
    setPasswordError("");
    setConfirmPasswordError("");
@ -66,8 +68,8 @@ const ResetPasswordView = () => {
  return (
    <div className="flex min-h-screen">
      {/* Sidebar */}
-      <div className="hidden lg:flex lg:w-1/6 ">
-        <div className="fixed p-4 left-0 top-0 h-screen w-1/2 z-10">
+      <div className="hidden lg:block lg:w-[40%] ">
+        <div className="fixed left-0 top-0 h-screen w-[40%] p-2 z-10">
          <AuthSidebarComponent
            title="Neues Passwort setzen"
            description="Wählen Sie ein sicheres Passwort für Ihr Konto."
@ -77,16 +79,16 @@ const ResetPasswordView = () => {
      </div>

      {/* Reset Password Formular */}
-      <div className="w-full lg:w-5/6 lg:ml-auto flex justify-center items-center min-h-screen px-4">
+      <div className="w-full lg:w-[60%] lg:ml-auto flex justify-center items-center min-h-screen px-4">
        <div className="w-full max-w-lg flex flex-col gap-4 z-20">
          <h1 className="text-2xl font-extrabold text-blue mb-8">Passwort zurücksetzen</h1>

-          {!resetSuccess ? (
-            <>
-              <p className="text-sm text-gray-600 mb-4">
-                Bitte geben Sie Ihr neues Passwort ein. Es sollte mindestens 8 Zeichen lang sein.
-              </p>
+          <p className="text-sm text-gray-600 mb-4">
+            Bitte geben Sie Ihr neues Passwort ein. Es sollte mindestens 8 Zeichen lang sein.
+          </p>

+          {!resetSuccess ? (
+            <form onSubmit={handleResetPassword} className="space-y-5">
              <InputComponent
                isLabel
                label="Neues Passwort"
@ -107,10 +109,10 @@ const ResetPasswordView = () => {
                error={confirmPasswordError}
              />

-              <Button onClick={handleResetPassword} disabled={loading} className="w-full mt-6">
+              <Button type="submit" disabled={loading} className="w-full mt-6">
                {loading ? <Spinner /> : "Passwort zurücksetzen"}
              </Button>
-            </>
+            </form>
          ) : (
            <div className="bg-green-50 border border-green-200 rounded-lg p-6 mt-4">
              <h2 className="text-lg font-semibold text-green-800 mb-2">