Statusphere running on a slice 馃崟
chadtmiller.com
1interface LoginPageProps {
2 error?: string;
3}
4
5export function LoginPage({ error }: LoginPageProps) {
6 return (
7 <div class="card">
8 <h1>Sign In to Statusphere</h1>
9 <p class="status-meta">
10 Share your current status with a single emoji using your AT Protocol identity.
11 </p>
12
13 {error && (
14 <div class="error" role="alert">
15 {error}
16 </div>
17 )}
18
19 <form
20 method="post"
21 action="/oauth/authorize"
22 class="form-container"
23 >
24 <div class="form-group">
25 <label class="form-label" for="loginHint">
26 AT Protocol Handle
27 </label>
28 <input
29 type="text"
30 id="loginHint"
31 name="loginHint"
32 class="form-input"
33 placeholder="alice.bsky.social"
34 required
35 />
36 <div class="form-help">
37 Enter your Bluesky or AT Protocol handle
38 </div>
39 </div>
40
41 <button type="submit" class="btn btn-primary btn-block">
42 Sign In with OAuth
43 </button>
44 </form>
45
46 <div class="signup-prompt">
47 <p class="status-meta">
48 Don't have an account?
49 <a href="https://bsky.app" target="_blank" rel="noopener" class="link">
50 Sign up on Bluesky
51 </a>
52 </p>
53 </div>
54 </div>
55 );
56}