portico: Auto-correct and error-handle short name input.

static/styles/portico-signin.css

@@ -597,6 +597,7 @@ button.login-google-button {
 
 #registration .input-box {
     margin: 10px;
+    padding-bottom: 10px;
 }
 
 #registration {

templates/zerver/register.html

@@ -115,9 +115,10 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
                 {% if realms_have_subdomains %}
                 <div class="inline-block external-host"> .{{ external_host }}</div>
                 {% endif %}
+                <p id="id_team_subdomain_error_client" class="error help-inline text-error"></p>
                 {% if form.realm_subdomain.errors %}
                     {% for error in form.realm_subdomain.errors %}
-                        <p class="help-inline text-error">{{ error }}</p>
+                        <p class="error help-inline text-error team_subdomain_error_server">{{ error }}</p>
                     {% endfor %}
                 {% endif %}
             </div>
@@ -181,6 +182,37 @@ if ($('.team_subdomain_error_server').text() === '') {
 }
 
 $("#timezone").val(moment.tz.guess());
+
+$('#id_team_subdomain').on('input', function (e) {
+    // preserve selection range, to be set after setting the text
+    var start = e.target.selectionStart,
+        end = e.target.selectionEnd;
+
+    // toggle displaying server-side / client-side errors; messages
+    // from only one of the two should be showing at any time.
+    $('.team_subdomain_error_server').text('').css('display', 'none');
+
+    var autocorrected = e.target.value
+        .toLowerCase()
+        .replace(/[_|\s]/g, '-');
+
+    e.target.value = autocorrected;
+
+    if (e.target.value.charAt(0) === '-' ||
+        e.target.value.charAt(e.target.value.length - 1) === '-') {
+        $('#id_team_subdomain_error_client')
+            .text(i18n.t("Cannot start or end with a '-'"))
+            .css('display', 'block');
+    } else if (/[^0-9a-z\-]/.test(e.target.value)) {
+        $('#id_team_subdomain_error_client')
+            .text(i18n.t("Can only use letters a-z, numbers 0-9, and '-'s."))
+            .css('display', 'block');
+    } else {
+        $('#id_team_subdomain_error_client').text('').css('display', 'none');
+    }
+
+    e.target.setSelectionRange(start, end);
+});
 </script>
 
 {% endblock %}