228 lines
9.0 KiB
HTML
228 lines
9.0 KiB
HTML
{{define "title"}}Sign Up{{end}}
|
|
{{define "content"}}
|
|
<div class="container">
|
|
<section class="hero is-info is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">Sign up</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="block content p-4">
|
|
|
|
{{if or .SkipEmailVerification (not .SignupToken)}}
|
|
<p>
|
|
I'm glad you're thinking about joining us here!
|
|
</p>
|
|
|
|
<p>
|
|
Before we get started, I want you to confirm you've read the rules. Before you can interact with
|
|
the community here, you will need to <strong>upload a face picture</strong> to your profile (it
|
|
doesn't have to be a nude, but does have to show your face!) and you will need to
|
|
<strong>submit a verification selfie</strong> to prove that the person in that picture is you.
|
|
</p>
|
|
|
|
<p>
|
|
The <strong>verification selfie</strong> will involve you writing a message on a sheet of paper
|
|
and taking a selfie showing your face and clearly holding the sheet of paper. But we'll get to that a little later!
|
|
</p>
|
|
|
|
<h1>Site Rules</h1>
|
|
|
|
<ul>
|
|
<li>
|
|
🧑 Only <strong>real people</strong> are allowed to join. You must be comfortable showing your
|
|
face on your profile page. You don't need to include your face in your nudes but a profile picture
|
|
of your face is required.
|
|
</li>
|
|
<li>
|
|
✅ <strong>Verification is mandatory.</strong> Along with the face picture on your profile page,
|
|
you will need to take a selfie with a hand-written note on paper to verify that you're a real
|
|
person.
|
|
</li>
|
|
<li>
|
|
🤳 <strong>Self pictures only.</strong> You are expected to post only pictures that you're in.
|
|
No "porn blogs" of random content you found online!
|
|
</li>
|
|
<li>
|
|
😈 <strong><span class="has-text-danger">Explicit content</span> is permitted in designated areas only.</strong>
|
|
Not all nudists want to see "sexual" content, but exhibitionists are welcome here too. If you want to upload
|
|
sexually charged content, mark those pictures as 'explicit' when uploading them or post them only to the
|
|
designated explicit forums so nudists who prefer not to see don't have to.
|
|
</li>
|
|
<li>
|
|
😡 <strong>No hate speech.</strong> We take a "zero tolerance" stance against Nazis,
|
|
<abbr title="Trans-Exclusionary Radical Feminists">TERFs</abbr>, transphobia, homophobia
|
|
or other forms of bigotry.
|
|
</li>
|
|
<li>
|
|
🔞 You must be <strong class="has-text-danger">18 years or older</strong> to sign up for this website.
|
|
</li>
|
|
</ul>
|
|
|
|
<h1>Onboarding</h1>
|
|
|
|
<p>
|
|
Here is what you can expect from the sign-up process:
|
|
</p>
|
|
|
|
<ol>
|
|
<li>Email address: you will be emailed a link to verify control of that email inbox.</li>
|
|
<li>Account creation: you will create a username, password, and upload a face pic for your profile page.</li>
|
|
<li>Verification: you will take a verification selfie to prove you're the person in that profile pic.</li>
|
|
<li>Approval: an admin will review your verification selfie and you will become a full member of this site!</li>
|
|
</ol>
|
|
{{end}}
|
|
|
|
<h1>Sign Up</h1>
|
|
|
|
<p>
|
|
To start the process, enter your e-mail address below. You will be sent an e-mail to verify you
|
|
control that address and then you can create a username and password.
|
|
</p>
|
|
|
|
<form action="/signup" method="POST">
|
|
{{ InputCSRF }}
|
|
{{if .SignupToken}}
|
|
<input type="hidden" name="token" value="{{.SignupToken}}">
|
|
{{end}}
|
|
|
|
<div class="field">
|
|
<label class="label" for="email">Your email address:</label>
|
|
<input type="email" class="input"
|
|
placeholder="name@domain.com"
|
|
name="email"
|
|
id="email"
|
|
value="{{.Email}}"
|
|
required {{if .SignupToken }}readonly{{end}}>
|
|
</div>
|
|
|
|
{{if or .SignupToken .SkipEmailVerification}}
|
|
<div class="field">
|
|
<label class="label" for="username">Enter a username:</label>
|
|
<input type="text" class="input"
|
|
placeholder="username"
|
|
name="username"
|
|
id="username"
|
|
value="{{.Username}}"
|
|
required>
|
|
<small class="has-text-grey">Usernames are 3 to 32 characters a-z 0-9 . -</small>
|
|
|
|
<!-- Username checking -->
|
|
<div class="notification is-info is-light py-2 px-4 mt-1"
|
|
id="username-checking" style="display: none">
|
|
<i class="fa fa-spinner fa-spin mr-1"></i> Checking username...
|
|
</div>
|
|
<div class="notification is-success is-light py-2 px-4 mt-1"
|
|
id="username-ok" style="display: none">
|
|
<i class="fa fa-check mr-1"></i> Looks good!
|
|
</div>
|
|
<div class="notification is-danger is-light py-2 px-4 mt-1"
|
|
id="username-error" style="display: none">
|
|
<i class="fa fa-xmark mr-1"></i> That username is already taken!
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="password">Enter a passphrase:</label>
|
|
<input type="password" class="input"
|
|
placeholder="password"
|
|
name="password"
|
|
id="password"
|
|
required>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="password2">Confirm passphrase:</label>
|
|
<input type="password" class="input"
|
|
placeholder="password"
|
|
name="password2"
|
|
id="password2"
|
|
required>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="dob">Date of birth:</label>
|
|
<input type="date" class="input"
|
|
placeholder="password"
|
|
name="dob"
|
|
id="dob"
|
|
required>
|
|
<p class="help">
|
|
Your birthdate won't be shown to other members and is used to show
|
|
your current age on your profile. Please enter your correct birthdate.
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="confirm" value="true" required>
|
|
I understand the site rules and assert that I am 18 years or older.
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<button type="submit" class="button is-primary">Continue and verify email</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{define "scripts"}}
|
|
<script>
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
// Set up username checking script.
|
|
const $username = document.querySelector("#username"),
|
|
$unCheck = document.querySelector("#username-checking"),
|
|
$unOK = document.querySelector("#username-ok"),
|
|
$unError = document.querySelector("#username-error");
|
|
|
|
let onChange = (e) => {
|
|
$unCheck.style.display = "block";
|
|
$unOK.style.display = "none";
|
|
$unError.style.display = "none";
|
|
|
|
if ($username.value.length < 3) {
|
|
$unCheck.style.display = "none";
|
|
return;
|
|
};
|
|
|
|
return fetch("/v1/users/check-username", {
|
|
method: "POST",
|
|
mode: "same-origin",
|
|
cache: "no-cache",
|
|
credentials: "same-origin",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
"username": $username.value,
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.StatusCode !== 200) {
|
|
window.alert(data.data.error);
|
|
return;
|
|
}
|
|
|
|
let result = data.data;
|
|
if (result.OK) {
|
|
$unOK.style.display = "block";
|
|
$unError.style.display = "none";
|
|
} else {
|
|
$unOK.style.display = "none";
|
|
$unError.style.display = "block";
|
|
}
|
|
}).catch(resp => {
|
|
window.alert(resp);
|
|
}).finally(() => {
|
|
$unCheck.style.display = "none";
|
|
})
|
|
};
|
|
|
|
$username.addEventListener("change", onChange);
|
|
$username.addEventListener("blur", onChange);
|
|
});
|
|
</script>
|
|
{{end}}
|