Notification visuelle de la connection / et lien clair vers la connection

css/menu.css

@@ -20,7 +20,7 @@
 	height: 5em;
 
 	/* background */
-	background: #2dcc70 url(../src/menu/userdata/male.svg) left 1em center no-repeat;
+	background: #28B965 url(../src/menu/userdata/visitor.svg) left 1em center no-repeat;
 	background-size: 3em auto;
 
 	/* foreground */
@@ -30,11 +30,22 @@
 	line-height: 5em;
 
 	/* extra */
-	cursor: default;
+	cursor: pointer;
+
+	/* animation */
+	transition: background-color .2s ease-in-out;
+	-moz-transition: background-color .2s ease-in-out;
+	-webkit-transition: background-color .2s ease-in-out;
+	-ms-transition: background-color .2s ease-in-out;
+	-o-transition: background-color .2s ease-in-out;
 }
 
-#MENU .userdata.M{ background-image: url(../src/menu/userdata/male.svg); }
-#MENU .userdata.F{ background-image: url(../src/menu/userdata/female.svg); }
+
+#MENU .userdata:hover{ background-color: #2dcc70; }
+
+#MENU .userdata.M{ background-image: url(../src/menu/userdata/male.svg);   cursor: default; }
+#MENU .userdata.F{ background-image: url(../src/menu/userdata/female.svg); cursor: default; }
+
 
 
 

index.php

@@ -66,7 +66,12 @@ $notifNotifNum   = 5;
 			
 			<!-- MENU DE LA PAGE -->
 			<nav id='MENU'>
-				<div class='userdata M'>mrd1609a</div>
+				<?php
+					if( $_SESSION['username'] != null ) // si $_SESSION['username'] est défini
+						echo "<div class='userdata M'>".$_SESSION['username']."</div>";
+					else
+						echo "<div class='userdata'>Connection</div>";
+				?>
 				<span data-link='home'    >Accueil   </span>
 				<span data-link='groups'  >Groupes   </span>
 				<span data-link='ue'      >Suivi     </span>

js/actionScript.js

@@ -214,19 +214,18 @@ function initForm(pForm, pHandler){
 		var submitButton = null; // contiendra le bouton d'envoi du formulaire
 
 		for( var i = 0 ; i < pForm.children.length ; i++ )
-			if( pForm.children[i].type == 'button' && pForm.children[i].name == 'submit' ){
+			if( pForm.children[i].type == 'button' ){
 				submitButton = pForm.children[i]; // on définit le bouton
 				break;                            // on sort du for
 			}
 
-
 		// on définit l'évènement de validation du formulaie
 		function submitEvent(){
 
 			var obj = {}         // on créé l'objet qui va être envoyé
 
 			for( var i = 0 ; i < pForm.children.length ; i++ ) // on parcourt les enfants
-				if( pForm.children[i].tagName == 'INPUT' && pForm.children[i].name != 'submit' ) // si c'est un champ et que c'est pas le bouton
+				if( pForm.children[i].tagName == 'INPUT' && pForm.children[i].type != 'button' ) // si c'est un champ et que c'est pas le bouton
 					obj[pForm.children[i].name] = pForm.children[i].value;                       // alors on enregistre le champ dans l'objet
 
 			// on exécute la fonction @pHandler en lui envoyant les arguments
@@ -252,3 +251,21 @@ function initForm(pForm, pHandler){
 
 }
 
+
+
+
+
+initForm( // initialisation du formulaire de connection
+	DOM.AUTH, // formulaire (élément DOM)
+	function(request){ // handler
+		// ajout d'informations à la requête
+		request.level_0 = 'user';
+		request.level_1 = 'authentification';
+
+		API.send(request, function(response){
+			if( response.request == 'success' ){// si connection ok
+				document.location = '';
+			}
+		});
+	}
+);

src/menu/userdata/visitor.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 64 64"
+   height="64px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 64 64"
+   width="64px"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="1445484213_power-button.svg"><metadata
+     id="metadata9"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs7" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="789"
+     inkscape:window-height="480"
+     id="namedview5"
+     showgrid="false"
+     inkscape:zoom="3.6875"
+     inkscape:cx="-0.40677966"
+     inkscape:cy="32"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><path
+     d="M56.826,32C56.826,18.311,45.689,7.174,32,7.174S7.174,18.311,7.174,32S18.311,56.826,32,56.826S56.826,45.689,56.826,32z   M34.437,31.962c0,1.301-1.054,2.356-2.356,2.356c-1.301,0-2.356-1.055-2.356-2.356V19.709c0-1.301,1.055-2.356,2.356-2.356  c1.301,0,2.356,1.054,2.356,2.356V31.962z M48.031,32.041c0,8.839-7.191,16.03-16.031,16.03s-16.031-7.191-16.031-16.03  c0-4.285,1.669-8.313,4.701-11.34c0.46-0.46,1.062-0.689,1.665-0.689s1.207,0.23,1.667,0.691c0.92,0.921,0.919,2.412-0.002,3.332  c-2.139,2.138-3.318,4.981-3.318,8.006c0,6.24,5.077,11.317,11.318,11.317s11.318-5.077,11.318-11.317  c0-3.023-1.176-5.865-3.314-8.003c-0.92-0.921-0.919-2.412,0.001-3.333c0.921-0.921,2.412-0.919,3.333,0.001  C46.364,23.734,48.031,27.76,48.031,32.041z"
+     id="path3"
+     style="fill:#ffffff;fill-opacity:1" /></svg>