Created the backend, as well as connected the form

.gitignore

@@ -3,3 +3,5 @@
 /.tmp
 /.sass-cache
 /bower_components
+/backend/node_modules
+/backend/keys.json

Gruntfile.js

@@ -72,7 +72,7 @@ module.exports = function (grunt) {
       options: {
         port: 9000,
         // Change this to '0.0.0.0' to access the server from outside.
-        hostname: 'localhost',
+        hostname: '0.0.0.0',
         livereload: 35729
       },
       livereload: {
@@ -224,7 +224,7 @@ module.exports = function (grunt) {
         src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
         ignorePath: /(\.\.\/){1,2}bower_components\//
       }
-    }, 
+    },
 
     // Compiles Sass to CSS and generates necessary files if requested
     compass: {

app/index.html

@@ -69,6 +69,7 @@ <h5>Icons provided by <a href="http://google.github.io/material-design-icons/">G
         <script src="scripts/controllers/main.js"></script>
         <script src="scripts/controllers/about.js"></script>
         <script src="scripts/controllers/footer.js"></script>
+        <script src="scripts/services/ccnode.js"></script>
         <!-- endbuild -->
 </body>
 </html>

app/scripts/controllers/footer.js

@@ -21,6 +21,6 @@ angular.module('signupApp')
 
     $timeout(function () {
         $scope.showFooter = true;
-    }, 1000);
+    }, 1500);
 
   });

app/scripts/controllers/main.js

@@ -8,7 +8,7 @@
  * Controller of the signupApp
  */
 angular.module('signupApp')
-  .controller('MainCtrl', function ($scope, $timeout) {
+  .controller('MainCtrl', function ($scope, $timeout, CCNode) {
 
     this.awesomeThings = [
       'HTML5 Boilerplate',
@@ -23,9 +23,27 @@ angular.module('signupApp')
     //Variable for if we have a valid email
     $scope.validEmail = false;
 
+    //initialize our error stack
+    $scope.errors = [];
+
     //Our card height, setting it here statically
-    //So we can transition it as we change form ontent
-    $scope.cardHeight = {'height': '722px'}
+    //So we can transition it as we change form content
+    //Timeout to make sure the dom is loaded before calculating
+    var CCHeaderHeight;
+    $scope.cardHeight = {
+        'height': '1400px'
+    }
+    $timeout(function () {
+
+        //Save the card header height
+        //+ a little padding for smaller devices
+        CCHeaderHeight = document.getElementById('CCHeader').clientHeight + 63;
+
+        //+50px for the hidden button
+        $scope.cardHeight = {
+            'height': (document.getElementById('form1').clientHeight + CCHeaderHeight + 50) + "px"
+        };
+    }, 500);
 
     /**
      * Regex to Validate email field
@@ -46,25 +64,101 @@ angular.module('signupApp')
 
     //Function to submit the form
     //Also passng which form to go to next
-    $scope.submitSignIn = function(nextForm, formHeight) {
+    $scope.submitSignIn = function(nextForm) {
 
-        //Do Some google drive stuff here
-        if(nextForm == 2);
+        //Going to set form to zero for loading
+        $scope.formNum = 0;
+        //And set the height to the spinner height
+        $scope.cardHeight = {'height': CCHeaderHeight + 'px'}
 
-        //Do some Github and slack stuff here
-        if(nextForm == 3);
+        //Send our requests here
+        //Prepare our ifttt payload
+        var iftttPayload = {
+            api: "ifttt",
+            value1: $scope.formData.fName + $scope.formData.lName + "",
+            value2: $scope.formData.email,
+            value3: " "
+        };
 
-        //Lastly set the form
-        //Going to set to zero
-        //Then timeout to allow for nice animations
-        $scope.formNum = 0;
-        $scope.cardHeight = {'height': '500px'}
+        //Post to ifttt
+        CCNode.post(iftttPayload, function(response) {
+
+            //Prepare our slack payload
+            var slackPayload = {
+                api: "slack",
+                email: $scope.formData.email,
+                first_name: $scope.formData.fName
+            }
+
+            //post to slack
+            CCNode.post(slackPayload, function(response) {
+
+                //Finally, prepare the github payload
+                var githubPayload  ={
+                    api: "github",
+                    githubUsername: $scope.formData.githubUsername
+                }
+
+                CCNode.post(githubPayload, function(response) {
+
+                    console.log("Success!");
+
+                    //Do a short timeout
+                    $timeout(function () {
+
+                        //Set the actual values
+                        $scope.formNum = nextForm;
+
+                        //Apply scope here to make the dom change
+                        $scope.$apply();
+
+                        //Now set the new height
+                        $scope.cardHeight = {
+                            'height': (document.getElementById('form' + $scope.formNum).clientHeight + CCHeaderHeight) + "px",
+                        };
+
+                    }, 250);
+
+                },
+                //Error
+                function(error) {
+
+                    //Add the error to the error stack
+                    $scope.errors.push("Error " + error.status + ": " + error.data.message);
+                })
+            },
+            //Error
+            function(error) {
+
+                //Add the error to the error stack
+                $scope.errors.push("Error " + error.status + ": " + error.data.message);
+            })
+        },
+        //Error
+        function(error) {
+
+            //Add the error to the error stack
+            $scope.errors.push("Error " + error.status + ": " + error.data.message);
+        });
+
+
+
+        //Placing form height change here since we are still testing things out
+        //Do a short timeout
         $timeout(function () {
 
             //Set the actual values
             $scope.formNum = nextForm;
-            $scope.cardHeight = {'height': formHeight}
-        }, 750);
+
+            //Apply scope here to make the dom change
+            $scope.$apply();
+
+            //Now set the new height
+            $scope.cardHeight = {
+                'height': (document.getElementById('form' + $scope.formNum).clientHeight + CCHeaderHeight) + "px",
+            };
+
+        }, 250);
     }
 
 });

app/scripts/services/ccnode.js

@@ -0,0 +1,30 @@
+'use strict';
+
+/**
+ * @ngdoc service
+ * @name signupApp.CCNode
+ * @description
+ * # CCNode
+ * Service in the signupApp.
+ */
+angular.module('signupApp')
+  .service('CCNode', function ($resource) {
+
+      //Enter our backend url
+      var apiUrl = "http://signin.codeandcoffeelb.org:3000";
+      var localhost = "http://localhost:3000"
+
+      //Return the post
+      return $resource(localhost + '/:api', {
+          api: '@api'
+      },
+      {
+          post: {
+            method: 'POST',
+            params: {
+              api: '@api'
+            },
+            isArray: false
+      }
+    });
+  });

app/styles/main.scss

@@ -36,10 +36,24 @@ body {
     //Nice little animatio on whe the card height changes
     transition: height 0.65s ease-in-out;
 
+    //Coffee Cup logo Image
+    .coffeeLogoImage {
+
+        margin-left: auto;
+        margin-right: auto;
+
+        img {
+            width: 80%;
+            z-index: 1;
+            display: block;
+            margin: auto;
+        }
+    }
+
 
     //Coffe Cup Logo
-    .coffeeLogo {
-        font-size: 0.35em;
+    .coffeeLogoText {
+        font-size: 16px;
         background-color: transparent;
         color: $standard;
         display: block;
@@ -50,7 +64,7 @@ body {
         //Centered above, but the white space is acting weird
         //So center it back
         pre {
-            margin-left: -47px;
+            margin-left: -300px;
         }
     }
 
@@ -70,7 +84,7 @@ body {
 .inputContainer {
 
 
-    width: 85%;
+    width: 80%;
     margin-left: auto;
     margin-right: auto;
     padding-bottom: 10px;
@@ -92,6 +106,29 @@ body {
     }
 }
 
+//Our absolute position inputs near checkboxes
+.relativeContainer {
+
+    position: relative;
+    display: inline-block;
+    height: 75px;
+    width: 60%;
+    vertical-align: middle;
+
+    .inputContainerInline {
+
+        @extend .inputContainer;
+        position: absolute;
+
+        top: -2px;
+    }
+}
+
+//Margin top for the slack checkbox
+#slackCheck {
+    margin-top: 40px;
+}
+
 //Our form titles
 .formTitle {
     width: 90%;

app/views/coffeelogo.html

@@ -1,6 +1,6 @@
 
 <!-- Coffee Cup Logo -->
-<div class = "coffeeLogo">
+<div class = "coffeeLogoText">
     <pre>
                                              x0c.
                                              .:OO.