Connection ok, reste à faire modifications css (bouton quitter[OPT])

css/layout.css

@@ -128,15 +128,44 @@ body{
 		left: calc( 50% - 250px/2 );
 		width: 250px;
 
+	/* z axis */
+	z-index: 101;
+}
+
+/* style des labels */
+#AUTH label{
 	/* foreground */
 	color: #fff;
 	font-weight: bold;
 	text-transform: uppercase;
 	line-height: 3em;
 	text-shadow: 1px 1px 0 #666;
+}
 
-	/* z axis */
-	z-index: 101;
+/* bouton quitter */
+#AUTH::after{
+	content: 'x';
+	display: block;
+	position: absolute;
+	top: 0;
+	left: calc( 100% - 25px );
+	width: 25px;
+	height: 25px;
+
+	border-radius: 100% / 100%;
+	border: 2px solid #aaa;
+}
+
+
+/* message qui dit que les identifiants sont incorrects */
+#AUTH .errorbox{
+	display: inline-block;
+	width: 100%;
+	height: 2em;
+
+	font-size: .8em;
+	color: #d50c4d;
+	line-height: 1em;
 }
 
 #AUTH_FILTER.active + #AUTH{ display: block; }
@@ -144,7 +173,7 @@ body{
 /* tout les INPUT */
 #AUTH input{
 	/* position */
-	display: block;
+	display: inline-block;
 	position: relative;
 		top: 0;
 		left: 0;
@@ -153,7 +182,7 @@ body{
 	padding: .8em;
 
 	/* border */
-	border-radius: 5px;
+	border-radius: 3px;
 	border: 1px solid #A1A1A1; 
 
 	/* foreground */
@@ -166,6 +195,9 @@ body{
 	-o-transition: .2s ease-in-out;
 }
 
+
+#AUTH input[type=password]{ margin-bottom: 0; }
+
 /* INPUT text/password */
 #AUTH input[type=text]:focus,
 #AUTH input[type=password]:focus{
@@ -189,6 +221,7 @@ body{
 	cursor: pointer;
 }
 
+
 #AUTH input[type=submit]:hover{
 	background-color: #2494de;
 }

css/menu.css

@@ -35,6 +35,8 @@
 	cursor: pointer;
 }
 
+#HEADER a.colored{ background: #6c336d; }
+
 #HEADER #MENU a:nth-child(1):hover,
 #HEADER a:hover{ background-color: #6c336d; }
 #HEADER #MENU a:nth-child(2):hover{ background-color: #6eab2e; }

index.php

@@ -1,15 +1,27 @@
 <?php session_start();
 
-$postAreSet   = isset($_POST['username']) && isset($_POST['password']);                           // variables POST existent
-$postStrings  = $postAreSet && is_string($_POST['username']) && is_string($_POST['password']);    // sont toutes 2 des strings
-$postNotEmpty = $postStrings && strlen($_POST['username']) > 1 && strlen($_POST['password']) > 1; // d'au moins 2 caractères
+$LOGIN_postAreSet   = isset($_POST['username']) && isset($_POST['password']);                           // variables POST existent
+$LOGIN_postStrings  = $LOGIN_postAreSet && is_string($_POST['username']) && is_string($_POST['password']);    // sont toutes 2 des strings
+$LOGIN_postNotEmpty = $LOGIN_postStrings && strlen($_POST['username']) > 1 && strlen($_POST['password']) > 1; // d'au moins 2 caractères
 
-if( $postNotEmpty ){
-	$userlist = file_get_contents('src/userlist.json');
+// $_SESSION['username'] = null;
+
+// si on a soumis le formulaire
+if( $LOGIN_postNotEmpty ){
+	$userlist    = file_get_contents('src/userlist.json');
+	$userlistObj = json_decode($userlist);
+
+	if( $userlistObj != null ){ // si format non corrompu
+
+		if( isset($userlistObj->{$_POST['username']}) ) // si non d'utilisateur connu
+			if( $userlistObj->{$_POST['username']}->password == $_POST['password'] ) // si mot de passe ok
+				$_SESSION['username'] = $_POST['username'];
+	}
 }
 
-	// $_SERVER['HTTP_USER_AGENT']; // dépends du navigateur (version, système X, OS)
-	// $_SERVER['REMOTE_ADDR'];     // ip publique de l'utilisateur
+if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen($_SESSION['username']) > 1) )
+	$_SESSION['username'] = null;
+		
 
 ?>
 
@@ -59,21 +71,37 @@ if( $postNotEmpty ){
 
 			<?php
 				if( isset($_SESSION['username']) && strlen($_SESSION['username']) > 1 )
-					echo '<a>'.$_SESSION['username'].'</a>';
+					echo "<a class='colored'>".$_SESSION['username']."</a>";
 				else
-					echo "<a class='active'>Authentificaiton</a>";
+					echo "<a class='active'>Authentification</a>";
 			?>
 
 		</div>
 
+		<?php 
+			if( $LOGIN_postAreSet && $_SESSION['username'] == null ){ // si on a soumis un formulaire (mais sans succès)
+				echo "<div id='AUTH_FILTER' class='active'></div>";
+				echo "<form id='AUTH' action='' method='POST'>";
+				echo 	"<label>Connection</label>";
+				echo 	"<input type='text' name='username' placeholder='Username' value='".$_POST['username']."'>";		
+				echo 	"<input type='password' name='password' placeholder='Password' value='".$_POST['password']."'>";
+				echo 	"<span class='errorbox'>&nbsp Identifiants incorrects.</span>";
+				echo 	"<input type='submit' value='Connection'>";					
+				echo "</form>";
 
-		<div id='AUTH_FILTER'></div>
-		<form id='AUTH' action='' method='POST'>
-			Connection
-			<input type='text' name='username' placeholder='username'>					
-			<input type='password' name='password' placeholder='password'>					
-			<input type='submit' value='Connection'>					
-		</form>
+			}else{ // si chargement normal de la page
+
+				echo "<div id='AUTH_FILTER'></div>";
+				echo "<form id='AUTH' action='' method='POST'>";
+				echo 	"<label>Connection</label>";
+				echo 	"<input type='text' name='username' placeholder='Username'>";		
+				echo 	"<input type='password' name='password' placeholder='Password'>";	
+				echo 	"<span class='errorbox'>&nbsp</span>";				
+				echo 	"<input type='submit' value='Connection'>";					
+				echo "</form>";
+			}
+		?>
+		
 
 
 
@@ -91,8 +119,4 @@ if( $postNotEmpty ){
 		<script type='text/javascript' src='js/actionScript.js'></script>
 
 	</body>
-</html>
-
-
-
-
+</html>

src/userlist.json

@@ -0,0 +1,32 @@
+{
+	"eleve1": {
+		"permissions": "student",
+		"password"   : "eleve1password"
+	},
+	
+	"eleve2": {
+		"permissions": "student",
+		"password"   : "eleve2password"
+	},
+
+	"prof1": {
+		"permissions": "teacher",
+		"password"   : "prof1password"
+	},
+
+	"prof2": {
+		"permissions": "master",
+		"password"   : "prof2password"
+	},
+
+	"admin1": {
+		"permissions": "admin",
+		"password"   : "admin1password"
+	},
+
+	"admin2": {
+		"permissions": "admin",
+		"password"   : "admin2password"
+	}
+
+}