a mini social media app for small communities
emmeline.girlkisser.top
1@include 'partial/header.html'
2
3<h1>register</h1>
4
5<div>
6 @if ctx.form_error != ''
7 <p>error: @ctx.form_error</p>
8 @end
9
10 @if ctx.is_logged_in()
11 <p>you are already logged in as @{user.get_name()}!</p>
12 <a href="/api/user/logout">log out</a>
13 @else
14 <form action="/api/user/register" method="post">
15 <label for="username">username:</label>
16 <input
17 type="text"
18 name="username"
19 id="username"
20 pattern="@app.config.user.username_pattern"
21 minlength="@app.config.user.username_min_len"
22 maxlength="@app.config.user.username_max_len"
23 required
24 >
25 <br>
26 <label for="password">password: <a href="#" id="view-password" style="display: inline;">view</a></label>
27 <input
28 type="password"
29 name="password"
30 id="password"
31 pattern="@app.config.user.password_pattern"
32 minlength="@app.config.user.password_min_len"
33 maxlength="@app.config.user.password_max_len"
34 required
35 >
36 <br>
37 <label for="confirm-password">confirm password: <a href="#" id="view-confirm-password" style="display: inline;">view</a></label>
38 <input
39 type="password"
40 name="confirm-password"
41 id="confirm-password"
42 pattern="@app.config.user.password_pattern"
43 minlength="@app.config.user.password_min_len"
44 maxlength="@app.config.user.password_max_len"
45 required
46 >
47 <br>
48 <p>passwords match: <span id="passwords-match">yes</span></p>
49 <br>
50 @if app.config.instance.invite_only
51 <label for="invite-code">invite code:</label>
52 <input type="text" name="invite-code" id="invite-code" required>
53 <br>
54 @end
55 @if app.config.hcaptcha.enabled
56 <div class="h-captcha" data-sitekey="@{app.config.hcaptcha.site_key}"></div>
57 <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
58 <br>
59 @end
60 <input type="submit" value="register">
61 </form>
62 @end
63</div>
64
65<script>
66 const password = document.getElementById('password');
67 const confirm_password = document.getElementById('confirm-password');
68 const matches = document.getElementById('passwords-match');
69
70 const a = () => {
71 matches.innerText = password.value==confirm_password.value ? "yes" : "no";
72 };
73 password.addEventListener('input', a);
74 confirm_password.addEventListener('input', a);
75
76 const view_password = document.getElementById('view-password');
77 const view_confirm_password = document.getElementById('view-confirm-password');
78
79 const b = (elm, btn) => {
80 return event => {
81 if (elm.getAttribute('type') == 'password')
82 {
83 elm.setAttribute('type', 'text');
84 btn.innerText = 'hide';
85 }
86 else
87 {
88 elm.setAttribute('type', 'password')
89 btn.innerText = 'show';
90 }
91 };
92 };
93 view_password.addEventListener('click', b(password, view_password));
94 view_confirm_password.addEventListener('click', b(confirm_password, view_confirm_password));
95</script>
96
97@include 'partial/footer.html'