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

This commit is contained in:
Kroonk
2026-05-21 11:12:43 +02:00
parent d47e87ef82
commit 5ac768d75f

View File

@@ -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
Abbrechen
</label>
)}
<button className={"btn" + (buttonLoading ? " loading" : "")} type="submit">
{activeTab === "guest" && "Confirm"}
{activeTab === "login" && "Login"}
{activeTab === "register" && "Register"}
<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>
</>
);