From f5e91e1c816361d64221351d2a737dd8fcca01f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Veyssi=C3=A8re?=
 <clement.veyssiere@ensiie.fr>
Date: Thu, 25 Oct 2018 08:11:25 +0200
Subject: [PATCH] bouton login/register

---
 page_welcome/css/log.css  | 245 ++++++++++++++++++++++++++++++++++++++
 page_welcome/data/db.sql  |   6 +
 page_welcome/index.php    | 215 +++++++++++++++++++--------------
 page_welcome/js/login.js  |  28 +++++
 page_welcome/login.php    |  47 ++++++++
 page_welcome/logout.php   |   5 +
 page_welcome/register.php |  61 ++++++++++
 7 files changed, 515 insertions(+), 92 deletions(-)
 create mode 100644 page_welcome/css/log.css
 create mode 100644 page_welcome/data/db.sql
 create mode 100644 page_welcome/js/login.js
 create mode 100644 page_welcome/login.php
 create mode 100644 page_welcome/logout.php
 create mode 100644 page_welcome/register.php

diff --git a/page_welcome/css/log.css b/page_welcome/css/log.css
new file mode 100644
index 0000000..16b69a5
--- /dev/null
+++ b/page_welcome/css/log.css
@@ -0,0 +1,245 @@
+@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic,400italic";
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css";
+body {
+		font-family: 'Source Sans Pro', sans-serif;
+		font-size: 14px;
+		color: #666;
+}
+
+h1 {
+		text-align: center;
+		margin-bottom: 0;
+		margin-top: 60px;
+}
+
+#lean_overlay {
+		position: fixed;
+		z-index: 100;
+		top: 0px;
+		left: 0px;
+		height: 100%;
+		width: 100%;
+		background: #000;
+		display: none;
+}
+
+.popupContainer {
+		position: absolute;
+		width: 330px;
+		height: auto;
+		left: 45%;
+		top: 60px;
+		background: #FFF;
+}
+
+.btn {
+		padding: 10px 20px;
+		background: #F4F4F2;
+}
+
+.btn_red {
+		background: #ED6347;
+		color: #FFF;
+}
+
+.btn:hover {
+		background: #E4E4E2;
+}
+
+.btn_red:hover {
+		background: #C12B05;
+}
+
+a.btn, input.btn {
+		color: #666;
+		text-align: center;
+		text-decoration: none;
+}
+
+a.btn_red, input.btn_red {
+		color: #FFF;
+}
+
+input.btn_red {
+	width: 100%;
+}
+
+.one_half {
+		width: 50%;
+		display: block;
+		float: left;
+}
+
+.one_half.last {
+		width: 45%;
+		margin-left: 5%;
+}
+/* Popup Styles*/
+
+.popupHeader {
+		font-size: 16px;
+		text-transform: uppercase;
+}
+
+.popupHeader {
+		background: #F4F4F2;
+		position: relative;
+		padding: 10px 20px;
+		border-bottom: 1px solid #DDD;
+		font-weight: bold;
+}
+
+.popupHeader .modal_close {
+		position: absolute;
+		right: 0;
+		top: 0;
+		padding: 10px 15px;
+		background: #E4E4E2;
+		cursor: pointer;
+		color: #aaa;
+		font-size: 16px;
+}
+
+.popupBody {
+		padding: 20px;
+}
+/* Social Login Form */
+
+.social_login {}
+
+.social_login .social_box {
+		display: block;
+		clear: both;
+		padding: 10px;
+		margin-bottom: 10px;
+		background: #F4F4F2;
+		overflow: hidden;
+}
+
+.social_login .icon {
+		display: block;
+		width: 10px;
+		padding: 5px 10px;
+		margin-right: 10px;
+		float: left;
+		color: #FFF;
+		font-size: 16px;
+		text-align: center;
+}
+
+.social_login .fb .icon {
+		background: #3B5998;
+}
+
+.social_login .google .icon {
+		background: #DD4B39;
+}
+
+.social_login .icon_title {
+		display: block;
+		padding: 5px 0;
+		float: left;
+		font-weight: bold;
+		font-size: 16px;
+		color: #777;
+}
+
+.social_login .social_box:hover {
+		background: #E4E4E2;
+}
+
+.centeredText {
+		text-align: center;
+		margin: 20px 0;
+		clear: both;
+		overflow: hidden;
+		text-transform: uppercase;
+}
+
+.action_btns {
+		clear: both;
+		overflow: hidden;
+}
+
+.action_btns a {
+		display: block;
+}
+/* User Login Form */
+
+.user_login {
+		display: none;
+}
+
+.user_login label {
+		display: block;
+		margin-bottom: 5px;
+}
+
+.user_login input[type="text"],
+.user_login input[type="email"],
+.user_login input[type="password"] {
+		display: block;
+		width: 90%;
+		padding: 10px;
+		border: 1px solid #DDD;
+		color: #666;
+}
+
+.user_login input[type="checkbox"] {
+		float: left;
+		margin-right: 5px;
+}
+
+.user_login input[type="checkbox"]+label {
+		float: left;
+}
+
+.user_login .checkbox {
+		margin-bottom: 10px;
+		clear: both;
+		overflow: hidden;
+}
+
+.forgot_password {
+		display: block;
+		margin: 20px 0 10px;
+		clear: both;
+		overflow: hidden;
+		text-decoration: none;
+		color: #ED6347;
+}
+/* User Register Form */
+
+.user_register {
+		display: none;
+}
+
+.user_register label {
+		display: block;
+		margin-bottom: 5px;
+}
+
+.user_register input[type="text"],
+.user_register input[type="email"],
+.user_register input[type="password"] {
+		display: block;
+		width: 90%;
+		padding: 10px;
+		border: 1px solid #DDD;
+		color: #666;
+}
+
+.user_register input[type="checkbox"] {
+		float: left;
+		margin-right: 5px;
+}
+
+.user_register input[type="checkbox"]+label {
+		float: left;
+}
+
+.user_register .checkbox {
+		margin-bottom: 10px;
+		clear: both;
+		overflow: hidden;
+}
diff --git a/page_welcome/data/db.sql b/page_welcome/data/db.sql
new file mode 100644
index 0000000..7aff994
--- /dev/null
+++ b/page_welcome/data/db.sql
@@ -0,0 +1,6 @@
+CREATE TABLE users (
+id INT(6) AUTO_INCREMENT PRIMARY KEY,
+username VARCHAR(30) NOT NULL,
+email VARCHAR(50),
+password VARCHAR(50) NOT NULL
+)
diff --git a/page_welcome/index.php b/page_welcome/index.php
index 1da595e..f1c0909 100644
--- a/page_welcome/index.php
+++ b/page_welcome/index.php
@@ -1,6 +1,6 @@
 <?php
 require_once('../API_Twitter/requestsFunctions.php');
-
+session_start();
 ?>
 
 <script>
@@ -28,7 +28,7 @@ require_once('../API_Twitter/requestsFunctions.php');
             }
         };
         xhttp.open("GET", "../API_Twitter/userSuggestions.php?w="+keyword, true);
-        xhttp.send(); 
+        xhttp.send();
     }
 </script>
 
@@ -71,6 +71,11 @@ require_once('../API_Twitter/requestsFunctions.php');
 	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=latin-ext"
 	    rel="stylesheet">
 	<!-- //Web-Fonts -->
+  <link rel="stylesheet" href="css/log.css">
+
+  <script src="js/jquery-2.2.3.min.js"></script>
+  <script src="https://andwecode.com/wp-content/uploads/2015/10/jquery.leanModal.min_.js"></script>
+
 
 </head>
 
@@ -79,11 +84,11 @@ require_once('../API_Twitter/requestsFunctions.php');
 	<header>
 		<nav class="navbar navbar-expand-lg navbar-light py-4">
 			<div class="container">
-				<h1>
-					<a class="navbar-brand" href="index.html">
+				<h1 style="margin: auto">
+					<a class="navbar-brand" href="index.php">
 						<!-- <i class="fas fa-utensils"></i> -->
 						<img width="50" height="50" src="images/ll.png" alt="logo">
-						&nbsp;Know Your Influencer 
+						&nbsp;Know Your Influencer
 					</a>
 				</h1>
 				<button class="navbar-toggler ml-md-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
@@ -95,7 +100,7 @@ require_once('../API_Twitter/requestsFunctions.php');
 
 					<ul class="navbar-nav mx-auto text-center">
 						<li class="nav-item active">
-							<a class="nav-link" href="index.html">Home
+							<a class="nav-link" href="index.php">Home
 								<span class="sr-only">(current)</span>
 							</a>
 						</li>
@@ -106,10 +111,12 @@ require_once('../API_Twitter/requestsFunctions.php');
 					<div class="forms-w3ls-agilesm text-center mt-lg-0 mt-4">
 						<ul>
 							<li class="login-list-w3ls d-inline border-right pr-3 mr-3">
-								<a href="#" class="text-white" data-toggle="modal" data-target="#exampleModalCenter1">Login</a>
-							</li>
-							<li class="login-list-w3ls d-inline">
-								<a href="#" class="text-white" data-toggle="modal" data-target="#exampleModalCenter2">Register</a>
+                <?php if (!$_SESSION['username'])
+                        echo '<a id="modal_trigger" href="#modal" class="text-white">Login | Register</a>';
+                      else {
+                        echo '<span style="color: #fff; letter-spacing: 2px; font-size: 15px; padding: 0.5em 0; font-family: "Source Sans Pro", sans-serif">'.$_SESSION['username'] .' | <a href="logout.php" style="color: #fff; letter-spacing: 2px; font-size: 15px; padding: 0.5em 0; font-family: "Source Sans Pro", sans-serif">Log out</a></span>';
+                      }
+                 ?>
 							</li>
 						</ul>
 					</div>
@@ -117,82 +124,104 @@ require_once('../API_Twitter/requestsFunctions.php');
 			</div>
 		</nav>
 	</header>
-	<!-- login -->
-	<div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-hidden="true">
-		<div class="modal-dialog modal-dialog-centered" role="document">
-			<div class="modal-content">
-				<div class="modal-header text-center">
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-					<div class="login px-sm-4 mx-auto mw-100">
-						<h5 class="text-center mb-4">Login Now</h5>
-						<form action="#" method="post">
-							<div class="form-group">
-								<label>Your Name</label>
-								<input type="text" class="form-control" name="name" placeholder="" required="">
-							</div>
-							<div class="form-group">
-								<label class="mb-2">Password</label>
-								<input type="password" class="form-control" name="password" placeholder="" required="">
-							</div>
-							<button type="submit" class="btn btn-primary submit mb-4">Login</button>
-							<p class="text-center pb-4">
-								<a href="#">Forgot your password?</a>
-							</p>
-							<p class="text-center pb-4 create-w3ls">
-								Don't have an account?
-								<a href="#" data-toggle="modal" data-target="#exampleModalCenter2">Create one now</a>
-							</p>
-						</form>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- //login -->
-	<!-- register -->
-	<div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-hidden="true">
-		<div class="modal-dialog modal-dialog-centered" role="document">
-			<div class="modal-content">
-				<div class="modal-header text-center">
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-					<div class="login px-sm-4 mx-auto mw-100">
-						<h5 class="text-center mb-4">Register Now</h5>
-						<form action="#" method="post">
-							<div class="form-group">
-								<label>Your Name</label>
-								<input type="text" class="form-control" name="name" placeholder="" required="">
-							</div>
-							<div class="form-group">
-								<label>Email</label>
-								<input type="email" class="form-control" name="email" placeholder="" required="">
-							</div>
-							<div class="form-group">
-								<label class="mb-2">Password</label>
-								<input type="password" class="form-control" name="password" id="password1" placeholder="" required="">
-							</div>
-							<div class="form-group">
-								<label>Confirm Password</label>
-								<input type="password" class="form-control" name="password" id="password2" placeholder="" required="">
-							</div>
-							<button type="submit" class="btn btn-primary submit mb-4">Register</button>
-						
-						</form>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- //register -->
 	<!-- //header -->
+  <div id="modal" class="popupContainer" style="display:none;">
+      <header class="popupHeader">
+          <span class="header_title">Login</span>
+          <span class="modal_close"><i class="fa fa-times"></i></span>
+      </header>
+
+      <section class="popupBody">
+          <!-- Social Login -->
+          <div class="social_login">
+              <!-- <div class="">
+                  <a href="#" class="social_box fb">
+                      <span class="icon"><i class="fa fa-facebook"></i></span>
+                      <span class="icon_title">Connect with Facebook</span>
+
+                  </a>
 
+                  <a href="#" class="social_box google">
+                      <span class="icon"><i class="fa fa-google-plus"></i></span>
+                      <span class="icon_title">Connect with Google</span>
+                  </a>
+              </div>
+
+              <div class="centeredText">
+                  <span>Or use your Email address</span>
+              </div> -->
+
+              <div class="action_btns">
+                  <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
+                  <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
+              </div>
+          </div>
+
+          <!-- Username & Password Login form -->
+          <div class="user_login">
+              <form action="login.php" method="post">
+                  <label>Username</label>
+                  <input type="text" name="username"/>
+                  <br />
+
+                  <label>Password</label>
+                  <input type="password" name="password"/>
+                  <br />
+
+                  <!-- <div class="checkbox">
+                      <input id="remember" type="checkbox" />
+                      <label for="remember">Remember me on this computer</label>
+                  </div> -->
+
+                  <div class="action_btns">
+                      <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
+                      <div class="one_half last"><input type="submit" class="btn btn_red" name="login" value="Login" style="border:none"/></div>
+                  </div>
+              </form>
+
+              <a href="#" class="forgot_password">Forgot password?</a>
+          </div>
+
+          <!-- Register Form -->
+          <div class="user_register">
+              <form action="register.php" method="post">
+                  <!-- <label>First name</label>
+                  <input type="text" name="firstname" />
+                  <br />
+
+                  <label>Last name</label>
+                  <input type="text" name="lastname"/>
+                  <br /> -->
+
+                  <label>User name</label>
+                  <input type="text" name="username"/>
+                  <br />
+
+                  <label>Email Address</label>
+                  <input type="email" name="email"/>
+                  <br />
+
+                  <label>Password</label>
+                  <input type="password" name="password1"/>
+                  <br />
+
+                  <label>Confirm password</label>
+                  <input type="password" name="password2"/>
+                  <br />
+
+                  <!-- <label>Birthday</label>
+                  <input type="date" name="birthday"/>
+                  <br/>
+                  <br/> -->
+
+                  <div class="action_btns">
+                      <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
+                      <div class="one_half last"><input type="submit" class="btn btn_red" name="register" value="Register" style="border:none"/></div>
+                  </div>
+              </form>
+          </div>
+      </section>
+    </div>
 	<!-- banner -->
 	<div class="callbacks_container">
 		<ul class="rslides" id="slider3">
@@ -205,7 +234,7 @@ require_once('../API_Twitter/requestsFunctions.php');
 							</h3>
 							<div class="search-agile">
 								<form action="../page_profile/profil.php" method="post">
-							
+
 									<input id="searchField" list="usernames" name="username" type="text" size="40" maxlength="100" autocomplete="off" placeholder="Search here..." onkeyup="showSuggestions()">
 						            <datalist id="usernames">
 						            </datalist>
@@ -214,13 +243,13 @@ require_once('../API_Twitter/requestsFunctions.php');
 									<div style="display: inline-flex;">
 									    <input class="img" type="radio" id="radio_1" name="radio[]" value="1" />
 									    <label for="radio_1"><img src="images/ins.png" width="50" height="50"/></label>
-									
+
 									    <input class="img" type="radio" id="radio_2" name="radio[]" value="2" />
 									    <label for="radio_2"><img src="images/aaa.jpeg" width="50" height="50"/></label>
-									
+
 									    <input class="img" type="radio" id="radio_3" name="radio[]" value="3" />
 									    <label for="radio_3"><img src="images/twitter.png" width="50" height="50"/></label>
-									
+
 									    <input class="img" type="radio" id="radio_4" name="radio[]" value="4" />
 									    <label for="radio_4"><img src="images/facebook.png" width="50" height="50"/></label>
 									</div>
@@ -231,7 +260,7 @@ require_once('../API_Twitter/requestsFunctions.php');
 					</div>
 				</div>
 			</li>
-			
+
 		</ul>
 	</div>
 	<!-- //banner -->
@@ -242,14 +271,14 @@ require_once('../API_Twitter/requestsFunctions.php');
 			<h3 class="title text-center text-dark mb-sm-5 mb-4">
 				<br><br>
 				<span>influence de la semaine</span> </h3>
-			
+
 		</div>
 	</div>
 	<!-- //semaine -->
 
 	<!-- Js files -->
 	<!-- JavaScript -->
-	<script src="js/jquery-2.2.3.min.js"></script>
+
 	<!-- Default-JavaScript-File -->
 
 	<!-- banner slider -->
@@ -295,6 +324,8 @@ require_once('../API_Twitter/requestsFunctions.php');
 	</script>
 	<!-- //password-script -->
 
+  <script src="js/login.js"></script>
+
 	<!-- gallery light box -->
 	<script src="js/smoothbox.jquery2.js"></script>
 	<!-- //gallery light box -->
@@ -316,4 +347,4 @@ require_once('../API_Twitter/requestsFunctions.php');
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/page_welcome/js/login.js b/page_welcome/js/login.js
new file mode 100644
index 0000000..b8fe1ea
--- /dev/null
+++ b/page_welcome/js/login.js
@@ -0,0 +1,28 @@
+$("#modal_trigger").leanModal({
+  top: 100,
+  overlay: 0.6,
+  closeButton: ".modal_close"
+});
+
+$(function() {
+  $("#login_form").click(function() {
+      $(".social_login").hide();
+      $(".user_login").show();
+      return false;
+  });
+
+  $("#register_form").click(function() {
+      $(".social_login").hide();
+      $(".user_register").show();
+      $(".header_title").text('Register');
+      return false;
+  });
+
+  $(".back_btn").click(function() {
+      $(".user_login").hide();
+      $(".user_register").hide();
+      $(".social_login").show();
+      $(".header_title").text('Login');
+      return false;
+  });
+});
diff --git a/page_welcome/login.php b/page_welcome/login.php
new file mode 100644
index 0000000..e30de99
--- /dev/null
+++ b/page_welcome/login.php
@@ -0,0 +1,47 @@
+<?php
+session_start();
+
+// initializing variables
+$username = "";
+$errors = array();
+
+// connect to the database
+$db = mysqli_connect('localhost', 'root', 'root', 'data');
+
+if (mysqli_connect_errno()) {
+  printf("Echec de la connexion: %s\n", mysqli_connect_error());
+  exit();
+}
+// REGISTER USER
+if (isset($_POST['login'])) {
+  // receive all input values from the form
+  $username = $_POST['username'];
+  $password = $_POST['password'];
+
+  // form validation: ensure that the form is correctly filled ...
+  // by adding (array_push()) corresponding error unto $errors array
+  if (empty($username)) { array_push($errors, "Username is required"); }
+  if (empty($password)) { array_push($errors, "Password is required"); }
+}
+
+$pwd = md5($password);
+// first check the database to make sure
+// a user does not already exist with the same username and/or email
+$user_check_query = "SELECT * FROM users WHERE username='$username' AND password='$pwd' LIMIT 1";
+$result = mysqli_query($db, $user_check_query);
+$user = mysqli_fetch_assoc($result);
+
+if ($user && count($errors) == 0) { // if user exists
+  $_SESSION['username'] = $username;
+	$_SESSION['success'] = "You are now logged in";
+  header('location: index.php');
+}
+// if user doesn't exist
+elseif (!$user){
+  echo count($errors);
+  echo "Wrong username or/and password";
+}
+else{
+  echo $errors[0];
+}
+?>
diff --git a/page_welcome/logout.php b/page_welcome/logout.php
new file mode 100644
index 0000000..d2b9c13
--- /dev/null
+++ b/page_welcome/logout.php
@@ -0,0 +1,5 @@
+<?php
+session_start();
+$_SESSION['username'] = "";
+header('location: index.php');
+ ?>
diff --git a/page_welcome/register.php b/page_welcome/register.php
new file mode 100644
index 0000000..7daac08
--- /dev/null
+++ b/page_welcome/register.php
@@ -0,0 +1,61 @@
+<?php
+session_start();
+
+// initializing variables
+$username = "";
+$email    = "";
+$errors = array();
+
+// connect to the database
+$db = mysqli_connect('localhost', 'root', 'root', 'data');
+
+if (mysqli_connect_errno()) {
+  printf("Echec de la connexion: %s\n", mysqli_connect_error());
+  exit();
+}
+// REGISTER USER
+if (isset($_POST['register'])) {
+  // receive all input values from the form
+  $username = $_POST['username'];
+  $email = $_POST['email'];
+  $password_1 = $_POST['password1'];
+  $password_2 = $_POST['password2'];
+
+  // form validation: ensure that the form is correctly filled ...
+  // by adding (array_push()) corresponding error unto $errors array
+  if (empty($username)) { array_push($errors, "Username is required"); }
+  if (empty($email)) { array_push($errors, "Email is required"); }
+  if (empty($password_1)) { array_push($errors, "Password is required"); }
+  if ($password_1 != $password_2) {
+	array_push($errors, "The two passwords do not match");
+  }
+
+  // first check the database to make sure
+  // a user does not already exist with the same username and/or email
+  $user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
+  $result = mysqli_query($db, $user_check_query);
+  $user = mysqli_fetch_assoc($result);
+
+  if ($user) { // if user exists
+    if ($user['username'] === $username) {
+      array_push($errors, "Username already exists");
+    }
+
+    if ($user['email'] === $email) {
+      array_push($errors, "email already exists");
+    }
+  }
+  // Finally, register user if there are no errors in the form
+  if (count($errors) == 0) {
+
+  	$password = md5($password_1);//encrypt the password before saving in the database
+
+  	$query = "INSERT INTO users (username, email, password)
+  			  VALUES('$username', '$email', '$password')";
+  	mysqli_query($db, $query);
+  	$_SESSION['username'] = $username;
+  	$_SESSION['success'] = "You are now logged in";
+  	header('location: index.php');
+  }
+}
+?>
-- 
GitLab