<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>3WEB-Pictionarry</title>
		<link rel="stylesheet" href="/css/style1.css" />
		<style>
			body{background-image:url('/pictures/bg3.jpg'); background-repeat:repeat;}
		</style>
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
    </head>

    <body>  
		<nav>
			<%- include nav.ejs %>
		</nav>
		<div class="corp">
			
			<div id="labelInfo" style="display:none;text-align:center;margin-top:20px; padding:10px 10px 10px 10px;" >RIEN</div>
			<!-- formulaire de d'inscription -->
			<section id="sectionRegister" class="inscription">
			 
			<h2 style="text-align:left; padding-left:10px; " >Register <a href="#" id="changeFormReg"  Onclick="changeForm(this.id)" > Already Registered? </a> </h2>
			  <form  role="form" onsubmit="return sendRegister()" action="#" id="formRegister">
				<input class="caseForm" type="text" name="name_register" size="30"  placeholder="Username" required /></br>
				<input class="caseForm" type="password" name="passwd_register" size="30"placeholder="Password" required /></br>
				<input  class="caseForm" type="password" name="passwd_confirm_register" size="30" placeholder="Confirmation" onkeyUp="checkPass(this.value)" required /></br>
				<select name="langage_register" required><option  value="french">Français</option><option value="english">English</option></select>							
				<input class="butForm" type="button" Onclick="userRegister()" name="validate_register" value="Valider"  ></br>
			   
			   
				 </form>
			</section>

			<!-- formulaire de login -->
			<section id="sectionLogin" class="connexion" style="display:none;">

			<h2  style="text-align:left; padding-left:10px;" >Login <a href="#" id="changeFormLog"  Onclick="changeForm(this.id)" > Not Registered yet? </a> </h2>
			<form id="form2" role="form" onsubmit="return sendLogin()" action="#">
			<input class="caseForm" type="text" name="name_login" size="30" placeholder="Username" /></br>
			<input class="caseForm" type="password" name="passwd_login" size="30" placeholder="Password" /></br>
			<input class="butForm" type="button" Onclick="sendLogin()" name="validate_login" value="Valider" />
			</form>
			</section>
			
			<div id="about" style="display:none;" >
				<h2> Welcome Aboard ! </h2>
				<p>This site is a WebDevellopment project</p>
				<p>develloped by Maxime Girou, Asc3 Student at Supinfo</p>
				<p> It's a Pictionarry like.</p>
				<p>This is a beta-project, so there are many bugs </p>
				<p> and i apologize for that ! </p>
				<button onclick="about(2);">X</button>
			</div>
			<button onclick="about(1);" style="position:absolute;left :45%;top:80%;border-radius:5px;">About</button>
		</div>
		
    </body>
	
	<script>
	
	
		function about(a)
		{
			if(a==1){ document.getElementById('about').style.display="block";}
			if(a==2){ document.getElementById('about').style.display="none";}
		}
	
	
		// On se connecte au serveur
		var socket = io.connect();
			
			
		function changeForm(idSection)
		{
			var loginForm=document.getElementById('sectionLogin');
			var registerForm=document.getElementById('sectionRegister');
			
			if(idSection=="changeFormLog")
			{
				loginForm.style.display="none";
				registerForm.style.display="inline";
			}
			if(idSection=="changeFormReg")
			{
				registerForm.style.display="none";
				loginForm.style.display="inline";
			}
		
		}
			
		function checkPass(pass)
		{
			var password = document.getElementsByName('passwd_register');
			var passwordVerif=document.getElementsByName('passwd_confirm_register');
			
			if(pass!= password[0].value) passwordVerif[0].style.border="2px solid red";
			if(pass== password[0].value) passwordVerif[0].style.border="2px solid green";
			
		}
		
		socket.on('register', function(data)
		{

			if (data.validation == 1)
			{
				var label=document.getElementById('labelInfo');
				label.style.display="block";
				label.innerHTML=data.message;
				label.style.backgroundColor="#b1ffb1";
				label.style.borderRadius="7px";
				label.style.border="2px solid green";
				//on affiche le formulaire de login
				document.getElementById('sectionRegister').style.display="none";
				document.getElementById('sectionLogin').style.display="inline";

			}
			else if (data.validation == 0)
			{ 
				var label=document.getElementById('labelInfo');
				label.style.display="block";
				label.innerHTML=data.message;
				label.style.backgroundColor="#ffa5a9";
				label.style.borderRadius="7px";
				label.style.border="2px solid red";
			}
					
		});


			
		function userRegister()
		{	
			var username = document.getElementsByName('name_register')[0].value;
			var password = document.getElementsByName('passwd_register')[0].value;
			var passwordConfirm = document.getElementsByName('passwd_confirm_register')[0].value;
			var language = document.getElementsByName('langage_register')[0].value;
			
			//var passwordHash = require('password-hash');
			//var passwdHash = passwordHash.generate(password);
					
			//on envoie la demande de register au serveur
			socket.emit("register", { username : username, password : password, language : language, confirm:passwordConfirm});
			 document.getElementsByName('passwd_confirm_register')[0].value='';
			 document.getElementsByName('name_register')[0].value='';
			 document.getElementsByName('passwd_register')[0].value='';
			
		}
			
		//quand on envoie la login
		 function sendLogin() 
		{
			var username = document.getElementsByName("name_login")[0].value;
			var password = document.getElementsByName("passwd_login")[0].value;
			//on envoi la demande de login au serv
			socket.emit("login", { username : username, password : password});
			document.getElementsByName("name_login")[0].value = "";
			document.getElementsByName("passwd_login")[0].value = "";
			return false;
        }
		
		function goLogin(message, pseudo)
		{
			 alert(message);

                    var sName = pseudo;
                    //enregistrement du cookie
                    writeCookie('sessionName', sName, 3);

                    // redirection, simule un clique sur un lien
                    window.location.href = "/myprofile";
		}
		
		//quand on recoit la réponse du login
		socket.on('login', function(data) 
		{

			if (data.validation == 1) 
			{
				goLogin(data.message,data.username);  
			}
			else
			{ 
			   var label=document.getElementById('labelInfo');
				label.style.display="block";
				label.innerHTML=data.message;
				label.style.backgroundColor="#ffa5a9";
				label.style.borderRadius="7px";
				label.style.border="2px solid red";
			}
		});
		
		
		 function writeCookie(name,value,days) 
		{
			var date, expires;
			if (days) {
				date = new Date();
				date.setTime(date.getTime()+(days*24*60*60*1000));
				expires = "; expires=" + date.toGMTString();
					}else{
				expires = "";
			}
			document.cookie = name + "=" + value + expires + "; path=/";
		}

		function readCookie(name) 
		{
			var i, c, ca, nameEQ = name + "=";
			ca = document.cookie.split(';');
			for(i=0;i < ca.length;i++) {
				c = ca[i];
				while (c.charAt(0)==' ') {
					c = c.substring(1,c.length);
				}
				if (c.indexOf(nameEQ) == 0) {
					return c.substring(nameEQ.length,c.length);
				}
			}
			return '';
		}
		
	</script>
	
</html>


