rDrama/files/templates/sign_up.html

140 lines
6.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{%- import 'util/helpers.html' as help -%}
{%- import 'html_head.html' as html_head with context -%}
<!DOCTYPE html>
<html lang="en">
{% if ref_user %}
{% set title= ref_user.username + "invites you to " + SITE_NAME %}
{% else %}
{% set title="Sign up" %}
{% endif %}
{{html_head.html_head(true, false, false, none, title, none, "", false)}}
<body id="login">
<div class="container-fluid position-absolute h-100 p-0 overflow-auto">
<div class="row no-gutters h-100">
<div class="col-12 col-md-6 my-auto p-3">
<div class="row justify-content-center">
<div class="col-10 col-md-7">
<div id="register-form">
{% if ref_user %}
<h2>@{{ref_user.username}} has invited you!</h2>
<p class="text-muted mb-md-2">Looks like someone wants you to join {{SITE_NAME}}.</p>
{% elif SITE_NAME == 'rDrama' and site_settings['login_required'] %}
<p class="text-muted text-justify mb-3" style="line-height: 1.2em">
Hiiiiii its your favorite user Carp! Were currently on <span style="font-variant-caps: small-caps;">Login Required</span> mode for one of a few reasons:
</p>
<ol style="padding-left: 1.5em">
<li>The site is running really slowly and we think it might be miscreants up to no good, or</li>
<li>Its our monthly 24 hours of login-required-mode to encourage lovely lurkers to become lovely new friends of ours, or</li>
<li>Someone clicked the toggle by mistake lol oops sorry!</li>
</ol>
<p class="text-muted text-justify mb-1" style="line-height: 1.2em">
But thats all fine. Signing up is easy. It takes literally like 4 seconds if youre slow. You dont even need an email! Just pick a username, make up some neat new password where you replace all the es with 3s or whatever and bam, done, youre in.<br>
Remember to click “Follow” on my profile!
</p>
<p class="text-muted mb-md-2">
I love you.<br>
<em>xoxo carp</em> 💋
</p>
<hr>
{% elif SITE_NAME == 'WPD' and site_settings['login_required'] %}
<p class="text-muted text-justify mb-1" style="line-height: 1.2em">
<strong>Hi you!</strong> &mdash; <span style="font-variant-caps: small-caps;">watchpeopledie.tv</span> is currently doing our monthly 24(ish) hours of "everyone needs to have an account" &mdash; sorry about that! But making an account is actually super easy. <strong>You don't even need an email address!</strong> Literally just pick a username, set a password, and that's that. Bam, done, like 8 seconds, tops.<br>
</p>
<p class="text-muted mb-md-2">
We WANT you with us &#128150;<br>
Please join!
</p>
<hr>
{% else %}
<h2>Create your account.</h2>
<p class="text-muted mb-md-2">No email address required.</p>
{% endif %}
<form action="/signup" method="post" class="mt-md-3" id="signup">
{% if error %}<div class="text-danger mb-2">{{error}}</div>{% endif %}
<input type="hidden" name="formkey" value="{{formkey}}">
<input type="hidden" name="now" value="{{now}}">
{% if redirect %}<input type="hidden" name="redirect" value="{{redirect}}">{% endif %}
{% if ref_user %}
<input type="hidden" name="referred_by" value="{{ref_user.id}}">{% endif %}
<label for="username-register" class="mt-3">Username</label>
<input autocomplete="off" class="form-control" id="username-register"
aria-describedby="usernameHelpRegister" type="text" name="username" pattern="[a-zA-Z0-9_\-]{3,25}" min="3" max="25" required="">
<small id="usernameHelpRegister"></small>
<label for="email-register" class="mt-3">Email Address</label>
<small class="d-inline-block text-muted ml-1">(optional)</small>
<input style="background-color: var(--gray-800)" autocomplete="off" class="form-control" id="email-register"
aria-describedby="emailHelpRegister" type="email" pattern='{{EMAIL_REGEX_PATTERN}}' name="email" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');this.blur();this.focus()}">
<label for="password-register" class="mt-3">Password</label>
<input autocomplete="off" class="form-control" id="password-register"
aria-describedby="passwordHelpReigster" type="password" name="password" required="">
<small id="passwordHelpRegister" class="form-text font-weight-bold text-muted d-none mt-1">Minimum of 8
characters
required.</small>
<small id="passwordHelpSuccess" class="form-text font-weight-bold text-success d-none mt-1">Your password meets the requirements.
</small>
<label for="password_confirm" class="mt-3">Confirm Password</label>
<input autocomplete="off" class="form-control" id="password_confirm"
aria-describedby="passwordConfirmHelp" type="password" name="password_confirm"
required="">
<div class="custom-control custom-checkbox mt-4">
<input autocomplete="off" type="checkbox" class="custom-control-input" id="termsCheck" required>
<label class="custom-control-label terms" for="termsCheck">I accept the <a href="/sidebar">rules</a></label>
</div>
{% if turnstile != 'blahblahblah' %}
<div class="cf-turnstile" data-sitekey="{{turnstile}}"></div>
{% endif %}
<button type="submit" class="btn btn-primary login w-100 mt-3" id="register_button">Register</button>
<div class="text-center text-muted text-small mt-5 mb-3">
Already have an account? <a href="/login{{'?redirect='+redirect if redirect else ''}}" class="font-weight-bold toggle-login">Log in</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-mob-none">
<div class="splash-wrapper">
<div class="splash-overlay"></div>
<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
</div>
</div>
</div>
</div>
<script defer src="{{'js/signup.js' | asset}}"></script>
{% if turnstile != 'blahblahblah' %}
<script defer src="https://challenges.cloudflare.com/turnstile/v0/api.js"></script>
{% endif %}
</body>
</html>