unauthenicated user support

app/app.js

@@ -143,17 +143,18 @@ if (Meteor.isClient) {
                 } else {
                     console.log();
                     Meteor.loginWithPassword(username, password);
+                    Accounts.onLogin(function(){
+                      window.location.href = "/";
+                    })
                 }
             });
         },
 
         "click #github-login": function(){
             Meteor.loginWithGithub()
-        },
-
-        "click #login": function(){
-            $("#register-view").hide();
-            $("#login-view").show();
+            Accounts.onLogin(function(){
+               window.location.href = "/"
+            });
         }
     });
 
@@ -163,24 +164,47 @@ if (Meteor.isClient) {
             var username = e.target.loginUsername.value;
             var password = e.target.loginPassword.value;
             Meteor.loginWithPassword(username, password);
+            Accounts.onLogin(function(){
+              window.location.href = "/";
+            })
             Accounts.onLoginFailure(function(){
-                $("input").css("background-color","indianred").addClass("animated shake");
-                    $("input").on("click",function(){
-                        $("input").css({
-                            "background-color": "transparent",
-                            "width": "250px"
-                     });
+                $("input").css("background-color","indianred");
+                $("input").on("click",function(){
+                    $("input").css({
+                      "-webkit-appearance": "none",
+                      "   -moz-appearance": "none",
+                      "        appearance": "none",
+                      "outline": "0",
+                      "border": "1px solid rgba(255, 255, 255, 0.4)",
+                      "background-color": "rgba(255, 255, 255, 0.2)",
+                      "width": "304px",
+                      "border-radius": "3px",
+                      "padding": "10px 15px",
+                      "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"
+                    });
+                    $("input:focus").css({
+                      "width": "354px",
+                      "color": "white"
+                    })
+                    $("input").on("blur", function(){
+                      $(this).css("width", "304px");
+                    })
                 })
             });
         },
 
         "click #github-login": function(){
             Meteor.loginWithGithub()
-        },
-
-        "click #register": function(){
-            $("#login-view").hide();
-            $("#register-view").show();
+            Accounts.onLogin(function(){
+               window.location.href = "/"
+            });
         }
     });
 
@@ -1165,6 +1189,14 @@ Router.route("/", {
     template: "home"
 });
 
+Router.route("/login", {
+  template: "login"
+})
+
+Router.route("/signup", {
+  template: "register"
+})
+
 Router.route("/terms", {
     template: "terms"
 });

app/templates/header.html

@@ -25,6 +25,11 @@
                   <ul class="nav navbar-nav navbar-right">
                     <li><a href="#" class="logout navbar-right">Logout</a></li>
                   </ul>
+                  {{else}}
+                    <ul class="nav navbar-nav navbar-right">
+                      <li><a href="/login" class="navbar-right">Login</a></li>
+                      <li><a href="/signup" class="navbar-right">Sign Up</a></li>
+                    </ul>
                 {{/if}}
                 <!--form class="navbar-form navbar-left" role="search">
                     <div class="form-group">

app/templates/home.html

@@ -1,18 +1,11 @@
 <template name="home">
     <div class="homepage">
       {{> header}}
-        {{#if currentUser}}
-          {{> dashboard}}
-        {{else}}
-            <div id="loginregistercontainer">
-                <div id="login-view">
-                    {{> login}}
-                </div>
-                <div id="register-view" style="display:none">
-                    {{> register}}
-                </div>
-            </div>
-        {{/if}}
+      {{#if currentUser}}
+        {{> dashboard}}
+      {{else}}
+        {{> dashboard}}
+      {{/if}}
         <div class="push"></div>
     </div>
     {{> footer}}

app/templates/login.html

@@ -1,6 +1,7 @@
 <template name="login">
+  <div class="landing">
+    {{> header}}
     <div class="container">
-        <button class="button" id="register">Sign Up</button>
         <h1>Login</h1>
         <form class="form">
             <input type="text" autocorrect="off" name="loginUsername" placeholder="Enter your username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter your username'" required/>
@@ -9,4 +10,18 @@
         </form>
         <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Login with Github</button>
     </div>
+
+    <ul class="bg-bubbles">
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+  </div>
 </template>

app/templates/register.html

@@ -1,6 +1,7 @@
 <template name="register">
+  <div class="landing">
+    {{> header}}
     <div class="container">
-        <button class="button" id="login">Login</button>
         <h1>Sign Up</h1>
         <form class="form">
             <input id="usernameInput" type="text" autocorrect="off" name="registerUsername" placeholder="Enter a username" onfocus="this.placeholder = ''" onblur="this.placeholder='Enter a username'" required/>
@@ -11,4 +12,19 @@
         </form>
         <button class="btn-social" id="github-login"><i class="fa fa-github pull-left"></i>Signup with Github</button>
     </div>
+
+    <ul class="bg-bubbles">
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+
+  </div>
 </template>

app/templates/room.html

@@ -28,7 +28,9 @@
               </div>
               <div class="row" id="settings">
                 <div class="col-md-4">
-                  <button type="button" id="song-modal" class="button" data-toggle="modal" data-target="#myModal">Add songs</button>
+                  {{#if currentUser}}
+                    <button type="button" id="song-modal" class="button" data-toggle="modal" data-target="#myModal">Add songs</button>
+                  {{/if}}
                 </div>
                 <div class="col-md-4">
                   <button type="button" id="toggle-video" class="button">Hide video</button>