ColdCore/templates/register.html

{% extends "base.html" %}
{% block title %}Register{% endblock %}
{% block head %}
<script src='https://www.google.com/recaptcha/api.js'></script>
{% endblock %}
{% block content %}

<div class="row">
    <div class="panel register-info light-blue lighten-1 white-text z-depth-2">
        <p>{{ config.eligibility }} If you do not meet these requirements, you are still welcome to play, but you will not be eligible for prizes.</p>
    </div>
</div>

<div class="panel z-depth-2">
    <div class="form-title blue-text">Register</div>
    <form method="POST">
        <div class="row no-bot">
          <div class="input-field col s12">
              <input class="validate" required maxlength="50" id="username" name="username" type="text" />
              <label for="team-name">Username</label>
          </div>
        </div>
        <div class="row no-bot">
          <div class="input-field col s12">
              <input class="validate" required id="email" name="email" type="email" />
              <label for="email">Email</label>
          </div>
        </div>
        <div class="row no-bot">
            <div class="input-field col s6">
                <input class="validate" required id="password" name="password" type="password" />
                <label for="password">Password</label>
            </div>
            <div class="input-field col s6">
                <input class="validate" required id="confirm_password" name="confirm_password" type="password" />
                <label for="confirm_password">Confirm Password</label>
            </div>
        </div>
        <div class="row no-bot">
          <div class="input-field col s6">
              <select required id="background" name="background">
                {{select.genoption(select.Backgrounds, selected="university")|safe}}
              </select>
              <label for="background">Background</label>
          </div>
          <div class="input-field col s6">
              <select required name="country" id="country">
                  {{select.genoption(select.Countries, header='<option value="" disabled selected>Select Country</option>')|safe}}
              </select>
              <label>Country</label>
          </div>
        </div>
        <div id="prize-info" class="row no-bot" style="display: none;">
            <div class="input-field col s6">
                <select name="tshirt_size" id="tshirt_size">
                    {{select.genoption(select.TShirts, header='<option value="" disabled selected>Select T-Shirt Size</option>')|safe}}
                </select>
                <label>Shirt Size</label>
            </div>
            <div class="input-field col s6">
              <input name="gender" type="radio" id="male" value="M" />
              <label for="male">Male</label>
              <input name="gender" type="radio" id="female" value="F" />
              <label for="female" style="margin-left: 1rem;">Female</label>
            </div>
        </div>
        <div class="row team-wrapper z-depth-1">
            <input id="join_team-input" name="join_team" type="hidden" value="0"/>
            <div class="">
                <ul class="tabs">
                    <li class="tab col s6"><a class="active" href="#create-team" id="create-team-btn">Create new Team</a></li>
                    <li class="tab col s6"><a href="#join-team" id="join-team-btn">Join existing team</a></li>
                </ul>
            </div>
            <div id="create-team">
                <div class="row no-bot">
                    <div class="input-field col s6">
                        <input class="validate" required id="team_name" name="team_name" type="text" />
                        <label for="team_name">Team Name</label>
                    </div>
                    <div class="input-field col s6">
                        <input class="validate" id="team_affiliation" name="team_affiliation" type="text" />
                        <label for="team_affiliation">Affiliation (e.g school, company, etc)</label>
                    </div>
                </div>
            </div>
            <div id="join-team" class="col s12">
                <div class="input-field">
                    <input class="validate" id="team_key" name="team_key" type="text" />
                    <label for="team_key">Team Key</label>
                </div>
            </div>
        </div>
        <div class="row no-bot">
            <div class="col s12 m6">
                <div class="g-recaptcha" data-sitekey="{{ config.secret.recaptcha_key }}"></div>
            </div>
            <div class="col s12 m6">
                <button class="btn waves-effect waves-light right register-submit" type="submit">Submit</button>
            </div>
        </div>
        <input name="_csrf_token" type="hidden" value="{{ csrf_token() }}" />
    </form>
</div>
{% endblock %}
{% block postscript %}
<script>
$(function(){
  $("#create-team-btn").on('click', function(){
    $("#create-team #team_name").prop('required', true);
    $("#create-team #team_affiliation").prop('required', true);
    $("#join-team #team_key").prop('required', false);
    $("#join_team-input").val("0");
  });
  $("#join-team-btn").on('click', function(){
    $("#create-team #team_name").prop('required', false);
    $("#create-team #team_affiliation").prop('required', false);
    $("#join-team #team_key").prop('required', true);
    $("#join_team-input").val("1");
  });

  $("#country").change(function(e) {
    if($("#country").val() == "ISL"){
      $("#prize-info").show("slow");
      $("#tshirt_size").prop('required', true);
      $("#male").prop('required', true);
    } else {
      $("#prize-info").hide("slow");
      $("#tshirt_size").prop('required', false);
      $("#male").prop('required', false);
    }
  });

});
</script>
{% endblock %}