Oauthlive (#108)

* added form dialog for entering grocery cost

* need to work on getting grocery cost data

* made grocery cost dialog popup correct hxw and all other dialog cards unaffected

* added oauth btns to signup page

* oauth switched to live and properly displays name

browser/js/groceries/groceries_cost.html

@@ -1,28 +1,23 @@
-<md-dialog aria-label="Cost">
-    <form ng-cloak id="cost">
-        <md-toolbar>
-            <div class="md-toolbar-tools">
-                <h2>Groceries Cost</h2>
-                <span flex></span>
-                <md-button class="md-icon-button" ng-click="cancel()">
-                    <i class="material-icons" aria-label="Close dialog">close</i>
-                </md-button>
-            </div>
-        </md-toolbar>
-        <md-dialog-content>
-            <!-- COST -->
-            <md-input-container>
-                <label>Groceries Total</label>
-                <input placeholder="$" ng-model="price">
-            </md-input-container>
-        </md-dialog-content>
-        <md-dialog-actions layout="row" layout-align="end">
-            <md-button ng-click="submitPrice(+price)" type="submit">
-                Save
+<md-content flex>
+    <navbar class="nav" header="Grocery List"></navbar>
+    <div id="groceries" layout="row">
+        <p ng-if="!showList"><a ui-sref="meals">Add some meals</a> to your grocery list to see your personalized shopping list here!</p>
+        <section class="grocery-list" ng-if="showList">
+            <md-button class="md-icon-button" ng-click="makePDF(sections)">
+                <md-tooltip md-direction="right">Download this list as a PDF</md-tooltip>
+                <ng-md-icon icon="file_download"></ng-md-icon>
             </md-button>
-            <md-button ng-click="cancel()">
-                Cancel
+            <md-button class="md-icon-button" ng-click="showCostForm()">
+                <md-tooltip md-direction="right">Input grocery Cost</md-tooltip>
+                <ng-md-icon icon="attach_money"></ng-md-icon>
             </md-button>
-        </md-dialog-actions>
-    </form>
-</md-dialog>
+            <div ng-repeat="section in headers | orderBy : section">
+                <h3> {{ section }} </h3>
+                <md-list-item ng-repeat="item in sections[section] | orderBy: 'name'">
+                    <p><strong>{{item.name}}</strong> || {{round(item.amount)}} {{item.unitLong}} </p>
+                    <md-checkbox class="md-secondary" ng-model="item.wanted"></md-checkbox>
+                </md-list-item>
+            </div>
+        </section>
+    </div>
+</md-content>

browser/js/signup/signup.html

@@ -42,6 +42,15 @@
                 </div>
                 <div>
                     <md-button type="submit">Submit</md-button>
+                    <div class="oauth">
+                        <p>Or, with: </p>
+                        <a href="/auth/google">
+                            <ng-md-icon icon="google-plus-box" size="40"></ng-md-icon>
+                        </a>
+                        <a href="/auth/facebook">
+                            <ng-md-icon icon="facebook-box" size="40"></ng-md-icon>
+                        </a>
+                    </div>
                 </div>
             </form>
         </div>

browser/scss/signup/main.scss

@@ -23,4 +23,8 @@
 
 #signup-form {
     @include form-body;
+    a {
+      border-bottom: none;
+      padding: 5px;
+    }
 }

server/app/configure/authentication/facebook.js

@@ -15,6 +15,14 @@ module.exports = function (app, db) {
     };
 
     var verifyCallback = function (accessToken, refreshToken, profile, done) {
+        //get user's first name via fb oauth
+        let name = profile.displayName
+        let info = {
+            firstName: name.split(' ')[0],
+            lastName: name.split(' ').slice(1).join(' '),
+        };
+
+        console.log('PROFILE \n\n', profile)
 
         User.findOne({
                 where: {
@@ -26,7 +34,9 @@ module.exports = function (app, db) {
                     return user;
                 } else {
                     return User.create({
-                        facebook_id: profile.id
+                        facebook_id: profile.id,
+                        firstName: info.firstName,
+                        lastName: info.lastName
                     });
                 }
             })

server/app/configure/authentication/google.js

@@ -16,6 +16,13 @@ module.exports = function (app, db) {
     };
 
     var verifyCallback = function (accessToken, refreshToken, profile, done) {
+        //get user's first name via google oauth
+        let name = profile.displayName
+        let info = {
+            firstName: name.split(' ')[0],
+            lastName: name.split(' ').slice(1).join(' '),
+            email: profile.emails[0].value
+        };
 
         User.findOne({
                 where: {
@@ -27,7 +34,10 @@ module.exports = function (app, db) {
                     return user;
                 } else {
                     return User.create({
-                        google_id: profile.id
+                        google_id: profile.id,
+                        firstName: info.firstName,
+                        lastName: info.lastName,
+                        email: info.email
                     });
                 }
             })