material design user manager with create profile flow

chrome/browser/resources/md_user_manager/create_profile.js

Index: chrome/browser/resources/md_user_manager/create_profile.js
diff --git a/chrome/browser/resources/md_user_manager/create_profile.js b/chrome/browser/resources/md_user_manager/create_profile.js
new file mode 100644
index 0000000000000000000000000000000000000000..636473df9dac9551257264a06c0669dc40e078a5
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/create_profile.js
@@ -0,0 +1,260 @@
+/* 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.
+ */
+
+/**
+ * @fileoverview
+ * 'create-profile' is a page that contains controls for creating a (optionally
+ * supervised) profile, including choosing a name, and an avatar.
+ *
+ * @element create-profile
+ */
+Polymer({
+  is: 'create-profile',
+
+  properties: {
+    /**
+     * Indicates whether the supervised user checkbox should be disabled.

[tommycli, 2016/02/08 18:45:19]

True if the supervised user checkbox is disabled.

[Moe, 2016/02/09 00:15:33]

Done.

+     * @private {boolean}
+     */
+    supervisedUserCheckboxDisabled_: {
+      type: Boolean,
+      computed:
+          'isSupervisedUserCheckboxDisabled_(createInProgress_, signedIn_)'
+    },
+
+    /**
+     * The error/warning message related to creating/importing a profile.
+     * @private {string}
+     */
+    errorMessage_: {
+      type: String,
+      value: '',
+      observer: 'errorMessageChanged_'
+    }
+  },
+
+  /** @override */
+  attached: function() {
+    signin.ProfileApi.setProfileCreateSuccessCallback(
+        this.handleSuccess_.bind(this));
+    signin.ProfileApi.setProfileCreateWarningCallback(
+        this.handleWarning_.bind(this));
+    signin.ProfileApi.setProfileCreateErrorCallback(
+        this.handleError_.bind(this));
+
+    this.parentNode.addEventListener('iron-select',
+        this.onPageSelect_.bind(this));
+  },
+
+  /** @override */
+  detached: function() {
+    signin.ProfileApi.setProfileCreateSuccessCallback(null);
+    signin.ProfileApi.setProfileCreateWarningCallback(null);
+    signin.ProfileApi.setProfileCreateErrorCallback(null);
+  },
+
+  /**
+   * Handler for |iron-select| events. Resets the form and makes calls to
+   * ProfileApi every time the page becomes visible.
+   * @param {!Event} event
+   * @private
+   */
+  onPageSelect_: function(event) {
+    if (event.target.selected == 'create-user-page') {
+      this.resetForm_();
+      signin.ProfileApi.getAvailableIcons(
+          this.handleAvailableIcons_.bind(this));
+      signin.ProfileApi.getSignedInUsers(
+          this.handleUpdateSignedInUsers_.bind(this));
+    }
+  },
+
+  /**
+   * Resets the state of the page.
+   * @private
+   */
+  resetForm_: function() {
+    /**
+     * The current profile name.
+     * @type {!string}
+     */
+    this.profileName = '';
+    /**
+     * The list of available profile icon URLs.
+     * @type {!Array<string>}
+     */
+    this.availableIconUrls = [];

[tommycli, 2016/02/08 18:45:19]

Hi, this needs to be a property if it's going to be referenced from the HTML via
data binding. The same applies for all these other member variables.

[Moe, 2016/02/09 00:15:33]

Done.

+    /**
+     * The currently selected profile icon URL. May be a data URL.
+     * @type {!string}
+     */
+    this.profileIconUrl = '';
+    /**
+     * Whether a profile is being created or imported.
+     * @type {boolean}
+     */
+    this.createInProgress_ = false;
+    /**
+     * The current error/warning message.
+     * @type {!string}
+     */
+    this.errorMessage_ = '';
+    /**
+     * Whether the new profile is a supervised profile.
+     * @type {!boolean}
+     */
+    this.isSupervised_ = false;
+  },
+
+  /**
+   * Handler for when the available icons are pushed from ProfileApi.
+   * @param {!Array<string>} iconUrls
+   * @private
+   */
+  handleAvailableIcons_: function(iconUrls) {
+    this.availableIconUrls = iconUrls;
+    this.profileIconUrl = iconUrls[0];
+  },
+
+  /**
+   * Updates the signed-in email addresses.
+   * @private
+   */
+  handleUpdateSignedInUsers_: function(signedInUsers) {
+    this.signedInUsers_ = signedInUsers;
+    this.selectedEmail_ = 0;
+    this.signedIn_ = signedInUsers.length > 0;
+  },
+
+  /**
+   * Handler for the |Learn More| button click event.
+   * @param {!Event} event
+   * @private
+   */
+  onLearnMore_: function(event) {
+    this.fire('change-page', {page: 'supervised-learn-more-page'});
+  },
+
+  /**
+   * Handler for the |Ok| button click event.
+   * @param {!Event} event
+   * @private
+   */
+  onOk_: function(event) {
+    this.createInProgress_ = true;
+    chrome.send('createProfile',
+               [this.profileName, this.profileIconUrl, false,
+                this.isSupervised_, '',
+                this.signedInUsers_[this.selectedEmail_].profilePath]);
+  },
+
+  /**
+   * Handler for the |Cancel| button click event.
+   * @param {!Event} event
+   * @private
+   */
+  onCancel_: function(event) {
+    if (this.createInProgress_) {
+      this.createInProgress_ = false;
+      chrome.send('cancelCreateProfile');
+    } else {
+      this.fire('change-page', {page: 'user-pods-page'});
+    }
+  },
+
+  /**
+   * Handler for when the user clicks a new profile icon.
+   * @param {!Event} event
+   * @private
+   */
+  onIconTap_: function(event) {
+    var element = Polymer.dom(event).rootTarget;
+
+    if (element.nodeName == 'IMG')
+      this.profileIconUrl = element.src;
+    else if (element.dataset && element.dataset.iconUrl)
+      this.profileIconUrl = element.dataset.iconUrl;
+
+    // Button toggle state is controlled by the selected icon URL. Prevent
+    // tap events from changing the toggle state.
+    event.preventDefault();
+  },
+
+  /**
+   * Handles profile create/import success message pushed by ProfileApi.
+   * @param {!profileInfo} profileInfo Details of the created/imported profile.
+   * @private
+   */
+  handleSuccess_: function(profileInfo) {
+    this.createInProgress_ = false;
+    this.fire('change-page', {page: 'user-pods-page'});
+  },
+
+  /**
+   * Handles profile create/import warning message pushed by ProfileApi.
+   * @param {!string} warningHTML
+   * @private
+   */
+  handleWarning_: function(warningHTML) {

[tommycli, 2016/02/08 18:45:19]

Since this is the same as Error (just displays html in a message bubble, can we
combine this with handleError_? handleMessage_?

[Moe, 2016/02/09 00:15:33]

Done.

+    this.createInProgress_ = false;
+    this.errorMessage_ = warningHTML;
+  },
+
+  /**
+   * Handles profile create/import error message pushed by ProfileApi.
+   * @param {!string} errorHTML
+   * @private
+   */
+  handleError_: function(errorHTML) {
+    this.createInProgress_ = false;
+    this.errorMessage_ = errorHTML;
+  },
+
+  /**
+   * Observer for |errorMessage_|. Updates the content of |messageBubble|.
+   * @param {!string} newValue New value of the |errorMessage_|

[tommycli, 2016/02/08 18:45:19]

string is primitive and thus implied to be non-nullable.

You don't need {!string}, {string} implies non-nullable.

[Moe, 2016/02/09 00:15:33]

Done.

+   * @private
+   */
+  errorMessageChanged_: function(newValue) {

[tommycli, 2016/02/08 18:45:19]

Can we accomplish this goal without this observer? Does the newValue contain
HTML? Or just plain text?

http://stackoverflow.com/questions/32595018/binding-html-rather-than-plain-text

[Moe, 2016/02/09 00:15:33]

newValue can be HTML. I came across the above link originally. nice hack but I
didn't see any usage in the codebase so went ahead with the observer. If you
think it's not too hacky it's fine with me.

+    this.$.messageBubble.innerHTML = newValue;
+  },
+
+  /**
+   * Computed binding determining which profile icon button is toggled on.
+   * @param {!string} iconUrl icon URL of a given icon button
+   * @param {!string} profileIconUrl Currently selected icon URL
+   * @private
+   * @return {boolean}

[tommycli, 2016/02/08 18:45:19]

I think i've usually seen @return above @private.

[Moe, 2016/02/09 00:15:33]

Done.

+   */
+  isActiveIcon_: function(iconUrl, profileIconUrl) {
+    return iconUrl == profileIconUrl;
+  },
+
+  /**
+   * Computed binding determining whether |Ok| button is disabled.
+   * @param {boolean} createInProgress Is create in progress?
+   * @param {!string} profileName Profile Name
+   * @param {!string} errorMessage Existing error message
+   * @private
+   * @return {boolean}
+   */
+  isOkDisabled_: function(createInProgress, profileName, errorMessage) {
+    /** @type {{validate:(function())}} */
+    var nameInput = this.$.nameInput;
+    return createInProgress || profileName == '' || nameInput.validate() ||
+        errorMessage != '';
+  },
+
+  /**
+   * Computed binding determining whether supervised user checkbox is disabled.
+   * @param {boolean} createInProgress Is create in progress?
+   * @param {boolean} signedIn Are there any signed in users?
+   * @private
+   * @return {boolean}
+   */
+  isSupervisedUserCheckboxDisabled_: function(createInProgress, signedIn) {
+    return createInProgress || !signedIn;
+  }
+});