A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1import { useState } from 'react';
2import { useAuth } from './useAuth';
3
4/** Handle/DID/PDS-URL entry that kicks off the OAuth redirect. */
5export default function LoginForm() {
6 const { signIn, error } = useAuth();
7 const [ value, setValue ] = useState( '' );
8
9 return (
10 <form
11 className="login"
12 onSubmit={ ( event ) => {
13 event.preventDefault();
14 void signIn( value );
15 } }
16 >
17 <h1 className="login__title">Sign in to write</h1>
18 <p className="login__lede">
19 Use your existing Bluesky / AT Protocol identity. Your work stays in
20 your own account.
21 </p>
22 <label className="login__label" htmlFor="handle">
23 Your handle, DID, or PDS URL
24 </label>
25 <input
26 id="handle"
27 className="login__input"
28 name="handle"
29 autoComplete="username"
30 autoCapitalize="none"
31 autoCorrect="off"
32 spellCheck={ false }
33 placeholder="alice.bsky.social"
34 value={ value }
35 onChange={ ( event ) => setValue( event.target.value ) }
36 />
37 <button className="login__submit" type="submit">
38 Sign in with AT Protocol
39 </button>
40 { error && (
41 <p className="login__error" role="alert">
42 { error }
43 </p>
44 ) }
45 <p className="login__note">
46 You'll be sent to your provider to authorize SkyPress, then returned here.
47 </p>
48 </form>
49 );
50}