Initial Spark Install

spark/resources/assets/js/auth/register-braintree.js

@@ -0,0 +1,135 @@
+module.exports = {
+    /**
+     * Load mixins for the component.
+     */
+    mixins: [
+        require('./../mixins/braintree'),
+        require('./../mixins/plans'),
+        require('./../mixins/register')
+    ],
+
+
+    /**
+     * The component's data.
+     */
+    data() {
+        return {
+            query: null,
+
+            coupon: null,
+            invalidCoupon: false,
+
+            registerForm: $.extend(true, new SparkForm({
+                braintree_type: '',
+                braintree_token: '',
+                plan: '',
+                team: '',
+                team_slug: '',
+                name: '',
+                email: '',
+                password: '',
+                password_confirmation: '',
+                terms: false,
+                coupon: null,
+                invitation: null
+            }), Spark.forms.register)
+        };
+    },
+
+
+    watch: {
+        /**
+         * Watch the team name for changes.
+         */
+        'registerForm.team': function (val, oldVal) {
+            if (this.registerForm.team_slug == '' ||
+                this.registerForm.team_slug == oldVal.toLowerCase().replace(/[\s\W-]+/g, '-')
+            ) {
+                this.registerForm.team_slug = val.toLowerCase().replace(/[\s\W-]+/g, '-');
+            }
+        }
+    },
+
+
+    /**
+     * The component has been created by Vue.
+     */
+    created() {
+        this.getPlans();
+
+        this.query = URI(document.URL).query(true);
+
+        if (this.query.coupon) {
+            this.getCoupon();
+
+            this.registerForm.coupon = this.query.coupon;
+        }
+
+        if (this.query.invitation) {
+            this.getInvitation();
+
+            this.registerForm.invitation = this.query.invitation;
+        }
+    },
+
+
+    /**
+     * Prepare the component.
+     */
+    mounted() {
+        this.configureBraintree();
+    },
+
+
+    methods: {
+        configureBraintree() {
+            if ( ! Spark.cardUpFront) {
+                return;
+            }
+
+            this.braintree('braintree-container', response => {
+                this.registerForm.braintree_type = response.type;
+                this.registerForm.braintree_token = response.nonce;
+
+                this.register();
+            });
+        },
+
+
+        /**
+         * Get the coupon specified in the query string.
+         */
+        getCoupon() {
+            axios.get('/coupon/' + this.query.coupon)
+                .then(response => {
+                    this.coupon = response.data;
+                })
+                .catch(response => {
+                    this.invalidCoupon = true;
+                });
+        },
+
+
+        /**
+         * Attempt to register with the application.
+         */
+        register() {
+            Spark.post('/register', this.registerForm)
+                .then(response => {
+                    window.location = response.redirect;
+                });
+        }
+    },
+
+
+    computed: {
+        /**
+         * Get the displayable discount for the coupon.
+         */
+        discount() {
+            if (this.coupon) {
+                return Vue.filter('currency')(this.coupon.amount_off);
+            }
+        }
+    }
+};