Add a very basic PIN UI implementation that is shared between lock and settings.

chrome/browser/resources/chromeos/quick_unlock/pin.js

Index: chrome/browser/resources/chromeos/quick_unlock/pin.js
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin.js b/chrome/browser/resources/chromeos/quick_unlock/pin.js
new file mode 100644
index 0000000000000000000000000000000000000000..762df33878c1f52fe797e4437127fc41171af097
--- /dev/null
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin.js
@@ -0,0 +1,67 @@
+// Copyright 2016 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.
+
+(function() {

[tommycli, 2016/05/02 16:11:27]

Since there's no variables to hide, there's no need to do the (function() {
thing, and we can unindent everything.

Also I'm not sure if 'use strict' is necessary. I don't see it in the other
Polymer element definitions

[jdufault, 2016/05/03 19:21:58]

Done.

iirc, the "use strict;" enables let. I've removed the usage of let so we don't
need strict mode anymore.

+  'use strict';
+
+  Polymer({
+    is: 'pin-keyboard',
+    properties: {

[tommycli, 2016/05/02 16:11:27]

missing \n above this line

[jdufault, 2016/05/03 19:21:58]

Done.

+      username: String,
+      profilePictureSrc: String
+    },
+
+    observers: [
+      'onUsernameChanged(username)',
+      'onProfilePictureChanged(profilePictureSrc)'
+    ],
+
+    onUsernameChanged: function(username) {

[tommycli, 2016/05/02 16:11:27]

These are leftovers right? In any case, We can use these property change
observers:
https://www.polymer-project.org/1.0/docs/devguide/properties.html#change-call...

[jdufault, 2016/05/03 19:21:58]

I've removed these observers for now. I'll add them back later when they are
needed.

+      // TODO(jdufault): Save this value, use it with authenticateUserWithPin.
+      console.log('Got new username ' + username);
+    },
+    onProfilePictureChanged: function(profilePictureSrc) {
+      // TODO(jdufault): Update profile picture with this value.
+      console.log('Got new profilePictureSrc ' + profilePictureSrc);
+    },
+
+    ready: function() {
+      let input = this.$$('#pin-input');

[tommycli, 2016/05/02 16:11:27]

Does Chromium support 'let'? i haven't seen much usage. This is an ES6 feature
right?

[jdufault, 2016/05/03 19:21:58]

Yes, Chromium is fine, but I'm not sure if we need to support iOS here so I've
gone back to var.

+
+      // Add click handlers to each of the buttons.
+      for (let i = 0; i <= 9; ++i) {
+        let buttonElement = this.$$('#btn' + i);
+        buttonElement.onclick = function() {

[tommycli, 2016/05/02 16:11:27]

Instead of doing this, you can declaratively choose an event handler for every
paper-button within the HTML using on-tap attribute.

[jdufault, 2016/05/03 19:21:58]

Done.

+          input.value += i;
+        };
+      }
+
+      // Add support for actually sending the entered PIN.
+      let handleInputSubmitted = function(pin) {

[tommycli, 2016/05/02 16:11:27]

Likewise, use the declarative syntax for submitting the pin also.

[jdufault, 2016/05/03 19:21:58]

Done.

+          console.log('Submitting pin ' + pin);

[tommycli, 2016/05/02 16:11:27]

Remove stray console.logs

[jdufault, 2016/05/03 19:21:58]

Done.

+
+          // TODO(jdufault): Use real values.

[tommycli, 2016/05/02 16:11:27]

Hmm... if we aren't using real values, I'm not sure this CL is ready to be
committed to codebase.

Are there smaller portions of this patch that are more ready?

[jdufault, 2016/05/03 19:21:58]

Discussed in chat. I'd like to land this CL to create some initial structure for
collaboration and to resolve dependencies on other work that can be done in
parallel.

+          let username = 'foo@gmail.com';
+          let password = pin;
+          chrome.send('authenticateUserWithPin', [username, password]);

[tommycli, 2016/05/02 16:11:27]

Instead of doing chrome.send directly, try using the FooBrowserProxy model as
shown here:
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

This will allow you to write browser tests for your Polymer element.

[xiyuan, 2016/05/02 20:03:33]

nit: On C++ side, the handler expect a serialized AccountId [1].

https://code.google.com/p/chromium/codesearch#chromium/src/components/login/b...

[jdufault, 2016/05/03 19:21:58]

I've opted instead to just fire an event, which the embedder can listen to.

[jdufault, 2016/05/03 19:21:58]

Done.

+      };
+
+      input.onkeydown = function(event) {

[tommycli, 2016/05/02 16:11:27]

Likewise here, you should use the declarative event handler syntax. Here is the
reference:
https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-liste...

[jdufault, 2016/05/03 19:21:58]

Done.

+        // Up/down pressed, swallow the event to prevent the input value from
+        // being incremented or decremented.
+        if (event.keyCode == 38 || event.keyCode == 40)
+          event.preventDefault();
+
+        // enter pressed
+        if (event.keyCode == 13) {
+          handleInputSubmitted(input.value);
+          event.preventDefault();
+        }
+      };
+      this.$.submitButton.onclick = function() {
+        handleInputSubmitted(input.value);
+      };
+    }
+  });
+})();