ArtyomLazyan/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FaceBook LogIn</title>
    <link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.css">
    <style media="screen">
      #fb-btn {
        margin-top: 20px;
      }
      #profile, #logout {
        display: none;
      }
    </style>
  </head>
  <body>
  <script>

  window.fbAsyncInit = function() {
    FB.init({
      appId      : '258294404656652',
      cookie     : true,
      xfbml      : true,
      version    : 'v2.8'
    });

    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });

  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

   /*** Checks Logged or not ***/
   function statusChangeCallback(response) {
     if (response.status === "connected") {
       console.log("Logged in and authentificated");
       setElements(true);
       testAPI();
     } else {
       console.log("Not authentificated");
       setElements(false);
     }
   }

  /*** Get response and call function statusChangeCallback ***/
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  /*** return user information from Facebook ***/
  function testAPI() {
    FB.api("/me?fields=name,email,birthday,location", function(response) {
      if (response && !response.error) {
        buildProfile(response);
      }
    });
  }

  function buildProfile(user) {
    let profile = `
      <h3>${user.name}</h3>
      <ul class="list-group">
        <li class="list-group-item">User ID ${user.id}</li>
        <li class="list-group-item">User ID ${user.email}</li>
        <li class="list-group-item">User ID ${user.birthday}</li>
        <li class="list-group-item">User ID ${user.location.name}</li>
      <ul>
    `;

    document.getElementById("profile").innerHTML = profile;

  }

  function setElements(isLoggedIn) {
    if (isLoggedIn) {
      document.getElementById("heading").innerHTML = "You are Logged In";
      document.getElementById("logout").style.display = "block";
      document.getElementById("profile").style.display = "block";
      document.getElementById("fb-btn").style.display = "none";
    } else {
      document.getElementById("heading").innerHTML = "Log in to view your profile";
      document.getElementById("logout").style.display = "none";
      document.getElementById("profile").style.display = "none";
      document.getElementById("fb-btn").style.display = "block";
    }
  }

  function logout() {
    FB.logout(function(response) {
      setElements(false);
    });
  }

  </script>

  <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.php">Facebook LogIn</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a id="logout" href="#" onclick="logout()">LogOut</a></li>

            <!-- Facebook LogIn button  scope="permissions" -->
            <fb:login-button
              id="fb-btn"
              scope="public_profile,email,user_birthday,user_location"
              onlogin="checkLoginState();">
            </fb:login-button>
          </ul>

        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
      <h3 id="heading">Log in to view your profile</h3>
      <div id="profile">Your profile</div>
    </div>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>FaceBook LogIn</title>
	<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.css">
	<style media="screen">
	#fb-btn {
	margin-top: 20px;
	}
	#profile, #logout {
	display: none;
	}
	</style>
	</head>
	<body>
	<script>

	window.fbAsyncInit = function() {
	FB.init({
	appId : '258294404656652',
	cookie : true,
	xfbml : true,
	version : 'v2.8'
	});

	FB.getLoginStatus(function(response) {
	statusChangeCallback(response);
	});

	};

	(function(d, s, id){
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/en_US/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	/* Checks Logged or not */
	function statusChangeCallback(response) {
	if (response.status === "connected") {
	console.log("Logged in and authentificated");
	setElements(true);
	testAPI();
	} else {
	console.log("Not authentificated");
	setElements(false);
	}
	}

	/* Get response and call function statusChangeCallback */
	function checkLoginState() {
	FB.getLoginStatus(function(response) {
	statusChangeCallback(response);
	});
	}

	/* return user information from Facebook */
	function testAPI() {
	FB.api("/me?fields=name,email,birthday,location", function(response) {
	if (response && !response.error) {
	buildProfile(response);
	}
	});
	}

	function buildProfile(user) {
	let profile = `
	<h3>${user.name}</h3>
	<ul class="list-group">
	<li class="list-group-item">User ID ${user.id}</li>
	<li class="list-group-item">User ID ${user.email}</li>
	<li class="list-group-item">User ID ${user.birthday}</li>
	<li class="list-group-item">User ID ${user.location.name}</li>
	<ul>
	`;

	document.getElementById("profile").innerHTML = profile;

	}

	function setElements(isLoggedIn) {
	if (isLoggedIn) {
	document.getElementById("heading").innerHTML = "You are Logged In";
	document.getElementById("logout").style.display = "block";
	document.getElementById("profile").style.display = "block";
	document.getElementById("fb-btn").style.display = "none";
	} else {
	document.getElementById("heading").innerHTML = "Log in to view your profile";
	document.getElementById("logout").style.display = "none";
	document.getElementById("profile").style.display = "none";
	document.getElementById("fb-btn").style.display = "block";
	}
	}

	function logout() {
	FB.logout(function(response) {
	setElements(false);
	});
	}

	</script>

	<nav class="navbar navbar-default">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="index.php">Facebook LogIn</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li><a href="index.php">Home</a></li>
	</ul>

	<ul class="nav navbar-nav navbar-right">
	<li><a id="logout" href="#" onclick="logout()">LogOut</a></li>

	<!-- Facebook LogIn button scope="permissions" -->
	<fb:login-button
	id="fb-btn"
	scope="public_profile,email,user_birthday,user_location"
	onlogin="checkLoginState();">
	</fb:login-button>
	</ul>

	</div><!--/.nav-collapse -->
	</div>
	</nav>

	<div class="container">
	<h3 id="heading">Log in to view your profile</h3>
	<div id="profile">Your profile</div>
	</div>

	</body>
	</html>