Mutorials/signupV2.ejs at master · The-Mu-Foundation/Mutorials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<%- contentFor('main') %>
<div class="flex flex-col items-center max-w-sm px-6">
  <img class="w-12 mb-2" src="https://cdn.mutorials.org/images/icons/Icon_Main.svg">
  <h2 class="mb-2">Sign up for Mutorials</h2>
  <p class="mb-4">Already have an account? <a href="/signin">Sign in</a></p>

  <form class="w-full" action="/register" method="post" autocomplete="off" spellcheck="false">
    <div class="mb-4">
      <label class="font-medium" for="ign">Username</label>
      <input
        type="text"
        class="form-control"
        id="ign" name="ign"
        autocomplete="username"
        required="true"
        value="<%= formData ? formData.ign : '' %>"
      >
      <p class="text-sm" id="username-characters">You may use only <strong>letters</strong>, <strong>numbers</strong>, underscore (_), hyphen (-), period (.), and tilde (~).</p>
    </div>
    <div class="mb-4">
      <label class="font-medium" for="signupEmail">Email</label>
      <input
        type="email"
        class="form-control"
        id="signupEmail"
        name="username"
        required="true"
        value="<%= formData ? formData.username : '' %>"
      >
    </div>
    <div class="mb-4">
      <label class="font-medium" for="signupPassword">Password</label>
      <input
        type="password"
          class="form-control"
          id="signupPassword"
          name="password"
          autocomplete="new-password"
          required="true"
        >
      <p class="mb-4 text-sm" id="password-req">A valid password must have a minimum of <strong>7 characters</strong> which includes at least <strong>1 letter</strong> and at least <strong>1 number</strong></p>
    </div>
    <div class="mb-4">
      <label class="font-medium" for="signupConfirmPassword">Confirm password</label>
      <input
        type="password"
        class="form-control"
        id="signupConfirmPassword"
        name="confirmPassword"
        autocomplete="new-password"
        required="true"
      >
    </div>
    <div class="mb-4">
      <label class="font-medium" for="yob">Year of Birth</label>
      <input
        type="number"
        class="form-control"
        id="yob"
        name="yob"
        required="true"
        value="<%= formData ? formData.yob : '' %>"
      >
    </div>

    <div>
      <div class="flex items-start gap-2">
        <div class="flex items-center">
          &#8203;
          <input
            type="checkbox"
            id="agreeTOS"
            name="agreeTOS"
            required="true"
            <%= formData && formData.agreeTOS ? 'checked' : '' %>>
        </div>
        <label for="agreeTOS">I have read and agreed to the <a href='/termsOfService#terms-of-service'>Terms of Service</a>.</label><br>
      </div>
    </div>

    <div class="mt-4">
      <input class="btn btn-primary w-full" type="submit" id="submitButton" value="Sign Up">
    </div>
  </form>
</div>