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'>('password')
12
13 return (
14 <div className="flex flex-col gap-8">
15 <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm max-w-md mx-auto w-full">
16 <h2 className="text-xl font-semibold mb-4">Login with ATProto</h2>
17
18 <div className="flex gap-4 mb-6">
19 <button
20 type="button"
21 onClick={() => setLoginMethod('oauth')}
22 className={`flex-1 px-4 py-2 rounded-md transition-colors ${
23 loginMethod === 'oauth'
24 ? 'bg-blue-500 text-white'
25 : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
26 }`}
27 >
28 OAuth
29 </button>
30 <button
31 type="button"
32 onClick={() => setLoginMethod('password')}
33 className={`flex-1 px-4 py-2 rounded-md transition-colors ${
34 loginMethod === 'password'
35 ? 'bg-blue-500 text-white'
36 : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
37 }`}
38 >
39 Credential
40 </button>
41 </div>
42
43 {loginMethod === 'oauth' && (
44 <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">
45 Note: OAuth login cannot be used for migrations.
46 </div>
47 )}
48
49 {loginMethod === 'oauth' ? <HandleInput /> : <CredLogin />}
50
51 <div className="mt-4 text-center">
52 <a
53 href="/"
54 className="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
55 >
56 Cancel
57 </a>
58 </div>
59 </div>
60 </div>
61 )
62}