Replace last gaia-input with cr-input in OOBE

Fixed: 1071778
Bug: 856310
Change-Id: I3c4d0beb18a81edff017fc51159d05d214f4f1d0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2195243
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#776616}

chrome/browser/resources/chromeos/login/BUILD.gn

@@ -17,7 +17,6 @@ js_type_check("closure_compile") {
     ":gaia_buttons",
     ":gaia_card",
     ":gaia_header",
-    ":gaia_input",
     ":gaia_input_form",
     ":gaia_password_changed",
     ":gesture_navigation",
@@ -141,9 +140,6 @@ js_library("gaia_header") {
 js_library("gaia_input_form") {
 }
 
-js_library("gaia_input") {
-}
-
 js_library("gaia_password_changed") {
   deps = [ "components:oobe_i18n_behavior" ]
 }

chrome/browser/resources/chromeos/login/gaia_input.css

-/* Copyright 2015 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-:host {
-  display: block;
-}
-
-paper-input-container {
-  --paper-input-container-color: rgb(212, 212, 212);
-  --paper-input-container-focus-color: var(--google-blue-500);
-  --paper-input-container-input {
-    font-size: 15px;
-  };
-  --paper-input-container-input-color: rgba(0, 0, 0, 0.87);
-  --paper-input-container-label: {
-    font-size: 15px;
-  };
-}
-
-paper-input-container {
-  padding: 0;
-}
-
-paper-input-container > label > ::slotted(*) {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-iron-input input {
-  @apply --paper-input-container-shared-input-style;
-}
-
-:host-context(html[dir=rtl]) input {
-  flex-direction: row-reverse;
-}
-
-#domainLabel {
-  direction: ltr;
-  padding-top: 2px;
-  width: auto;
-}

chrome/browser/resources/chromeos/login/gaia_input.html

-<!-- Copyright 2015 The Chromium Authors. All rights reserved.
-     Use of this source code is governed by a BSD-style license that can be
-     found in the LICENSE file. -->
-
-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-error.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
-
-<!--
-  Material desing input field, that supports different input types and email
-  validation and matches GAIA's visual style.
-
-  Examples:
-    <gaia-input value="Simple text input" required></gaia-input>
-    <gaia-input type="email" domain="example.com"></gaia-input>
-
-  Slots:
-    'error' - error message displayed in case if 'isInvalid' is true.
-    'label' - same as <paper-input>'s 'label'.
-
-  Attributes:
-    'value' - same as <input>'s 'value'.
-    'type' - same as <input>'s 'type'.
-    'domain' - optional attribute for email input. The domain is displayed in
-               the end of input field, if user is not provided any.
-    'isInvalid' - whether input data is invalid. Supports two-way binding.
-                  Note: it is not changed automatically. Can be changed manually
-                  or with checkValidity() method.
-    'required' - whether empty field is invalid.
-    'pattern' - regular expression. If set input would be validated against it
-                in checkValidity function. Ignored if 'type' == 'email'.
-
-  Methods:
-    'focus'         - focuses input field.
-    'checkValidity' - returns current validity state of the input form. Updates
-                      'isInvalid' at the end.
--->
-<dom-module id="gaia-input">
-  <template>
-    <style include="oobe-common"></style>
-    <link rel="stylesheet" href="gaia_input.css">
-    <paper-input-container id="decorator" on-tap="onTap"
-        invalid="{{isInvalid}}" disabled$="[[disabled]]">
-      <label slot="label">
-        <slot name="label"></slot>
-      </label>
-      <iron-input id="ironInput" slot="input" class="flex"
-          bind-value="{{value}}">
-        <input id="input" on-keydown="onKeyDown"
-          value="{{value::input}}" invalid="{{isInvalid}}"
-          required$="[[required]]" disabled$="[[disabled]]"
-          pattern$="[[pattern]]" aria-label$="[[label]]">
-      </iron-input>
-      <span id="domainLabel" slot="suffix">[[domain]]</span>
-      <paper-input-error slot="add-on" hidden="[[!isInvalid]]">
-        <slot name="error"></slot>
-      </paper-input-error>
-    </paper-input-container>
-  </template>
-</dom-module>

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

-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-{
-  const INPUT_EMAIL_PATTERN = '^[a-zA-Z0-9.!#$%&\'*+=?^_`{|}~-]+(@[^\\s@]+)?$';
-
-  Polymer({
-    is: 'gaia-input',
-
-    properties: {
-      value: {notify: true, observer: 'updateDomainVisibility_', type: String},
-
-      type: {observer: 'typeChanged_', type: String},
-
-      domain: {observer: 'updateDomainVisibility_', type: String},
-
-      disabled: Boolean,
-
-      required: Boolean,
-
-      isInvalid: {type: Boolean, notify: true},
-
-      pattern: String
-    },
-
-    /** @override */
-    attached() {
-      this.typeChanged_();
-    },
-
-    onKeyDown(e) {
-      this.isInvalid = false;
-    },
-
-    /** @private */
-    updateDomainVisibility_() {
-      this.$.domainLabel.hidden = (this.type !== 'email') || !this.domain ||
-          (this.value && this.value.indexOf('@') !== -1);
-    },
-
-    onTap() {
-      this.isInvalid = false;
-    },
-
-    focus() {
-      this.$.input.focus();
-    },
-
-    /** @return {!boolean} */
-    checkValidity() {
-      var valid = this.$.ironInput.validate();
-      this.isInvalid = !valid;
-      return valid;
-    },
-
-    /** @private */
-    typeChanged_() {
-      if (this.type == 'email') {
-        this.$.input.pattern = INPUT_EMAIL_PATTERN;
-        this.$.input.type = 'text';
-      } else {
-        this.$.input.type = this.type;
-        if (this.pattern) {
-          this.$.input.pattern = this.pattern;
-        } else {
-          this.$.input.removeAttribute('pattern');
-        }
-      }
-      this.updateDomainVisibility_();
-    },
-  });
-}

chrome/browser/resources/chromeos/login/offline_gaia.css

@@ -20,6 +20,10 @@
   }
 }
 
+cr-input {
+  --cr-input-padding-start: 0px;
+}
+
 /* icon, title, subtitle styles must approximate current Gaia style. */
 
 #icon {

chrome/browser/resources/chromeos/login/offline_gaia.html

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 
 <!--
   Offline UI for the New Gaia flow.
@@ -21,7 +22,6 @@
     'showEnterpriseMessage' - If the "manged by" message should be shown.
     'domain' - The enterprise domain the device is managed by.
     'emailDomain' - autocomplete domain for the email input.
-    'glif-mode' - GLIF MM mode (Gaia v2 API).
 
   Events:
     'authCompleted' - fired when user enters login and password. Fires with an
@@ -64,34 +64,30 @@
             </div>
             <gaia-input-form id="email-input-form"
                 on-submit="onNextButtonClicked_" disabled="[[disabled]]">
-              <gaia-input slot="inputs" id="emailInput" type="email" required
-                  domain="[[emailDomain]]">
-                <div slot="label">
-                  [[i18nDynamic(locale, 'offlineLoginEmail')]]
-                </div>
-                <div slot="error">
-                  [[i18nDynamic(locale, 'offlineLoginInvalidEmail')]]
-                </div>
-              </gaia-input>
+              <cr-input slot="inputs" id="emailInput" value="{{email_}}"
+                  clear-error required
+                  error-message="[[i18nDynamic(
+                      locale, 'offlineLoginInvalidEmail')]]"
+                  placeholder="[[i18nDynamic(locale, 'offlineLoginEmail')]]">
+                <span slot="inline-suffix">[[displayDomain_]]</span>
+              </cr-input>
             </gaia-input-form>
           </div>
           <div id="password-section" class="section">
             <div id="title-container" class="layout vertical end-justified">
-              <gaia-header id="passwordHeader"></gaia-header>
+              <gaia-header id="passwordHeader" email="[[fullEmail_]]">
+              </gaia-header>
             </div>
             <div id="subtitle-container">
             </div>
             <gaia-input-form id="password-input-form"
                 on-submit="onNextButtonClicked_" disabled="[[disabled]]">
-              <gaia-input slot="inputs" id="passwordInput" type="password"
-                  required>
-                <div slot="label">
-                  [[i18nDynamic(locale, 'offlineLoginPassword')]]
-                </div>
-                <div slot="error">
-                  [[i18nDynamic(locale, 'offlineLoginInvalidPassword')]]
-                </div>
-              </gaia-input>
+              <cr-input slot="inputs" id="passwordInput" value="{{password_}}"
+                  type="password" clear-error required
+                  error-message="[[i18nDynamic(
+                      locale, 'offlineLoginInvalidPassword')]]"
+                  placeholder="[[i18nDynamic(locale, 'offlineLoginPassword')]]">
+              </cr-input>
               <gaia-button on-click="onForgotPasswordClicked_" link>
                 [[i18nDynamic(locale, 'offlineLoginForgotPasswordBtn')]]
               </gaia-button>

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

@@ -4,6 +4,7 @@
 
 {
   const DEFAULT_EMAIL_DOMAIN = '@gmail.com';
+  const INPUT_EMAIL_PATTERN = '^[a-zA-Z0-9.!#$%&\'*+=?^_`{|}~-]+(@[^\\s@]+)?$';
 
   /** @enum */
   const TRANSITION_TYPE = {FORWARD: 0, BACKWARD: 1, NONE: 2};
@@ -19,14 +20,46 @@
         value: false,
       },
 
-      /** @type {?string} */
+      /**
+       * Management domain.
+       * @type {?string}
+       */
       domain: {
         type: String,
-        value: null,
+        value: '',
       },
 
-      /** @type {?string} */
-      emailDomain: String,
+      /**
+       * E-mail domain including initial '@' sign.
+       * @type {?string}
+       */
+      emailDomain: {
+        type: String,
+        value: '',
+      },
+
+      /**
+       * |domain| or empty string, depending on |email_| value.
+       */
+      displayDomain_: {
+        type: String,
+        computed: 'computeDomain_(emailDomain, email_)',
+      },
+
+      /**
+       * Current value of e-mail input field.
+       */
+      email_: String,
+
+      /**
+       * Current value of password input field.
+       */
+      password_: String,
+
+      /**
+       * Proper e-mail with domain, displayed on password page.
+       */
+      fullEmail_: String,
 
       activeSection: {
         type: String,
@@ -42,10 +75,11 @@
     },
 
     focus() {
-      if (this.isEmailSectionActive_())
-        this.$$('#emailInput').focus();
-      else
-        this.$$('#passwordInput').focus();
+      if (this.isEmailSectionActive_()) {
+        this.$.emailInput.focusInput();
+      } else {
+        this.$.passwordInput.focusInput();
+      }
     },
 
     back() {
@@ -54,22 +88,25 @@
 
     onBeforeShow() {
       cr.ui.login.invokePolymerMethod(this.$.dialog, 'onBeforeShow');
+      this.$.emailInput.pattern = INPUT_EMAIL_PATTERN;
     },
 
     reset() {
       this.disabled = false;
-      this.emailDomain = null;
-      this.domain = null;
+      this.emailDomain = '';
+      this.domain = '';
+      this.email_ = '';
+      this.fullEmail_ = '';
     },
 
     onForgotPasswordClicked_() {
       this.disabled = true;
       this.fire('dialogShown');
-      this.$$('#forgotPasswordDlg').showModal();
+      this.$.forgotPasswordDlg.showModal();
     },
 
     onForgotPasswordCloseTap_() {
-      this.$$('#forgotPasswordDlg').close();
+      this.$.forgotPasswordDlg.close();
     },
 
     onDialogOverlayClosed_() {
@@ -81,12 +118,11 @@
       if (email) {
         if (this.emailDomain)
           email = email.replace(this.emailDomain, '');
-
         this.switchToPasswordCard(email, false /* animated */);
-        this.$$('#passwordInput').isInvalid = true;
+        this.$.passwordInput.isInvalid = true;
         this.fire('backButton', true);
       } else {
-        this.$$('#emailInput').value = '';
+        this.email_ = '';
         this.switchToEmailCard(false /* animated */);
       }
     },
@@ -100,9 +136,9 @@
     },
 
     switchToEmailCard(animated) {
-      this.$$('#passwordInput').value = '';
-      this.$$('#passwordInput').isInvalid = false;
-      this.$$('#emailInput').isInvalid = false;
+      this.$.emailInput.isInvalid = false;
+      this.$.passwordInput.isInvalid = false;
+      this.password_ = '';
       if (this.isEmailSectionActive_())
         return;
 
@@ -111,14 +147,15 @@
     },
 
     switchToPasswordCard(email, animated) {
-      this.$$('#emailInput').value = email;
+      this.email_ = email;
       if (email.indexOf('@') === -1) {
         if (this.emailDomain)
           email = email + this.emailDomain;
         else
           email = email + DEFAULT_EMAIL_DOMAIN;
       }
-      this.$$('#passwordHeader').email = email;
+      this.fullEmail_ = email;
+
       if (!this.isEmailSectionActive_())
         return;
 
@@ -132,23 +169,22 @@
     },
 
     onEmailSubmitted_() {
-      if (this.$$('#emailInput').checkValidity()) {
-        this.switchToPasswordCard(
-            this.$$('#emailInput').value, true /* animated */);
+      if (this.$.emailInput.validate()) {
+        this.switchToPasswordCard(this.email_, true /* animated */);
       } else {
-        this.$$('#emailInput').focus();
+        this.$.emailInput.focusInput();
       }
     },
 
     onPasswordSubmitted_() {
-      if (!this.$$('#passwordInput').checkValidity())
+      if (!this.$.passwordInput.validate())
         return;
       var msg = {
         'useOffline': true,
-        'email': this.$$('#passwordHeader').email,
-        'password': this.$$('#passwordInput').value
+        'email': this.email_,
+        'password': this.password_,
       };
-      this.$$('#passwordInput').value = '';
+      this.password_ = '';
       this.fire('authCompleted', msg);
     },
 
@@ -167,5 +203,11 @@
       }
       this.onPasswordSubmitted_();
     },
+
+    computeDomain_(domain, email) {
+      if (email && email.indexOf('@') !== -1)
+        return '';
+      return domain;
+    },
   });
 }

chrome/browser/resources/chromeos/login/structure/components_common.html

@@ -20,7 +20,6 @@
 <include src="../gaia_card.html">
 <include src="../gaia_header.html">
 <include src="../gaia_input_form.html">
-<include src="../gaia_input.html">
 <include src="../navigation_bar.html">
 
 <!-- Common screen components -->

chrome/browser/resources/chromeos/login/structure/components_common.js

@@ -22,7 +22,6 @@
 // <include src="../gaia_card.js">
 // <include src="../gaia_header.js">
 // <include src="../gaia_input_form.js">
-// <include src="../gaia_input.js">
 // <include src="../navigation_bar.js">
 
 // <include src="../oobe_a11y_option.js">