Custom error handlers

Some reorganization of styles and templates
Updated mmh

Signed-off-by: Christian Roth <christian.roth@port17.de>

Gruntfile.coffee

@@ -65,7 +65,8 @@ module.exports = (grunt) ->
           'include css': true
         files:
           'public/css/main.css':      'assets/styl/main.styl'
-          'public/css/finalize.css':  'assets/styl/finalize.styl'
+          'public/css/finalize.css':  'assets/styl/pages/finalize.styl'
+          'public/css/error.css':     'assets/styl/pages/error.styl'
 
     jade:
       client:
@@ -141,5 +142,5 @@ module.exports = (grunt) ->
   ]
 
   grunt.registerTask 'dev', [
-    'clean:public', 'clean:server', 'coffee:server', 'stylus:assets', 'watch'
+    'clean:public', 'clean:server', 'coffee:server', 'stylus:assets', 'jade:client', 'coffee:client', 'watch'
   ]

app/controllers/AuthController.coffee

@@ -49,6 +49,7 @@ module.exports = class AuthController extends Mmh.Controller
     , (err, user) ->
       if err then next err
       else
+        # known user
         if user
           req.logIn user, (err) ->
             if err then return next err
@@ -57,28 +58,41 @@ module.exports = class AuthController extends Mmh.Controller
             else 
               if req.xhr then res.redirect (if req.session.returnto? then req.session.returnto else '/user/me')
               else res.render 'success'
+        # new user
         else
-          switch auth.provider.name
-            when 'facebook' 
-              avatarProvider = 'facebook'
-              avatarUrl = "https://graph.facebook.com/#{auth.provider.id}/picture?width=150&height=150"
-            else
-              avatarProvider = 'gravatar'
-              avatarUrl = gravatar.url auth.info.emails[0]?.value, s: '150', r: 'x', d: 'identicon'
-
-          user = new User
-            name:             auth.info.displayName
-            email:            auth.info.emails[0]?.value
-            username:         if auth.info.username? then auth.info.username else ""
-            'avatar.url':     avatarUrl
-            'avatar.provider':avatarProvider
-            'provider.name':  auth.provider.name
-            'provider.id':    auth.provider.id
-
-          user.save (err) ->
+          # validate if user with same email exists
+          User.count email: auth.info.emails[0]?.value, (err, count) ->
             if err then return next err
-            else
-              res.render 'finialize', user.toJSON()
+            if count > 0 then return next new Error "User with this email (#{auth.info.emails[0]?.value}) " + 
+              "already registered with another oauth provider"
+
+            # ok create new user
+            avatarProvider = 'gravatar'
+            avatarUrl = gravatar.url auth.info.emails[0]?.value, s: '150', r: 'x', d: 'identicon'
+
+            switch auth.provider.name
+              when 'facebook' 
+                avatarProvider = 'facebook'
+                avatarUrl = "https://graph.facebook.com/#{auth.provider.id}/picture?width=150&height=150"
+              when 'google'
+                if auth.info.picture
+                  avatarProvider = 'google'
+                  avatarUrl = "https://plus.google.com/s2/photos/profile/#{auth.provider.id}?sz=150"
+
+            user = new User
+              name:             auth.info.displayName
+              email:            auth.info.emails[0]?.value
+              username:         auth.info.username
+              birthday:         auth.info.birthday
+              'avatar.url':     avatarUrl
+              'avatar.provider':avatarProvider
+              'provider.name':  auth.provider.name
+              'provider.id':    auth.provider.id
+
+            user.save (err) ->
+              if err then return next err
+              else
+                res.render 'finialize', user.toJSON()
 
 
 

app/controllers/HomeController.coffee

@@ -4,5 +4,5 @@ Mmh  = require('mmh')
 module.exports = class HomeController extends Mmh.Controller
 
   index: ( req, res ) ->
-    res.render 'home'
+    res.render 'index'
 

assets/styl/main.styl

@@ -5,14 +5,14 @@ global-reset()
 
 @import "_variables"
 
-@import "animation"
-@import "horizontal-scroll"
-@import "buttons"
-@import "forms"
+@import "common/animation"
+@import "common/buttons"
+@import "common/forms"
 
-@import "header"
-@import "content"
-@import "footer"
+@import "structure/header"
+@import "structure/content"
+@import "structure/footer"
+@import "structure/horizontal-scroll"
 
 @import "tpl/login"
 @import "tpl/search"
@@ -28,17 +28,20 @@ global-reset()
   height: 100%
 
 body
-  width: 100%
+  width: 90%
+  margin: 50px auto
 
   font: 1em "Helvetica Neue", Arial, sans-serif
   font-weight: 100
   color: $text-color
 
   background-color: $background-color
-  //background: url("../img/background.jpg") center center no-repeat fixed
-  //background-size: cover
   overflow: hidden
 
+@media (min-width: 500px) and (max-width: 750px)
+  body
+    width: 500px
+
 a
   color: $link-color
   text-decoration: none

assets/styl/pages/error.styl

@@ -0,0 +1,19 @@
+@import 'nib'
+
+body
+  background: linear-gradient(top, #ECCD35, #E45635);
+
+p.info
+  margin-bottom: 2em
+
+pre.stack
+  font: 70% "Consolas" 
+  border: 0
+  margin: 0
+  padding: 0
+  word-wrap: break-word
+  overflow: scroll
+  height: 60%
+
+  &:empty
+    display: none

assets/styl/finalize.styl → assets/styl/pages/finalize.styl

@@ -1,11 +1,7 @@
-
 @import "nib"
-@import "_variables"
-
 
 body
-  margin: 50px auto
-  width: 500px
+  background: linear-gradient(top, lighten(#80B3FF, 80%), #80B3FF);
 
 p.info
   margin-bottom: 2em

assets/styl/footer.styl → assets/styl/structure/footer.styl

@@ -3,7 +3,7 @@ footer
   font-weight: 100
   z-index: 999
   position: fixed
-  bottom: 0
+  bottom: 50px
   left: 0
   width: 100%
 

config/extensions.coffee

@@ -3,4 +3,14 @@ module.exports =
   passport:
     enabled:  yes
     model:    'User'
-    provider: ['amazon', 'google', 'facebook']
+    provider: ['amazon', 'google', 'facebook']
+
+    facebook:
+      scope: ['email', 'user_birthday']
+    google:
+      scope: [
+        'https://www.googleapis.com/auth/userinfo.profile',
+        'https://www.googleapis.com/auth/userinfo.email'
+      ]
+    amazon:
+      scope: ['profile']

package.json

@@ -1,7 +1,7 @@
 {
   "name": "node-galerie",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "a gallery written in node, nothing more.",
   "main": "server.js",
   "directories": {

views/error.jade

@@ -0,0 +1,10 @@
+extends layout/multi
+
+block css
+  link(rel='stylesheet', href='/css/error.css')
+
+block body
+  h1= name
+  p.info= message
+
+  pre.stack= stack

views/finialize.jade

@@ -1,36 +1,31 @@
-!!!5
-html
-
-  head
-    title node-galerie
-    link(rel='stylesheet', href='/css/main.css')
-    link(rel='stylesheet', href='/css/finalize.css')
+extends layout/multi
 
-    script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js')
+block css
+  link(rel='stylesheet', href='/css/finalize.css')
 
-  body
-    h1 Hi #{name}
-    p.info Du meldest dich zum ersten Mal über einen externen Anbieter an. Bitte ergänze die restlichen Felder.
+block body
+  h1 Hi #{name}
+  p.info Du meldest dich zum ersten Mal über einen externen Anbieter an. Bitte ergänze die restlichen Felder.
 
-    div.image
-      img(src="#{avatar.url}")
-      p avatar provided by #{avatar.provider}
+  div.image
+    img(src="#{avatar.url}")
+    p avatar provided by #{avatar.provider}
 
-    form(action='/auth/finalize', method='post')
-      div.pair
-        input.fullwidth(readonly, name='name', value='#{name}')
+  form(action='/auth/finalize', method='post')
+    div.pair
+      input.fullwidth(readonly, name='name', value='#{name}')
 
-      div.pair
-        input.fullwidth(readonly, type='email', required, name='email', value='#{email}', placeholder='Email-Adresse')
+    div.pair
+      input.fullwidth(readonly, type='email', required, name='email', value='#{email}', placeholder='Email-Adresse')
 
-      div.pair.hint--right(data-hint="Nickname")
-        input.fullwidth(id="username", name='username', required, value='#{username}', placeholder='Nickname', class="#{missing_username ? 'missing' : ''}")
+    div.pair.hint--right(data-hint="Nickname")
+      input.fullwidth(id="username", name='username', required, value='#{username ? username : ''}', placeholder='Nickname', class="#{missing_username ? 'missing' : ''}")
 
-      div.pair.hint--right(data-hint="Geburtstag")
-        input.fullwidth(id="birthday", name='birthday', required, type='date', value='#{birthday}', placeholder='Geburtstag', class="#{missing_birthday ? 'missing' : ''}") 
+    div.pair.hint--right(data-hint="Geburtstag")
+      input.fullwidth(id="birthday", name='birthday', required, type='date', value='#{birthday}', placeholder='Geburtstag', class="#{missing_birthday ? 'missing' : ''}") 
 
-      div.pair
-        input(name='_id', type='hidden', value='#{_id}')
-        button Zugang anlegen
+    div.pair
+      input(name='_id', type='hidden', value='#{_id}')
+      button Zugang anlegen
 
 

views/index.jade

@@ -0,0 +1,3 @@
+extends layout/single
+
+block content

views/layout/multi.jade

@@ -0,0 +1,15 @@
+!!!5
+html
+
+  head
+    title node-galerie
+    link(rel='stylesheet', href='/css/main.css')
+    block css
+
+    script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js')
+    block js
+
+  body
+    block body
+
+

views/layout/single.jade

@@ -0,0 +1,16 @@
+!!! 5
+html
+
+  head
+    title node-galerie
+    link(rel='stylesheet', href='/css/main.css')
+    block head
+    script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.js', 'data-main'='/js/main')
+
+  body
+    //header
+      include ../includes/header.jade
+
+    #content
+
+    footer