invisible » invisible-web

{% extends "template_profil.html" %}

{% load i18n %}

{% block meta %}

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() {

          $("#id_representative").click(function(){

            $(".label-hidden").slideToggle("slow");

            $(".label-hidden .errorlist").remove();

            $("#id_organisation").val("");

            $("#id_website").val("");

            $("#id_phone").val("");

          });

        $('#form_register').submit(function(){

            var validForm = true;

            var msgErrorEmpty = $('.msgErrorEmpty').html();

            var msgErrorEmail = $('.msgErrorEmail').html();

            var msgErrorPassword = $('.msgErrorPassword').html();

            var msgErrorPassLength = $('.msgErrorPassLength').html();

            var msgErrorPhone = $('.msgErrorPassPhone').html();

            var username = $("#id_username").val();

            var email = $("#id_email").val();

            var firstName = $("#id_first_name").val();

            var lastName = $("#id_last_name").val(); 

            var password1 = $("#id_password1").val();

            var password2 = $("#id_password2").val();

            var representative = $("#id_representative").is(":checked");

            var organisation = $("#id_organisation").val();

            var website = $("#id_website").val();

            var phone = $("#id_phone").val();

            //----- VERIFICATION USERNAME -----//

            if(username == ""){

                $("#id_username").before("<div class='errorlist errorlistUserName'>"+msgErrorEmpty+"</div>");

                validForm = false;

            }else{

                $('.errorlistUserName').remove();

            }

            //----- VERIFICATION EMAIL -----//

            if(email == ""){

                $("#id_email").before("<div class='errorlist errorlistEmail'>"+msgErrorEmpty+"</div>");

                validForm = false;

            }

            else{

                var emailRegex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

                if(!emailRegex.test(email)){

                    $('.errorlistEmail').remove();

                    $("#id_email").before("<div class='errorlist errorlistEmail'>"+msgErrorEmail+"</div>");

                    validForm = false;

                }

                else{

                    $('.errorlistEmail').remove();

                }

            }

            //----- VERIFICATION FIRSTNAME -----//

             if(firstName == ""){

                $("#id_first_name").before("<div class='errorlist errorlistFirstName'>"+msgErrorEmpty+"</div>");

                validForm = false;

            }else{

                $('.errorlistFirstName').remove();

            }

             //----- VERIFICATION LASTNAME -----//

             if(lastName == ""){

                $("#id_last_name").before("<div class='errorlist errorlistLastName'>"+msgErrorEmpty+"</div>");

                validForm = false;

            }else{

                $('.errorlistLastName').remove();

            }

             //----- VERIFICATION MOT DE PASSE -----//

             if(password1 == ""){

                $("#id_password1").before("<div class='errorlist errorlistpassword1'>"+msgErrorEmpty+"</div>");

                validForm = false;

            }else{

                if(password1 != password2){

                    $('.errorlistpassword1').remove();

                    $("#id_password1").before("<div class='errorlist errorlistpassword1'>"+msgErrorPassword+"</div>");

                    validForm = false;

                }

                else{

                    if(password1.length < 6){

                          $('.errorlistpassword1').remove();

                          $("#id_password1").before("<div class='errorlist errorlistpassword1'>"+msgErrorPassLength+"</div>");

                          validForm = false;

                    }else{

                        $('.errorlistpassword1').remove();

                    }

                }

            }

            //--- VERIFICATION REPRÉSENTANT (SI CASE COCHÉ) -----//

            if(representative){

                //--- VERIFICATION CHAMP PHONE

                if(phone == ""){

                    $('.errorlistphone').remove();

                    $("#id_phone").before("<div class='errorlist errorlistphone'>"+msgErrorEmpty+"</div>");

                    validForm = false;

                }

                else{

                    var characterReg = /\+[1] [0-9]{3}-[0-9]{3}-[0-9]{4}$/;

                    if(!characterReg.test(phone)){

                        $("#id_phone").before("<div class='errorlist errorlistphone'>"+msgErrorPhone+"</div>");

                        validForm = false;

                    }

                    else{

                        $('.errorlistphone').remove();

                    }

                }

                //---- VERIFICATION CHAMP ORGANISME  ----//

                if(organisation == ""){

                    $("#id_organisation").before("<div class='errorlist errorlistOrganisation'>"+msgErrorEmpty+"</div>");

                    validForm = false;

                }else{

                    $('.errorlistOrganisation').remove();

                }

            }else{

                $('.errorlistphone').remove();

            }

            $(".errorlist").effect("bounce", {direction:"left", times:2, distance:10 });

            return validForm;

        });

    });

    </script>

{% endblock %}

{% block content_profil %}

  <article id="article-profil" class="home-profil">

    <header id="header-profil">

        <h1>{% trans "Registration" %}</h1>

    </header>

    <div class="text-profil">

    <form method="post" id="form_register" action=".">

        <div class="msgError msgErrorEmpty">{% trans "Ce champ est obligatoire." %} </div>

        <div class="msgError msgErrorEmail">{% trans "Courriel invalide" %} </div>

        <div class="msgError msgErrorPassword">{% trans "Vos deux mots de passe sont différents" %} </div>

        <div class="msgError msgErrorPassLength">{% trans "Votre mot de passe est trop court. Veuillez saisir au moins 7 caractères" %} </div>

         <div class="msgError msgErrorPassPhone">{% trans "Format du numéro de téléphone invalide" %} </div>

      {{ form.non_field_errors }}

      <div class="fieldWrapper">

        {{ form.username.errors }}

        <label for="id_username">{% trans "Username" %}:</label>

        <input id="id_username" class="required" type="text" maxlenght="30" name="username" value=""/>

      </div>

      <div class="fieldWrapper">

        {{ form.email.errors }}

        <label for="id_email">{% trans "Email" %}:</label>

        {{ form.email }}

      </div>

      <div class="fieldWrapper">

        {{ form.first_name.errors }}

        <label for="id_first_name">{% trans "First name" %}:</label>

        {{ form.first_name }}

      </div>

      <div class="fieldWrapper">

        {{ form.last_name.errors }}

        <label for="id_last_name">{% trans "Last name" %}:</label>

        {{ form.last_name }}

      </div>

      <div class="fieldWrapper">

        {{ form.password1.errors }}

        <label for="id_password1">{% trans "Password" %}:</label>

        {{ form.password1 }}

      </div>

      <div class="fieldWrapper">

        {{ form.password2.errors }}

        <label for="id_password2">{% trans "Password again" %}:</label>

        {{ form.password2 }}

      </div>

      <div class="fieldWrapper">

        {{ form.representative.errors }}

        <label for="id_representative" class="labelcheck">{{ form.representative }} {% trans "I represent an organisation" %}:</label>

      </div>

      <div class="label-hidden">

        <div class="fieldWrapper">

          {{ form.organisation.errors }}

          <label for="id_organisation">{% trans "Organisation name" %}:</label>

          {{ form.organisation }}

        </div>

        <div class="fieldWrapper">

          {{ form.website.errors }}

          <label for="id_website">{% trans "Web site" %}:</label>

          {{ form.website }}

        </div>

        <div class="fieldWrapper">

          {{ form.phone.errors }}

          <label for="id_phone">{% trans "Phone (+1 514-123-1234)" %}</label>

          {{ form.phone }}

        </div>

      </div>

      <div class="fieldWrapper">

        {{ form.subscribe.errors }}

        <label for="id_subscribe" class="labelcheck">{{ form.subscribe }} {% trans "Subscribe to SAT newsletter" %}:</label>

      </div>

     <input type="submit" value="{% trans 'Submit' %}" />

    </form>

             <!-- <form name="login" action="." method="post">{% csrf_token %}

            {{ form.as_p }}

            <input type="submit" value="{% trans 'Submit' %}" />

            </form> -->

        <a id="btn-facebookLogin" href="/world/{{ request.LANGUAGE_CODE }}/facebook/login/"> {% trans "Login with Facebook" %}</a>

    </div>

  </article>

{% endblock %}