hearthforge

hearthforge/src/views/auth/Register.tsx
Register.tsx
⎇
Raw
1import config from "../../config.ts";
2import { Layout } from "../layout.tsx";
3
4interface RegisterProps {
5 error?: string;
6 question?: string;
7 pending?: boolean;
8}
9
10export function Register({ error, question, pending }: RegisterProps) {
11 if (pending) {
12 return (
13 <Layout user={null} title="Register">
14 <div class="auth-container">
15 <h1 class="page-title">Create account</h1>
16 <p class="form-success">
17 Your account has been submitted for review. You will be
18 able to log in once an admin approves it.
19 </p>
20 <p class="auth-footer">
21 Already have an account? <a href="/login">Sign in</a>
22 </p>
23 </div>
24 </Layout>
25 );
26 }
27
28 return (
29 <Layout user={null} title="Register">
30 <div class="auth-container">
31 <h1 class="page-title">Create account</h1>
32 {!!error && (
33 <p class="form-error" safe>
34 {error}
35 </p>
36 )}
37 <form method="POST" action="/register" class="auth-form">
38 <div class="form-group">
39 <label for="username">Username</label>
40 <input
41 id="username"
42 name="username"
43 type="text"
44 required
45 autocomplete="username"
46 maxlength={config.MAX_USERNAME_BYTES}
47 pattern="[a-zA-Z0-9_-]+"
48 title="Letters, numbers, hyphens and underscores only"
49 />
50 </div>
51 {!!question && (
52 <div class="form-group">
53 <label for="application" safe>
54 {question}
55 </label>
56 <textarea
57 id="application"
58 name="application"
59 rows="4"
60 required
61 placeholder="Your answer..."
62 ></textarea>
63 </div>
64 )}
65 <div id="passkey-section" style="display:none">
66 <button
67 id="passkey-register-btn"
68 class="btn btn-secondary btn-block"
69 type="button"
70 >
71 Register with passkey
72 </button>
73 <p id="passkey-error" style="display:none"></p>
74 <div class="auth-divider">
75 <span>or</span>
76 </div>
77 </div>
78 <div class="form-group">
79 <label for="password">Password</label>
80 <input
81 id="password"
82 name="password"
83 type="password"
84 autocomplete="new-password"
85 minlength="8"
86 maxlength={config.MAX_PASSWORD_BYTES}
87 />
88 </div>
89 <div class="form-group">
90 <label for="password2">Confirm password</label>
91 <input
92 id="password2"
93 name="password2"
94 type="password"
95 autocomplete="new-password"
96 minlength="8"
97 maxlength={config.MAX_PASSWORD_BYTES}
98 />
99 </div>
100 <button type="submit" class="btn btn-primary btn-block">
101 Register with password
102 </button>
103 </form>
104 <p class="auth-footer">
105 Already have an account? <a href="/login">Sign in</a>
106 </p>
107 </div>
108 <script type="module" src="/assets/passkey-register.js"></script>
109 </Layout>
110 );
111}
112