Merge pull request #568 from sharelatex/ja-validate-contact-form

Validate and add error status to contact form

services/web/app/views/contact-us-modal.pug

@@ -7,36 +7,61 @@ script(type='text/ng-template', id='supportModalTemplate')
 		) ×
 		h3 #{translate("contact_us")}
 	.modal-body.contact-us-modal
-		span(ng-show="sent == false")
-			label
-				| #{translate("subject")}
-			.form-group
-				input.field.text.medium.span8.form-control(
-					ng-model="form.subject",
-					ng-model-options="{ updateOn: 'default blur', debounce: {'default': 350, 'blur': 0} }"
-					maxlength='255',
-					tabindex='1',
-					onkeyup='')
-			.contact-suggestions(ng-show="suggestions.length")
-				p.contact-suggestion-label !{translate("kb_suggestions_enquiry", { kbLink: "<a href='learn/kb' target='_blank'>__kb__</a>", kb: translate("knowledge_base") })} 
-				ul.contact-suggestion-list
-					li(ng-repeat="suggestion in suggestions")
-						a.contact-suggestion-list-item(ng-href="{{ suggestion.url }}", ng-click="clickSuggestionLink(suggestion.url);" target="_blank")
-							span(ng-bind-html="suggestion.name")
-							i.fa.fa-angle-right
-			label.desc(ng-show="'"+getUserEmail()+"'.length < 1")
-				| #{translate("email")}
-			.form-group(ng-show="'"+getUserEmail()+"'.length < 1")
-				input.field.text.medium.span8.form-control(ng-model="form.email",  ng-init="form.email = '"+getUserEmail()+"'", type='email', spellcheck='false', value='', maxlength='255', tabindex='2')
-			label#title12.desc
-				| #{translate("project_url")} (#{translate("optional")})
-			.form-group
-				input.field.text.medium.span8.form-control(ng-model="form.project_url", tabindex='3', onkeyup='')
-			label.desc
-				| #{translate("contact_message_label")}
-			.form-group
-				textarea.field.text.medium.span8.form-control(ng-model="form.message",type='text', value='', tabindex='4', onkeyup='')
-			.form-group.text-center
-				input.btn-success.btn.btn-lg(type='submit', ng-disabled="sending", ng-click="contactUs()" value=translate("contact_us"))
+		form(name="contactForm")
+			span(ng-show="sent == false")
+				.alert.alert-danger(ng-show="error") Something went wrong sending your request :(
+				label
+					| #{translate("subject")}
+				.form-group
+					input.field.text.medium.span8.form-control(
+						name="subject",
+						required
+						ng-model="form.subject",
+						ng-model-options="{ updateOn: 'default blur', debounce: {'default': 350, 'blur': 0} }"
+						maxlength='255',
+						tabindex='1',
+						onkeyup='')
+				.contact-suggestions(ng-show="suggestions.length")
+					p.contact-suggestion-label !{translate("kb_suggestions_enquiry", { kbLink: "<a href='learn/kb' target='_blank'>__kb__</a>", kb: translate("knowledge_base") })} 
+					ul.contact-suggestion-list
+						li(ng-repeat="suggestion in suggestions")
+							a.contact-suggestion-list-item(ng-href="{{ suggestion.url }}", ng-click="clickSuggestionLink(suggestion.url);" target="_blank")
+								span(ng-bind-html="suggestion.name")
+								i.fa.fa-angle-right
+				label.desc(ng-show="'"+getUserEmail()+"'.length < 1")
+					| #{translate("email")}
+				.form-group(ng-show="'"+getUserEmail()+"'.length < 1")
+					input.field.text.medium.span8.form-control(
+						name="email",
+						required
+						ng-model="form.email", 
+						ng-init="form.email = '"+getUserEmail()+"'",
+						type='email', spellcheck='false',
+						value='',
+						maxlength='255',
+						tabindex='2')
+				label#title12.desc
+					| #{translate("project_url")} (#{translate("optional")})
+				.form-group
+					input.field.text.medium.span8.form-control(ng-model="form.project_url", tabindex='3', onkeyup='')
+				label.desc
+					| #{translate("contact_message_label")}
+				.form-group
+					textarea.field.text.medium.span8.form-control(
+						name="body",
+						required
+						ng-model="form.message",
+						type='text',
+						value='',
+						tabindex='4',
+						onkeyup=''
+					)
+				.form-group.text-center
+					input.btn-success.btn.btn-lg(
+						type='submit',
+						ng-disabled="contactForm.$invalid || sending",
+						ng-click="contactUs()"
+						value=translate("contact_us")
+					)
 		span(ng-show="sent")
 			p #{translate("request_sent_thank_you")}

services/web/public/coffee/main/contact-us.coffee

@@ -30,7 +30,7 @@ define [
 				$scope.suggestions = suggestions
 
 		$scope.contactUs = ->
-			if !$scope.form.email?
+			if !$scope.form.email? or $scope.form.email == ""
 				console.log "email not set"
 				return
 			$scope.sending = true
@@ -46,8 +46,16 @@ define [
 				about: "<div>browser: #{platform?.name} #{platform?.version}</div>
 						<div>os: #{platform?.os?.family} #{platform?.os?.version}</div>"
 
-			Groove.createTicket params, (err, json)->
-				$scope.sent = true
+			Groove.createTicket params, (response)->
+				$scope.sending = false
+				if response.responseText == "" # Blocked request or similar
+					$scope.error = true
+				else
+					data = JSON.parse(response.responseText)
+					if data.errors?
+						$scope.error = true
+					else
+						$scope.sent = true
 				$scope.$apply()
 
 		$scope.$watch "form.subject", (newVal, oldVal) ->