MrDiderot/Michess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: disable auto-open AuthModal, make Abbrechen always visible, translate tabs, and show SSO option on guest tab
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 2m37s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 11:12:43 +02:00
parent d47e87ef82
commit 5ac768d75f
1 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/components/auth/AuthModal.tsx
View File

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