diff --git a/.gitignore b/.gitignore index dc5576c..7fc78eb 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ /.tmp /.sass-cache /bower_components +/backend/node_modules +/backend/keys.json diff --git a/Gruntfile.js b/Gruntfile.js index 1f92b73..41e1cd3 100644 --- a/Gruntfile.js +++ b/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: { diff --git a/app/images/coffeelogo.png b/app/images/coffeelogo.png new file mode 100644 index 0000000..38fa62f Binary files /dev/null and b/app/images/coffeelogo.png differ diff --git a/app/images/coffeelogoTransparent.png b/app/images/coffeelogoTransparent.png new file mode 100644 index 0000000..3fd84d1 Binary files /dev/null and b/app/images/coffeelogoTransparent.png differ diff --git a/app/index.html b/app/index.html index bc96fa7..76923cf 100644 --- a/app/index.html +++ b/app/index.html @@ -69,6 +69,7 @@
Icons provided by G + diff --git a/app/scripts/controllers/footer.js b/app/scripts/controllers/footer.js index b50463b..789dc28 100644 --- a/app/scripts/controllers/footer.js +++ b/app/scripts/controllers/footer.js @@ -21,6 +21,6 @@ angular.module('signupApp') $timeout(function () { $scope.showFooter = true; - }, 1000); + }, 1500); }); diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js index c9d3c6d..a0fd51f 100644 --- a/app/scripts/controllers/main.js +++ b/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); } }); diff --git a/app/scripts/services/ccnode.js b/app/scripts/services/ccnode.js new file mode 100644 index 0000000..c2ff6f5 --- /dev/null +++ b/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 + } + }); + }); diff --git a/app/styles/main.scss b/app/styles/main.scss index 4ef2241..51c2e6e 100644 --- a/app/styles/main.scss +++ b/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%; diff --git a/app/views/coffeelogo.html b/app/views/coffeelogo.html index a91d0c8..fbbd330 100644 --- a/app/views/coffeelogo.html +++ b/app/views/coffeelogo.html @@ -1,6 +1,6 @@ -