website/web/templates/account/signup.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>
                📵 <strong>Don't download or repost members' photos</strong> without their consent. There are risks inherent
                with sharing a picture online, but it's never a fun experience the first time a friend mentions they saw your
                nudes on some random social media page that you didn't know anything about!
            </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.
                    <br>
                    On mobile and scrolling for your year is tedious?
                    <a href="#" id="manualEntry">Click to type your birthdate instead.</a>
                </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";
        })
    };

    if ($username != undefined) {
        $username.addEventListener("change", onChange);
        $username.addEventListener("blur", onChange);
    }

    // DOB manual entry script, on signup completion page.
    let $manualEntry = document.querySelector("#manualEntry"),
        $dob = document.querySelector("#dob");

    if ($manualEntry != undefined) {
        $manualEntry.addEventListener("click", function(e) {
            e.preventDefault();

            let answer = window.prompt("Enter your birthdate in 'YYYY-MM-DD' format").trim().replace(/\//g, '-');
            if (answer.match(/^(\d{2})-(\d{2})-(\d{4})/)) {
                let group = answer.match(/^(\d{2})-(\d{2})-(\d{4})/);
                answer = `${group[3]}-${group[1]}-${group[2]}`;
                window.alert(`NOTE: Your input was interpreted to be in MM/DD/YYYY order and has been read as: ${answer}`);
            } else if (!answer.match(/^\d{4}-\d{2}-\d{2}/)) {
                window.alert(`Please enter the date in YYYY-MM-DD format.`);
                return;
            }

            $dob.value = answer;
        });
    }
});
</script>
{{end}}