Apply form validations

services/web/app/views/project/list.jade

@@ -303,52 +303,64 @@ block content
 			.modal-header
 				h3 Create New Folder
 			.modal-body
-				input.form-control(
-					type="text",
-					placeholder="New Folder Name",
-					ng-model="inputs.newTagName",
-					ng-enter="create()",
-					focus-on="open"
-				)
+				form(name="newTagForm", novalidate)
+					input.form-control(
+						type="text",
+						placeholder="New Folder Name",
+						required,
+						ng-model="inputs.newTagName",
+						ng-enter="create()",
+						focus-on="open"
+					)
 			.modal-footer
 				button.btn.btn-default(ng-click="cancel()") Cancel
-				button.btn.btn-primary(ng-click="create()") Create
+				button.btn.btn-primary(
+					ng-disabled="newTagForm.$invalid"
+					ng-click="create()"
+				) Create
 
 		script(type='text/ng-template', id='renameProjectModalTemplate')
 			.modal-header
 				h3 Rename Project
 			.modal-body
-				input.form-control(
-					type="text",
-					placeholder="Project Name",
-					ng-model="inputs.projectName",
-					ng-enter="rename()",
-					focus-on="open"
-				)
+				form(name="renameProjectForm", novalidate)
+					input.form-control(
+						type="text",
+						placeholder="Project Name",
+						ng-model="inputs.projectName",
+						required,
+						ng-enter="rename()",
+						focus-on="open"
+					)
 			.modal-footer
 				button.btn.btn-default(ng-click="cancel()") Cancel
-				button.btn.btn-primary(ng-click="rename()") Rename
+				button.btn.btn-primary(
+					ng-click="rename()",
+					ng-disabled="renameProjectForm.$invalid"
+				) Rename
 
 		script(type='text/ng-template', id='cloneProjectModalTemplate')
 			.modal-header
 				h3 Copy Project
 			.modal-body
-				.form-group
-					label New Name
-					input.form-control(
-						type="text",
-						placeholder="New Project Name",
-						ng-model="inputs.projectName",
-						ng-enter="clone()",
-						focus-on="open"
-					)
+				form(name="cloneProjectForm", novalidate)
+					.form-group
+						label New Name
+						input.form-control(
+							type="text",
+							placeholder="New Project Name",
+							required,
+							ng-model="inputs.projectName",
+							ng-enter="clone()",
+							focus-on="open"
+						)
 			.modal-footer
 				button.btn.btn-default(
 					ng-disabled="state.inflight"
 					ng-click="cancel()"
 				) Cancel
 				button.btn.btn-primary(
-					ng-disabled="state.inflight"
+					ng-disabled="cloneProjectForm.$invalid || state.inflight"
 					ng-click="clone()"
 				)
 					span(ng-hide="state.inflight") Copy
@@ -358,20 +370,22 @@ block content
 			.modal-header
 				h3 New Project
 			.modal-body
-				input.form-control(
-					type="text",
-					placeholder="Project Name",
-					ng-model="inputs.projectName",
-					ng-enter="create()",
-					focus-on="open"
-				)
+				form(novalidate, name="newProjectForm")
+					input.form-control(
+						type="text",
+						placeholder="Project Name",
+						required,
+						ng-model="inputs.projectName",
+						ng-enter="create()",
+						focus-on="open"
+					)
 			.modal-footer
 				button.btn.btn-default(
 					ng-disabled="state.inflight"
 					ng-click="cancel()"
 				) Cancel
 				button.btn.btn-primary(
-					ng-disabled="state.inflight"
+					ng-disabled="newProjectForm.$invalid || state.inflight"
 					ng-click="create()"
 				)
 					span(ng-hide="state.inflight") Create

services/web/app/views/user/feedback.jade

@@ -1,14 +0,0 @@
-extends ../layout
-
-block content
-	.container
-		.box
-			.page-header
-				h1 Feedback
-			form(method='post')
-				.clearfix
-					label(for='xlInput') If you are having trouble with a project please include the url e.g. www.sharelatex.com/project/50c49b73ef78e1ad0c000006
-					.input
-						textarea.span11(type='text', name='message').feedback
-				.actions
-					button.btn.btn-large.btn-primary(type='submit') Send

services/web/app/views/user/login.jade

@@ -8,7 +8,7 @@ block content
 					.card
 						.page-header
 							h1 Login
-						form(async-form="login", action='/login', ng-cloak)
+						form(async-form="login", name="loginForm", action='/login', ng-cloak)
 							input(name='_csrf', type='hidden', value=csrfToken)
 							input(name='redir', type='hidden', value=redir)
 							form-messages
@@ -16,14 +16,25 @@ block content
 								input.form-control(
 									type='email',
 									name='email',
-									placeholder='email@example.com'
+									required,
+									placeholder='email@example.com',
+									ng-model="email"
 								)
+								span.small.text-primary(ng-show="loginForm.email.$invalid && loginForm.email.$dirty")
+									| Must be an email address
 							.form-group
 								input.form-control(
 									type='password',
 									name='password',
-									placeholder='********'
+									required,
+									placeholder='********',
+									ng-model="password"
 								)
+								span.small.text-primary(ng-show="loginForm.password.$invalid && loginForm.password.$dirty")
+									| Required
 							.actions
-								button.btn-primary.btn(type='submit') Login
+								button.btn-primary.btn(
+									type='submit'
+									ng-disabled="loginForm.$invalid"
+								) Login
 								a.pull-right(href='/user/password/reset') Forgot your password?

services/web/app/views/user/passwordReset.jade

@@ -11,6 +11,7 @@ block content
 						.messageArea
 						form(
 							async-form="password-reset-request",
+							name="passwordResetForm"
 							action="/user/password/reset",
 							ng-cloak
 						)
@@ -23,7 +24,15 @@ block content
 								input.form-control(
 									type='email',
 									name='email',
-									placeholder='email@example.com'
+									placeholder='email@example.com',
+									required,
+									ng-model="email"
 								)
+								span.small.text-primary(
+									ng-show="passwordResetForm.email.$invalid && passwordResetForm.email.$dirty"
+								) Must be a valid email address
 							.actions
-								button.btn.btn-primary(type='submit') Request password reset
+								button.btn.btn-primary(
+									type='submit',
+									ng-disabled="passwordResetForm.$invalid"
+								) Request password reset

services/web/app/views/user/register.jade

@@ -18,16 +18,36 @@ block content
 					.card
 						.page-header
 							h1 Register
-						form(async-form="register", action="/register", ng-cloak)
+						form(async-form="register", name="registerForm", action="/register", novalidate, ng-cloak)
 							input(name='_csrf', type='hidden', value=csrfToken)
 							input(name='redir', type='hidden', value=redir)
 							form-messages
 							.form-group
 								label(for='email') Email 
-								input.form-control(type='email', name='email', value='#{new_email}')
+								input.form-control(
+									type='email',
+									name='email',
+									value='#{new_email}',
+									placeholder="email@example.com"
+									required,
+									ng-model="email"
+								)
+								span.small.text-primary(ng-show="registerForm.email.$invalid && registerForm.email.$dirty")
+									| Must be an email address
 							.form-group
 								label(for='password') Password 
-								input.form-control(type='password', name='password')
+								input.form-control(
+									type='password',
+									name='password',
+									placeholder="********",
+									required,
+									ng-model="password"
+								)
+								span.small.text-primary(ng-show="registerForm.password.$invalid && registerForm.password.$dirty")
+									| Required
 							.actions
-								button.btn-primary.btn(type='submit') Register
+								button.btn-primary.btn(
+									type='submit'
+									ng-disabled="register.$invalid"
+								) Register
 						

services/web/app/views/user/setPassword.jade

@@ -10,6 +10,7 @@ block content
 							h1 Reset your password
 						form(
 							async-form="password-reset",
+							name="passwordResetForm",
 							action="/user/password/set",
 							ng-cloak
 						)
@@ -23,12 +24,20 @@ block content
 								input.form-control(
 									type='password',
 									name='password',
-									placeholder='new password'
+									placeholder='new password',
+									required,
+									ng-model="password"
 								)
+								span.small.text-primary(
+									ng-show="passwordResetForm.password.$invalid && passwordResetForm.password.$dirty"
+								) Required
 								input(
 									type="hidden",
 									name="passwordResetToken",
 									value=passwordResetToken
 								)
 							.actions
-								button.btn.btn-primary(type='submit') Set new password
+								button.btn.btn-primary(
+									type='submit',
+									ng-disabled="passwordResetForm.$invalid"
+								) Set new password

services/web/public/stylesheets/components/forms.less

@@ -313,15 +313,15 @@ input[type="checkbox"],
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
 
-// .form-control.ng-invalid {
-//   border-color: @state-danger-text;
-//   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
-//   &:focus {
-//     border-color: darken(@state-danger-text, 10%);
-//     @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%);
-//     .box-shadow(@shadow);
-//   }
-// }
+.form-control.ng-dirty.ng-invalid:not(:focus) {
+  border-color: @state-danger-text;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+  &:focus {
+    border-color: darken(@state-danger-text, 10%);
+    @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%);
+    .box-shadow(@shadow);
+  }
+}
 
 
 // Static form control text