Initial commit

lib/assets/javascripts/dashboard/components/password-confirmation/password-confirmation-view.js

@@ -0,0 +1,73 @@
+const _ = require('underscore');
+const CoreView = require('backbone/core-view');
+const template = require('./password-confirmation.tpl');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+const REQUIRED_OPTS = [
+  'modalModel',
+  'onPasswordTyped'
+];
+
+/**
+ * Password Confirmation Modal
+ *
+ * Modal used for password validated forms, so
+ * the user needs to type the password in to
+ * save form changes
+ */
+
+module.exports = CoreView.extend({
+  events: {
+    'click .js-ok': '_onConfirm',
+    'click .js-cancel': '_closeDialog',
+    'keydown #password-confirmation-form': '_onEnterPressed',
+    'input .js-password': '_toggleConfirmButton'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+    this._isConfirmDisabled = true;
+  },
+
+  render: function () {
+    this.$el.html(
+      template({
+        isConfirmDisabled: this._isConfirmDisabled,
+        updatePassword: this.options.updatePassword
+      })
+    );
+
+    this._okButton = this.$('.js-ok');
+    return this;
+  },
+
+  _toggleConfirmButton: function (event) {
+    const passwordInput = event.target;
+    this._isConfirmDisabled = _.isEmpty(passwordInput.value);
+    this._okButton.toggleClass('is-disabled', this._isConfirmDisabled);
+  },
+
+  _onConfirm: function (event) {
+    this.killEvent(event);
+
+    if (this._isConfirmDisabled) {
+      return;
+    }
+
+    const passwordValue = this.$('#password-confirmation').val();
+    this._onPasswordTyped && this._onPasswordTyped(passwordValue);
+    this._closeDialog();
+  },
+
+  _onEnterPressed: function (event) {
+    if (event.keyCode !== 13) {
+      return;
+    }
+
+    this._onConfirm(event);
+  },
+
+  _closeDialog: function () {
+    this._modalModel.destroy();
+  }
+});

lib/assets/javascripts/dashboard/components/password-confirmation/password-confirmation.tpl

@@ -0,0 +1,39 @@
+<div class="CDB-Text Dialog-header u-inner">
+  <div class="Dialog-headerIcon Dialog-headerIcon--neutral">
+    <i class="CDB-IconFont CDB-IconFont-defaultUser"></i>
+  </div>
+  <h2 class="Dialog-headerTitle">
+    <%= _t('components.modals.password-confirmation.modal-title') %>
+  </h2>
+  <p class="Dialog-headerText">
+    <%= _t('components.modals.password-confirmation.modal-description') %>
+  </p>
+</div>
+
+<div class="CDB-Text Dialog-body">
+  <form id="password-confirmation-form" method="POST" class="Form-row Form-row--centered has-label">
+    <div class="Form-rowLabel">
+      <% if (updatePassword) {%>
+        <label class="Form-label" for="password-confirmation"><%= _t('components.modals.password-confirmation.form.old-password-label') %></label>
+      <% } else { %>
+        <label class="Form-label" for="password-confirmation"><%= _t('components.modals.password-confirmation.form.password-label') %></label>
+      <% }%>
+    </div>
+    <div class="Form-rowData">
+      <input type="password" id="password-confirmation" name="password_confirmation" class="CDB-InputText CDB-Text Form-input Form-input--long js-password" value="" autofocus/>
+    </div>
+  </form>
+</div>
+
+<div class="Dialog-footer u-inner">
+  <button type="button" class="CDB-Button CDB-Button--secondary js-cancel">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase">
+      <%= _t('components.modals.password-confirmation.actions.cancel') %>
+    </span>
+  </button>
+  <button class="CDB-Button CDB-Button--primary js-ok<%= isConfirmDisabled ? ' is-disabled' : ''%>">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase">
+      <%= _t('components.modals.password-confirmation.actions.confirm') %>
+    </span>
+  </button>
+</div>