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

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>