Adds full client-side validation to the learn request page, adds a helper template for commonly used HTML idioms, minor bug fixes, and some attempts to edit a profile and promote/demote users

Sam Redmond · Sam Redmond · commit 9e497d51f02c · 2013-11-29T02:16:11.000-08:00
diff --git a/app/static/css/extra_styles.css b/app/static/css/extra_styles.css
@@ -7,6 +7,14 @@
   }
 }
 
+@media (max-width: 767px)
+{
+  body {
+    margin: 0px;
+    padding: 0px;
+  }
+}
+
 /* Get the footer to stay at the bottom of the page
 -------------------------------------------------- */
 html, body {
diff --git a/app/static/js/main.js b/app/static/js/main.js
@@ -65,65 +65,46 @@ $(document).ready(function()
 		return patt.test(str);
 	}
 
-	//Verify a request before it is sent to the server
-	$("#submitRequest").submit(function()
+	/** 
+	* Verify a LEARN request before it is sent to the server.
+	* Possible Errors:
+	* No class selected
+	* 'Other' issue selected but nothing filled in
+	* Nothing in the 'title' section
+	* Nothing in the 'specific challenge' section
+	*/
+	$("#submit_learn_request").click(function()
 	{
-		//Kinda a ghetto way to inform people of what error they made. Add the error message to a string.
+		//An array to hold all the error messages.
 		var errors = new Array();
 
-		//Get the values
-		var first_name_text = escapeHTML($("#first-name").val().trim());
-		var last_name_text = escapeHTML($("#last-name").val().trim());
-		var grade_text = escapeHTML($("#grade").val().trim());
-		var email_text = escapeHTML($("#email").val().trim());
-
-		var num_classes_selected = $("option:selected").length;
-
+		//Get values
+		var subj_title = escapeHTML($("#subj_title").val().trim());
+		var issue_type = escapeHTML($("input[name=issue]").filter(':checked').val().trim());
+		var elaboration = escapeHTML($("#elaboration").val().trim());
 		var title_text = escapeHTML($("#title").val().trim());
 		var challenge_text = escapeHTML($("#challenge").val().trim());
-
-		//Specialized error messages
-		if (isEmpty(first_name_text))
+		
+		if (isEmpty(subj_title))
 		{
-			errors.push("Your first name cannot be empty.");
+			errors.push("You must select a class in which you would like help.");
 		}
-		else if (!isAlpha(first_name_text))
+		if (["hw","test","proj","other"].indexOf(issue_type) == -1)
 		{
-			errors.push("Your first name must be composed of letters only.");
+			errors.push("Please do not change the source code of the radio button values.");
 		}
-		if (isEmpty(last_name_text))
-		{
-			errors.push("Your last name cannot be empty.");
-		}
-		else if (!isAlpha(last_name_text))
-		{
-			errors.push("Your last name must be composed of letters only.");
-		}
-		if (!(grade_text==='9' || grade_text==='10' || grade_text==='11' || grade_text==='12'))
-		{
-			errors.push("Your grade must be either '9', '10', '11', or '12'.");	
-		}
-		if (isEmpty(email_text))
+		if (issue_type == "other" && isEmpty(elaboration))
 		{
-			errors.push("Your email cannot be empty");
-		}
-		else if (!isEmail(email_text))
-		{
-			errors.push("Your email must contain only letters, numbers, or any of '._+-'.");
-		}
-		if (num_classes_selected == 0)
-		{
-			errors.push("You must select at least one class.");
+			errors.push("You indicated an alternative type of challenge, yet failed to elaborate.");
 		}
 		if (isEmpty(title_text))
 		{
-			errors.push("You must title the request.");
+			errors.push("You cannot have an empty title.");
 		}
 		if (isEmpty(challenge_text))
 		{
-			errors.push("You must describe your specific challenge.");
+			errors.push("You must say something in the speciic challenge field.");
 		}
-
 		//The moment of truth - are there errors?
 		if (errors.length > 0)
 		{
@@ -136,13 +117,8 @@ $(document).ready(function()
 		//Otherwise, the form is sent to the server.
 	});
 
-	$(".btn-group button").click(function () 
-	{
-	    $("#subj_title").val($(this).text());
-	});
-	
-	//Fully validate a teach form submission
-	$("#submitTeacher").submit(function()
+	//Verify a request before it is sent to the server
+	$("#submitRequest").submit(function()
 	{
 		//Kinda a ghetto way to inform people of what error they made. Add the error message to a string.
 		var errors = new Array();
@@ -155,6 +131,9 @@ $(document).ready(function()
 
 		var num_classes_selected = $("option:selected").length;
 
+		var title_text = escapeHTML($("#title").val().trim());
+		var challenge_text = escapeHTML($("#challenge").val().trim());
+
 		//Specialized error messages
 		if (isEmpty(first_name_text))
 		{
@@ -188,6 +167,14 @@ $(document).ready(function()
 		{
 			errors.push("You must select at least one class.");
 		}
+		if (isEmpty(title_text))
+		{
+			errors.push("You must title the request.");
+		}
+		if (isEmpty(challenge_text))
+		{
+			errors.push("You must describe your specific challenge.");
+		}
 
 		//The moment of truth - are there errors?
 		if (errors.length > 0)
@@ -201,6 +188,12 @@ $(document).ready(function()
 		//Otherwise, the form is sent to the server.
 	});
 
+	$(".btn-group button").click(function () 
+	{
+	    $("#subj_title").val($(this).text());
+	});
+
+
 //Some clientside form validation
 	$("#first-name").blur(function()
 	{
diff --git a/app/templates/admin.html b/app/templates/admin.html
@@ -1,5 +1,6 @@
 {% extends "layout.html" %}
-{% block content %}	
+{% block content %}
+{% if g.user.role == 1 %}	
 <h2>Users</h2>
 <div class="accordion" id="accordionusers">
 	{% for u in users %}
@@ -14,8 +15,6 @@ <h2>Users</h2>
 				<dl class="dl-horizontal">
 					<dt>Grade</dt>
 					<dd>{{ u.grade }}</dd>
-					<dt>Role</dt>
-					<dd>{{ u.role }}</dd>
 					<dt>Created</dt>
 					<dd>{{ momentjs(u.created).format('LLLL') }}</dd>
 					<dt>Last Logged In</dt>
@@ -56,6 +55,9 @@ <h2>Users</h2>
 							No requests available.
 						{% endfor %}
 					</dd>
+					<dt>Role</dt>
+					<dd>{{ u.role }}</dd>
+					<div class="pull-right"> <button class="btn btn-small btn-info" value={{ u.id }}>Promote/Demote</button></div>
 				</dl>
 			</div>
 		</div>
@@ -152,4 +154,9 @@ <h2>Subjects</h2>
 	<p>There are no subjects in the database. This shouldn't happen. Make sure that add_subjects.py has been run.</p>
 	{% endfor %}
 </div>
+{% else %}
+<div class="alert alert-error">
+	<strong>Error!</strong> You are not an administrator.
+</div>
+{% endif %}
 {% endblock %}
diff --git a/app/templates/edit.html b/app/templates/edit.html
@@ -1,55 +1,51 @@
 {% extends "layout.html" %}
+{% import 'helper.html' as forms %}
 {% block content %}
+<h2>Edit your profile</h2>
 <div id="alert" class="alert alert-error alert-block hidden">
 		<button type="button" class="close" data-dismiss="alert">&times;</button>
 		<span id="alert-text"></span>
 </div>
-<form id="signup" action="signup" method="post" class="form-horizontal">
+<div class="control-group">
+	<label class="control-label" for="old_password">Current Password {{ forms.info("Enter your current password to confirm changes.") }}</label>
+	<input class="span2" id="old_password" type="password" placeholder="Current Password">
+</div>
+<form id="edit" action="/edit" method="post" class="form-horizontal">
 	<fieldset>
 		<legend>Account Details</legend>
 		<div id="email-control-group" class="control-group">
-			<label class="control-label" for="email">Email Address</label>
+			<label class="control-label" for="email">
+				Email Address {{ forms.info("Enter your Menlo School Email address") }}
+			</label>
 			<div class="controls">
 				<div class="input-prepend input-append">
 					<span class="add-on"><i class="icon-envelope"></i></span>
-					<input class="span2" id="email" name="email" type="text" placeholder="first.last">
+					<input class="span2" class="email" id="email" name="email" type="text" placeholder="New Email Address" value={{ g.user.email }}>
 					<span class="add-on">@menloschool.org</span>
 				</div>
 				<span id="email-label" class="label"></span>
 			</div>
 		</div>
 		<div id="password-control-group" class="control-group">
 			<label class="control-label" for="password">
-				Old Password <a href="#" rel="tooltip" title="A password must ____"><i class="icon-info-sign"></i></a>
-			</label>
-			<div class="controls">
-				<div class="input-prepend">
-					<span class="add-on"><i class="icon-font"></i></span>
-					<input class="span2" id="password" name="password" type="password" placeholder="Password">
-				</div>
-				<span id="password-label" class="label"></span>
-			</div>
-		</div>
-		<div id="password-control-group" class="control-group">
-			<label class="control-label" for="password">
-				New Password <a href="#" rel="tooltip" title="A password must ____"><i class="icon-info-sign"></i></a>
+				New Password {{ forms.info("A password must ___") }}
 			</label>
 			<div class="controls">
 				<div class="input-prepend">
 					<span class="add-on"><i class="icon-font"></i></span>
-					<input class="span2" id="password" name="password" type="password" placeholder="Password">
+					<input class="span2 pass" id="password" name="password" type="password" placeholder="New Password">
 				</div>
 				<span id="password-label" class="label"></span>
 			</div>
 		</div>
 		<div id="confirm-password-control-group" class="control-group">
 			<label class="control-label" for="confirm-password">
-				Confirm New Password <a href="#" rel="tooltip" title="What you enter here must be the same as what you entered above."><i class="icon-info-sign"></i></a>
+				Confirm Password {{ forms.info("What you enter here must be the same as what you entered above.") }}
 			</label>
 			<div class="controls">
 				<div class="input-prepend">
 					<span class="add-on"><i class="icon-font"></i></span>
-					<input class="span2" id="confirm-password" name="confirm-password" type="password" placeholder="Confirm Password">
+					<input class="span2 pass" id="confirm-password" name="confirm-password" type="password" placeholder="Confirm Password">
 				</div>
 				<span id="confirm-password-label" class="label"></span>
 			</div>
@@ -59,39 +55,43 @@
 		<legend>About You</legend>
 		<div id="first-name-control-group" class="control-group">
 			<label class="control-label" for="first-name">
-				First Name <a href="#" rel="tooltip" title="A first name must contain only letters (it match the regular expression '^[a-zA-Z]+$')"><i class="icon-info-sign"></i></a>
+				First Name {{ forms.info("A name may only contain upper- or lowercase letters ") }}
 			</label>
 			<div class="controls">
 				<div class="input-prepend">
 					<span class="add-on"><i class="icon-font"></i></span>
-					<input class="span2" id="first-name" name="first_name"type="text" placeholder="First Name">
+					<input class="span2" id="first-name" name="first_name"type="text" placeholder="First Name" value={{ g.user.first_name }}>
 				</div>
 				<span id="first-name-label" class="label"></span>
 			</div>
 		</div>
 		<div id="last-name-control-group" class="control-group">
-			<label class="control-label" for="last-name">Last Name</label>
+			<label class="control-label" for="last-name">
+				Last Name {{ forms.info("A name may only contain upper- or lowercase letters ") }}
+			</label>
 			<div class="controls">
 				<div class="input-prepend">
 					<span class="add-on"><i class="icon-font"></i></span>
-					<input class="span2" id="last-name" name="last_name" type="text" placeholder="Last Name">
+					<input class="span2" id="last-name" name="last_name" type="text" placeholder="Last Name" value={{ g.user.last_name }}>
 				</div>
 				<span id="last-name-label" class="label"></span>	
 			</div>
 		</div>
 		<div id="grade-control-group" class="control-group">
-			<label class="control-label" for="grade">Grade</label>
+			<label class="control-label" for="grade">
+				Grade {{ forms.info("Your grade must be either '9', '10', '11', or '12'") }}	
+			</label>
 			<div class="controls">
 				<div class="input-prepend">
 					<span class="add-on">#</span>
-					<input class="span2" id="grade" name="grade" type="number" min=9 max=12 placeholder="Between 9 and 12">
+					<input class="span2" id="grade" name="grade" type="number" min=9 max=12 placeholder="Between 9 and 12" value={{ g.user.grade }}>
 				</div>
 				<span id="grade-label" class="label"></span>
 			</div>
 		</div>
 	</fieldset>
 	<fieldset>
-		<legend>Math/Science Classes <em>You Could Tutor</em></legend>
+		<legend>Math/Science Classes <em>You Could Tutor</em> {{ forms.info("Only select the classes you are capable of tutoring.") }}</legend>
 		<p><small>To select multiple options, hold down the command key (&#8984;) on Mac or the control (CTRL) button on Windows.</small></p>
 		<select id="tutor_science" name="tutor_science" multiple="multiple" size="21" class="pull-left span4">
 			<optgroup label="Physics">
@@ -164,7 +164,7 @@
 		</select>
 	</fieldset>
 	<fieldset>
-		<legend>Math/Science Classes <em>You Are Currently Taking</em></legend>
+		<legend>Math/Science Classes <em>You Are Currently Taking</em> {{ forms.info("Only select the classes you are currently taking this school year.") }}</legend>
 		<p><small>To select multiple options, hold down the command key (&#8984;) on Mac or the control (CTRL) button on Windows.</small></p>
 		<select id="learn_science" name="learn_science" multiple="multiple" size="21" class="pull-left span4">
 			<optgroup label="Physics">
@@ -236,6 +236,6 @@
 			</optgroup>
 		</select>
 	</fieldset>
-	<p><small>By clicking sign up, you agree to our <a href={{ url_for('terms_and_conditions') }}>Terms and Conditions<a></small></p>
-	<button type="submit" class="btn btn-primary" id="submit_button">Sign Up!</button>
+	<button type="submit" class="btn btn-primary" id="submit_button">Submit</button>
+</form>
 {% endblock %}
diff --git a/app/templates/helper.html b/app/templates/helper.html
@@ -0,0 +1,8 @@
+{% macro info(title='') -%}
+	<a href="#" rel="tooltip" title="{{title}}" tabindex="-1"><i class="icon-info-sign"></i></a>
+{%- endmacro %}
+
+{%- macro textarea(name, value='', rows=10, cols=40) -%}
+    <textarea name="{{ name }}" rows="{{ rows }}" cols="{{ cols
+        }}">{{ value|e }}</textarea>
+{%- endmacro %}
diff --git a/app/templates/layout.html b/app/templates/layout.html
@@ -141,7 +141,7 @@
             <ul class="nav">
               <li><a href="/">Home</a></li>
             </ul>
-            <form class="navbar-form pull-right" action='login' method='post' name='login'>
+            <form class="navbar-form pull-right" action='/login' method='post' name='login'>
               <input class="span2" type="text" name="email" placeholder="Email">
               <input class="span2" type="password" name="password" placeholder="Password">
               <button type="submit" class="btn">Log In</button>
diff --git a/app/templates/learn.html b/app/templates/learn.html
@@ -11,7 +11,7 @@ <h2>Learning</h2>
 		<button type="button" class="close" data-dismiss="alert">&times;</button>
 		<span id="alert-text"></span>
 </div>
-<form id="learn" action="learn" method="post" class="form-horizontal">
+<form id="learn" action="/learn" method="post" class="form-horizontal">
 	<fieldset>
 		<legend>Which class do you need help in? <small>Select One</small></legend>
 		<div class="btn-group" data-toggle="buttons-radio">
@@ -83,6 +83,6 @@ <h2>Learning</h2>
         	</div>  
     	</div>
 	</fieldset>
-	<button type="submit" class="btn btn-primary" id="submit_button">Submit!</button>
+	<button type="submit" class="btn btn-primary" id="submit_learn_request">Submit!</button>
 </form>
 {% endblock %}
diff --git a/app/templates/reset_password.html b/app/templates/reset_password.html
@@ -3,7 +3,7 @@
 <div class="well well-large span4 offset4">
 	<h2>Forgot your Password?</h2>
 	<form action="" method="post" name="reset_password">
-		<input type="text" name="email" class="input-block-level" placeholder="Email Address">
+		<input type="text" id="email" name="email" class="input-block-level" placeholder="Email Address">
 		<button class="btn btn-primary" type="submit">Email Me a New One!</button>
 	</form>
 </div>
diff --git a/app/templates/signup.html b/app/templates/signup.html
diff --git a/app/templates/teach.html b/app/templates/teach.html
diff --git a/app/views.py b/app/views.py

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,14 @@`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`
	`10`	`+@media (max-width: 767px)`
	`11`	`+{`
	`12`	`+ body {`
	`13`	`+ margin: 0px;`
	`14`	`+ padding: 0px;`
	`15`	`+ }`
	`16`	`+}`
	`17`	`+`
`10`	`18`	`/* Get the footer to stay at the bottom of the page`
`11`	`19`	`-------------------------------------------------- */`
`12`	`20`	`html, body {`