new skin for facebook login. Refs #20

Toolwatchapp · Jun 1, 2015 · 46415f3 · 46415f3
1 parent cb4b2e7
commit 46415f3
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 13 deletions.
diff --git a/application/views/modal/login.php b/application/views/modal/login.php
@@ -1,11 +1,11 @@
-<script type="text/javascript">
-	$( document ).ready(function() {
-    	fbAsyncInit();
-	});
-</script>
+<div class="form-group">
+   <center><button onclick="fb_login();" class="btn btn-primary btn-lg btn-spinner btn-full">Log in with Facebook<i class="fa fa-spinner fa-pulse"></i></button></center>
+</div>
+
 <form method="post" name="login">
+
     <div class="form-group">
-       <h1>Login</h1>
+       <strong class="line-thru">or</strong>
     </div>
 	<div class="form-group">
         <span class="signup-error login-error"></span>
@@ -18,12 +18,10 @@
 		</div>
 	</div>
 	<div class="form-group">
-		<center><button type="submit" name="login" class="btn btn-primary btn-lg btn-spinner">Log in <i class="fa fa-spinner fa-pulse"></i></button></center>
+		<center><button type="submit" name="login" class="btn btn-primary btn-lg btn-spinner btn-full">Log in <i class="fa fa-spinner fa-pulse"></i></button></center>
 	</div>
 	<div class="form-group">
 		  <center>Not registered yet? <a data-href="/sign-up/" data-modal-update="true">Sign up here!</a> or <br />
-			<fb:login-button size="xlarge" style="margin-top:15px" scope="public_profile,email" onlogin="checkLoginState();">
-			</fb:login-button>
 		</center>
 	</div>  
 </form>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -98,6 +98,11 @@ textarea:focus, textarea:hover, textarea:active
     padding: 10px 15px;   
 }
 
+.btn-full
+{
+    width: 100%;   
+}
+
 .btn:focus 
 {
   border: none;
@@ -173,6 +178,38 @@ textarea:focus, textarea:hover, textarea:active
     margin-bottom: 30px;
 }
 
+.line-thru {
+  display: block;
+  font-size: .875em;
+  margin-bottom: 1em;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  z-index: 1;
+}
+
+.line-thru:before {
+  width: 40px;
+  height: 10px;
+  background-color: #fff;
+  content: '';
+  margin: -5px 0 0 -20px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  z-index: -1;
+}
+
+.line-thru:after {
+  border-bottom: 1px solid #dfe0e6;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 49%;
+  width: 100%;
+  z-index: -2;
+}
+
 .line 
 {
   background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(255, 255, 255, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
@@ -556,6 +593,10 @@ button[name=syncDone],
     display: none;
 }
 
+#hiden_fb_button{
+  display: none;
+}
+
 @media (max-width: 768px)
 {
 	header 

diff --git a/assets/js/application.js b/assets/js/application.js
@@ -49,7 +49,7 @@ $(document).ready(function()
 		{
 			$('#pageModal .modal-body').html(data);
 		});
-	})
+	});
 
     /*
      * Next step on signup form
@@ -70,11 +70,11 @@ $(document).ready(function()
             {
                 if(confirmPassword == password)
                 {
-                    if((password.length >= 6) && (password != '')){
+                    if((password.length >= 6) && (password !== '')){
                         $.post('/ajax/checkEmail', {email: userEmail}, function(data)
                         {
                             var result = $.parseJSON(data);
-                            if(result.success == true)
+                            if(result.success === true)
                             {
                                 $('.stepOne').hide();
                                 $('.stepTwo').show();
@@ -121,7 +121,7 @@ $(document).ready(function()
         $.post('/ajax/login', {email: email, password: password}, function(data)
         {
             var result = $.parseJSON(data);
-            if(result.success == true)
+            if(result.success === true)
             {
                 setTimeout('window.location.replace("/measures/")', 1000);
             }

diff --git a/assets/js/facebook.js b/assets/js/facebook.js
@@ -12,6 +12,21 @@
     } 
   }
 
+  function fb_login(){
+    FB.login(function(response) {
+      if (response.status === 'connected') {
+        // Logged into your app and Facebook.
+      } else if (response.status === 'not_authorized') {
+        // The person is logged into Facebook, but not your app.
+      } else {
+        // The person is not logged into Facebook, so we're not sure if
+        // they are logged into this app or not.
+      }
+    }, {scope: 'public_profile,email'});
+  }
+
+
+
   // This function is called when someone finishes with the Login
   // Button.  See the onlogin handler attached to it in the sample
   // code below.