Add a lock to the managed user settings page and require authentication for unlocking.

chrome/browser/resources/options/managed_user_set_passphrase.js

+// Copyright (c) 2012 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.
+
+cr.define('options', function() {
+  /** @const */ var OptionsPage = options.OptionsPage;
+
+  //////////////////////////////////////////////////////////////////////////////
+  // ManagedUserSetPassphraseOverlay class:
+
+  /**
+   * Encapsulated handling of the Managed User Set Passphrase page.
+   * @constructor
+   */
+  function ManagedUserSetPassphraseOverlay() {
+    OptionsPage.call(
+      this,
+      'setPassphrase',
+      loadTimeData.getString('setPassphraseTitle'),
+      'managed-user-set-passphrase-overlay');
+  }
+
+  cr.addSingletonGetter(ManagedUserSetPassphraseOverlay);
+
+  ManagedUserSetPassphraseOverlay.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+      $('passphrase').oninput = this.updateDisplay_;
+      $('passphrase-confirm').oninput = this.updateDisplay_;
+
+      $('save-passphrase').onclick = function() {
+        if ($('passphrase').value != $('passphrase-confirm').value) {
+          $('passphrase-mismatch').hidden = false;
+          return;
+        }
+        chrome.send('setPassphrase', [$('passphrase').value]);
+        $('passphrase').value = '';
+        $('passphrase-confirm').value = '';
+        OptionsPage.closeOverlay();
+      };
+    },
+    updateDisplay_: function() {
+      if ($('passphrase-confirm').value != $('passphrase').value) {
+        $('passphrase-mismatch').hidden = false;

[Bernhard Bauer, 2013/01/08 17:43:14]

Could you do this with CSS rules (based on the class name of
#passphrase-confirm, for example)?

[Adrian Kuegel, 2013/01/09 12:10:05]

Not sure how I could do that. I haven't done much with css before, and I guess
this would need some advanced stuff.

[Bernhard Bauer, 2013/02/04 16:13:35]

Well, you wanna learn, right? ;-)

You can actually use more stuff from the HTML5 validation API (required fields,
custom error messages, :valid pseudo-attributes. See
http://jsbin.com/welcome/72023 for an example.

[Adrian Kuegel, 2013/02/05 12:12:35]

I think it is not possible to set the hidden attribute in css depending on the
valid attribute of the input field. In my specific case, in css I would first
need to select this input field according to the valid attribute, then I would
need to select the parent, and then the sibling of the parent which is the error
div. Although there are selectors for siblings, it seems there is no selector
for the parent.

+        $('passphrase-confirm').setAttribute('class', 'unequal-passphrases');

[Bernhard Bauer, 2013/01/08 17:43:14]

You can use .classList
(https://developer.mozilla.org/en-US/docs/DOM/element.classList) here.

[Adrian Kuegel, 2013/01/09 12:10:05]

Done.

+        $('save-passphrase').disabled = true;
+      }
+      else {

[Bernhard Bauer, 2013/01/08 17:43:14]

Move to previous line

[Adrian Kuegel, 2013/01/09 12:10:05]

Done.

+        $('save-passphrase').disabled = ($('passphrase-confirm').value == '' ||

[Bernhard Bauer, 2013/01/08 17:43:14]

I think this one isn't necessary (if one of them is empty but the other one
isn't, we wouldn't be in this branch anyway).

[Adrian Kuegel, 2013/01/09 12:10:05]

Done.

+                                         $('passphrase').value == '');
+        $('passphrase-mismatch').hidden = true;
+        $('passphrase-confirm').setAttribute('class', 'equal-passphrases');
+        $('passphrase').validity.valid = true;
+      }
+    },
+  };
+
+  // Export
+  return {
+    ManagedUserSetPassphraseOverlay: ManagedUserSetPassphraseOverlay
+  };
+
+});