From 5ac768d75fb549740f4e5f48f96b72dd0b31629e Mon Sep 17 00:00:00 2001
From: Kroonk <Tom.misch2@gmail.com>
Date: Thu, 21 May 2026 11:12:43 +0200
Subject: [PATCH] ux: disable auto-open AuthModal, make Abbrechen always
 visible, translate tabs, and show SSO option on guest tab

---
 client/src/components/auth/AuthModal.tsx | 36 +++++++++++-------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/client/src/components/auth/AuthModal.tsx b/client/src/components/auth/AuthModal.tsx
index 94d66a4..aaf7d22 100644
--- a/client/src/components/auth/AuthModal.tsx
+++ b/client/src/components/auth/AuthModal.tsx
@@ -103,10 +103,10 @@ export default function AuthModal() {
 
       <label
         htmlFor="auth-modal"
-        className={"modal" + (session?.user === null ? " modal-open" : "")}
+        className="modal cursor-pointer"
       >
-        <label className="modal-box flex max-w-sm flex-col gap-4 pt-2">
-          <div className="tabs flex-nowap w-full">
+        <div className="modal-box flex max-w-sm flex-col gap-4 pt-2 relative">
+          <div className="tabs flex-nowrap w-full">
             <span
               onClick={() => {
                 setActiveTab("guest");
@@ -118,7 +118,7 @@ export default function AuthModal() {
                   : " text-base-content border-opacity-10 hover:border-opacity-30")
               }
             >
-              Guest
+              Gast
             </span>
             <span
               onClick={() => setActiveTab("login")}
@@ -129,7 +129,7 @@ export default function AuthModal() {
                   : " text-base-content border-opacity-10 hover:border-opacity-30")
               }
             >
-              Login
+              Anmelden
             </span>
             <span
               onClick={() => setActiveTab("register")}
@@ -140,32 +140,30 @@ export default function AuthModal() {
                   : " text-base-content border-opacity-10 hover:border-opacity-30")
               }
             >
-              Register
+              Registrieren
             </span>
           </div>
 
           <form className="flex flex-col px-2" onSubmit={submitAuth}>
             {activeTab === "guest" && (
-              <Guest currentName={session?.user?.name || "unknown user"} />
+              <Guest currentName={session?.user?.name || "Gast"} />
             )}
             {activeTab === "login" && <Login />}
             {activeTab === "register" && <Register />}
 
             {serverMessage && <div className="text-error mt-2">{serverMessage}</div>}
             <div className="modal-action items-center">
-              {session?.user !== null && (
-                <label htmlFor="auth-modal" className="btn btn-ghost">
-                  Close
-                </label>
-              )}
-              <button className={"btn" + (buttonLoading ? " loading" : "")} type="submit">
-                {activeTab === "guest" && "Confirm"}
-                {activeTab === "login" && "Login"}
-                {activeTab === "register" && "Register"}
+              <label htmlFor="auth-modal" className="btn btn-ghost">
+                Abbrechen
+              </label>
+              <button className={"btn btn-primary" + (buttonLoading ? " loading" : "")} type="submit">
+                {activeTab === "guest" && "Als Gast spielen"}
+                {activeTab === "login" && "Anmelden"}
+                {activeTab === "register" && "Registrieren"}
               </button>
             </div>
 
-            {activeTab !== "guest" && ssoEnabled && (
+            {ssoEnabled && (
               <>
                 <div className="divider opacity-70">oder</div>
                 <a
@@ -184,12 +182,12 @@ export default function AuthModal() {
                       clipRule="evenodd"
                     />
                   </svg>
-                  Login mit Keycloak
+                  Anmelden mit Keycloak
                 </a>
               </>
             )}
           </form>
-        </label>
+        </div>
       </label>
     </>
   );