an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1"use client";
2
3import { useFormStatus } from "react-dom";
4import { login } from "@/auth/actions";
5import "./LoginForm.css";
6
7function FormFields({ returnUrl }: { returnUrl: string }) {
8 const { pending } = useFormStatus();
9
10 return (
11 <>
12 <input
13 type="text"
14 name="loginHint"
15 placeholder="your.bsky.handle"
16 className="LoginForm-input"
17 required
18 autoFocus
19 readOnly={pending}
20 />
21 <input type="hidden" name="returnUrl" value={returnUrl} />
22 <button type="submit" className="LoginForm-button" disabled={pending}>
23 {pending ? "signing in..." : "sign in with bluesky"}
24 </button>
25 </>
26 );
27}
28
29export function LoginForm({ returnUrl }: { returnUrl: string }) {
30 return (
31 <form action={login} className="LoginForm">
32 <FormFields returnUrl={returnUrl} />
33 </form>
34 );
35}