taurean.bryant.land
a a vibe-coded abomination experiment of a fragrance review platform built on the atmosphere.
drydown.social
Update LoginForm with improved handle input and provider links
+58
-22
+58
-22
src/components/LoginForm.tsx
+58
-22
src/components/LoginForm.tsx
···
1
-
import { useState } from 'preact/hooks'
2
-
import { login } from '../auth'
1
+
import { useState } from "preact/hooks";
2
+
import { login } from "../auth";
3
3
4
4
export function LoginForm() {
5
-
const [handle, setHandle] = useState('')
6
-
const [error, setError] = useState<string | null>(null)
7
-
const [loading, setLoading] = useState(false)
5
+
const [handle, setHandle] = useState("");
6
+
const [error, setError] = useState<string | null>(null);
7
+
const [loading, setLoading] = useState(false);
8
8
9
9
const handleSubmit = async (e: Event) => {
10
-
e.preventDefault()
11
-
setError(null)
12
-
setLoading(true)
10
+
e.preventDefault();
11
+
setError(null);
12
+
setLoading(true);
13
13
14
14
try {
15
-
await login(handle)
15
+
await login(handle);
16
16
// The user will be redirected, so we don't need to do anything else on success
17
17
} catch (err: any) {
18
-
console.error(err)
19
-
setError(err?.message || 'Failed to initiate login. Please check the handle.')
20
-
setLoading(false)
18
+
console.error(err);
19
+
setError(
20
+
err?.message || "Failed to initiate login. Please check the handle.",
21
+
);
22
+
setLoading(false);
21
23
}
22
-
}
24
+
};
23
25
24
26
return (
25
27
<div class="card">
26
-
<h2>Sign in with Bluesky</h2>
27
-
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '300px', margin: '0 auto' }}>
28
+
<h2>Sign in</h2>
29
+
<form
30
+
onSubmit={handleSubmit}
31
+
style={{
32
+
display: "flex",
33
+
flexDirection: "column",
34
+
gap: "1rem",
35
+
maxWidth: "300px",
36
+
margin: "0 auto",
37
+
}}
38
+
>
28
39
<div>
29
-
<label style={{ display: 'block', textAlign: 'left', marginBottom: '0.5rem' }}>
30
-
Bluesky Handle
40
+
<label
41
+
style={{
42
+
display: "block",
43
+
textAlign: "left",
44
+
marginBottom: "0.5rem",
45
+
}}
46
+
>
47
+
your handle on the atmosphere
31
48
</label>
32
49
<input
33
50
type="text"
34
51
value={handle}
35
52
onInput={(e) => setHandle(e.currentTarget.value)}
36
-
placeholder="alice.bsky.social"
53
+
placeholder="sully.bluesky.bot"
37
54
disabled={loading}
38
-
style={{ width: '100%', padding: '0.5rem' }}
55
+
style={{ width: "100%", padding: "0.5rem" }}
39
56
/>
40
57
</div>
41
-
{error && <p style={{ color: 'red' }}>{error}</p>}
58
+
{error && <p style={{ color: "red" }}>{error}</p>}
42
59
<button type="submit" disabled={loading}>
43
-
{loading ? 'Redirecting...' : 'Sign In'}
60
+
{loading ? "Redirecting..." : "Sign In"}
44
61
</button>
62
+
<p>
63
+
create or use your account from providers like{" "}
64
+
<a href="https://blacksky.community" target="_blank">
65
+
Blacksky
66
+
</a>
67
+
,{" "}
68
+
<a href="https://northsky.app" target="_blank">
69
+
Northsky
70
+
</a>
71
+
,{" "}
72
+
<a href="https://tangled.org/signup" target="_blank">
73
+
Tangled
74
+
</a>
75
+
, and{" "}
76
+
<a href="https://bsky.app" target="_blank">
77
+
Bluesky
78
+
</a>
79
+
.
80
+
</p>
45
81
</form>
46
82
</div>
47
-
)
83
+
);
48
84
}