Merge pull request #99 from azul/feature/os-detection

detect os in browser and show proper download link

10 files changed, 277 insertions, 21 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index cd90934..03a40da 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -16,9 +16,8 @@
 //= require bootstrap
 //= require rails.validations
 //= require rails.validations.simple_form
-
 //= require leap
+//= require platform
 //= require tickets
 //= require users
-
 //= require_tree .
diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss
index b382773..30f7741 100644
--- a/app/assets/stylesheets/leap.scss
+++ b/app/assets/stylesheets/leap.scss
@@ -43,25 +43,95 @@
 }
 
 //
+// OS specific
+//
+
+.os-android {
+  display: none !important;
+}
+
+html.android .os-android {
+  display: inherit !important;
+}
+
+.os-linux32 {
+  display: none !important;
+}
+
+html.linux .os-linux32 {
+  display: inherit !important;
+}
+
+.os-linux64 {
+  display: none !important;
+}
+
+html.linux64 .os-linux64 {
+  display: inherit !important;
+}
+
+.os-windows {
+  display: none !important;
+}
+
+html.windows .os-windows {
+  display: inherit !important;
+}
+
+.os-mac {
+  display: none !important;
+}
+
+html.mac .os-mac {
+  display: inherit !important;
+}
+
+.os-other {
+  display: none !important;
+}
+
+html.oldmac, html.oldwin, html.ios, html.fxos, html.other {
+  .os-other {
+    display: inherit !important;
+  }
+}
+
+//
 // ICONS
 //
 
-[class^="big-icon-"],
-[class*=" big-icon-"] {
+[class*="-icon-"] {
   display: inline-block;
-  width: 32px;
-  height: 32px;
   @include ie7-restore-right-whitespace();
-  line-height: 32px;
   vertical-align: middle;
   background-repeat: no-repeat;
   margin-top: 1px;
 }
 
+[class^="big-icon-"],
+[class*=" big-icon-"] {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+
+[class^="huge-icon-"],
+[class*=" huge-icon-"] {
+  width: 128px;
+  height: 128px;
+  line-height: 128px;
+}
+
+
 .big-icon-arrow-down {
   background-image: url(/leap-img/32/arrow-down.png)
 }
 
+.huge-icon-mask {
+  height: 64px;
+  background-image: url(/leap-img/128/mask.png)
+}
+
 //
 // TYPOGRAPHY
 //
@@ -152,6 +222,9 @@ input, textarea {
   .download {
     a.btn {
       width: 14em;
+      small {
+        font-weight: normal;
+      }
     }
   }
   a.btn {
@@ -191,4 +264,4 @@ input, textarea {
 
 .overview li {
   padding: 6px 0;
-}
\ No newline at end of file
+}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1e79990..90e649a 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -19,18 +19,25 @@ module ApplicationHelper
   # http://twitter.github.io/bootstrap/base-css.html#icons
   #
   def icon(name, color=nil)
+    "<i class=\"icon-#{name} #{color_class(color)}\"></i> ".html_safe
+  end
+
+  def big_icon(name, color=nil)
+    "<i class=\"big-icon-#{name} #{color_class(color)}\"></i> ".html_safe
+  end
+
+  def huge_icon(name, color=nil)
+    "<i class=\"huge-icon-#{name} #{color_class(color)}\"></i> ".html_safe
+  end
+
+  def color_class(color)
     if color.nil?
-      color_class = nil
+      nil
     elsif color == :black
-      color_class = 'icon-black'
+      'icon-black'
     elsif color == :white
-      color_class = 'icon-white'
+      'icon-white'
     end
-    "<i class=\"icon-#{name} #{color_class}\"></i> ".html_safe
-  end
-
-  def big_icon(name, color=nil)
-    "<i class=\"big-icon-#{name}\"></i> ".html_safe
   end
 
   def format_flash(msg)
diff --git a/core/app/assets/javascripts/platform.js b/core/app/assets/javascripts/platform.js
new file mode 100644
index 0000000..3ab77d7
--- /dev/null
+++ b/core/app/assets/javascripts/platform.js
@@ -0,0 +1,92 @@
+/* Inspired by mozillas platform detection:
+  https://github.com/mozilla/bedrock/tree/master/media/js/base
+*/
+ (function () {
+   'use strict';
+   function getPlatform() {
+     var ua = navigator.userAgent,
+         pf = navigator.platform;
+     if (/Win(16|9[x58]|NT( [1234]| 5\.0| [^0-9]|[^ -]|$))/.test(ua) ||
+       /Windows ([MC]E|9[x58]|3\.1|4\.10|NT( [1234]| 5\.0| [^0-9]|[^ ]|$))/.test(ua) ||
+       /Windows_95/.test(ua)) {
+       /**
+        * Officially unsupported platforms are Windows 95, 98, ME, NT 4.x, 2000
+        * These regular expressions match:
+        *  - Win16
+        *  - Win9x
+        *  - Win95
+        *  - Win98
+        *  - WinNT (not followed by version or followed by version <= 5)
+        *  - Windows ME
+        *  - Windows CE
+        *  - Windows 9x
+        *  - Windows 95
+        *  - Windows 98
+        *  - Windows 3.1
+        *  - Windows 4.10
+        *  - Windows NT (not followed by version or followed by version <= 5)
+        *  - Windows_95
+        */
+       return 'oldwin';
+     }
+     if (ua.indexOf("MSIE 6.0") !== -1 &&
+       ua.indexOf("Windows NT 5.1") !== -1 &&
+       ua.indexOf("SV1") === -1) {
+       // Windows XP SP1
+       return 'oldwin';
+     }
+     if (pf.indexOf("Win32") !== -1 ||
+       pf.indexOf("Win64") !== -1) {
+       return 'windows';
+     }
+     if (/android/i.test(ua)) {
+       return 'android';
+     }
+     if (/armv[6-7]l/.test(pf)) {
+       return 'android';
+     }
+     if (pf.indexOf("Linux") !== -1) {
+       if (pf.indexOf("64") !== -1) {
+         return 'linux64';
+       } else {
+         return 'linux32';
+       }
+     }
+     if (pf.indexOf("MacPPC") !== -1) {
+       return 'oldmac';
+     }
+     if (/Mac OS X 10.[0-5]/.test(ua)) {
+       return 'oldmac';
+     }
+     if (pf.indexOf('iPhone') !== -1 ||
+       pf.indexOf('iPad') !== -1 ||
+       pf.indexOf('iPod') !== -1 ) {
+       return 'ios';
+     }
+     if (ua.indexOf("Mac OS X") !== -1) {
+       return 'osx';
+     }
+     if (ua.indexOf("MSIE 5.2") !== -1) {
+       return 'oldmac';
+     }
+     if (pf.indexOf("Mac") !== -1) {
+       return 'oldmac';
+     }
+     if (navigator.platform === '' &&
+       navigator.userAgent.indexOf("Firefox") !== -1 &&
+       navigator.userAgent.indexOf("Mobile") !== -1) {
+       return 'fxos';
+     }
+
+     return 'other';
+   }
+   (function () {
+     // Immediately set the platform classname on the html-element
+     // to avoid lots of flickering
+     var h = document.documentElement;
+     window.site = {
+       platform : getPlatform()
+     };
+     h.className = window.site.platform;
+   })();
+ })();
diff --git a/core/app/helpers/core_helper.rb b/core/app/helpers/core_helper.rb
index a496144..29a4700 100644
--- a/core/app/helpers/core_helper.rb
+++ b/core/app/helpers/core_helper.rb
@@ -10,4 +10,40 @@ module CoreHelper
     render 'common/home_page_buttons'
   end
 
-end
\ No newline at end of file
+  def available_clients
+    CLIENT_AVAILABILITY
+  end
+
+  def alternative_client_links(os = nil)
+    alternative_clients(os).map do |client|
+      link_to(client.capitalize, client_download_url(client))
+    end
+  end
+
+  def alternative_clients(os = nil)
+    CLIENT_AVAILABILITY - [os]
+  end
+
+  def client_download_url(os = nil)
+    client_download_domain(os) + client_download_path(os)
+  end
+
+  def client_download_domain(os)
+    "https://downloads.leap.se"
+  end
+
+  def client_download_path(os)
+    CLIENT_DOWNLOAD_PATHS[os]  || '/client'
+  end
+
+
+  CLIENT_AVAILABILITY = %w/linux32 linux64 mac windows android/
+  CLIENT_DOWNLOAD_PATHS = {
+    android: '/client/android',
+    linux:   '/client/linux',
+    linux32: '/client/linux/Bitmask-linux32-latest.tar.bz2',
+    linux64: '/client/linux/Bitmask-linux64-latest.tar.bz2',
+    osx:     '/client/osx/Bitmask-OSC-latest.dmg',
+    windows: '/client/windows'
+  }.with_indifferent_access
+end
diff --git a/core/app/views/common/_download_for_os.html.haml b/core/app/views/common/_download_for_os.html.haml
new file mode 100644
index 0000000..b7c88ba
--- /dev/null
+++ b/core/app/views/common/_download_for_os.html.haml
@@ -0,0 +1,16 @@
+- os = download_for_os
+%div{:class => "os-#{os}"}
+  %span.link
+    - btn_class = (os == "other") ? "disabled" : "btn-primary"
+    = link_to client_download_url(os), :class => "btn btn-large #{btn_class}" do
+      .pull-left= huge_icon('mask')
+      = t(:download_client)
+      %br/
+      %small= I18n.t("os.#{os}")
+  %span.info
+    = t(:client_info, :provider => content_tag(:b,APP_CONFIG[:domain])).html_safe
+    %br/
+    - if os == "other"
+      = t(:all_downloads_info, :clients => alternative_client_links(os).to_sentence).html_safe
+    - else
+      = t(:other_downloads_info, :clients => alternative_client_links(os).to_sentence).html_safe
diff --git a/core/app/views/common/_home_page_buttons.html.haml b/core/app/views/common/_home_page_buttons.html.haml
index 7eb4c40..b87c867 100644
--- a/core/app/views/common/_home_page_buttons.html.haml
+++ b/core/app/views/common/_home_page_buttons.html.haml
@@ -1,11 +1,10 @@
 - icon_color = :black
 
-.home-buttons
+.home-buttons.linux64
   .row-fluid.first
     .span3
     .download.span6
-      %span.link= link_to(big_icon('arrow-down', icon_color) + t(:download_client), "https://downloads.leap.se/client", :class => 'btn btn-large')
-      %span.info= t(:download_client_info, :provider => content_tag(:b,APP_CONFIG[:domain])).html_safe
+      = render partial: 'common/download_for_os', collection: available_clients + ['other']
     .span3
   .row-fluid.second
     .login.span4
diff --git a/core/config/locales/en.yml b/core/config/locales/en.yml
index 25b377a..344eee4 100644
--- a/core/config/locales/en.yml
+++ b/core/config/locales/en.yml
@@ -21,10 +21,20 @@ en:
   are_you_sure: "Are you sure? This change cannot be undone."
 
   download_client: "Download Bitmask"
-  download_client_info: "The Bitmask application allows you to use %{provider} services. It is available for Linux, Mac, Windows, and Android."
+  client_info: "The Bitmask application allows you to use %{provider} services."
+  all_downloads_info: "It is available for %{clients}."
+  other_downloads_info: "It is also available for %{clients}."
   login_info: "Log in to change your account settings, create support tickets, and manage payments."
   signup_info: "Sign up for a new user account via this website (it is better if you use the Bitmask application to sign up, but this website works too)."
   welcome: "Welcome to %{provider}."
   get_help: "Get Help"
   help_info: "Can't login? Create a new support ticket anonymously."
   example_email: 'user@domain.org'
+  os:
+    linux32: "Linux (32 bit)"
+    linux64: "Linux (64 bit)"
+    windows: "Windows"
+    android: "Android"
+    mac: "Mac OSX"
+    other: "(not available for your OS.)"
+
diff --git a/public/leap-img/128/mask.png b/public/leap-img/128/mask.png
new file mode 100644
index 0000000..c7390eb
--- /dev/null
+++ b/public/leap-img/128/mask.png
diff --git a/test/integration/home_test.rb b/test/integration/home_test.rb
new file mode 100644
index 0000000..126a420
--- /dev/null
+++ b/test/integration/home_test.rb
@@ -0,0 +1,24 @@
+require 'test_helper'
+
+class AccountTest < BrowserIntegrationTest
+
+  setup do
+    Capybara.current_driver = Capybara.javascript_driver
+  end
+
+  test "old windows shows deactivated download" do
+    page.driver.headers = { "User-Agent" => "Win98" }
+    visit '/'
+    assert_selector "html.oldwin"
+    assert has_text? "not available"
+  end
+
+  test "android shows android download" do
+    page.driver.headers = { "User-Agent" => "Android" }
+    visit '/'
+    assert_selector "html.android"
+    assert has_no_text? "not available"
+    assert_selector "small", text: "Android"
+  end
+
+end