ChromeOS Gaia: UI polishing

chrome/browser/resources/chromeos/login/gaia_input_form.js

Index: chrome/browser/resources/chromeos/login/gaia_input_form.js
diff --git a/chrome/browser/resources/chromeos/login/gaia_input_form.js b/chrome/browser/resources/chromeos/login/gaia_input_form.js
index a3610b058fe5d71b36151111d3884852a78d29c2..7306ba7374537c72a43cf2595de5f15116906d5e 100644
--- a/chrome/browser/resources/chromeos/login/gaia_input_form.js
+++ b/chrome/browser/resources/chromeos/login/gaia_input_form.js
@@ -3,35 +3,59 @@
  * found in the LICENSE file.
  */
 
-Polymer('gaia-input-form', {
-  inputValue: '',
-
-  onButtonClicked: function() {
-    this.fire('buttonClick');
-  },
-
-  onKeyDown: function(e) {
-    this.setValid(true);
-    if (e.keyCode == 13 && !this.$.button.disabled)
-      this.$.button.fire('tap');
-  },
-
-  onTap: function() {
-    this.setValid(true);
-  },
-
-  focus: function() {
-    this.$.inputForm.focus();
-  },
-
-  checkValidity: function() {
-    var input = this.$.inputForm;
-    var isValid = input.validity.valid;
-    this.setValid(isValid);
-    return isValid;
-  },
-
-  setValid: function(isValid) {
-    this.$.paperInputDecorator.isInvalid = !isValid;
-  }
-});
+Polymer('gaia-input-form', (function() {
+  var INPUT_EMAIL_PATTERN = "^[a-zA-Z0-9.!#$%&'*+=?^_`{|}~-]+(@[^\\s@]+)?$";
+
+  return {
+
+    inputValue: '',
+
+    onButtonClicked: function() {
+      this.fire('buttonClick');
+    },
+
+    onKeyDown: function(e) {
+      this.setValid(true);
+      this.setDomainVisibility();
+      if (e.keyCode == 13 && !this.$.button.disabled)
+        this.$.button.fire('tap');
+    },
+
+    onKeyUp: function(e) {
+      this.setDomainVisibility();
+    },
+
+    setDomainVisibility: function() {
+      this.$.emailDomain.hidden = !(this.inputValue.indexOf('@') === -1);
+    },
+
+    ready: function() {
+      if (this.inputType == 'email') {
+        this.$.inputForm.type = 'text';
+        this.$.inputForm.pattern = INPUT_EMAIL_PATTERN;
+        this.$.inputForm.addEventListener('keyup', this.onKeyUp.bind(this));
+      } else {
+        this.$.inputForm.type = this.inputType;
+      }
+    },
+
+    onTap: function() {
+      this.setValid(true);
+    },
+
+    focus: function() {
+      this.$.inputForm.focus();
+    },
+
+    checkValidity: function() {
+      var input = this.$.inputForm;
+      var isValid = input.validity.valid;
+      this.setValid(isValid);
+      return isValid;
+    },
+
+    setValid: function(isValid) {
+      this.$.paperInputDecorator.isInvalid = !isValid;
+    }
+  };
+})());