doing convert to views and add login page

This commit is contained in:
adri 2019-01-02 18:00:16 +01:00
parent 2f1cd4273e
commit 227827b913
17 changed files with 601 additions and 101 deletions

5
composer.json Executable file
View File

@ -0,0 +1,5 @@
{
"require": {
"twig/twig": "^2.0"
}
}

202
composer.lock generated Executable file
View File

@ -0,0 +1,202 @@
{
"_readme": [
"This file locks the dependencies of your project to a known state",
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "843b04df5fdfe76251025001d66e0fd2",
"packages": [
{
"name": "symfony/polyfill-ctype",
"version": "v1.10.0",
"source": {
"type": "git",
"url": "https://github.com/symfony/polyfill-ctype.git",
"reference": "e3d826245268269cd66f8326bd8bc066687b4a19"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/e3d826245268269cd66f8326bd8bc066687b4a19",
"reference": "e3d826245268269cd66f8326bd8bc066687b4a19",
"shasum": ""
},
"require": {
"php": ">=5.3.3"
},
"suggest": {
"ext-ctype": "For best performance"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "1.9-dev"
}
},
"autoload": {
"psr-4": {
"Symfony\\Polyfill\\Ctype\\": ""
},
"files": [
"bootstrap.php"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
},
{
"name": "Gert de Pagter",
"email": "BackEndTea@gmail.com"
}
],
"description": "Symfony polyfill for ctype functions",
"homepage": "https://symfony.com",
"keywords": [
"compatibility",
"ctype",
"polyfill",
"portable"
],
"time": "2018-08-06T14:22:27+00:00"
},
{
"name": "symfony/polyfill-mbstring",
"version": "v1.10.0",
"source": {
"type": "git",
"url": "https://github.com/symfony/polyfill-mbstring.git",
"reference": "c79c051f5b3a46be09205c73b80b346e4153e494"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/c79c051f5b3a46be09205c73b80b346e4153e494",
"reference": "c79c051f5b3a46be09205c73b80b346e4153e494",
"shasum": ""
},
"require": {
"php": ">=5.3.3"
},
"suggest": {
"ext-mbstring": "For best performance"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "1.9-dev"
}
},
"autoload": {
"psr-4": {
"Symfony\\Polyfill\\Mbstring\\": ""
},
"files": [
"bootstrap.php"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "p@tchwork.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Symfony polyfill for the Mbstring extension",
"homepage": "https://symfony.com",
"keywords": [
"compatibility",
"mbstring",
"polyfill",
"portable",
"shim"
],
"time": "2018-09-21T13:07:52+00:00"
},
{
"name": "twig/twig",
"version": "v2.6.0",
"source": {
"type": "git",
"url": "https://github.com/twigphp/Twig.git",
"reference": "a11dd39f5b6589e14f0ff3b36675d06047c589b1"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/Twig/zipball/a11dd39f5b6589e14f0ff3b36675d06047c589b1",
"reference": "a11dd39f5b6589e14f0ff3b36675d06047c589b1",
"shasum": ""
},
"require": {
"php": "^7.0",
"symfony/polyfill-ctype": "^1.8",
"symfony/polyfill-mbstring": "^1.3"
},
"require-dev": {
"psr/container": "^1.0",
"symfony/debug": "^2.7",
"symfony/phpunit-bridge": "^3.4.19|^4.1.8"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "2.6-dev"
}
},
"autoload": {
"psr-0": {
"Twig_": "lib/"
},
"psr-4": {
"Twig\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"BSD-3-Clause"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com",
"homepage": "http://fabien.potencier.org",
"role": "Lead Developer"
},
{
"name": "Armin Ronacher",
"email": "armin.ronacher@active-4.com",
"role": "Project Founder"
},
{
"name": "Twig Team",
"homepage": "https://twig.symfony.com/contributors",
"role": "Contributors"
}
],
"description": "Twig, the flexible, fast, and secure template language for PHP",
"homepage": "https://twig.symfony.com",
"keywords": [
"templating"
],
"time": "2018-12-16T10:36:48+00:00"
}
],
"packages-dev": [],
"aliases": [],
"minimum-stability": "stable",
"stability-flags": [],
"prefer-stable": false,
"prefer-lowest": false,
"platform": [],
"platform-dev": []
}

0
config.php Normal file → Executable file
View File

33
control/login.php Executable file
View File

@ -0,0 +1,33 @@
<?php
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
$template = $twig->load('login.html.twig');
echo $template->render(array());
if(isset($_POST["login"], $_POST["pw"]))
{
try {
$config = include(SITE_ROOT.'config.php');
$bdd = new PDO('mysql:host='.$config['host'].';dbname='.$config['dbName'].';charset=utf8', $config['username'], $config['pw']);
} catch (Exception $e) {
die('Erreur : '.$e->getMessage());
}
$req = $bdd->prepare('SELECT * FROM projetphp WHERE login = ? AND mot_de_passe = ?');
$req->exexute(array(htmlspecialchars($_POST["login"]),md5($_POST["pw"])));
if($req->rowCount() > 0)
{
$data = $req->fetch();
$_SESSION["login"] = $data["login"];
$_SESSION["sl"] = $data["security_level"];
echo json_encode((object)array("login"=>true));
}
else
echo json_encode((object)array("login"=>false));
}
?>

20
control/table.php Executable file
View File

@ -0,0 +1,20 @@
<?php
$template = $twig->load('table.html.twig');
try {
$config = include('config.php');
$bdd = new PDO('mysql:host='.$config['host'].';dbname='.$config['dbName'].';charset=utf8', $config['username'], $config['pw']);
} catch (Exception $e) {
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT * FROM projetphp');
$datas;
for($i=0;$data = $reponse->fetch();$i++) {
$datas[$i] = $data;
}
$reponse->closeCursor();
echo $template->render(array('datas' => $datas));
?>

101
css/login.css Executable file
View File

@ -0,0 +1,101 @@
/*https://codepen.io/colorlib/pen/rxddKy*/
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, #8DC26F);
background: -moz-linear-gradient(right, #76b852, #8DC26F);
background: -o-linear-gradient(right, #76b852, #8DC26F);
background: linear-gradient(to left, #76b852, #8DC26F);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

0
function.php Normal file → Executable file
View File

118
index.php
View File

@ -1,97 +1,35 @@
<?php
try {
$config = include('config.php');
$bdd = new PDO('mysql:host='.$config['host'].';dbname='.$config['dbName'].';charset=utf8', $config['username'], $config['pw']);
} catch (Exception $e) {
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT * FROM projetphp');
?>
define('SITE_ROOT', dirname(__FILE__));
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
<html>
session_start();
<head>
require_once SITE_ROOT.'/vendor/autoload.php';
<meta charset="utf-8">
<title></title>
<!-- somme features-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha256-KsRuvuRtUVvobe66OFtOQfjP8WA2SzYsmm4VPfMnxms=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--My features-->
<link rel="stylesheet" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="script.js?<?php echo date('l jS \of F Y h:i:s A'); ?>"></script>
</head>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<body>
<table id="allRecord">
<thead>
<tr>
<th>login</th>
<th>Date de nésance</th>
<th>email</th>
<th>PW</th>
<th>slvl</th>
<th><i class="fas fa-cogs"></i></th>
</tr>
</thead>
<tbody>
<?php
while ($data = $reponse->fetch()) {
?>
<tr class="record">
<td class="login">
<?= ($data["login"]) ?>
</td>
<td class="datene">
<?= ($data["date_naissance"]) ?>
</td>
<td class="email">
<?= ($data["e_mail"]) ?>
</td>
<td class="pw">
<?= ($data["mot_de_passe"]) ?>
</td>
<td class="sl">
<?= ($data["security_level"]) ?>
</td>
<td><i class="fas fa-edit click editUser"></i><i class="fas fa-trash-alt click delUser"></i></td>
</tr>
<?php
}
$reponse->closeCursor();
?>
<tr rowspan="2">
<td colspan="6" style="text-align:center"><i class="fas fa-user-plus fa-4x click"></i></td>
</tr>
</tbody>
</table>
</body>
<script>
//https://www.w3schools.com/howto/howto_js_filter_table.asp
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("allRecord");
tr = table.getElementsByTagName("tr");
$loader = new Twig_Loader_Filesystem( SITE_ROOT.'/views');
$twig = new Twig_Environment($loader, array(
'cache' => /*SITE_ROOT.'/twig/compilation_cache'*/false,
));
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
if(isset($_GET["page"]))
{
switch ($_GET["page"]) {
case 'table':
include './control/table.php';
break;
case 'login':
include './control/login.php';
break;
default:
include './control/table.php';
break;
}
}
</script>
</html>
else {
include './control/table.php';
}
?>

40
login.html Normal file
View File

@ -0,0 +1,40 @@
<!--/*https://codepen.io/colorlib/pen/rxddKy*/-->
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha256-KsRuvuRtUVvobe66OFtOQfjP8WA2SzYsmm4VPfMnxms=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="./css/login.css" />
<!--My features-->
<link rel="stylesheet" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="script.js?<?php echo date('l jS \of F Y h:i:s A'); ?>"></script>
<script type="text/javascript">
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});</script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<button>Enter withouth login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
</body>
</html>

10
post.php Normal file → Executable file
View File

@ -31,8 +31,8 @@ elseif (isset($_POST["userExist"])) {
}
//INSERT INTO `projetphp` (`login`, `date_naissance`, `e_mail`, `mot_de_passe`, `security_level`) VALUES ('blipblop', '2019-01-09', 'aaaaa@aaa.cc', MD5('sdfqsdfsfd'), '5');
elseif (isset($_POST["newUser"],$_POST["datene"], $_POST["email"], $_POST["pw"], $_POST["sl"]) && $_POST["newUser"] == "true") {
if(preg_match($loginPatern, $_POST["login"]) && preg_match($emailPatern, $_POST[email]) && preg_match($pwPatern, $_POST["pw"]))
elseif (isset($_POST["newUser"],$_POST["datene"], $_POST["email"], $_POST["pw"]) && $_POST["newUser"] == "true") {
if(preg_match($loginPatern, $_POST["login"]) && preg_match($emailPatern, $_POST["email"]) && preg_match($pwPatern, $_POST["pw"]))
{
if(userExist($_POST["login"]))
{
@ -40,6 +40,7 @@ elseif (isset($_POST["newUser"],$_POST["datene"], $_POST["email"], $_POST["pw"],
}
else
{
$sl = isset($_POST["sl"])?$_POST["sl"]:"1";
$ret["pw"] = md5(htmlspecialchars($_POST["pw"], ENT_QUOTES, 'UTF-8'));
$req = $bdd->prepare('INSERT INTO `projetphp` (`login`, `date_naissance`, `e_mail`, `mot_de_passe`, `security_level`) VALUES (:login, :datene, :email, :pw, :slvl)');
$req->execute(array(
@ -47,7 +48,7 @@ elseif (isset($_POST["newUser"],$_POST["datene"], $_POST["email"], $_POST["pw"],
'datene' => htmlspecialchars($_POST["datene"], ENT_QUOTES, 'UTF-8'),
'email' => (htmlspecialchars($_POST["email"], ENT_QUOTES, 'UTF-8')),
'pw' => $ret["pw"],
'slvl' => htmlspecialchars($_POST["sl"], ENT_QUOTES, 'UTF-8'),
'slvl' => htmlspecialchars($sl, ENT_QUOTES, 'UTF-8'),
));
$req->closeCursor();
$ret["return"] = true;
@ -60,7 +61,8 @@ elseif (isset($_POST["newUser"],$_POST["datene"], $_POST["email"], $_POST["pw"],
}
//UPDATE `projetphp` SET `security_level` = '6' WHERE `projetphp`.`login` = 'aaazzze';
else if (isset($_POST["newUser"], $_POST["updatePW"], $_POST["datene"], $_POST["email"], $_POST["pw"], $_POST["sl"], $_POST["login"]) && $_POST["newUser"] == "false") {
else if (isset($_POST["newUser"], $_POST["updatePW"], $_POST["datene"], $_POST["email"], $_POST["pw"], $_POST["sl"], $_POST["login"])
&& $_POST["newUser"] == "false" && (isset($_SESSION["login"]) && $_SESSION["login"] == $_POST["login"] || isset($_SESSION["sl"]) && $_SESSION["sl"] == "10")){
if (preg_match($emailPatern, $_POST["email"])) {
if (htmlspecialchars($_POST["updatePW"], ENT_QUOTES, 'UTF-8') == "true" && preg_match($pwPatern, $_POST["pw"])) {
$req = $bdd->prepare('UPDATE `projetphp` SET `date_naissance` = :datene, `e_mail` = :email, `mot_de_passe` = :pw, `security_level` = :sl WHERE `projetphp`.`login` = :login');

12
script.js Normal file → Executable file
View File

@ -26,7 +26,7 @@ $(function() {
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~INPUT EVENT~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$("#allRecord").on("keyup change", ".pw input", function() {
$("body").on("keyup change", ".pw input", function() {
if (passwordPatern.test($(this).val()) || $(this).val() == "") {
$(this).css("background-color", "");
$('div', $(this).parent()).css("display", "none");
@ -35,7 +35,7 @@ $(function() {
$('div', $(this).parent()).css("display", "block");
}
});
$("#allRecord").on("keyup change", ".email input", function() {
$("body").on("keyup change", ".email input", function() {
if (mailPatern.test($(this).val())) {
$(this).css("background-color", "");
$('div', $(this).parent()).css("display", "none");
@ -44,7 +44,7 @@ $(function() {
$('div', $(this).parent()).css("display", "block");
}
});
$("#allRecord").on("keyup change", ".datene :input", function(e) {
$("body").on("keyup change", ".datene :input", function(e) {
console.log(e.target.value);
if (datePatern.test($(this).val())) {
$(this).css("background-color", "");
@ -54,7 +54,8 @@ $(function() {
$('div', $(this).parent()).css("display", "block");
}
});
$("#allRecord").on("keyup change", ".login :input", function(e) {
$("body").on("keyup change", ".login input, input .login", function(e) {
console.log("hoo");
login = ltrim($(this).val());
input = $(this);
td = $(this).parent();
@ -182,7 +183,7 @@ $(function() {
$.post("post.php", dataToSend, function(data) {
try {
if (data.return == true) {
for (i = (dataToSend["newUser"] ?0:1); i < tds.length - 1; i++) //On change les input en pure html
for (i = (dataToSend["newUser"]?0:1); i < tds.length - 1; i++) //On change les input en pure html
{
j = $(tds[i]);
className = j.attr('class');
@ -200,7 +201,6 @@ $(function() {
} catch (e) {
swal("Oops", "Something went wrong!<br>" + e, "error");
}
console.log(data.return)
}, "json");
}
var dataToSend = new Object(); //Objet contenant les données à envoyé

2
style.css Normal file → Executable file
View File

@ -2,7 +2,7 @@
{
cursor: pointer;
}
.pw div, .login div{
.pw div, .login div, .infoRules{
display:none;
-moz-border-radius:6px;

35
test.php Normal file
View File

@ -0,0 +1,35 @@
<?php
define('SITE_ROOT', dirname(__FILE__));
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();
require_once SITE_ROOT.'/vendor/autoload.php';
$loader = new Twig_Loader_Filesystem( SITE_ROOT.'/views');
$twig = new Twig_Environment($loader, array(
'cache' => /*SITE_ROOT.'/twig/compilation_cache'*/false,
));
if(isset($_GET["page"]))
{
switch ($_GET["page"]) {
case 'table':
include './control/table.php';
break;
case 'login':
include './control/login.php';
break;
default:
include './control/table.php';
break;
}
}
else {
include './control/table.php';
}
?>

0
views/footer.html.twig Executable file
View File

14
views/header.html.twig Executable file
View File

@ -0,0 +1,14 @@
<meta charset="utf-8">
<title></title>
<!-- somme features-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha256-KsRuvuRtUVvobe66OFtOQfjP8WA2SzYsmm4VPfMnxms=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--My features-->
<link rel="stylesheet" href="style.css?{{ date().timestamp }}">
<script src="script.js?{{ date().timestamp }}"></script>

40
views/login.html.twig Executable file
View File

@ -0,0 +1,40 @@
<!--/*https://codepen.io/colorlib/pen/rxddKy*/-->
<html>
<head>
{% include 'header.html.twig' %}
<link rel="stylesheet" href="./css/login.css?{{ date().timestamp }}" />
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<div class="login">
<div for="login"class="userExist infoRules">L'utilisateur existe déja !</div>
<div for="login" class="ruleExcept infoRules">le login comporte entre 8 et 16 caractères parmi a..z</div>
<input type="text" name="login" placeholder="name"/>
</div>
<div class="datene"><input type="date" name="datene" placeholder="date de naisance"/></div>
<div class="email"><input type="text" name="email" placeholder="email address"/></div>
<div class="pw">
<div for"pw" class="infoRules">le mot de passe comporte entre 8 et 16 caractères parmi a..z A..Z 0..9</div>
<input type="password" name="pw" placeholder="password"/></div>
<div class="pw"><input type="pw2" name="password2" placeholder="password"/></div>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<button>Enter withouth login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
<script type="text/javascript">
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});</script>
</body>
</html>

70
views/table.html.twig Executable file
View File

@ -0,0 +1,70 @@
<html>
<head>
{% include 'header.html.twig' %}
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="allRecord">
<thead>
<tr>
<th>login</th>
<th>Date de nésance</th>
<th>email</th>
<th>PW</th>
<th>slvl</th>
<th><i class="fas fa-cogs"></i></th>
</tr>
</thead>
<tbody>
{% for data in datas %}
<tr class="record">
<td class="login">
{{ data["login"] }}
</td>
<td class="datene">
{{ data["date_naissance"] }}
</td>
<td class="email">
{{ data["e_mail"] }}
</td>
<td class="pw">
{{ data["mot_de_passe"] }}
</td>
<td class="sl">
{{ data["security_level"] }}
</td>
<td><i class="fas fa-edit click editUser"></i><i class="fas fa-trash-alt click delUser"></i></td>
</tr>
{% endfor %}
<tr rowspan="2">
<td colspan="6" style="text-align:center"><i class="fas fa-user-plus fa-4x click"></i></td>
</tr>
</tbody>
</table>
</body>
<script>
//https://www.w3schools.com/howto/howto_js_filter_table.asp
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("allRecord");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</html>