Footer

browser/js/about/about.html

@@ -1,6 +1,12 @@
-<section id="about">
-    <p>
-        Dish'd! Get your dish on.
-    </p>
+<md-content flex>
+    <div layout="row">
+        <div flex>
+            <section id="about">
+                <p>
+                    Dish'd! Get your dish on.
+                </p>
+            </section>
+        </div>
+    </div>
+</md-content>
 
-</section>

browser/js/common/directives/dishd-logo/dishd-logo.html

@@ -1,2 +1,2 @@
-<ng-md-icon icon="restaurant_menu"></ng-md-icon>
+<ng-md-icon icon="restaurant_menu" size="40px"></ng-md-icon>
 

browser/js/common/directives/footer/footer.html

@@ -0,0 +1,14 @@
+<md-content flex>
+    <div layout="row" class="footercontainer">
+        <div class="link" ui-sref="about">ABOUT</div>
+<!-- Need to create contact us html & state -->
+        <div class="link" ui-sref="about">CONTACT US</div>
+        <div class="copyright">© 2016 DISH'D</div>
+<!-- Social icons not real links obvs -->
+        <div class="social">
+            <ng-md-icon icon="facebook"></ng-md-icon>
+            <ng-md-icon icon="twitter"></ng-md-icon>
+            <ng-md-icon icon="photo_camera"></ng-md-icon>
+        </div>
+    </div>
+</md-content>

browser/js/common/directives/footer/footer.js

@@ -0,0 +1,6 @@
+app.directive('footer', function ($rootScope, $state) {
+    return {
+        restrict: 'E',
+        templateUrl: 'js/common/directives/footer/footer.html',
+    }
+});

browser/js/common/directives/navbar/navbar.js

@@ -7,9 +7,7 @@ app.directive('navbar', function ($rootScope, AuthService, AUTH_EVENTS, $state)
         link: function (scope) {
 
             scope.items = [
-                { label: 'Home', state: 'home' },
-                { label: 'About', state: 'about' },
-                { label: 'Members Only', state: 'membersOnly', auth: true }
+                { label: 'My Account', state: 'myAccount', auth: true }
             ];
 
             scope.user = null;

browser/js/home/home.html

@@ -1,4 +1,4 @@
-<md-content>
+<md-content flex>
 <div layout="row">
     <div flex>
         <section id="home">

browser/js/login/login.html

@@ -1,7 +1,6 @@
-<md-content class="md-no-momentum" flex>
+<md-content flex>
     <div id="login-page" layout="column" ng-cloak>
         <h1>Login to Dish'd!</h1>
-        <p>New to Dish'd? <a ui-sref="signup">Sign up here!</a></p>
         <form id="login-form" name="loginForm" ng-submit="loginForm.$valid && sendLogin(login)">
             <md-input-container class="md-block">
                 <input ng-model="login.email" type="email" placeholder="Email (required)" ng-required="true">
@@ -12,17 +11,14 @@ <h1>Login to Dish'd!</h1>
             <div>
                 <md-button type="submit">Submit</md-button>
             </div>
-            <div>
-                <h4>Or, log in with an external provider: </h4>
+            <div class="oauth">
+                <p>New to Dish'd? <a id="signup" ui-sref="signup">Sign up here! </a>
+                Or, with: </p>
                 <a href="/auth/google">
-                <md-button class="md-fab md-accent provider-button">
                     <ng-md-icon icon="google-plus-box" size="40"></ng-md-icon>
-                </md-button>
                 </a>
                 <a href="/auth/facebook">
-                <md-button class="md-fab md-primary provider-button">
                     <ng-md-icon icon="facebook-box" size="40"></ng-md-icon>
-                </md-button>
                 </a>
             </div>
         </form>

browser/js/members-only/members-only.js

@@ -1,6 +1,6 @@
 app.config(function ($stateProvider) {
 
-    $stateProvider.state('membersOnly', {
+    $stateProvider.state('myAccount', {
         url: '/members-area',
         template: '<img ng-repeat="item in stash" width="300" ng-src="{{ item }}" />',
         controller: function ($scope, SecretStash) {

browser/js/signup/signup.html

@@ -1,4 +1,4 @@
-<md-content layout-padding>
+<md-content flex>
     <div ng-controller="SignupCtrl" layout="column" ng-cloak class="md-inline-form" id="signup-page">
       <h1>Sign up for Dish'd!</h1>
       <p>Already have an account? <a ui-sref="login">Login here!</a></p>

browser/scss/about/main.scss

@@ -1,38 +1,8 @@
 #about {
-
-  margin: 0 auto;
-  width: 90%;
-  @include clearfix;
-
-  p {
-    width: 40%;
-    margin: 0 auto;
-    text-align: justify;
-    font-size: 22px;
-    font-weight: 300;
-    float: left;
-  }
-
-  .carousel {
-    float: right;
-    width: 55%;
-    overflow: hidden;
-    margin: 0 auto;
-    .carousel-inner {
-      height: 500px !important;
-    }
-    .carousel-control {
-      background: none;
-    }
-    .carousel-indicators {
-      display: none;
-    }
-    img {
-      max-width: 100%;
-      max-height: 500px;
-      display: block;
-      margin: 0 auto;
-    }
-  }
-
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100vw;
+    height: 85vh;
 }

browser/scss/directives/_main.scss

@@ -1,2 +1,2 @@
-@import "fullstack-logo";
-@import "navbar";
+@import "footer";
+@import "navbar";

browser/scss/directives/footer.scss

@@ -0,0 +1,28 @@
+footer {
+    display: flex;
+    .footercontainer {
+        width: 100vw;
+        height: 10vh;
+        align-items: center;
+        justify-content: space-around;
+        display: flex;
+        background-color: black;
+        .link {
+            color: #FDFDFD;
+            cursor: pointer;
+            border-bottom: 1px dotted #9a9a9a;
+            font-size: 14px;
+        }
+        .copyright {
+            color: #FDFDFD;
+        }
+        .social {
+            color: #FDFDFD;
+            justify-content: space-around;
+            align-items: center;
+            ng-md-icon {
+                fill: #FDFDFD;
+            }
+        }
+    }
+}

browser/scss/directives/navbar.scss

@@ -9,6 +9,8 @@ navbar {
         flex-direction: row;
         #navitems {
             display: inline-flex;
+//for MyAccount link
+            align-items: flex-end;
            li {
             list-style-type: none;
               padding-left: 10px;

browser/scss/login/main.scss

@@ -1,16 +1,16 @@
 @mixin form-page {
     background-color: #FAFAFA;
-    h1, p{
-      align-self: center;
+    align-items: center;
+    a {
+      border-bottom: 1px dotted #9a9a9a;
     }
 }
 
 @mixin form-body{
       display: flex;
       flex-direction: column;
-      justify-content: center;
-      margin-left: 10vw;
-      width: 80vw;
+      align-self: center;
+      width: 60vw;
       div{
         display: flex;
         justify-content: center;
@@ -19,24 +19,18 @@
 
 #login-page{
   @include form-page;
+  .oauth {
+    align-items: center;
+    a {
+      border-bottom: none;
+      padding: 5px;
+    }
+    #signup {
+      border-bottom: 1px dotted #9a9a9a;
+    }
+  }
 }
 
 #login-form{
   @include form-body;
 }
-
-
-/*ng-md-icon{
-  align-self: center;
-  vertical-align: center;
-}*/
-
-.md-fab {
-  font-size: 2.8rem;
-  display: block;
-}
-
-ng-md-icon {
-  width : 2.8rem;
-  height: 2.8rem;
-}

browser/scss/main.scss

@@ -14,8 +14,15 @@ body {
   }
 }
 
+a {
+    text-decoration: none;
+    color: black;
+    cursor: pointer;
+}
+
 #main {
   display: flex;
+  height: 85vh;
 }
 
 @import 'directives/main';

browser/scss/signup/main.scss

@@ -1,11 +1,26 @@
-md-content {
-  width: 100vw;
+@mixin form-page {
+    background-color: #FAFAFA;
+    align-items: center;
+    a {
+        border-bottom: 1px dotted #9a9a9a;
+    }
+}
+
+@mixin form-body {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    width: 60vw;
+    div {
+        display: flex;
+        justify-content: center;
+    }
+}
 
-  #signup-page{
+#signup-page {
     @include form-page;
-  }
+}
 
-  #signup-form{
+#signup-form {
     @include form-body;
-  }
 }

server/app/views/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <base href="/" />
-    <title>Fullstack Academy Generated Application</title>
+    <title>Dish'd</title>
     <link rel="stylesheet" href="/angular-material/angular-material.min.css" />
     <link rel="stylesheet" type="text/css" href="/style.css" />
     <script src="/lodash/index.js"></script>
@@ -18,5 +18,6 @@
 <body ng-app="FullstackGeneratedApp">
     <navbar></navbar>
     <div id="main" ui-view></div>
+    <footer></footer>
 </body>
 </html>

server/db/models/user-model.js

@@ -8,12 +8,13 @@ var db = require('../_db');
 module.exports = db.define('user', {
     email: {
         type: Sequelize.STRING,
-        allowNull: false,
-        unique: true
+        unique: true,
+        validate: {
+            isEmail: true
+        }
     },
     password: {
-        type: Sequelize.STRING,
-        allowNull: false
+        type: Sequelize.STRING
     },
     firstName: {
      type: Sequelize.STRING,

server/env/development.js

@@ -8,12 +8,12 @@ module.exports = {
   },
   FACEBOOK: {
     clientID: '1798317553747617',
-    clientSecret: '1f4efd52e49a5366c8a50b8b3647f42f',
+    clientSecret: '4f698c66684cf989dddeb6cce4fb3355',
     callbackURL: 'http://localhost:1337/auth/facebook/callback'
   },
   GOOGLE: {
     clientID: '405517878236-493ai7memfuvad4dpmi4haniq0o1dshl.apps.googleusercontent.com',
-    clientSecret: 'pxot-QA273WNhdRAHBzNbZq1',
+    clientSecret: 'k3d-wl6X3_K23Vhw0d1EmoOu',
     callbackURL: 'http://localhost:1337/auth/google/callback'
   },
   LOGGING: true,