From 0995780f823761b359bee8074f78e42b529c3fd5 Mon Sep 17 00:00:00 2001
From: Jack Zhang <jack@zulipchat.com>
Date: Fri, 23 Jun 2017 13:07:42 -0700
Subject: [PATCH] portico: Auto-correct and error-handle short name input.

---
 static/styles/portico-signin.css |  1 +
 templates/zerver/register.html   | 34 +++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/static/styles/portico-signin.css b/static/styles/portico-signin.css
index 757819f36e..67c9684376 100644
--- a/static/styles/portico-signin.css
+++ b/static/styles/portico-signin.css
@@ -597,6 +597,7 @@ button.login-google-button {
 
 #registration .input-box {
     margin: 10px;
+    padding-bottom: 10px;
 }
 
 #registration {
diff --git a/templates/zerver/register.html b/templates/zerver/register.html
index 8002f3d5ea..d1a6836240 100644
--- a/templates/zerver/register.html
+++ b/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 %}