Initial commit

lib/assets/javascripts/dashboard/components/delete-account/delete-account-view.js

@@ -0,0 +1,97 @@
+const CoreView = require('backbone/core-view');
+const template = require('./delete-account.tpl');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+const REQUIRED_OPTS = [
+  'modalModel',
+  'userModel',
+  'client'
+];
+
+/**
+ *  When user wants to delete his own account
+ */
+
+module.exports = CoreView.extend({
+  events: {
+    'click .js-ok': '_onClickDelete',
+    'click .js-cancel': '_closeDialog',
+    'submit .js-form': '_closeDialog'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+    CoreView.prototype.initialize.apply(this);
+
+    this._onError = options.onError;
+    this._error = '';
+
+    this._isLoading = false;
+  },
+
+  render: function () {
+    this.$el.html(
+      template({
+        passwordNeeded: !!this._userModel.get('needs_password_confirmation'),
+        isLoading: this._isLoading,
+        error: this._error
+      })
+    );
+
+    return this;
+  },
+
+  _onClickDelete: function (event) {
+    this.killEvent(event);
+
+    const params = {
+      deletion_password_confirmation: this.$('#deletion_password_confirmation').val()
+    };
+
+    this._isLoading = true;
+    this._error = '';
+
+    this.render();
+
+    this._client.deleteUser(params, (errors, response, data) => {
+      this._isLoading = false;
+      this.render();
+
+      if (errors) {
+        this._handleError(data, errors);
+      } else {
+        this._onSuccess(data);
+      }
+    });
+  },
+
+  _handleError: function (data, errors) {
+    if (this._onError) {
+      this._closeDialog();
+      this._onError(data, errors);
+    } else {
+      const jsonData = data && data.responseJSON || {};
+
+      this._error = jsonData.message;
+      this.render();
+    }
+  },
+
+  _setHref: function (href) {
+    window.location.href = href;
+  },
+
+  _onSuccess: function (data) {
+    this._setHref(data.logout_url);
+    this._closeDialog();
+  },
+
+  _onFormError: function (data, errors) {
+    this._onError(data, errors);
+    this._closeDialog();
+  },
+
+  _closeDialog: function () {
+    this._modalModel.destroy();
+  }
+});

lib/assets/javascripts/dashboard/components/delete-account/delete-account.tpl

@@ -0,0 +1,55 @@
+<form accept-charset="UTF-8" class="js-form">
+  <div class="CDB-Text Dialog-header u-inner">
+    <div class="Dialog-headerIcon Dialog-headerIcon--negative">
+      <i class="CDB-IconFont CDB-IconFont-defaultUser"></i>
+    </div>
+    <p class="Dialog-headerTitle">You are about to delete your account.</p>
+    <p class="Dialog-headerText">
+      Remember, once you delete your account there is no going back.<br/>
+      All your maps, data and work will be lost. Are you sure you want to proceed?<br/>
+      <% if (passwordNeeded) { %>
+        In any case, you need to type your password.
+      <% } %>
+    </p>
+  </div>
+
+  <% if (passwordNeeded) { %>
+    <div class="CDB-Text Dialog-body">
+      <div class="Form-row Form-row--centered has-label">
+        <div class="Form-rowLabel">
+          <label class="Form-label">Your password</label>
+        </div>
+        <div class="Form-rowData">
+          <input
+            type="password"
+            id="deletion_password_confirmation"
+            name="deletion_password_confirmation"
+            class="CDB-InputText CDB-Text Form-input Form-input--long <%- isLoading ? 'is-disabled' : '' %>"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  <% } %>
+
+  <% if (error) { %>
+    <p class="CDB-Text CDB-Size-medium u-errorTextColor u-flex u-justifyCenter"><%- error %></p>
+  <% } %>
+
+  <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">Cancel</span>
+    </button>
+    <button type="submit" class="CDB-Button CDB-Button--error js-ok">
+      <% if (isLoading) { %>
+        <div class="CDB-LoaderIcon CDB-LoaderIcon--small u-iBlock">
+          <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+            <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+          </svg>
+        </div>
+      <% } else { %>
+        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase">Yes, delete my account</span>
+      <% } %>
+    </button>
+  </div>
+</form>