Initial project structure with sails.js

assets/js/pages/account/account-overview.page.js

@@ -0,0 +1,106 @@
+parasails.registerPage('account-overview', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    isBillingEnabled: false,
+
+    hasBillingCard: false,
+
+    // Syncing/loading states for this page.
+    syncingOpenCheckout: false,
+    syncingUpdateCard: false,
+    syncingRemoveCard: false,
+
+    // For <ajax-form>
+    formData: { /* … */ },
+    formRules: { /* … */ },
+    formErrors: { /* … */ },
+    cloudError: '',
+    syncing: '',
+
+    // For <modal>:
+    modal: '',
+
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function (){
+    _.extend(this, window.SAILS_LOCALS);
+
+    this.isBillingEnabled = !!this.stripePublishableKey;
+
+    // Determine whether there is billing info for this user.
+    this.me.hasBillingCard = (
+      this.me.billingCardBrand &&
+      this.me.billingCardLast4 &&
+      this.me.billingCardExpMonth &&
+      this.me.billingCardExpYear
+    );
+  },
+  mounted: async function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+
+    clickUpdateBillingCardButton: function() {
+      this.modal = 'update-billing-card';
+      this.formData = { newPaymentSource: undefined };
+      this.formRules = { newPaymentSource: {required: true}};
+    },
+
+    closeModal: async function() {
+      // Dismiss modal
+      this.modal = '';
+      await this._resetForms();
+    },
+
+    handleSubmittingUpdateBillingCard: async function(argins) {
+      var newPaymentSource = argins.newPaymentSource;
+      await Cloud.updateBillingCard.with(newPaymentSource);
+    },
+
+    submittedUpdateBillingCard: async function() {
+      Object.assign(this.me, _.pick(this.formData.newPaymentSource, ['billingCardLast4', 'billingCardBrand', 'billingCardExpMonth', 'billingCardExpYear']));
+      this.me.hasBillingCard = true;
+
+      // Dismiss modal
+      this.modal = '';
+      await this._resetForms();
+    },
+
+    _resetForms: async function() {
+      this.cloudError = '';
+      this.formData = {};
+      this.formRules = {};
+      this.formErrors = {};
+      await this.forceRender();
+    },
+
+    clickRemoveCardButton: async function() {
+      this.modal = 'remove-billing-card';
+      this.formData.stripeToken = '';
+    },
+
+    submittedRemoveCardForm: async function() {
+
+      // Update billing info on success.
+      this.me.billingCardLast4 = undefined;
+      this.me.billingCardBrand = undefined;
+      this.me.billingCardExpMonth = undefined;
+      this.me.billingCardExpYear = undefined;
+      this.me.hasBillingCard = false;
+
+      // Close the modal and clear it out.
+      this.closeModal();
+
+    },
+
+  }
+});

assets/js/pages/account/edit-password.page.js

@@ -0,0 +1,50 @@
+parasails.registerPage('edit-password', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    // Main syncing/loading state for this page.
+    syncing: false,
+
+    // Form data
+    formData: { /* … */ },
+
+    // For tracking client-side validation errors in our form.
+    // > Has property set to `true` for each invalid property in `formData`.
+    formErrors: { /* … */ },
+
+    // Form rules
+    formRules: {
+      password: {required: true},
+      confirmPassword: {required: true, sameAs: 'password'},
+    },
+
+    // Server error state for the form
+    cloudError: '',
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+
+    submittedForm: async function() {
+      // Redirect to a different web page on success.
+      // > (Note that we re-enable the syncing state here.  This is on purpose--
+      // > to make sure the spinner stays there until the page navigation finishes.)
+      this.syncing = true;
+      window.location = '/account';
+    },
+
+  }
+});

assets/js/pages/account/edit-profile.page.js

@@ -0,0 +1,52 @@
+parasails.registerPage('edit-profile', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    // Main syncing/loading state for this page.
+    syncing: false,
+
+    // Form data
+    formData: { /* … */ },
+
+    // For tracking client-side validation errors in our form.
+    // > Has property set to `true` for each invalid property in `formData`.
+    formErrors: { /* … */ },
+
+    // Form rules
+    formRules: {
+      fullName: {required: true},
+      emailAddress: {required: true, isEmail: true},
+    },
+
+    // Server error state for the form
+    cloudError: '',
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    // Set the form data.
+    this.formData.fullName = this.me.fullName;
+    this.formData.emailAddress = this.me.emailChangeCandidate ? this.me.emailChangeCandidate : this.me.emailAddress;
+  },
+  mounted: async function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+
+    submittedForm: async function() {
+      // Redirect to the account page on success.
+      // > (Note that we re-enable the syncing state here.  This is on purpose--
+      // > to make sure the spinner stays there until the page navigation finishes.)
+      this.syncing = true;
+      window.location = '/account';
+    },
+
+  }
+});