Merge branch 'master' into lars-algemeen
This commit is contained in:
Lars van Hijfte
5
website/public/index.php
Normal file
5
website/public/index.php
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="refresh" content="0; url=login.php" />
|
||||||
|
</head>
|
||||||
|
</html>
|
||||||
@@ -1,217 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<?php
|
||||||
<link rel="stylesheet"
|
include("../views/login_head.php");
|
||||||
type="text/css"
|
?>
|
||||||
href="styles/index.css">
|
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
||||||
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
|
|
||||||
<script src="js/dobPicker.min.js"></script>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>MyHyvesbook+</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<?php
|
||||||
<img style="width:50%;margin-left:25%"
|
/*
|
||||||
src="img/top-logo.png"
|
* This view adds login view
|
||||||
alt="MyHyvesbook+">
|
*/
|
||||||
</div>
|
include("../views/login-view.php");
|
||||||
|
?>
|
||||||
<form action="profile.php"
|
|
||||||
method="post">
|
|
||||||
<h1>Welkom bij MyHyvesbook+</h1>
|
|
||||||
|
|
||||||
<div class="login_containerlogin">
|
|
||||||
<label><b>Gebruikersnaam</b></label>
|
|
||||||
<input type="text"
|
|
||||||
placeholder="Voer uw gebruikersnaam in"
|
|
||||||
name="uname"
|
|
||||||
pattern=".{6,}"
|
|
||||||
title="Moet 6 of meer karakters bevatten"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerlogin">
|
|
||||||
<label><b>Wachtwoord</b></label>
|
|
||||||
<input type="password"
|
|
||||||
placeholder="Voer uw wachtwoord in"
|
|
||||||
name="psw"
|
|
||||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
|
||||||
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerlogin">
|
|
||||||
<input type="submit"
|
|
||||||
value="Login"
|
|
||||||
name="Submit"
|
|
||||||
id="frm1_submit" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="login_containerlogin">
|
|
||||||
<button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<div id="id01" class="modal">
|
|
||||||
<span onclick="document.getElementById('id01').style.display='none'"
|
|
||||||
class="close"
|
|
||||||
title="Close Modal">
|
|
||||||
×</span>
|
|
||||||
|
|
||||||
<!-- Register Content -->
|
|
||||||
<form class="modal-content animate"
|
|
||||||
action="../profile.php"
|
|
||||||
onsubmit="return passwordfunction()"
|
|
||||||
method="post">
|
|
||||||
<h2>Registreer uw account</h2>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Naam</b></label>
|
|
||||||
<input type="text"
|
|
||||||
placeholder="Voer uw naam in"
|
|
||||||
name="name"
|
|
||||||
pattern="[A-Za-z]{1,}"
|
|
||||||
title="Mag alleen letters bevatten"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Achternaam</b></label>
|
|
||||||
<input type="text"
|
|
||||||
placeholder="Voer uw achternaam in"
|
|
||||||
name="surname"
|
|
||||||
pattern="[A-Za-z]{1,}"
|
|
||||||
title="Mag alleen letters bevatten"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Geboortedatum</b></label>
|
|
||||||
<!-- These are the select elements we will target -->
|
|
||||||
<select id="dobday"
|
|
||||||
title="Voer een dag in"
|
|
||||||
required></select>
|
|
||||||
<select id="dobmonth"
|
|
||||||
title="Voer een maand in"
|
|
||||||
required></select>
|
|
||||||
<select id="dobyear"
|
|
||||||
title="Voer een jaar in"
|
|
||||||
required></select>
|
|
||||||
<!-- And here's the library being called! -->
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
$.dobPicker({
|
|
||||||
daySelector: '#dobday',
|
|
||||||
monthSelector: '#dobmonth',
|
|
||||||
yearSelector: '#dobyear',
|
|
||||||
dayDefault: 'Dag',
|
|
||||||
monthDefault: 'Maand',
|
|
||||||
yearDefault: 'Jaar',
|
|
||||||
minimumAge: 12,
|
|
||||||
maximumAge: 80
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Gebruikersnaam</b></label>
|
|
||||||
<input type="text"
|
|
||||||
placeholder="Voer uw gebruikersnaam in"
|
|
||||||
name="username"
|
|
||||||
pattern=".{6,}"
|
|
||||||
title="Moet minstens 6 karakters bevatten"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Wachtwoord</b></label>
|
|
||||||
<input type="password"
|
|
||||||
placeholder="Voer uw wachtwoord in"
|
|
||||||
name="password"
|
|
||||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
|
||||||
id="password"
|
|
||||||
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Herhaal wachtwoord</b></label>
|
|
||||||
<input type="password"
|
|
||||||
placeholder="Herhaal wachtwoord"
|
|
||||||
name="confirmpassword"
|
|
||||||
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
|
||||||
id="confirmpassword"
|
|
||||||
title="Herhaal wachtwoord"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Straatnaam</b></label>
|
|
||||||
<input type="text"
|
|
||||||
placeholder="Voer uw straatnaam in"
|
|
||||||
name="name"
|
|
||||||
pattern="[A-Za-z]{1,}"
|
|
||||||
title="Mag alleen letters bevatten"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Straatnummer</b></label>
|
|
||||||
<input type="text"
|
|
||||||
placeholder="Voer uw straatnummer in"
|
|
||||||
name="name"
|
|
||||||
pattern="[1-9][0-9]{0,}"
|
|
||||||
title="Mag alleen nummers bevatten"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<label><b>Email</b></label>
|
|
||||||
<input type="email"
|
|
||||||
placeholder="Voer uw email in"
|
|
||||||
id="email"
|
|
||||||
title="Voer een geldige email in"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_containerregister">
|
|
||||||
<input type="submit"
|
|
||||||
value="Registreer uw account"
|
|
||||||
name="Submit"
|
|
||||||
id="frm1_submit" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<script>
|
|
||||||
// Get the modal
|
|
||||||
var modal = document.getElementById('id01');
|
|
||||||
// When the user clicks anywhere outside of the modal, close it
|
|
||||||
window.onclick = function(event) {
|
|
||||||
if (event.target == modal) {
|
|
||||||
modal.style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function passwordfunction() {
|
|
||||||
var password1 = document.getElementById("password").value;
|
|
||||||
var password2 = document.getElementById("confirmpassword").value;
|
|
||||||
var passwordmatching = true;
|
|
||||||
|
|
||||||
if (password1 != password2) {
|
|
||||||
document.getElementById("password").style.borderColor = "red";
|
|
||||||
document.getElementById("confirmpassword").style.borderColor = "red";
|
|
||||||
passwordmatching = false;
|
|
||||||
confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
|
|
||||||
}
|
|
||||||
return passwordmatching;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -1,3 +1,47 @@
|
|||||||
|
::selection {
|
||||||
|
background: #845663;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background: #845663;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:link, a:visited, a:hover, a:active {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
|
||||||
|
div[data-title]:hover:after{
|
||||||
|
content: attr(data-title);
|
||||||
|
padding: 4px 4px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 20;
|
||||||
|
white-space: nowrap;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
-moz-box-shadow: 0px 0px 4px #222;
|
||||||
|
-webkit-box-shadow: 0px 0px 4px #222;
|
||||||
|
box-shadow: 0px 0px 4px #222;
|
||||||
|
background-color: #333;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: normal;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add Zoom Animation */
|
||||||
|
.animate {
|
||||||
|
animation: animatezoom 0.6s
|
||||||
|
-webkit-animation: animatezoom 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
/* Body */
|
/* Body */
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -8,6 +52,39 @@ body {
|
|||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* stijl voor alle buttons */
|
||||||
|
button {
|
||||||
|
background-color: #845663;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius: 12px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 50%;
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 14px 20px;
|
||||||
|
width: 25%;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The Close Button */
|
||||||
|
.close {
|
||||||
|
/* Position it in the top right corner outside of the modal */
|
||||||
|
color: white;
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Close button on hover */
|
||||||
|
.close:hover,
|
||||||
|
.close:focus {
|
||||||
|
color: red;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* inlogform */
|
/* inlogform */
|
||||||
form {
|
form {
|
||||||
background-color: #a87a87;
|
background-color: #a87a87;
|
||||||
@@ -32,66 +109,37 @@ h2 {
|
|||||||
font-size: 2.0em;
|
font-size: 2.0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=text], input[type=password], input[type=email], input[type="date"] {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 5px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
height: 50%;
|
||||||
|
padding: 12px 20px;
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 50%;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=submit] {
|
||||||
|
background-color: #845663;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius: 12px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 50%;
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 14px 20px;
|
||||||
|
width: 50%;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* datepicker */
|
|
||||||
select {
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 5px solid #ccc;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
height: 50%;
|
|
||||||
padding: 12px 20px;
|
|
||||||
margin: 8px 0;
|
|
||||||
width: 15%;
|
|
||||||
font-family: Arial;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=text], input[type=password], input[type=email] {
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 5px solid #ccc;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
height: 50%;
|
|
||||||
padding: 12px 20px;
|
|
||||||
margin: 8px 0;
|
|
||||||
width: 50%;
|
|
||||||
font-family: Arial;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=submit]{
|
|
||||||
background-color: #845663;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 12px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 50%;
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 14px 20px;
|
|
||||||
width: 50%;
|
|
||||||
font-family: Arial;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* stijl voor alle buttons */
|
|
||||||
button {
|
|
||||||
background-color: #845663;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 12px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 50%;
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 14px 20px;
|
|
||||||
width: 25%;
|
|
||||||
font-family: Arial;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* padding voor registreer container */
|
/* padding voor registreer container */
|
||||||
.login_containerregister {
|
.login_containerregister {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
@@ -130,28 +178,23 @@ button {
|
|||||||
height: 80%;
|
height: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The Close Button */
|
@keyframes animatezoom {
|
||||||
.close {
|
from {transform: scale(0)}
|
||||||
/* Position it in the top right corner outside of the modal */
|
to {transform: scale(1)}
|
||||||
color: white;
|
|
||||||
font-size: 100px;
|
|
||||||
font-weight: bold;
|
|
||||||
position: absolute;
|
|
||||||
right: 25px;
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Close button on hover */
|
/* datepicker */
|
||||||
.close:hover,
|
select {
|
||||||
.close:focus {
|
border-radius: 12px;
|
||||||
color: red;
|
border: 5px solid #ccc;
|
||||||
cursor: pointer;
|
box-sizing: border-box;
|
||||||
}
|
display: inline-block;
|
||||||
|
height: 50%;
|
||||||
/* Add Zoom Animation */
|
padding: 12px 20px;
|
||||||
.animate {
|
margin: 8px 0;
|
||||||
animation: animatezoom 0.6s
|
width: 18%;
|
||||||
-webkit-animation: animatezoom 0.6s;
|
font-family: Arial;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes animatezoom {
|
@-webkit-keyframes animatezoom {
|
||||||
@@ -159,45 +202,7 @@ button {
|
|||||||
to {-webkit-transform: scale(1)}
|
to {-webkit-transform: scale(1)}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes animatezoom {
|
ul {
|
||||||
from {transform: scale(0)}
|
font-family: Arial;
|
||||||
to {transform: scale(1)}
|
font-size: 16px;
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: #845663;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background: #845663;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:link, a:visited, a:hover, a:active {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
|
|
||||||
div[data-title]:hover:after{
|
|
||||||
content: attr(data-title);
|
|
||||||
padding: 4px 4px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 100%;
|
|
||||||
z-index: 20;
|
|
||||||
white-space: nowrap;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
-moz-box-shadow: 0px 0px 4px #222;
|
|
||||||
-webkit-box-shadow: 0px 0px 4px #222;
|
|
||||||
box-shadow: 0px 0px 4px #222;
|
|
||||||
background-color: #333;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: normal;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|||||||
256
website/views/login-view.php
Normal file
256
website/views/login-view.php
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
<?php
|
||||||
|
// define variables and set to empty values
|
||||||
|
$name = $surname = $bday = $username = $password = $confirmpassword = $streetname = $housenumber = $email = "";
|
||||||
|
$passwordErr = $confirmpasswordErr = "";
|
||||||
|
$correct = true;
|
||||||
|
|
||||||
|
if (isset($_POST["name"])) {
|
||||||
|
$name = $_POST["name"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_POST["surname"])) {
|
||||||
|
$surname = $_POST["surname"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_POST["bday"])) {
|
||||||
|
$bday = $_POST["bday"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_POST["username"])) {
|
||||||
|
$username = $_POST["username"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_POST["password"])) {
|
||||||
|
$password = $_POST["password"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_POST["streetname"])) {
|
||||||
|
$streetname = $_POST["streetname"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_POST["housenumber"])) {
|
||||||
|
$housenumber = $_POST["housenumber"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_POST["email"])) {
|
||||||
|
$email = $_POST["email"];
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
|
if ($_POST["password"]!= $_POST["confirmpassword"]) {
|
||||||
|
$passwordErr = "Wachtwoorden matchen niet";
|
||||||
|
$confirmpasswordErr = "Wachtwoorden matchen niet";
|
||||||
|
$correct = false;
|
||||||
|
?>
|
||||||
|
<script>window.onload = function() {
|
||||||
|
document.getElementById('id01').style.display='block'
|
||||||
|
}</script>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<div>
|
||||||
|
<img style="width:50%;margin-left:25%"
|
||||||
|
src="img/top-logo.png"
|
||||||
|
alt="MyHyvesbook+">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="../profile.php"
|
||||||
|
method="post">
|
||||||
|
<h1>Welkom bij MyHyvesbook+</h1>
|
||||||
|
|
||||||
|
<div class="login_containerlogin">
|
||||||
|
<label><b>Gebruikersnaam</b></label>
|
||||||
|
<input type="text"
|
||||||
|
placeholder="Voer uw gebruikersnaam in"
|
||||||
|
name="uname"
|
||||||
|
pattern=".{6,}"
|
||||||
|
title="Moet 6 of meer karakters bevatten"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerlogin">
|
||||||
|
<label><b>Wachtwoord</b></label>
|
||||||
|
<input type="password"
|
||||||
|
placeholder="Voer uw wachtwoord in"
|
||||||
|
name="psw"
|
||||||
|
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
||||||
|
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerlogin">
|
||||||
|
<input type="submit"
|
||||||
|
value="Login"
|
||||||
|
name="Submit"
|
||||||
|
id="frm1_submit" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="login_containerlogin">
|
||||||
|
<button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<div id="id01" class="modal">
|
||||||
|
<span onclick="document.getElementById('id01').style.display='none'"
|
||||||
|
class="close"
|
||||||
|
title="Close Modal">
|
||||||
|
×</span>
|
||||||
|
|
||||||
|
<!-- Register Content -->
|
||||||
|
<form class="modal-content animate"
|
||||||
|
action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
|
||||||
|
return= $correct
|
||||||
|
method="post">
|
||||||
|
<h2>Registreer uw account</h2>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Naam</b></label>
|
||||||
|
<input type="text"
|
||||||
|
placeholder="Voer uw naam in"
|
||||||
|
name="name"
|
||||||
|
value="<?php echo $name ?>"
|
||||||
|
pattern="[A-Za-z]{1,}"
|
||||||
|
title="Mag alleen letters bevatten"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Achternaam</b></label>
|
||||||
|
<input type="text"
|
||||||
|
placeholder="Voer uw achternaam in"
|
||||||
|
name="surname"
|
||||||
|
value="<?php echo $surname ?>"
|
||||||
|
pattern="[A-Za-z]{1,}"
|
||||||
|
title="Mag alleen letters bevatten"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Geboortedatum</b></label>
|
||||||
|
<input type="date"
|
||||||
|
name="bday"
|
||||||
|
value="<?php echo $bday ?>"
|
||||||
|
id="bday"
|
||||||
|
placeholder="01/01/1900">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Gebruikersnaam</b></label>
|
||||||
|
<input type="text"
|
||||||
|
placeholder="Voer uw gebruikersnaam in"
|
||||||
|
name="username"
|
||||||
|
value="<?php echo $username ?>"
|
||||||
|
pattern=".{6,}"
|
||||||
|
title="Moet minstens 6 karakters bevatten"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Minstens 6 karakters</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Wachtwoord</b></label>
|
||||||
|
<input type="password"
|
||||||
|
placeholder="Voer uw wachtwoord in"
|
||||||
|
name="password"
|
||||||
|
value="<?php echo $password ?>"
|
||||||
|
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
||||||
|
id="password"
|
||||||
|
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
|
||||||
|
required>
|
||||||
|
<span class="error">* <?php echo $passwordErr;?></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Minstens 8 karakters</li>
|
||||||
|
<li>Minimaal 1 cijfer</li>
|
||||||
|
<li>Minimaal 1 hoofdletter</li>
|
||||||
|
<li>Minimaal 1 kleine letter</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Herhaal wachtwoord</b></label>
|
||||||
|
<input type="password"
|
||||||
|
placeholder="Herhaal wachtwoord"
|
||||||
|
name="confirmpassword"
|
||||||
|
value="<?php echo $confirmpassword ?>"
|
||||||
|
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
|
||||||
|
id="confirmpassword"
|
||||||
|
title="Herhaal wachtwoord"
|
||||||
|
required>
|
||||||
|
<span class="error">* <?php echo $confirmpasswordErr;?></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Straatnaam</b></label>
|
||||||
|
<input type="text"
|
||||||
|
placeholder="Voer uw straatnaam in"
|
||||||
|
name="streetname"
|
||||||
|
value="<?php echo $streetname ?>"
|
||||||
|
pattern="[A-Za-z]{1,}"
|
||||||
|
title="Mag alleen letters bevatten"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Huisnummer</b></label>
|
||||||
|
<input type="text"
|
||||||
|
placeholder="Voer uw straatnummer in"
|
||||||
|
name="housenumber"
|
||||||
|
value="<?php echo $housenumber ?>"
|
||||||
|
pattern="[1-9][0-9]{0,}"
|
||||||
|
title="Mag alleen nummers bevatten"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<label><b>Email</b></label>
|
||||||
|
<input type="email"
|
||||||
|
placeholder="Voer uw email in"
|
||||||
|
name="email"
|
||||||
|
value="<?php echo $email ?>"
|
||||||
|
id="email"
|
||||||
|
title="Voer een geldige email in"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_containerregister">
|
||||||
|
<input type="submit"
|
||||||
|
value="Registreer uw account"
|
||||||
|
name="Submit"
|
||||||
|
id="frm1_submit" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Get the modal
|
||||||
|
var modal = document.getElementById('id01');
|
||||||
|
// When the user clicks anywhere outside of the modal, close it
|
||||||
|
window.onclick = function(event) {
|
||||||
|
if (event.target == modal) {
|
||||||
|
modal.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function passwordfunction() {
|
||||||
|
var password1 = document.getElementById("password").value;
|
||||||
|
var password2 = document.getElementById("confirmpassword").value;
|
||||||
|
var passwordmatching = false;
|
||||||
|
|
||||||
|
if (password1 == password2) {
|
||||||
|
document.getElementById("password").style.borderColor = "red";
|
||||||
|
document.getElementById("confirmpassword").style.borderColor = "red";
|
||||||
|
confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
|
||||||
|
} else {
|
||||||
|
passwordmatching = true;
|
||||||
|
}
|
||||||
|
return passwordmatching;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
10
website/views/login_head.php
Normal file
10
website/views/login_head.php
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>MyHyvesbook+</title>
|
||||||
|
<link rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
href="styles/index.css">
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||||
|
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
|
||||||
|
<script src="js/dobPicker.min.js"></script>
|
||||||
|
</head>
|
||||||
Reference in New Issue
Block a user