Scratch space for learning atproto app development
cduck.me
1import { env } from '#/env'
2import { html } from '../lib/view'
3import { shell } from './shell'
4
5type Props = { error?: string; state?: string }
6
7export function login(props: Props) {
8 return shell({
9 title: 'Log in',
10 content: content(props),
11 })
12}
13
14function content({ error, state }: Props) {
15 const signupService =
16 !env.PDS_URL || env.PDS_URL === 'https://bsky.social'
17 ? 'Bluesky'
18 : new URL(env.PDS_URL).hostname
19
20 const signupUrl = state
21 ? `/signup?state=${encodeURIComponent(state)}`
22 : '/signup'
23
24 return html`<div id="root">
25 <div id="header">
26 <h1>Statusphere</h1>
27 <p>Set your status on the Atmosphere.</p>
28 </div>
29 <div class="container">
30 <form action="/login" method="post" class="login-form">
31 <input
32 type="text"
33 name="input"
34 placeholder="Enter your handle (eg alice.bsky.social)"
35 required
36 />
37
38 ${state != null
39 ? html`<input type="hidden" name="state" value="${state}" />`
40 : undefined}
41
42 <button type="submit">Log in</button>
43 </form>
44
45 <a href="${signupUrl}" class="button signup-cta">
46 Login or Sign up with a ${signupService} account
47 </a>
48
49 ${error ? html`<p>Error: <i>${error}</i></p>` : undefined}
50 </div>
51 </div>`
52}