Initial commit

lib/assets/javascripts/dashboard/confirmation/confirmation-info.tpl

@@ -0,0 +1,26 @@
+<div class="js-info">
+  <h1 class="Sessions-title u-tspace-m">
+    <% if (state === "success") { %>
+      Your account is ready
+    <% } else if (state === "failure") { %>
+      Oops! There was a problem
+    <% } else { %>
+      Your account is being created
+    <% } %>
+  </h1>
+  <p class="Sessions-description">
+    <% if (state === "success") { %>
+      <% if (googleSignup) { %>
+        You will be redirected to your dashboard in a moment...
+      <% } else if (!requiresValidationEmail) { %>
+        You will be redirected to the login page in a moment...
+      <% } else { %>
+        Check your email inbox and validate your email.
+      <% }%>
+    <% } else if (state === "failure") { %>
+      Unfortunately there was a problem creating your account. <% if (!customHosted) { %>Please, <a href="mailto:support@carto.com?subject=User creation error: <%- userCreationId %>">contact us</a><% } %>.
+    <% } else { %>
+      It will take us some time, just a few seconds.
+    <% } %>
+  </p>
+</div>

lib/assets/javascripts/dashboard/confirmation/confirmation-model.js

@@ -0,0 +1,87 @@
+const Backbone = require('backbone');
+
+const POLL_TIMER = 2000; // Interval time between poll checkings
+const TIMER_MULTIPLY = 2.5; // Multiply interval for this number
+const MAX_TRIES = 30; // Max tries until interval change
+const STATES = {
+  success: 'success',
+  failure: 'failure'
+};
+
+/**
+ *  User creation model
+ *
+ */
+
+module.exports = Backbone.Model.extend({
+
+  defaults: {
+    email: '',
+    google_sign_in: false,
+    requires_validation_email: false,
+    state: '',
+    username: ''
+  },
+
+  url: function (method) {
+    return `/api/v1/user_creations/${this.id}`;
+  },
+
+  initialize: function () {
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this.bind('change:state', this._checkState, this);
+  },
+
+  _checkState: function () {
+    if (this.hasFinished() || this.hasFailed()) {
+      this.destroyCheck();
+    }
+  },
+
+  pollCheck: function () {
+    if (this.pollTimer) return;
+    let tries = 0;
+
+    const request = () => {
+      this.destroyCheck();
+      this.fetch();
+
+      tries += 1;
+
+      // Multiply polling timer by a number when a max
+      // of tries have been reached
+      const multiply = tries > MAX_TRIES ? TIMER_MULTIPLY : 1;
+
+      this.pollTimer = setInterval(request, POLL_TIMER * multiply);
+    };
+
+    this.pollTimer = setInterval(request, POLL_TIMER);
+
+    // Start doing a fetch
+    request();
+  },
+
+  destroyCheck: function () {
+    clearInterval(this.pollTimer);
+    delete this.pollTimer;
+  },
+
+  hasUsedGoogle: function () {
+    return this.get('google_sign_in');
+  },
+
+  requiresValidationEmail: function () {
+    return this.get('requires_validation_email');
+  },
+
+  hasFinished: function () {
+    return this.get('state') === STATES.success;
+  },
+
+  hasFailed: function () {
+    return this.get('state') === STATES.failure;
+  }
+});

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

@@ -0,0 +1,74 @@
+const CoreView = require('backbone/core-view');
+const ConfirmationModel = require('./confirmation-model');
+const template = require('./confirmation-info.tpl');
+
+/**
+ *  Confirmation view
+ *
+ */
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    if (!opts.userCreationId) {
+      throw new Error('user creation id is needed to check its state');
+    }
+
+    this.model = new ConfirmationModel({
+      id: opts.userCreationId
+    });
+
+    this._initBinds();
+
+    this.model.pollCheck();
+  },
+
+  render: function () {
+    this.$el.html(
+      template({
+        googleSignup: this.model.get('google_sign_in'),
+        requiresValidationEmail: this.model.requiresValidationEmail(),
+        userCreationId: this.model.get('id'),
+        state: this.model.get('state'),
+        customHosted: this.options.customHosted
+      })
+    );
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this.model.bind('change:state', function () {
+      this._setLogo();
+      this.render();
+
+      if (this.model.hasFinished() && (this.model.hasUsedGoogle() || !this.model.requiresValidationEmail())) {
+        this._goToUserURL();
+      }
+    }, this);
+  },
+
+  // Instead of rendering logo each time and f**k the animation
+  // we toggle the 'is-loading' class when process has finished
+  _setLogo: function () {
+    // Loading state
+    this.$('.js-logo').toggleClass('is-loading', !this.model.hasFailed() && !this.model.hasFinished());
+
+    // Remove unnecessary notification, if needed
+    if (this.model.hasFailed()) {
+      this.$('.js-successNotification').remove();
+    } else if (this.model.hasFinished()) {
+      this.$('.js-errorNotification').remove();
+    }
+
+    // Show notification if it is failed or finished
+    if (this.model.hasFailed() || this.model.hasFinished()) {
+      this.$('.js-notification').show();
+    }
+  },
+
+  _goToUserURL: function () {
+    if (this.options.userURL) {
+      window.location.href = this.options.userURL;
+    }
+  }
+});