Chneemann/flowstate
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(auth): replace native buttons in login page with ActionButton component
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 47s
Details

Browse source
This commit is contained in:
Chneemann 2026-10-10 18:37:38 +02:00
parent ff3b9f2fb6
commit d59cc08734
No known key found for this signature in database
1 changed files with 16 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/(auth)/login/page.tsx
View file

@ -9,6 +9,7 @@ import { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { loginAsGuest, loginUser } from "@/lib/services/auth.service"; import { loginAsGuest, loginUser } from "@/lib/services/auth.service";
import { ActionButton } from "@/app/components/ui/buttons/ActionButton";
import { Loader2, UserCheck, KeyRound } from "lucide-react"; import { Loader2, UserCheck, KeyRound } from "lucide-react";
/** /**
@ -57,7 +58,7 @@ export default function LoginPage() {
* @async * @async
* @param {React.SubmitEvent<HTMLFormElement>} e - The form submission event. * @param {React.SubmitEvent<HTMLFormElement>} e - The form submission event.
*/ */
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const formData = new FormData(e.currentTarget); const formData = new FormData(e.currentTarget);
const email = formData.get("email") as string; const email = formData.get("email") as string;
@ -161,23 +162,15 @@ export default function LoginPage() {
/> />
</div> </div>
<button <ActionButton
type="submit" type="submit"
variant="primary"
disabled={loadingType !== null} disabled={loadingType !== null}
className="w-full py-2.5 px-4 text-sm font-semibold rounded-lg bg-primary text-background shadow-md hover:bg-primary-hover transition-colors duration-200 disabled:opacity-50 flex items-center justify-center gap-2 cursor-pointer disabled:cursor-not-allowed" icon={loadingType === "credentials" ? Loader2 : KeyRound}
className="w-full sm:w-full"
> >
{loadingType === "credentials" ? ( {loadingType === "credentials" ? "Signing in..." : "Sign In"}
<> </ActionButton>
<Loader2 className="w-4 h-4 animate-spin" />
Signing in...
</>
) : (
<>
<KeyRound className="w-4 h-4" />
Sign In
</>
)}
</button>
</form> </form>
<div className="relative flex items-center"> <div className="relative flex items-center">
@ -188,24 +181,18 @@ export default function LoginPage() {
<div className="grow border-t border-border"></div> <div className="grow border-t border-border"></div>
</div> </div>
<button <ActionButton
type="button" type="button"
variant="secondary"
disabled={loadingType !== null} disabled={loadingType !== null}
onClick={handleGuestLogin} onClick={handleGuestLogin}
className="w-full py-2.5 px-4 text-sm font-semibold rounded-lg border border-border bg-background/50 hover:bg-border/40 text-foreground transition-colors duration-200 disabled:opacity-50 flex items-center justify-center gap-2 cursor-pointer disabled:cursor-not-allowed" icon={loadingType === "guest" ? Loader2 : UserCheck}
className="w-full sm:w-full"
> >
{loadingType === "guest" ? ( {loadingType === "guest"
<> ? "Signing in as Guest..."
<Loader2 className="w-4 h-4 animate-spin" /> : "Sign in as Guest"}
Signing in as Guest... </ActionButton>
</>
) : (
<>
<UserCheck className="w-4 h-4" />
Sign in as Guest
</>
)}
</button>
<div className="text-center text-xs text-foreground-muted pt-1"> <div className="text-center text-xs text-foreground-muted pt-1">
Don&apos;t have an account yet?{" "} Don&apos;t have an account yet?{" "}