[TASK] Use HTML5 validation for Install Tool test email address

Let the browser do the validation for the test email address.

Resolves: #82562
Releases: master
Change-Id: I8932eab709cb89d669b8931872d7e1cbda4d0fb1
Reviewed-on: https://review.typo3.org/54216


Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>

typo3/sysext/install/Resources/Private/Partials/Environment/MailTest.html

@@ -24,18 +24,19 @@
 
 <div class="t3js-mailTest-output"></div>
 
-<form>
+<form id="t3js-mailTest-form">
 	<div class="form-group">
 		<label for="t3-install-checkmail">Email address:</label>
 		<input
 			id="t3-install-checkmail"
 			type="email"
 			class="t3-install-form-input-text form-control t3js-mailTest-email"
+			required
 		/>
 	</div>
 	<button
-		class="btn btn-default t3js-mailTest-send"
-		type="button"
+		class="btn btn-default"
+		type="submit"
 	>
 		Send test mail
 	</button>

typo3/sysext/install/Resources/Public/JavaScript/Modules/MailTest.js

@@ -27,13 +27,13 @@ define([
 
 	return {
 		selectorSendToken: '#t3js-mailTest-token',
-		selectorSendTrigger: '.t3js-mailTest-send',
+		selectorForm: '#t3js-mailTest-form',
 		selectorEmail: '.t3js-mailTest-email',
 		selectorOutputContainer: '.t3js-mailTest-output',
 
 		initialize: function() {
 			var self = this;
-			$(document).on('click', this.selectorSendTrigger, function(e) {
+			$(this.selectorForm).submit(function(e) {
 				e.preventDefault();
 				self.send();
 			});
@@ -62,12 +62,14 @@ define([
 							$outputContainer.html(message);
 						});
 					} else {
-						var message = FlashMessage.render(Severity.error, 'Something went wrong', '');
+						var message = InfoBox.render(Severity.error, 'Something went wrong', '');
 						$outputContainer.empty().html(message);
 					}
 				},
 				error: function(xhr) {
-					Router.handleAjaxError(xhr);
+					// 500 can happen here if the mail configuration is broken
+					var message = InfoBox.render(Severity.error, 'Please check your mail settings', 'Sending test mail failed');
+					$outputContainer.empty().html(message);
 				}
 			});
 		}