3

Gostaria de fazer esse formulário verificar os dados a seguir ao clicar em "Confirmar" e caso algum deles esteja correto ele irá para a próxima página.

MOCK:

$scope.cliente = [{
      nome: "nomeedit",
      senha: "senhaedit",
      email: "[email protected]"
    }, {
      nome: "nomezinho",
      senha: "senhazinha",
      email: "[email protected]"
    }, {
      nome: "nomelegal",
      senha: "senhalegal",
      email: "[email protected]"
    }, {
      nome: "meunome",
      senha: "minhasenha",
      email: "[email protected]"
    }, {
      nome: "nome",
      senha: "senha",
      email: "[email protected]"
    }];

HTML:

        <div class="container" ng-app="ClienteApp" ng-controller="ClienteController">

  <div class="form-group">
    <div class="input-group">
      <label>Nome:</label>
      <input type="text" class="form-control" ng-model="nome">
    </div>
    <div class="input-group">
      <label>Telefone:</label>
      <input type="text" class="form-control" ng-model="telefone">
    </div>
  </div>
  <a href="#" class="btn btn-sucess btn-sm" ng-click="consultar();">Confirmar</a>
2
  • Larissa, esta pergunta está bem melhor do que a outra mas evita apagar perguntas antigas para colocar novas com o mesmo problema. Nesse caso podes editar a antiga ou dar uma recompensa.
    – Sergio
    Commented 9/10/2015 às 15:19
  • Ah sim, desculpe. Commented 9/10/2015 às 15:21

2 Respostas 2

3

Fiz um exemplo bem simples de como resolver esse problema:

function LoginController($scope) {

  $scope.cliente = [{
    nome: "nomeedit",
    senha: "senhaedit",
    email: "[email protected]"
  }, {
    nome: "nomezinho",
    senha: "senhazinha",
    email: "[email protected]"
  }, {
    nome: "nomelegal",
    senha: "senhalegal",
    email: "[email protected]"
  }, {
    nome: "meunome",
    senha: "minhasenha",
    email: "[email protected]"
  }, {
    nome: "nome",
    senha: "senha",
    email: "[email protected]"
  }];

  $scope.consultar = function(user) {
    var verifica = false;
    //Faz um laço pegando cada cliente($scope.cliente)
    angular.forEach($scope.cliente, function(cliente) {
      //Se o nome do usuário e senha que vieram da página forem iguais a algum nome da lista de clientes então verifica recebe verdadeiro!
      if (user.nome == cliente.nome && user.senha == cliente.senha) {
        verifica = true;
        //Caso contrário recebe falso
      } else {
        verifica = false;
      }
    });

    //Se a variavel verifica for true então exibe um alerta positivo e envia para 			          a pagina desejada
    if (verifica) {
      $scope.submitted = true;
      $scope.message = "Usuário Válido";
      $scope.classAlert = "alert alert-success";
      //carrega outra página, aqui podemos utilizar a diretiva $location
      //$location.path("/pagina");

      //Se não exibe um alerta de erro
    } else {
      $scope.submitted = true;
      $scope.message = "Usuário Inválido";
      $scope.classAlert = "alert alert-danger";
    }

  };
}
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="LoginController">
  <form class="form-inline" role="form">
    <div ng-class="classAlert" ng-show="submitted || showAlert">{{message}}
      <button class="close" data-dismiss="alert">x</button>
    </div>
    <div class="form-group">
      <label>Nome:</label>
      <input type="text" class="form-control" ng-model="user.nome">
    </div>
    <div class="form-group">
      <label>Senha:</label>
      <input type="password" class="form-control" ng-model="user.senha">
    </div>
    <button type="button" class="btn btn-default" ng-click="consultar(user)">Submit</button>
  </form>
</div>

É só fazer um teste com os valores da sua lista, para ser redirecionado para outra página você pode usar a diretiva $location. Mas pra isso é recomendado você configurar suas rotas primeiro.

Exemplo:

$location.path("/home"); 

Nesse exemplo após alguma ação eu chamo a página que está configurada com a rota home.

Exemplo de como configurar uma rota, para isso utilizamos o $routeProvider: angular.module("sistema").config(function($routeProvider) {

$routeProvider.when("/home", {
    templateUrl: "public/views/login.html",
    controller: "loginController"
}

Mais informações: routeProvider, location

1

Recomendo que não faça a autenticação dessa forma. Nunca exponha os dados de autenticação do usuário.

De qualquer forma, para verificar se um determinado objeto faz parte de um array basta iterar sobre ele e verificar campo a campo.

Ex:

$scope.cliente.forEach(function(cliente) {
  if ($scope.nome === cliente.nome && $scope.senha === cliente.senha) {
    // Lógica para prosseguir entra aqui
  }
})

Porém reforço novamente que fazer essa consulta no client é a pior falha de segurança que seu código poderia ter.

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 .