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 && <p class="form-error">{error}</p>}
33 <form method="POST" action="/register" class="auth-form">
34 <div class="form-group">
35 <label for="username">Username</label>
36 <input
37 id="username"
38 name="username"
39 type="text"
40 required
41 autocomplete="username"
42 maxlength={config.MAX_USERNAME_BYTES}
43 pattern="[a-zA-Z0-9_-]+"
44 title="Letters, numbers, hyphens and underscores only"
45 />
46 </div>
47 {question && (
48 <div class="form-group">
49 <label for="application">{question}</label>
50 <textarea
51 id="application"
52 name="application"
53 rows="4"
54 required
55 placeholder="Your answer..."
56 ></textarea>
57 </div>
58 )}
59 <div id="passkey-section" style="display:none">
60 <button
61 id="passkey-register-btn"
62 class="btn btn-secondary btn-block"
63 type="button"
64 >
65 Register with passkey
66 </button>
67 <p id="passkey-error" style="display:none"></p>
68 <div class="auth-divider">
69 <span>or</span>
70 </div>
71 </div>
72 <div class="form-group">
73 <label for="password">Password</label>
74 <input
75 id="password"
76 name="password"
77 type="password"
78 autocomplete="new-password"
79 minlength="8"
80 maxlength={config.MAX_PASSWORD_BYTES}
81 />
82 </div>
83 <div class="form-group">
84 <label for="password2">Confirm password</label>
85 <input
86 id="password2"
87 name="password2"
88 type="password"
89 autocomplete="new-password"
90 minlength="8"
91 maxlength={config.MAX_PASSWORD_BYTES}
92 />
93 </div>
94 <button type="submit" class="btn btn-primary btn-block">
95 Register with password
96 </button>
97 </form>
98 <p class="auth-footer">
99 Already have an account? <a href="/login">Sign in</a>
100 </p>
101 </div>
102 <script type="module" src="/assets/passkey-register.js"></script>
103 </Layout>
104 );
105}
106