Merge branch 'joey-testing' into 'master'

Datepicker added

See merge request !23

website/bronvermelding.txt

@@ -0,0 +1 @@
+http://www.jqueryscript.net/time-clock/Minimalist-jQuery-Plugin-For-Birthday-Selector-DOB-Picker.html

website/js/dobPicker.js

@@ -0,0 +1,123 @@
+/**
+ * jQuery DOB Picker
+ * Website: https://github.com/tyea/dobpicker
+ * Version: 1.0
+ * Author: Tom Yeadon
+ * License: BSD 3-Clause
+ */
+
+jQuery.extend({
+
+	dobPicker: function(params) {
+
+		// set the defaults		
+		if (typeof(params.dayDefault)==='undefined') params.dayDefault = 'Day';
+		if (typeof(params.monthDefault)==='undefined') params.monthDefault = 'Month';
+		if (typeof(params.yearDefault)==='undefined') params.yearDefault = 'Year';
+		if (typeof(params.minimumAge)==='undefined') params.minimumAge = 12;
+		if (typeof(params.maximumAge)==='undefined') params.maximumAge = 80;
+
+		// set the default messages		
+		$(params.daySelector).append('<option value="">' + params.dayDefault + '</option>');
+		$(params.monthSelector).append('<option value="">' + params.monthDefault + '</option>');
+		$(params.yearSelector).append('<option value="">' + params.yearDefault + '</option>');
+
+		// populate the day select
+		for (i = 1; i <= 31; i++) {
+			if (i <= 9) {
+				var val = '0' + i;
+			} else {
+				var val = i;
+			}
+			$(params.daySelector).append('<option value="' + val + '">' + i + '</option>');
+		}
+
+		// populate the month select		
+		var months = [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		];
+			
+		for (i = 1; i <= 12; i++) {
+			if (i <= 9) {
+				var val = '0' + i;
+			} else {
+				var val = i;
+			}
+			$(params.monthSelector).append('<option value="' + val + '">' + months[i - 1] + '</option>');
+		}
+
+		// populate the year select
+		var date = new Date();
+		var year = date.getFullYear();
+		var start = year - params.minimumAge;
+		var count = start - params.maximumAge;
+		
+		for (i = start; i >= count; i--) {
+			$(params.yearSelector).append('<option value="' + i + '">' + i + '</option>');
+		}
+		
+		// do the logic for the day select
+		$(params.daySelector).change(function() {
+			
+			$(params.monthSelector)[0].selectedIndex = 0;
+			$(params.yearSelector)[0].selectedIndex = 0;
+			$(params.yearSelector + ' option').removeAttr('disabled');
+			
+			if ($(params.daySelector).val() >= 1 && $(params.daySelector).val() <= 29) {
+			
+				$(params.monthSelector + ' option').removeAttr('disabled');
+				
+			} else if ($(params.daySelector).val() == 30) {
+			
+				$(params.monthSelector + ' option').removeAttr('disabled');
+				$(params.monthSelector + ' option[value="02"]').attr('disabled', 'disabled');
+				
+			} else if($(params.daySelector).val() == 31) {
+			
+				$(params.monthSelector + ' option').removeAttr('disabled');
+				$(params.monthSelector + ' option[value="02"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="04"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="06"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="09"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="11"]').attr('disabled', 'disabled');
+				
+			}
+			
+		});
+		
+		// do the logic for the month select
+		$(params.monthSelector).change(function() {
+			
+			$(params.yearSelector)[0].selectedIndex = 0;
+			$(params.yearSelector + ' option').removeAttr('disabled');
+			
+			if ($(params.daySelector).val() == 29 && $(params.monthSelector).val() == '02') {
+			
+				$(params.yearSelector + ' option').each(function(index) {
+					if (index !== 0) {
+						var year = $(this).attr('value');
+						var leap = !((year % 4) || (!(year % 100) && (year % 400)));
+						if (leap === false) {
+							$(this).attr('disabled', 'disabled');
+						}
+					}
+				});
+				
+			}
+			
+		});
+		
+	}
+	
+});

website/js/dobPicker.min.js

@@ -0,0 +1 @@
+jQuery.extend({dobPicker:function(a){for("undefined"==typeof a.dayDefault&&(a.dayDefault="Day"),"undefined"==typeof a.monthDefault&&(a.monthDefault="Month"),"undefined"==typeof a.yearDefault&&(a.yearDefault="Year"),"undefined"==typeof a.minimumAge&&(a.minimumAge=12),"undefined"==typeof a.maximumAge&&(a.maximumAge=80),$(a.daySelector).append('<option value="">'+a.dayDefault+"</option>"),$(a.monthSelector).append('<option value="">'+a.monthDefault+"</option>"),$(a.yearSelector).append('<option value="">'+a.yearDefault+"</option>"),i=1;i<=31;i++){if(i<=9)var b="0"+i;else var b=i;$(a.daySelector).append('<option value="'+b+'">'+i+"</option>")}var c=["January","February","March","April","May","June","July","August","September","October","November","December"];for(i=1;i<=12;i++){if(i<=9)var b="0"+i;else var b=i;$(a.monthSelector).append('<option value="'+b+'">'+c[i-1]+"</option>")}var d=new Date,e=d.getFullYear(),f=e-a.minimumAge,g=f-a.maximumAge;for(i=f;i>=g;i--)$(a.yearSelector).append('<option value="'+i+'">'+i+"</option>");$(a.daySelector).change(function(){$(a.monthSelector)[0].selectedIndex=0,$(a.yearSelector)[0].selectedIndex=0,$(a.yearSelector+" option").removeAttr("disabled"),$(a.daySelector).val()>=1&&$(a.daySelector).val()<=29?$(a.monthSelector+" option").removeAttr("disabled"):30==$(a.daySelector).val()?($(a.monthSelector+" option").removeAttr("disabled"),$(a.monthSelector+' option[value="02"]').attr("disabled","disabled")):31==$(a.daySelector).val()&&($(a.monthSelector+" option").removeAttr("disabled"),$(a.monthSelector+' option[value="02"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="04"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="06"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="09"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="11"]').attr("disabled","disabled"))}),$(a.monthSelector).change(function(){$(a.yearSelector)[0].selectedIndex=0,$(a.yearSelector+" option").removeAttr("disabled"),29==$(a.daySelector).val()&&"02"==$(a.monthSelector).val()&&$(a.yearSelector+" option").each(function(a){if(0!==a){var b=$(this).attr("value"),c=!(b%4||!(b%100)&&b%400);c===!1&&$(this).attr("disabled","disabled")}})})}});

website/login.php

@@ -2,6 +2,8 @@
 <html>
   <head>
     <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="js/dobPicker.min.js"></script>
     <meta charset="utf-8">
     <title>MyHyvesbook+</title>
   </head>
@@ -11,30 +13,30 @@
     </div>
 
     <form action="../profile.php/" method="post">
-      <h1>Welkom </h1>
+      <h1>Welkom bij MyHyvesbook+ </h1>
-      <div class="containercenter">
+      <div class="login_containerlogin">
         <label><b>Gebruikersnaam</b></label>
         <input type="text" placeholder="Voer je gebruikersnaam in" name="uname"
         pattern=".{6,}" title="Moet zes of meer karakters zijn" required>
       </div>
 
-      <div class="containercenter">
+      <div class="login_containerlogin">
         <label><b>Wachtwoord</b></label>
         <input type="password" placeholder="Voer je wachtwoord in" name="psw"
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
         title="Moet miniaal 1 cijfer, 1 hoofdletter en kleine letter hebben en minstens 8 of meer karakters zijn" required>
       </div>
 
-      <div class="containercenter">
+      <div class="login_containerlogin">
         <input type="submit" value="Login" name="Submit" id="frm1_submit" />
       </div>
     </form>
 
-    <div class="containercenter">
+    <div class="login_containerlogin">
       <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
     </div>
 
-    <div class="container">
+    <div class="login_containerregister">
       <div id="id01" class="modal">
       <span onclick="document.getElementById('id01').style.display='none'"
       class="close" title="Close Modal">&times;</span>
@@ -43,69 +45,89 @@
         <form class="modal-content animate" action="../profile.php/" onsubmit="return passwordfunction()" method="post">
           <h2>Registreer je account</h2>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Naam</b></label>
             <input type="text" placeholder="Voer je naam in" name="name"
             pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Achternaam</b></label>
             <input type="text" placeholder="Voer je achternaam in" name="surname"
             pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
           </div>
 
-          <div class="container">
+          <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', /* Required */
+        					monthSelector: '#dobmonth', /* Required */
+        					yearSelector: '#dobyear', /* Required */
+        					dayDefault: 'Dag', /* Optional */
+        					monthDefault: 'Maand', /* Optional */
+        					yearDefault: 'Jaar', /* Optional */
+        					minimumAge: 12, /* Optional */
+        					maximumAge: 80 /* Optional */
+        				});
+        			});
+        		</script>
+          </div>
+
+          <div class="login_containerregister">
             <label><b>Gebruikersnaam</b></label>
             <input type="text" placeholder="Voer je gebruikersnaam in" name="username"
             pattern=".{6,}" title="Moet meer dan 6 karakers zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Wachtwoord</b></label>
             <input type="password" placeholder="Voer je wachtwoord in" name="password"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="password"
             title="Moet miniaal 1 cijfer, 1 hoofdletter en kleine letter hebben en minstens 8 of meer karakters zijn" required>
           </div>
 
-          <div class="container">
+          <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="container">
+          <div class="login_containerregister">
             <label><b>Straatnaam</b></label>
             <input type="text" placeholder="Voer jouw straatnaam in" name="name"
             pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Straatnummer</b></label>
             <input type="text" placeholder="Voer jouw straatnummer in" name="name"
             pattern="[1-9][0-9]{0,}" title="Moet alleen nummers zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Email</b></label>
             <input type="email" placeholder="Voer je email in" id="email"
             title="Voer een geldige email in" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
-            <label><b>Herhaal email</b></label>
-            <input type="email" placeholder="Herhaal email" id="confirmemail"
-            title="Herhaal je email" required>
-          </div>
-
-          <div class="container">
             <input type="submit" value="Registreer je account" name="Submit" id="frm1_submit" />
           </div>
         </form>
 
       </div>
     </div>
+    <script>
+    $("#default-settings").birthdayPicker();
+    </script>
   </body>
 </html>
 
@@ -124,22 +146,14 @@ window.onclick = function(event) {
 function passwordfunction() {
     var password1 = document.getElementById("password").value;
     var password2 = document.getElementById("confirmpassword").value;
-    var email1 = document.getElementById("email").value;
+    var passwordmatching = true;
-    var email2 = document.getElementById("confirmemail").value;
-    var matching = true;
 
     if (password1 != password2) {
-        document.getElementById("password").style.borderColor = "red";;
+        document.getElementById("password").style.borderColor = "red";
-        document.getElementById("confirmpassword").style.borderColor = "red";;
+        document.getElementById("confirmpassword").style.borderColor = "red";
-        ok = false;
+        passwordmatching = false;
         confirmpassword.setCustomValidity("Wachwoord match niet")
     }
-    if (email != email2){
+    return passwordmatching;
-        document.getElementById("email").style.borderColor = "red";;
-        document.getElementById("confirmemail").style.borderColor = "red";;
-        ok = false;
-        confirmemail.setCustomValidity("Email match niet")
-    }
-    return matching;
 }
 </script>

website/styles/index.css

@@ -3,31 +3,45 @@ body {
     background-color: #B78996;
 }
 
-/* Bordered form */
+/* inlogform */
 form {
     background-color: #a87a87;
     border: 5px solid #325da3;
     border-radius: 12px;
     height: 50%;
     margin: auto;
-    width: 45%;
+    width: 55%;
 }
 
+/* inlog titel */
 h1 {
     padding: 16px;
     text-align: center;
 }
 
+/* registreer titel*/
 h2 {
     padding: 16px;
     text-align: left;
 }
 
+/* text */
 label {
     display: block;
 }
 
-/* Full-width inputs */
+/* 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%;
+}
+
 input[type=text], input[type=password], input[type=email] {
     border-radius: 12px;
     border: 5px solid #ccc;
@@ -51,7 +65,7 @@ input[type=submit]{
     width: 50%;
 }
 
-/* Set a style for all buttons */
+/* stijl voor alle buttons */
 button {
     background-color: #845663;
     border: 2px solid black;
@@ -64,13 +78,14 @@ button {
     width: 25%;
 }
 
-/* Add padding to containers */
+/* padding voor registreer container */
-.container {
+.login_containerregister {
     padding: 16px;
     text-align: left;
 }
 
-.containercenter {
+/* padding voor login_containers */
+.login_containerlogin {
     padding: 16px;
     text-align: center;
 }
@@ -97,7 +112,8 @@ button {
     border: 5px solid #325da3;
     margin: 5px auto; /* 15% from the top and centered */
     overflow-y: auto;
-    width: 50% /* Could be more or less, depending on screen size */
+    width: 40%; /* Could be more or less, depending on screen size */
+    height: 80%;
 }
 
 /* The Close Button */