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&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"> - Know Your Influencer + 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">×</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">×</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