Added reCAPTCHA and made registering with password more secure.

app/.meteor/packages

@@ -25,3 +25,4 @@ iron:router
 ejson
 joncursi:socket-io-client
 meteorhacks:async
+altapp:recaptcha

app/.meteor/versions

@@ -3,6 +3,7 @@ accounts-facebook@1.0.6
 accounts-github@1.0.6
 accounts-oauth@1.1.7
 accounts-password@1.1.3
+altapp:recaptcha@2.0.0
 autoupdate@1.2.3
 babel-compiler@5.8.24_1
 babel-runtime@0.1.4
@@ -32,6 +33,7 @@ facebook@1.2.2
 fastclick@1.0.7
 geojson-utils@1.0.4
 github@1.1.4
+handlebars@1.0.4
 hot-code-push@1.0.0
 html-tools@1.0.5
 htmljs@1.0.5

app/app.css

@@ -85,7 +85,7 @@ form input {
   outline: 0;
   border: 1px solid rgba(255, 255, 255, 0.4);
   background-color: rgba(255, 255, 255, 0.2);
-  width: 250px;
+  width: 304px;
   border-radius: 3px;
   padding: 10px 15px;
   margin: 0 auto 10px auto;
@@ -102,9 +102,26 @@ form input:hover {
 }
 form input:focus {
   /*opacity: 0.4;*/
-  width: 300px !important;
+  width: 354px !important;
   color: white;
 }
+
+.g-recaptcha {
+    -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  outline: 0;
+  width: 304px;
+  margin: 0 auto 10px auto;
+  display: block;
+  text-align: center;
+  font-size: 18px;
+  color: white;
+  -webkit-transition-duration: 0.25s;
+          transition-duration: 0.25s;
+  font-weight: 300;
+}
+
 form button {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -115,7 +132,7 @@ form button {
   padding: 10px 15px;
   color: #53e3a6;
   border-radius: 3px;
-  width: 250px;
+  width: 304px;
   cursor: pointer;
   font-size: 18px;
   -webkit-transition-duration: 0.25s;
@@ -263,7 +280,7 @@ form button:hover {
   border: 0;
   padding: 10px 15px;
   border-radius: 3px;
-  width: 250px;
+  width: 304px;
   cursor: pointer;
   font-size: 18px;
   color: #fff;
@@ -293,7 +310,7 @@ footer a:hover{
   padding: 10px 15px;
   color: #53e3a6;
   border-radius: 3px;
-  width: 250px;
+  width: 304px;
   cursor: pointer;
   font-size: 18px;
   -webkit-transition-duration: 0.25s;
@@ -357,4 +374,4 @@ footer a:hover{
     .station {
         background-color: red;
     }
-}
+}

app/app.html

@@ -26,6 +26,7 @@
       <input type="text" name="registerUsername" placeholder="Enter a username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a username'" required/>
       <input type="email" name="registerEmail" placeholder="Enter your email" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your email'" required>
       <input type="password" name="registerPassword" placeholder="Enter a password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a password'" required/>
+      {{> reCAPTCHA}}
       <p>By registering, you agree to the Terms and Conditions and Privacy Policy.</p>
       <button type="submit">Sign Up</button>
     </form>
@@ -37,7 +38,7 @@
 <template name="login">
   <div class="container">
     <button class="button" id="register">Sign Up</button>
-  	<h1>Login</h1>
+    <h1>Login</h1>
     <form class="form">
     	<input type="text" name="loginUsername" placeholder="Enter your username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your username'" required/>
     	<input type="password" name="loginPassword" placeholder="Enter your password" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your password'" required/>

app/app.js

@@ -1,6 +1,12 @@
 History = new Mongo.Collection("history");
 
 if (Meteor.isClient) {
+    Meteor.startup(function() {
+        reCAPTCHA.config({
+            publickey: '6LcVxg0TAAAAAE18vBiH00UAyaJggsmLm890SjZl'
+        });
+    });
+    
     var hpSound = undefined;
     Template.register.events({
         "submit form": function(e){
@@ -8,10 +14,15 @@ if (Meteor.isClient) {
             var username = e.target.registerUsername.value;
             var email = e.target.registerEmail.value;
             var password = e.target.registerPassword.value;
-            Accounts.createUser({
-                username: username,
-                email: email,
-                password: password
+            var captchaData = grecaptcha.getResponse();
+            Meteor.call("createUserMethod", {username: username, email: email, password: password}, captchaData, function(err, res) {
+                grecaptcha.reset();
+                
+                if (err) {
+                    console.log(err);
+                } else {
+                    Meteor.loginWithPassword(username, password);
+                }
             });
         },
 
@@ -158,6 +169,16 @@ if (Meteor.isClient) {
 }
 
 if (Meteor.isServer) {
+    Meteor.startup(function() {
+        reCAPTCHA.config({
+            privatekey: '6LcVxg0TAAAAAI2fgIEEWHFxwNXeVIs8mzq5cfRM'
+        });
+    });
+    
+    Meteor.users.deny({update: function () { return true; }});
+    Meteor.users.deny({insert: function () { return true; }});
+    Meteor.users.deny({remove: function () { return true; }});
+    
     var startedAt = Date.now();
     var songs = [{id: 216112412, title: "How Deep Is Your Love", artist: "Calvin Harris", duration: 193}];
     var currentSong = 0;
@@ -207,6 +228,26 @@ if (Meteor.isServer) {
     Meteor.publish("history", function() {
         return History.find({type: "edm"})
     });
+    
+    Meteor.methods({
+        createUserMethod: function(formData, captchaData) {
+            var verifyCaptchaResponse = reCAPTCHA.verifyCaptcha(this.connection.clientAddress, captchaData);
+            if (!verifyCaptchaResponse.success) {
+                console.log('reCAPTCHA check failed!', verifyCaptchaResponse);
+                throw new Meteor.Error(422, 'reCAPTCHA Failed: ' + verifyCaptchaResponse.error);
+            } else {
+                console.log('reCAPTCHA verification passed!');
+                Accounts.createUser({
+                    username: formData.username,
+                    email: formData.email,
+                    password: formData.password
+                });
+            }
+            //do stuff with your formData
+
+            return true;
+        }
+    });
 }
 
 Router.route("/", {
@@ -215,4 +256,4 @@ Router.route("/", {
 
 Router.route("/:type", {
     template: "room"
-});
+});