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

Fix auth modal feedback and production deploy config
Some checks failed
Build & Push Docker Image to Gitea Registry / build-and-push (push) Failing after 6s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-20 17:25:15 +02:00
parent 6f96b26e4c
commit 5e996f791e
4 changed files with 77 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,69 +16,68 @@ export default function AuthModal() {
const [buttonLoading, setButtonLoading] = useState(false);
const modalToggleRef = useRef<HTMLInputElement>(null);
function closeModal() {
if (modalToggleRef.current?.checked) {
modalToggleRef.current.checked = false;
}
}
async function submitAuth(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
const target = e.target as HTMLFormElement;
if (activeTab === "guest") {
const guestName = target.elements.namedItem("guestName") as HTMLInputElement;
if (!guestName || !guestName.value) return;
setServerMessage(null);
setButtonLoading(true);
setButtonLoading(true);
const user = await setGuestSession(guestName.value);
if (user) {
session?.setUser(user);
if (modalToggleRef.current?.checked) {
modalToggleRef.current.checked = false;
}
}
guestName.value = "";
} else if (activeTab === "login") {
const loginName = target.elements.namedItem("loginName") as HTMLInputElement;
const loginPassword = target.elements.namedItem("loginPassword") as HTMLInputElement;
if (!loginName || !loginName.value || !loginPassword || !loginPassword.value) return;
setButtonLoading(true);
const user = await login(loginName.value, loginPassword.value);
if (typeof user === "string") {
setServerMessage(user);
} else if (user?.id) {
session?.setUser(user);
if (serverMessage) {
setServerMessage(null);
}
if (modalToggleRef.current?.checked) {
modalToggleRef.current.checked = false;
}
}
} else if (activeTab === "register") {
const registerName = target.elements.namedItem("registerName") as HTMLInputElement;
const registerEmail = target.elements.namedItem("registerEmail") as HTMLInputElement;
const registerPassword = target.elements.namedItem("registerPassword") as HTMLInputElement;
if (!registerName || !registerName.value || !registerPassword || !registerPassword.value) {
return;
}
setButtonLoading(true);
const user = await register(
registerName.value,
registerPassword.value,
registerEmail.value || undefined
);
if (typeof user === "string") {
setServerMessage(user);
} else if (user?.id) {
session?.setUser(user);
if (serverMessage) {
setServerMessage(null);
}
if (modalToggleRef.current?.checked) {
modalToggleRef.current.checked = false;
try {
if (activeTab === "guest") {
const guestName = target.elements.namedItem("guestName") as HTMLInputElement;
if (!guestName || !guestName.value) return;
const user = await setGuestSession(guestName.value);
if (typeof user === "string") {
setServerMessage(user);
} else if (user?.id) {
session?.setUser(user);
closeModal();
guestName.value = "";
}
} else if (activeTab === "login") {
const loginName = target.elements.namedItem("loginName") as HTMLInputElement;
const loginPassword = target.elements.namedItem("loginPassword") as HTMLInputElement;
if (!loginName || !loginName.value || !loginPassword || !loginPassword.value) return;
const user = await login(loginName.value, loginPassword.value);
if (typeof user === "string") {
setServerMessage(user);
} else if (user?.id) {
session?.setUser(user);
closeModal();
}
} else if (activeTab === "register") {
const registerName = target.elements.namedItem("registerName") as HTMLInputElement;
const registerEmail = target.elements.namedItem("registerEmail") as HTMLInputElement;
const registerPassword = target.elements.namedItem("registerPassword") as HTMLInputElement;
if (!registerName || !registerName.value || !registerPassword || !registerPassword.value) {
return;
}
const user = await register(
registerName.value,
registerPassword.value,
registerEmail.value || undefined
);
if (typeof user === "string") {
setServerMessage(user);
} else if (user?.id) {
session?.setUser(user);
closeModal();
}
}
} finally {
setButtonLoading(false);
}
setButtonLoading(false);
}
useEffect(() => {

30
client/src/lib/auth.ts
View File

@@ -1,6 +1,19 @@
import { API_URL } from "@/config";
import type { User } from "@michess/types";
const readErrorMessage = async (res: Response, fallback: string) => {
try {
const body = await res.json();
if (typeof body?.message === "string") {
return body.message;
}
} catch (err) {
// Response did not include a JSON error body.
}
return fallback;
};
export const fetchSession = async () => {
try {
const res = await fetch(`${API_URL}/v1/auth`, {
@@ -30,8 +43,10 @@ export const setGuestSession = async (name: string) => {
const user: User = await res.json();
return user;
}
return await readErrorMessage(res, "Could not start guest session.");
} catch (err) {
console.error(err);
return "Could not reach the server. Please try again.";
}
};
@@ -48,12 +63,11 @@ export const register = async (name: string, password: string, email?: string) =
if (res.status === 201) {
const user: User = await res.json();
return user;
} else if (res.status === 409) {
const { message } = await res.json();
return message as string;
}
return await readErrorMessage(res, "Registration failed. Please try again.");
} catch (err) {
console.error(err);
return "Could not reach the server. Please try again.";
}
};
@@ -70,12 +84,11 @@ export const login = async (name: string, password: string) => {
if (res.status === 200) {
const user: User = await res.json();
return user;
} else if (res.status === 404 || res.status === 401) {
const { message } = await res.json();
return message as string;
}
return await readErrorMessage(res, "Login failed. Please try again.");
} catch (err) {
console.error(err);
return "Could not reach the server. Please try again.";
}
};
@@ -107,11 +120,10 @@ export const updateUser = async (name?: string, email?: string, password?: strin
if (res.status === 200) {
const user: User = await res.json();
return user;
} else if (res.status === 409) {
const { message } = await res.json();
return message as string;
}
return await readErrorMessage(res, "Could not update settings. Please try again.");
} catch (err) {
console.error(err);
return "Could not reach the server. Please try again.";
}
};