user_signup template

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 %}