Как сделать простую страницу входа в систему с помощью бутстрапа и JS?

Question

Приветствую всех, я начинаю учиться шаг за шагом в веб-программировании. Я планирую создать простую форму входа в систему с помощью бутстрапа и Javascript. Каков способ ее достижения?

Answer 1

Что-то вроде этого :)

$(document).ready(function() { 
 
    $("#loginForm").submit(function(e) { 
 
     e.preventDefault(); 
 
     if ($("#userEmail").val() != '' && $("#userPassword").val() != '') { 
 
      if ($("#userEmail").val() == 'test@gmail.com' && $("#userPassword").val() == 'test') { 
 
       window.location.href = './home.html'; 
 
      } else { 
 
       alert('invalid username password'); 
 
      } 
 
     } else { 
 
     alert('username or password cann\'t be blank'); 
 
     } 
 
    }); 
 
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 
 
<div class="container" style="margin-top:30px"> 
 
    <div class="col-md-4 col-md-offset-4"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"><h3 class="panel-title"><strong>Sign in </strong></h3></div> 
 
      <div class="panel-body"> 
 
       <form role="form" id="loginForm"> 
 
        <div class="form-group"> 
 
         <label for="exampleInputEmail1">Username or Email</label> 
 
         <input type="email" class="form-control" style="border-radius:0px" id="userEmail" placeholder="Enter email"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="exampleInputPassword1">Password <a href="/sessions/forgot_password">(forgot password)</a></label> 
 
         <input type="password" class="form-control" style="border-radius:0px" id="userPassword" placeholder="Password"> 
 
        </div> 
 
        <button type="submit" class="btn btn-sm btn-default">Sign in</button> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Пуск из учебников, есть много их в Интернете, например. https://scotch.io/tutorials/authenticate-a-node-js-api-with-json-web-tokens

Когда ваш сервер будет готов, вы можете легко добавить к нему форму для входа.