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 }
6
7export function login(props: Props) {
8 return shell({
9 title: 'Log in',
10 content: content(props),
11 })
12}
13
14function content({ error }: 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 return html`<div id="root">
21 <div id="header">
22 <h1>Statusphere</h1>
23 <p>Set your status on the Atmosphere.</p>
24 </div>
25 <div class="container">
26 <form action="/login" method="post" class="login-form">
27 <input
28 type="text"
29 name="input"
30 placeholder="Enter your handle (eg alice.bsky.social)"
31 required
32 />
33
34 <button type="submit">Log in</button>
35 </form>
36
37 <a href="/signup" class="button signup-cta">
38 Login or Sign up with a ${signupService} account
39 </a>
40
41 ${error ? html`<p>Error: <i>${error}</i></p>` : undefined}
42 </div>
43 </div>`
44}