0
I have tried to do over two weeks in javascript and Html5, a registration and login form. After several unsuccessful attempts, I’ve come to ask for your help in solving this headache :(
Here’s the code I’ve already developed:
<script>
document.write(outstate(isative()));
</script>
<form>
<input type="email" id="user" onblur="verlogin()" required>
<input type="password" id="pass" onblur="verlogin()" required>
<span id="mess"></span>
<button type="submit" disabled id="login" onclick="login();">LOGIN</button>
</form>
<input type="email" id="usermail" onblur="veruser();ch();" required>
<span id="veruser"></span>
<button style="text-decoration: none!important;display: none;" id="uservalue" value="0"></button>
<input type="password" id="password" onblur="verpass();ch();" required>
<input type="password" id="confirmpassword" onblur="verpass();ch();" required>
<span id="verpass"></span>
<button style="text-decoration: none!important;display: none;" id="passvalue" value="0"></button>
<input type="text" id="morada" required>
<input type="number" maxlength="9" id="nif" required>
<button type="submit" id="registar" onclick="registar();">REGISTAR</button>
</body>
In Javascript a friend of mine helped me develop this, but it doesn’t work correctly:
function() {
var User = function User(mail, password, morada, nif) {
this.mail = mail;
this.password = password;
this.morada = morada;
this.nif = nif;
}
User.prototype = {
login: function () {
return this.mail + " " + this.password;
},
allData: function () {
return this.mail + " " + this.password + " " + this.morada + " " + this.nif;
}
};
var armazenamento = [];
function registar() {
var usermail = document.getElementById('email').value;
var userpassword = document.getElementById('password').value;
var usermorada = document.getElementById('morada').value;
var usernif = document.getElementById('nif').value;
localStorage.setItem(usermail,userpassword + '|'+usermorada);
sessionStorage.setItem(usermail,'ativo');
var obj = new User(usermail, userpassword, usermorada, usernif);
armazenamento.push(obj);
};
function visualizacao() {
var text = " ", saida = 0 ;
for (var i = 0; i<armazenamento.length ; i++){
text += armazenamento[i].allData();
text += "<br>";
}
saida= document.getElementById ("saida");
saida.innerHTML = text;
};
window.onload = function (){
var btnregisto = document.getElementById ("registo");
btn1.addEventListener("click",registar);
var btnver = document.getElementById ("visualizar");
btn2.addEventListener("click",visualizacao);
}
})();
Second Javascript code I have:
window.onload=function(){
if(sessionStorage.length==0){
var key='';
for(var i=0;i<localStorage.length;i++){
key = localStorage.key(i);
sessionStorage.setItem(key,'');
}
}
}
function verlogin(){
var nome=document.getElementById('user').value;
var pass=document.getElementById('pass').value;
document.getElementById('mess').innerHTML = '';
var key='';
var val='';
if(localStorage.length!=0){
for(var i=0;i<localStorage.length;i++){
key = localStorage.key(i);
val = localStorage.getItem(key);
if(nome!='' || pass!=''){
if(nome==key){
if(val.substr(0, val.indexOf('|'))==pass) {
document.getElementById('mess').style.color='green';
document.getElementById('mess').innerHTML = 'Válido';
document.getElementById("login").disabled = false;
}else{
document.getElementById("login").disabled = true;
document.getElementById('mess').style.color='red';
document.getElementById('mess').innerHTML = 'Utilizador ou Palavra Pass Errados';
}
}else{
document.getElementById("login").disabled = true;
document.getElementById('mess').style.color='red';
document.getElementById('mess').innerHTML = 'Utilizador ou Palavra Pass Errados';
}
}else{
document.getElementById('mess').innerHTML = '';
}
}
}else{
document.getElementById("login").disabled = true;
document.getElementById('mess').style.color='red';
document.getElementById('mess').innerHTML = 'crie uma conta';
}
}
function login(){
var nome=document.getElementById('user').value;
sessionStorage.setItem(nome,'ativo');
window.location.href='login.html';
}
function veruser(){
var nome=document.getElementById('usermail').value;
document.getElementById('uservalue').value = 0;
var key='';
if(localStorage.length!=0) {
for (var i = 0; i < localStorage.length; i++) {
key = localStorage.key(i);
if (nome != '') {
if (nome == key) {
document.getElementById('uservalue').value = 0;
document.getElementById('veruser').style.color = 'red';
document.getElementById('veruser').innerHTML = 'Utilizador Utilizado';
} else {
document.getElementById('uservalue').value = 1;
document.getElementById('veruser').style.color = 'green';
document.getElementById('veruser').innerHTML = 'Válido';
}
} else {
document.getElementById('veruser').innerHTML = '';
}
}
}else{
document.getElementById('uservalue').value = 1;
document.getElementById('veruser').style.color = 'green';
document.getElementById('veruser').innerHTML = 'Válido';
}
}
function ch(){
var verp = document.getElementById('passvalue').value;
var veru = document.getElementById('uservalue').value;
document.getElementById("login").disabled = true;
if(verp==1 && veru==1){
document.getElementById("registar").disabled = false;
}else{
document.getElementById("login").disabled = true;
}
}
function verpass(){
var pass1=document.getElementById('password').value;
var pass2=document.getElementById('confirmpassword').value;
document.getElementById('passvalue').value = 0;
if(pass1!='' || pass2!=''){
if(pass1!=pass2){
document.getElementById('passvalue').value = 0;
document.getElementById('verpass').style.color='red';
document.getElementById('verpass').innerHTML = 'Password não Corresponde';
}else{
document.getElementById('passvalue').value = 1;
document.getElementById('verpass').style.color='green';
document.getElementById('verpass').innerHTML = 'Válido';
}
}else{
document.getElementById('veruser').innerHTML = '';
}
}
function registar(){
var verp = document.getElementById('passvalue').value;
var veru = document.getElementById('uservalue').value;
var user=document.getElementById('usermail').value;
var pass=document.getElementById('password').value;
var mor=document.getElementById('morada').value;
var nif=document.getElementById('nif').value;
if(verp=='1' && veru=='1'){
localStorage.setItem(user,pass + '|'+mor);
sessionStorage.setItem(user,'ativo');
window.location.href='login.html';
}else{
alert('ERRO');
}
}
function logout(){
var key='';
var val='';
for(var i=0;i<sessionStorage.length;i++){
key = sessionStorage.key(i);
val = sessionStorage.getItem(key);
if(val=='ativo'){
sessionStorage.setItem(key,'');
window.location.href='login.html';
}
}
}
function isative(){
var key='';
var val='';
var user='';
for(var i=0;i<sessionStorage.length;i++){
key = sessionStorage.key(i);
val = sessionStorage.getItem(key);
if(val=='ativo'){
user = key;
}else{
user=0;
}
}
return user;
}
function outstate(ative){
var content='';
if(ative!=0){
alert(ative);
content+= '<h6>O utilizador ' + ative+' esta online<h6>';
content +='<button type="submit" onclick="logout();">LOGOUT</button>'
}else{
content +='<h6>NAO ESTA CONNECTADO<h6>';
}
return content
}
You didn’t mention where the problem is, is in the validation of some field, in the generation of some part of the page, errors occur? What initial code you developed?
– Fábio Jânio
Hello, Paulo. I suggest you edit your question and provide more information about your problem or questions. What have you tried to do? How do you want to do it? At what point are you encountering difficulties? Also add codes, if available..
– Aline
@Fábio I put the code I have in the question :)
– Jokerby
@Aline I put the code in the question :)
– Jokerby
@Paulosolipa, what is going on with this code and what would you like to happen? I saw some problems in it, like the assignments of click and getelementbyid events in ids that don’t exist. But what do you expect?
– Aline
This was a code that a friend of mine made to see if it worked. I had another code yet but it’s too long. The goal is to log in, detect if the user is registered and if this is not the case you will need to register and log in. Storing the data in Sesssion and Aline location. I will also post the other code but it has the same problem.
– Jokerby
@Aline I could not format the code better. That’s why I put it like this. :/
– Jokerby