refactor: refactor login form

src/app/[channel]/(main)/login/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
-import { Loader } from "@/ui/atoms/Loader";
-import { LoginForm } from "@/ui/components/LoginForm";
+import { LoginForm } from "@ui/components/LoginForm";
+import { Loader } from "@ui/atoms/Loader";
 
 export default function LoginPage() {
 	return (

src/app/[channel]/(main)/orders/page.tsx

@@ -1,6 +1,6 @@
+import { LoginForm } from "@ui/components/LoginForm";
 import { CurrentUserOrderListDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
-import { LoginForm } from "@/ui/components/LoginForm";
 import { OrderListItem } from "@/ui/components/OrderListItem";
 
 export default async function OrderPage() {

src/app/actions.ts

@@ -3,6 +3,5 @@
 import { saleorAuthClient } from "@/app/config";
 
 export async function logout() {
-	"use server";
 	saleorAuthClient.signOut();
 }

src/ui/atoms/LoginButton.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+export const LoginButton = () => {
+	const { pending } = useFormStatus();
+	return (
+		<button
+			className="mt-2 rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700 aria-disabled:opacity-80"
+			type="submit"
+			aria-disabled={pending}
+		>
+			{pending ? "Processing..." : "Log In"}
+		</button>
+	);
+};

src/ui/components/LoginForm.tsx

@@ -1,10 +1,11 @@
+import { LoginButton } from "@ui/atoms/LoginButton";
 import { saleorAuthClient } from "@/app/config";
 
 export async function LoginForm() {
 	return (
 		<div className="mx-auto mt-16 w-full max-w-lg">
 			<form
-				className="rounded border p-8 shadow-md"
+				className="flex flex-col gap-y-2 rounded border p-8 shadow-md"
 				action={async (formData) => {
 					"use server";
 
@@ -23,39 +24,30 @@ export async function LoginForm() {
 					}
 				}}
 			>
-				<div className="mb-2">
-					<label className="sr-only" htmlFor="email">
-						Email
-					</label>
+				<label>
+					<span className="sr-only">Email</span>
 					<input
 						type="email"
 						name="email"
 						placeholder="Email"
 						className="w-full rounded border bg-neutral-50 px-4 py-2"
+						required
 					/>
-				</div>
-				<div className="mb-4">
-					<label className="sr-only" htmlFor="password">
-						Password
-					</label>
+				</label>
+				<label>
+					<span className="sr-only">Password</span>
 					<input
 						type="password"
 						name="password"
 						placeholder="Password"
 						autoCapitalize="off"
 						autoComplete="off"
 						className="w-full rounded border bg-neutral-50 px-4 py-2"
+						required
 					/>
-				</div>
-
-				<button
-					className="rounded bg-neutral-800 px-4 py-2 text-neutral-200 hover:bg-neutral-700"
-					type="submit"
-				>
-					Log In
-				</button>
+				</label>
+				<LoginButton />
 			</form>
-			<div></div>
 		</div>
 	);
 }

src/ui/components/nav/components/UserMenu/UserMenu.tsx

@@ -49,12 +49,12 @@ export function UserMenu({ user }: Props) {
 					<div className="flex flex-col px-1 py-1">
 						<Menu.Item>
 							{({ active }) => (
-								<form action={logout}>
+								<form action={logout} className="flex flex-col">
 									<button
 										type="submit"
 										className={clsx(
 											active && "bg-neutral-100",
-											"block px-4 py-2 text-start text-sm font-medium text-neutral-500 hover:text-neutral-700",
+											"px-4 py-2 text-start text-sm font-medium text-neutral-500 hover:text-neutral-700",
 										)}
 									>
 										Log Out

tsconfig.json

@@ -26,7 +26,7 @@
 		],
 		"paths": {
 			"@/*": ["./src/*"],
-			"@ui/*": ["./src/components/*"]
+			"@ui/*": ["./src/ui/*"]
 		},
 		"types": ["react-dom/canary"]
 	},