0

Tenho tentado fazer ao longo de duas semanas em javascript e html5, um formulário de registo e de login. Após diversas tentativas sem sucesso, venho pedir a vossa ajuda para resolver esta dor de cabeça :(

Eis o código que já desenvolvi:

<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>

Em JavaScript um amigo meu ajudou-me a desenvolver este, mas não funciona corretamente:

   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);


        }


    })();

Segundo código em JavaScript que tenho:

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
}
7
  • Você não citou onde está o problema, é na validação de algum campo, na geração de alguma parte da página, ocorre erros? Qual o código inicial que você desenvolveu? Commented 9/06/2017 às 11:53
  • Olá, Paulo. Sugiro que edite sua pergunta e forneça mais informações sobre seu problema ou dúvidas. O que você já tentou fazer? Como você quer fazer? Em que momento está encontrando dificuldades? Adicione também os códigos, caso existam..
    – Aline
    Commented 9/06/2017 às 11:53
  • @Fábio Coloquei o código que tenho na pergunta :)
    – Jokerby
    Commented 9/06/2017 às 12:13
  • @Aline Coloquei o código na pergunta :)
    – Jokerby
    Commented 9/06/2017 às 12:13
  • @PauloSolipa, o que está acontecendo com esse código e o que você gostaria que acontecesse? Vi alguns problemas nele, como as atribuições dos eventos de click e getelementbyid em ids que não existem. Mas o que tu espera?
    – Aline
    Commented 9/06/2017 às 12:59

2 Respostas 2

0

Alterei algumas coisas no seu HTML. Removi os onblur, que não entendi pq você estava usando, então, se precisar mesmo, deve adicionar de volta. E também a ID do email estava errada, de acordo com o que voce tentava obter por js:

    <div>
        <form>
            <input type="email" id="user" required>
            <input type="password" id="pass" required>
            <button type="submit" disabled id="login" onclick="login();">LOGIN</button>
        </form>
    </div>

    <div>
        <input type="email" id="email" placeholder="Email" required>
        <span id="veruser"></span>
        <button style="text-decoration: none!important;display: none;" id="uservalue" value="0"></button>
        <input type="password" id="password" placeholder="Senha" required>
        <input type="password" id="confirmpassword" placeholder="Confirmação de senha" required>
        <span id="verpass"></span>
        <button style="text-decoration: none!important;display: none;" id="passvalue" value="0"></button>
        <input type="text" id="morada" placeholder="Rua" required>
        <input type="text" maxlength="9" id="nif" placeholder="Número" required>
        <button type="submit" id="registar" onclick="registar();">REGISTAR</button>
    </div>

Quanto ao JS, removi algumas funções que não sei pq você usa, então, no mesmo contexto, se tu precisar, adicione de volta

    <script>
        var armazenamento = []; //Obter no load da página os usuários que já estão no storage?

        function User(mail, password, morada, nif) {
            this.mail = mail;
            this.password = password;
            this.morada = morada;
            this.nif = nif;
        }

        function registar() {
            var usermail = document.getElementById('email').value;
            var emailJaExiste = armazenamento.filter(function (obj) {
                return obj.mail == usermail
            }).length;

            if (emailJaExiste) {
                alert("Email já cadastrado.")
                return;
            }

            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');
            armazenamento.push(new User(usermail, userpassword, usermorada, usernif));
        };

        function login() {
            //Verificar usuário existente. Array ou storage?
        }
    </script>

Nesse caso, não busquei os dados que já estavam na storage pra inicialização do array armazenamento, então só vai funcionar pros cadastrados nesse página (sem reload). OK? Você pode aprimorar isso, deixei comentado.

Também só olhei a função de cadastro, o login deixei comentado pra ti olhar de onde buscar as infos - array ou storage.

3
  • Muito Obrigado @Aline . Tenho uma pergunta apenas. Caso queira armazenar os dados de forma a que quando se faça o reload não os perca como faço o código? Desculpa estar a ser chato mas o meu professora não ensinou nada disto
    – Jokerby
    Commented 9/06/2017 às 14:16
  • Se tu quiser armazenar no navegador mesmo, no localStorage vai ficar tudo disponível, a menos que você exclua ou limpe o cache. Mas se tu quer salvar efetivamente pra consulta futura e de qualquer lugar, sugiro que pesquise a respeito do uso de banco de dados.
    – Aline
    Commented 9/06/2017 às 14:28
  • Ok Muito Obrigado @Aline !!!
    – Jokerby
    Commented 9/06/2017 às 14:39
0

[ EDITADO ] No momento em que postei esse exemplo não existia código na pergunta, irei analisar para buscar falhas e ajudar.

Como você não especificou algum erro ou algo do tipo, fiz um exemplo simples de form com cadastro e login onde você só precisa enviar agora os dados para algum controlador ou algo do tipo e efetuar tanto o login como o cadastro, você precisa definir melhor sua pergunta.

jQuery(document).ready(function(){
  jQuery('#formRegistro').submit(function(){
    alert('cadastrou campos : ' + jQuery(this).serialize());
    return false;
  });
  
  
  jQuery('#formLogin').submit(function(){
    alert('logou campos : ' + jQuery(this).serialize());
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="formRegistro" id="formRegistro">
  <input type="text" name="nome" id="nome" value="" required>
  <input type="password" name="senha" id="senha" value="" required>
  <input type="text" name="email" id="email" value="" required>
  <input type="submit" value="cadastrar">
</form>
<br>
<form method="POST" name="formLogin" id="formLogin">
  <input type="text" name="nome" id="nome" value="" required>
  <input type="password" name="senha" id="senha" value="" required>
  <input type="submit" value="logar">
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .