59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useActionState } from "react";
|
||
|
|
import { saveGarminCredentialsAction, type SaveGarminCredentialsState } from "./actions";
|
||
|
|
|
||
|
|
export function GarminCredentialsForm({ savedEmail }: { savedEmail: string | null }) {
|
||
|
|
const [state, action, pending] = useActionState<SaveGarminCredentialsState, FormData>(
|
||
|
|
saveGarminCredentialsAction,
|
||
|
|
null
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form action={action} className="flex flex-col gap-3">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label htmlFor="garmin-email" className="text-sm text-fg/70">
|
||
|
|
E-mail Garmin Connect
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="garmin-email"
|
||
|
|
name="email"
|
||
|
|
type="email"
|
||
|
|
defaultValue={savedEmail ?? ""}
|
||
|
|
placeholder="twoj@email.com"
|
||
|
|
required
|
||
|
|
className="rounded-md border border-muted/40 bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg/30 focus:border-accent/60 focus:outline-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label htmlFor="garmin-password" className="text-sm text-fg/70">
|
||
|
|
Hasło Garmin Connect
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="garmin-password"
|
||
|
|
name="password"
|
||
|
|
type="password"
|
||
|
|
placeholder="••••••••"
|
||
|
|
required
|
||
|
|
className="rounded-md border border-muted/40 bg-bg px-3 py-2 text-sm text-fg placeholder:text-fg/30 focus:border-accent/60 focus:outline-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{state && "error" in state && (
|
||
|
|
<p className="text-sm text-red-400">{state.error}</p>
|
||
|
|
)}
|
||
|
|
{state && "success" in state && (
|
||
|
|
<p className="text-sm text-accent">Zapisano dane logowania.</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={pending}
|
||
|
|
className="self-start rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{pending ? "Zapisywanie…" : "Zapisz"}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
}
|