diff options
| -rw-r--r-- | res/templates/user_signup.html | 212 |
1 files changed, 212 insertions, 0 deletions
diff --git a/res/templates/user_signup.html b/res/templates/user_signup.html new file mode 100644 index 00000000..b210a3ea --- /dev/null +++ b/res/templates/user_signup.html @@ -0,0 +1,212 @@ +{% extends "base.html" %} {% block title %}Rhizi - User Signup{% +endblock %} {% block head %} {{ super() }} + +<script + src="/static/lib/jquery.js" + type="text/javascript"></script> +<script type="text/javascript"> + function signup_form___submit() { + + function validate_data(data) { + var err_msg_row = $('#err_msg_row'); // reset + err_msg_row.children().remove(); + if (data.password_first != data.password_second) { + err_msg_row.append($('<p>passwords do not match</p>')); + err_msg_row.css('display', 'block'); + return false; + } + if (data.password_first.length < 8) { + err_msg_row.append($('<p>password too short - must be at least 8 charachters long</p>')); + err_msg_row.css('display', 'block'); + return false; + } + + // TODO validate email + + err_msg_row.css('display', 'none'); + return true; + } + + var data = { + first_name : $('#signup_form___first_name').val(), + last_name : $('#signup_form___last_name').val(), + rhizi_username : $('#signup_form___rhizi_username').val(), + email_address : $('#signup_form___email_address').val(), + password_first : $('#signup_form___password_first').val(), + password_second : $('#signup_form___password_second').val(), + }; + + if (false == validate_data(data)) { + return; + } + + $.ajax({ + type : "POST", + url : '/signup', + async : false, + cache : false, + data : JSON.stringify(data), + dataType : 'json', + contentType : "application/json; charset=utf-8", + success : function(data, status, xhr) { + var signup_form__ajax_response = $('#signup_form__ajax_response'); // reset + signup_form__ajax_response.children().remove(); + signup_form__ajax_response.append($(data.response__html)); + }, + error : function(xhr, status, err_thrown) { + var signup_form__ajax_response = $('#signup_form__ajax_response'); // reset + signup_form__ajax_response.children().remove(); + signup_form__ajax_response.append($(data.response__html)); + } + }); + } +</script> + +<style type='text/css'> +#user_signup_form_panel { + width: 550px; + text-align: center; + margin-left: auto; + margin-right: auto; + display: block; + margin-top: 20%; +} + +#signup_form___submit_button { + alpha: 0.8; + background-color: #DCEDFD; + border-radius: 3px; + border: 1px solid #4B7CBD; + cursor: pointer; + float: right; + font-weight: bold; + margin: 20px; + padding: 5px; + text-align: center; + width: 140px; +} + +.signup_form__row { + overflow: auto; + width: 100%; +} + +.signup_form__field { + border-radius: 3px; + border: 1px solid #4B7CBD; + float: left; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 10px; + padding-right: 10px; + margin: 5px; +} + +.signup_form__row_sharing_field { + display: inline-block; +} + +.signup_form__field input { + background-color: inherit; + border: none; +} + +.signup_form__field input:focus { + outline: none; +} + +#signup_form__title { + margin-bottom: 30px; +} + +#signup_form___submit_button_row { + overflow: auto; +} + +#signup_form___submit_button:hover { + alpha: 1.0; +} + +#signup_form__ajax_response { + margin-top: 30px; + margin: 10px; +} + +#err_msg_row { + display: none; + background-color: #DF5C5C; + margin: 10px; + vertical-align: middle; +} +</style> +{% endblock %} {% block content %} +<div id="user_signup_form_panel"> + <h1 id="signup_form__title">Sign up</h1> + {% if 'activation_success' == state %} + <div> + <p> + Congratulations! your account has been activated.<br>Please + head over to the <a href="/login">login page</a> to access + your account. + </p> + </div> + {% elif 'activation_failure' == state %} + <div> + <p>{{ html_str__err }}</p> + </div> + {% else %} + <div + class="signup_form__row" + id="err_msg_row"></div> + <div class="signup_form__row"> + <div class="signup_form__field signup_form__row_sharing_field"> + <input + id="signup_form___first_name" + placeholder="First name"> + </div> + <div class="signup_form__field signup_form__row_sharing_field"> + <input + id="signup_form___last_name" + placeholder="Last name"> + </div> + </div> + <div class="signup_form__row"> + <div class="signup_form__field"> + <input + id="signup_form___rhizi_username" + placeholder="Rhizi username"> + </div> + </div> + <div class="signup_form__row"> + <div class="signup_form__field"> + <input + id="signup_form___email_address" + type="email" + placeholder="Email"> + </div> + </div> + <div class="signup_form__row"> + <div class="signup_form__field"> + <input + id="signup_form___password_first" + type="password" + placeholder="password"> + </div> + </div> + <div class="signup_form__row"> + <div class="signup_form__field"> + <input + id="signup_form___password_second" + type="password" + placeholder="password repeat"> + </div> + </div> + <div id="signup_form___submit_button_row"> + <div + id="signup_form___submit_button" + onclick="signup_form___submit();">Submit</div> + </div> + <div id="signup_form__ajax_response"></div> + {% endif %} +</div> +{% endblock %} |