Switch to coffeescript, and fix Rakefile

Change the library to coffeescript and compile it using
rake compile. This will compile all the assets and
minimize it for general consumption.

.rvmrc

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+# This is an RVM Project .rvmrc file, used to automatically load the ruby
+# development environment upon cd'ing into the directory
+
+# First we specify our desired <ruby>[@<gemset>], the @gemset name is optional,
+# Only full ruby name is supported here, for short names use:
+#     echo "rvm use 1.9.3" > .rvmrc
+environment_id="ruby-1.9.3-p194@authy-forms-helper"
+
+# Uncomment the following lines if you want to verify rvm version per project
+# rvmrc_rvm_version="1.14.10 (master)" # 1.10.1 seams as a safe start
+# eval "$(echo ${rvm_version}.${rvmrc_rvm_version} | awk -F. '{print "[[ "$1*65536+$2*256+$3" -ge "$4*65536+$5*256+$6" ]]"}' )" || {
+#   echo "This .rvmrc file requires at least RVM ${rvmrc_rvm_version}, aborting loading."
+#   return 1
+# }
+
+# First we attempt to load the desired environment directly from the environment
+# file. This is very fast and efficient compared to running through the entire
+# CLI and selector. If you want feedback on which environment was used then
+# insert the word 'use' after --create as this triggers verbose mode.
+if [[ -d "${rvm_path:-$HOME/.rvm}/environments"
+  && -s "${rvm_path:-$HOME/.rvm}/environments/$environment_id" ]]
+then
+  \. "${rvm_path:-$HOME/.rvm}/environments/$environment_id"
+  [[ -s "${rvm_path:-$HOME/.rvm}/hooks/after_use" ]] &&
+    \. "${rvm_path:-$HOME/.rvm}/hooks/after_use" || true
+else
+  # If the environment file has not yet been created, use the RVM CLI to select.
+  rvm --create  "$environment_id" || {
+    echo "Failed to create RVM environment '${environment_id}'."
+    return 1
+  }
+fi
+
+# If you use bundler, this might be useful to you:
+# if [[ -s Gemfile ]] && {
+#   ! builtin command -v bundle >/dev/null ||
+#   builtin command -v bundle | GREP_OPTIONS= \grep $rvm_path/bin/bundle >/dev/null
+# }
+# then
+#   printf "%b" "The rubygem 'bundler' is not installed. Installing it now.\n"
+#   gem install bundler
+# fi
+# if [[ -s Gemfile ]] && builtin command -v bundle >/dev/null
+# then
+#   bundle install | GREP_OPTIONS= \grep -vE '^Using|Your bundle is complete'
+# fi

.rvmrc.10.31.2012-14:58:51

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+# This is an RVM Project .rvmrc file, used to automatically load the ruby
+# development environment upon cd'ing into the directory
+
+# First we specify our desired <ruby>[@<gemset>], the @gemset name is optional,
+# Only full ruby name is supported here, for short names use:
+#     echo "rvm use 1.9.3" > .rvmrc
+environment_id="ruby-1.9.3-p194@c"
+
+# Uncomment the following lines if you want to verify rvm version per project
+# rvmrc_rvm_version="1.14.10 (master)" # 1.10.1 seams as a safe start
+# eval "$(echo ${rvm_version}.${rvmrc_rvm_version} | awk -F. '{print "[[ "$1*65536+$2*256+$3" -ge "$4*65536+$5*256+$6" ]]"}' )" || {
+#   echo "This .rvmrc file requires at least RVM ${rvmrc_rvm_version}, aborting loading."
+#   return 1
+# }
+
+# First we attempt to load the desired environment directly from the environment
+# file. This is very fast and efficient compared to running through the entire
+# CLI and selector. If you want feedback on which environment was used then
+# insert the word 'use' after --create as this triggers verbose mode.
+if [[ -d "${rvm_path:-$HOME/.rvm}/environments"
+  && -s "${rvm_path:-$HOME/.rvm}/environments/$environment_id" ]]
+then
+  \. "${rvm_path:-$HOME/.rvm}/environments/$environment_id"
+  [[ -s "${rvm_path:-$HOME/.rvm}/hooks/after_use" ]] &&
+    \. "${rvm_path:-$HOME/.rvm}/hooks/after_use" || true
+else
+  # If the environment file has not yet been created, use the RVM CLI to select.
+  rvm --create  "$environment_id" || {
+    echo "Failed to create RVM environment '${environment_id}'."
+    return 1
+  }
+fi
+
+# If you use bundler, this might be useful to you:
+# if [[ -s Gemfile ]] && {
+#   ! builtin command -v bundle >/dev/null ||
+#   builtin command -v bundle | GREP_OPTIONS= \grep $rvm_path/bin/bundle >/dev/null
+# }
+# then
+#   printf "%b" "The rubygem 'bundler' is not installed. Installing it now.\n"
+#   gem install bundler
+# fi
+# if [[ -s Gemfile ]] && builtin command -v bundle >/dev/null
+# then
+#   bundle install | GREP_OPTIONS= \grep -vE '^Using|Your bundle is complete'
+# fi

Gemfile

@@ -0,0 +1,9 @@
+source :rubygems
+
+gem "yuicompressor"
+gem "coffee-script"
+gem "sass"
+gem "haml"
+gem 'yui-compressor'
+
+

Gemfile.lock

@@ -0,0 +1,30 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    POpen4 (0.1.4)
+      Platform (>= 0.4.0)
+      open4
+    Platform (0.4.0)
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.4.0)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    haml (3.1.7)
+    multi_json (1.3.6)
+    open4 (1.3.0)
+    sass (3.2.1)
+    yui-compressor (0.9.6)
+      POpen4 (>= 0.1.4)
+    yuicompressor (1.2.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  coffee-script
+  haml
+  sass
+  yui-compressor
+  yuicompressor

Rakefile

@@ -1,9 +1,19 @@
+namespace :coffee do
 
+  desc "Compile"
+  task :compile do
+    require 'coffee-script'
+    puts "Compiling Coffeescript"
+
+    js = CoffeeScript.compile File.read("#{Dir.pwd}/src/form.authy.coffee")
+    File.open("#{Dir.pwd}/src/form.authy.js", 'w') { |file| file.write(js) }
+  end
+end
 namespace :css do
   desc "Build countries flags css"
   task :countries do
     File.open("src/flags.authy.css", "w") do |f|
-      f.puts "// THIS FILE IS AUTOGENERATED. PLEASE DO NOT MODIFIED IT"
+      f.puts "/* THIS FILE IS AUTOGENERATED. PLEASE DO NOT MODIFIED IT */"
       Dir["src/images/flags/*.gif"].each do |flag|
         name = File.basename(flag, ".gif")
         f.puts ".flag_#{name} { background: url('images/flags/#{name}.gif') no-repeat 0px center; }"
@@ -13,25 +23,37 @@ namespace :css do
   end
 
   desc "Compile"
-  task :compile => ["css:countries"] do
-    system "cat src/flags.authy.css src/form.authy.css | yuicompressor --type css -o src/form.authy.min.css"
+  task :compress => ["css:countries"] do
+    puts "Compressing css"
+    require "yui/compressor"
+    css = File.read("#{Dir.pwd}/src/flags.authy.css")
+    css += "\n"
+    css += File.read("#{Dir.pwd}/src/form.authy.css")
+
+    compressor = YUI::CssCompressor.new
+    min_css =  compressor.compress(css)
+    File.open("#{Dir.pwd}/src/form.authy.min.css", 'w') { |file| file.write(min_css) }
   end
 end
 
 
 namespace :js do
   desc "Compile"
-  task :compile do
-    system "cat src/form.authy.js | yuicompressor --type js -o src/form.authy.min.js"
+  task :compress do
+    puts "Compressing javascript"
+    js = File.read("#{Dir.pwd}/src/form.authy.js")
+    compressor = YUI::JavaScriptCompressor.new
+    min_js = compressor.compress(js)
+    File.open("#{Dir.pwd}/src/form.authy.min.js", 'w') { |file| file.write(min_js) }
   end
 end
 
-task :compile => ["css:compile", "js:compile"] do
+task :compile => ["coffee:compile","css:compress", "js:compress"] do
 end
 
 task :package => ["compile"] do
   puts "Generating form.authy.zip ..."
   system "cd src; zip form.authy.zip form.authy.min.js form.authy.min.css images/**/*; mv form.authy.zip .."
 end
 
-task :default => :compile
+task :default => :compile

sample/login.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <link href="sample.css" media="screen" rel="stylesheet" type="text/css">
+</head>
+<body>
+  <div class="login-form">
+    <form>
+      <h3>Two-Factor Verification</h3>
+      Token: <input id="authy-token"  type="text" value=""/>
+      <br/>
+      <a href="#" id="authy-help">help</a>
+    </form>
+  </div>
+  <link rel="stylesheet" href="../src/flags.authy.css">
+  <link rel="stylesheet" href="../src/form.authy.css">
+  <script src="../src/form.authy.js"></script>
+</body>
+</html>

sample/register.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+  <link href="sample.css" media="screen" rel="stylesheet" type="text/css">
+</head>
+<body>
+  <div class="login-form">
+    <form>
+      <h3>Enable Two-Factor Authentication</h3>
+      Country:
+      <select id="authy-countries"></select>
+      <br/>
+      Cellphone: <input id="authy-cellphone"  type="text" value=""/>
+    </form>
+  </div>
+  <link rel="stylesheet" href="../src/flags.authy.css">
+  <link rel="stylesheet" href="../src/form.authy.css">
+  <script src="../src/form.authy.js"></script>
+</body>
+</html>

sample/sample.css

@@ -0,0 +1,10 @@
+.login-form { 
+  margin-top: 10em;
+  text-align: center;
+  line-height: 2em;
+
+}
+
+.login-form input {
+  width: 180px;
+}

src/flags.authy.css

@@ -1,4 +1,4 @@
-// THIS FILE IS AUTOGENERATED. PLEASE DO NOT MODIFIED IT
+/* THIS FILE IS AUTOGENERATED. PLEASE DO NOT MODIFIED IT */
 .flag_af93 { background: url('images/flags/af93.gif') no-repeat 0px center; }
 .flag_al213 { background: url('images/flags/al213.gif') no-repeat 0px center; }
 .flag_al355 { background: url('images/flags/al355.gif') no-repeat 0px center; }