Add first half of login process

scripts/server

@@ -31,6 +31,7 @@ serveIndex = (request, response)->
 
 app.get '*/$', serveIndex
 app.get '/craft/*', serveIndex
+app.get '/login', serveIndex
 
 app.get '*', (request, response)->
     extension = path.extname(request.path)
@@ -49,5 +50,5 @@ app.get '*', (request, response)->
     response.set 'Content-Type', contentType
     response.sendFile request.path, root:ROOT
 
-server = app.listen 8000, ->
+server = app.listen 8000, '127.0.0.1', ->
     console.log "listening at: #{server.address().address}:#{server.address().port}"

src/coffee/constants.coffee

@@ -61,6 +61,16 @@ Event.transitionEnd  = (->
 exports.Key = Key = {}
 Key.Return = 13
 
+exports.Login = Login = {}
+Login.authorizeUrl = _.template "https://github.com/login/oauth/authorize" +
+    "?client_id=ea419abd2ab96c708815&scope=public_repo&state=<%= state %>" +
+
+exports.ModelState  = ModelState = {}
+ModelState.unloaded = 'unloaded'
+ModelState.loading  = 'loading'
+ModelState.loaded   = 'loaded'
+ModelState.failed   = 'failed'
+
 exports.Opacity = Opacity = {}
 Opacity.hidden  = 1e-6
 Opacity.shown   = 1
@@ -69,12 +79,6 @@ exports.ProductionEnvs = [ 'staging', 'production' ]
 
 exports.RequiredMods = [ 'minecraft' ]
 
-exports.ModelState  = ModelState = {}
-ModelState.unloaded = 'unloaded'
-ModelState.loading  = 'loading'
-ModelState.loaded   = 'loaded'
-ModelState.failed   = 'failed'
-
 exports.Text = Text = {}
 Text.title = 'The Ultimate Minecraft Crafting Guide'
 

src/coffee/controllers/header_controller.coffee

@@ -64,3 +64,4 @@ module.exports = class HeaderController extends BaseController
         return _.extend super,
             'click a.logo':    'onLogoClicked'
             'click .navBar a': 'onNavItemClicked'
+            'click .login a':  'routeLinkClick'

src/coffee/controllers/login_page_controller.coffee

@@ -0,0 +1,110 @@
+###
+Crafting Guide - login_page_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+PageController = require './page_controller'
+{Login}        = require '../constants'
+
+########################################################################################################################
+
+module.exports = class LoginPageController extends PageController
+
+    @ServerStatus:
+        Up: 'up'
+        Down: 'down'
+
+    constructor: (options={})->
+        options.templateName = 'login_page'
+        super options
+
+        @client  = options.client
+        @storage = options.storage
+
+    # Event Methods ################################################################################
+
+    onExpandReadMore: (event)->
+        event.preventDefault()
+        @$readMoreLink.addClass 'hidden'
+        @$readMoreContent.removeClass 'closed'
+
+    onLoginButtonClicked: (event)->
+        event.preventDefault()
+        @_redirectToGitHub()
+
+    # Property Methods #############################################################################
+
+    getLoginSecurityToken: ->
+        @storage.load 'loginSecurityToken'
+
+    setLoginSecurityToken: (value)->
+        @storage.store 'loginSecurityToken', value
+
+    getServerStatus: ->
+        return @_serverStatus
+
+    setServerStatus: (serverStatus)->
+        @_serverStatus = serverStatus
+        @tryRefresh()
+
+    Object.defineProperties @prototype,
+        loginSecurityToken: {get:@prototype.getLoginSecurityToken, set:@prototype.setLoginSecurityToken}
+        serverStatus:       {get:@prototype.getServerStatus,       set:@prototype.setServerStatus}
+
+    # PageController Overrides #####################################################################
+
+    getTitle: ->
+        return "Login"
+
+    # BaseController Methods #######################################################################
+
+    onWillRender: ->
+        @_validateServerStatus()
+        super
+
+    onDidRender: ->
+        @$readMoreLink       = @$('a.read-more')
+        @$readMoreContent    = @$('.read-more-content')
+        @$serviceUpContent   = @$('.service-up')
+        @$serviceDownContent = @$('.service-down')
+        super
+
+    refresh: ->
+        if @serverStatus is LoginPageController.ServerStatus.Down
+            @$serviceUpContent.addClass 'hidden'
+            @$serviceDownContent.removeClass 'hidden'
+        else
+            @$serviceUpContent.removeClass 'hidden'
+            @$serviceDownContent.addClass 'hidden'
+
+        super
+
+    # Backbone.View Overrides ######################################################################
+
+    events: ->
+        return _.extend super,
+            'click a.read-more': 'onExpandReadMore'
+            'click button': 'onLoginButtonClicked'
+
+    # Private Methods ##############################################################################
+
+    _redirectToGitHub: ->
+        @loginSecurityToken = _.uuid()
+        baseUrl = Login.authorizeUrl state:@loginSecurityToken
+        window.location.href = baseUrl
+
+    _validateServerStatus: ->
+        message = _.uuid()
+        logger.info "Checking Crafting Guide Server at #{@client.baseUrl}..."
+        @client.ping message:message
+            .then (response)=>
+                if response.json.message is message
+                    @serverStatus = LoginPageController.ServerStatus.Up
+                    logger.info "Crafting Guide Server is up"
+                else
+                    throw new Error "Invalid server ping response: #{response.json.message} isnt #{message}"
+            .catch (error)=>
+                @serverStatus = LoginPageController.ServerStatus.Down
+                logger.error "Crafting Guide server is down: #{error}"

src/coffee/crafting_guide_router.coffee

@@ -13,6 +13,7 @@ HomePageController      = require './controllers/home_page_controller'
 ImageLoader             = require './controllers/image_loader'
 ItemPageController      = require './controllers/item_page_controller'
 ItemSlug                = require './models/item_slug'
+LoginPageController     = require './controllers/login_page_controller'
 Mod                     = require './models/mod'
 ModPack                 = require './models/mod_pack'
 ModPageController       = require './controllers/mod_page_controller'
@@ -36,10 +37,11 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
         @_lastReported    = null
         super options
 
+        @client          = options.client
         @imageLoader     = new ImageLoader defaultUrl:'/images/unknown.png'
         @modPack         = new ModPack
         @storage         = new Storage storage:window.localStorage
-        @_defaultOptions = imageLoader:@imageLoader, modPack:@modPack, storage:@storage
+        @_defaultOptions = client:@client, imageLoader:@imageLoader, modPack:@modPack, storage:@storage
 
         @headerController = new HeaderController el:'.view__header'
         @headerController.render()
@@ -73,6 +75,7 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
         'configure(/)':                               'route__configure'
         'craft(/)':                                   'route__craft'
         'craft/:text':                                'route__craft'
+        'login(/)':                                   'route__login'
 
         'item/:itemSlug':         'deprecated__item'
         'crafting/(:text)':       'deprecated__crafting'
@@ -114,6 +117,10 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
         controller.model.params = inventoryText:text
         @_setPage 'craft', controller
 
+    route__login: ->
+        controller = new LoginPageController _.extend {}, @_defaultOptions
+        @_setPage 'login', controller
+
     # Deprecated Route Methods #####################################################################
 
     deprecated__crafting: (text)->

src/coffee/main.coffee

@@ -8,10 +8,11 @@ All rights reserved.
 require './underscore_mixins'
 require './polyfill'
 
-CraftingGuideRouter = require './crafting_guide_router'
+CraftingGuideRouter   = require './crafting_guide_router'
-FeedbackController  = require './controllers/feedback_controller'
+FeedbackController    = require './controllers/feedback_controller'
-views               = require './views'
+views                 = require './views'
-{Logger}            = require 'crafting-guide-common'
+{CraftingGuideClient} = require 'crafting-guide-common'
+{Logger}              = require 'crafting-guide-common'
 
 ########################################################################################################################
 
@@ -22,17 +23,22 @@ if typeof(global) is 'undefined'
 global.logger = new Logger
 
 switch window.location.hostname
-    when 'localhost'
+    when 'local.crafting-guide.com'
-        global.env = 'development'
+        global.env   = 'development'
         logger.level = Logger.DEBUG
+        apiBaseUrl   = 'http://localhost:8001'
     when 'new.crafting-guide.com'
-        global.env = 'staging'
+        global.env   = 'staging'
         logger.level = Logger.VERBOSE
+        apiBaseUrl   = 'https://crafting-guide-production.herokuapp.com'
     when 'crafting-guide.com'
-        global.env = 'production'
+        global.env   = 'production'
         logger.level = Logger.INFO
+        apiBaseUrl   = 'https://crafting-guide-production.herokuapp.com'
+    else
+        throw new Error "cannot determine the environment of: #{window.location.hostname}"
 
-global.router   = new CraftingGuideRouter
+global.router   = new CraftingGuideRouter client:new CraftingGuideClient baseUrl:apiBaseUrl
 global.util     = require 'util'
 global.views    = views
 global.markdown = global.markdown.markdown

src/coffee/underscore_mixins.coffee

@@ -31,3 +31,5 @@ _.mixin
             parts = [ null, parts[0] ]
 
         return parts
+
+_.mixin require('crafting-guide-common').stringMixins

src/jade/includes/_header.jade

@@ -12,6 +12,7 @@
 
     .addthis_sharing_toolbox
     .divider.bottom
+        .login: a(href="/login") Login
 
     .navBar
         a(data-page="home", href="/")

src/jade/templates/login_page.jade

@@ -0,0 +1,38 @@
+//-
+//- Crafting Guide - login_page.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__login_page
+    .two-thirds-content.hideable.service-up
+        img.float-right(src="/images/github-login-large.png")
+        h1 Login with GitHub
+        p.
+            Use your GitHub credentials to login and make changes on Crafting Guide. No GitHub account? Don't worry, you
+            can get one for free. <a class="read-more" href="#">read more...</a>
+        .read-more-content.slideable.closed
+            p.
+                All changes you make on the site get submitted directly to our GitHub repo, and then published through
+                the same automated deployment process as changes made by anyone else. That way, anyone can contribute
+                easily: whether developer or end user.
+            p.
+                To log in, we redirect you to GitHub's site, and once you're signed in, they'll send you back here. We
+                never see your credentials, and only get the minimum set of permissions necessary to submit changes to
+                the Crafting Guide repo on your behalf.
+            p.
+                GitHub offers free accounts, so even if you don't already have one, you've got nothing to lose!
+
+        .actions
+            button.huge Login with GitHub
+
+        .clear
+
+    .two-thirds-content.hideable.hidden.service-down
+        h1 Sorry!
+        p.
+            Our interactive editing service is down right now, but you can always submit a pull request over at
+            the <a href="https://github.com/andrewminer/crafting-guide">Crafting Guide GitHub Repository</a>. We'll have
+            the editing service back up soon!
+

src/scss/classes.scss

@@ -19,6 +19,10 @@ All rights reserved.
     text-align: center;
 }
 
+.clear {
+    clear: both;
+}
+
 .content {
     background: $color-content;
     box-shadow: 10px 10px 20px #666;
@@ -32,6 +36,11 @@ All rights reserved.
 
 .error-new { background: $color-error-new !important; }
 
+.float-right {
+    float: right;
+    margin-left: 3em;
+}
+
 .hideable {
     opacity: 1;
     transition: opacity $animate-normal;
@@ -111,6 +120,21 @@ All rights reserved.
     }
 }
 
+.slideable {
+    max-height: 500px;
+    overflow: hidden;
+    transition: max-height $animate-normal;
+
+    &.closed {
+        max-height: 0;
+    }
+}
+
+.two-thirds-content {
+    position: relative; width: 66%;
+    margin: 5em 16.5%;
+}
+
 .videos {
     .panel {
         text-align: center;

src/scss/main.scss

@@ -77,6 +77,7 @@ $color-footer-text:        #FFFFFF;
 $color-link:               #0000FF;
 $color-link-subtle:        #545A99;
 $color-text:               #000000;
+$color-text-light:         #FFFFFF;
 
 // Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
 

src/scss/tags.scss

@@ -29,6 +29,11 @@ button {
         margin: 2em 0;
         padding: 0.5em 0.5em;
     }
+
+    &.huge {
+        font-size: $font-size-large;
+        padding: 0.5em 3em;
+    }
 }
 
 h1 {

src/scss/templates/index.scss

@@ -17,6 +17,7 @@ All rights reserved.
 @import 'inventory_table';
 @import 'item';
 @import 'item_page';
+@import 'login_page';
 @import 'minimal_recipe';
 @import 'mod';
 @import 'mod_pack';

src/scss/templates/login_page.scss

@@ -0,0 +1,33 @@
+/*
+Crafting Guide - login_page.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__login_page {
+
+    button {
+        outline: none;
+    }
+
+    h1 {
+        font-family: $font-family-header;
+        font-size: $font-size-x-large;
+        padding-top: 2em;
+    }
+
+    p {
+        margin-bottom: 1em;
+    }
+
+    .actions {
+        margin-top: 4em;
+        width: 100%;
+        text-align: center;
+    }
+
+    .read-more {
+        font-size: 75%;
+    }
+}

src/scss/views.scss

@@ -55,6 +55,18 @@ All rights reserved.
     .divider {
         background: $color-brick-dark url('/images/stone_brick.png');
         position: absolute; bottom: 5em; height: 3.2em; width: 100%;
+
+        .login {
+            position: absolute; top: 50%; right: 2em;
+            @include transform(translateY(-50%));
+
+            a {
+                color: $color-text-light;
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                font-weight: bold;
+            }
+        }
     }
 
     .navBar {