Graphical PDS migrator for AT Protocol
knotbin.com
1import { useState } from "preact/hooks";
2import HandleInput from "./HandleInput.tsx";
3import CredLogin from "./CredLogin.tsx";
4
5/**
6 * The login method selector for OAuth or Credential.
7 * @returns The login method selector
8 * @component
9 */
10export default function LoginMethodSelector() {
11 const [loginMethod, setLoginMethod] = useState<"oauth" | "password">(
12 "password",
13 );
14
15 return (
16 <div className="flex flex-col gap-8">
17 <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm max-w-md mx-auto w-full">
18 <h2 className="text-xl font-semibold mb-4">Login with ATProto</h2>
19
20 <div className="flex gap-4 mb-6">
21 <button
22 type="button"
23 onClick={() => setLoginMethod("oauth")}
24 className={`flex-1 px-4 py-2 rounded-md transition-colors ${
25 loginMethod === "oauth"
26 ? "bg-blue-500 text-white"
27 : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
28 }`}
29 >
30 OAuth
31 </button>
32 <button
33 type="button"
34 onClick={() => setLoginMethod("password")}
35 className={`flex-1 px-4 py-2 rounded-md transition-colors ${
36 loginMethod === "password"
37 ? "bg-blue-500 text-white"
38 : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
39 }`}
40 >
41 Credential
42 </button>
43 </div>
44
45 {loginMethod === "oauth" && (
46 <div className="mb-4 p-3 bg-amber-50 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 rounded-md text-sm">
47 Note: OAuth login cannot be used for migrations.
48 </div>
49 )}
50
51 {loginMethod === "oauth" ? <HandleInput /> : <CredLogin />}
52
53 <div className="mt-4 text-center">
54 <a
55 href="/"
56 className="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
57 >
58 Cancel
59 </a>
60 </div>
61 </div>
62 </div>
63 );
64}