JSFiddle - React, Tailwind, and code Playground

by lakshmipriya001

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
 
 <div class="container mt-5">

         <div class="d-flex justify-content-center mt-150 height-3 ">
            <div class="p-2 text-white w25 shadow-left rounded-left bg-white">
               <div class="d-flex justify-content-center">
                <img class="img-height img-fluid mt-100" src="../img/logo.png" alt="">
               </div>
            </div>
            <div class="border-left nbrd w30 text-center p60 shadow-right rounded-right bg-white">
               <form id="login">
                  <p class="text-danger d-none" id="message"></p>
                  <div class="form-group pb-10">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-user icon"></i>
                         </div>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
                     </div>
                  </div>
                   <div class="form-group">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-lock icon"></i>
                         </div>
                       <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                   ...

JavaScript

$(document).ready(function(){
  localStorage.removeItem('role');
  $(".login-error").hide();
  $("#login").on("submit", function (e) {
    e.preventDefault();
    var form_data = $('#login').serialize();
    var username=$("#name").val();
    var pwd=$("#password").val();
    $.ajax({
      url: "https://api.myjson.com/bins/qt7fk",
      type: "GET",
      dataType: "json",

      success: function (data) {
        console.log(typeof(data));
        // alert(JSON.stringify(data));
        var arr = data;
        var BreakException = {};
        try {
          arr.forEach(function(obj) {
            console.log('name: ' + obj.name);
            console.log('password: ' + obj.role);
            var pass=obj.password; 
            // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
            var bytes  = CryptoJS.AES.decrypt(pass.toString(), 'password');
            var plaintext = bytes.toString(CryptoJS.enc.Utf8);
            // alert(plaintext);
            var role=obj.role;
            if(role=="User"){
              if(username==obj.name && pwd==plaintext){
                alert("New role"); 
                document.getElementById('message').innerHTML = ""
                /*   window.location.href = "./job-insert.html?role=" + role; */
              }
              else{
                $("#login p").removeClass("d-none");
              }
            }
            else{
              if(username==obj.name && pwd==plaintext){
                alert("Login succes");
                document.getElementById('message').innerHTML = ""
                throw BreakException;

                /* window.location.href = "./dashboard.html?role=" + role; */
              }
              else{
                $("#login p").removeClass("d-none");
                document.getElementById('message').innerHTML = "Please enter a correct login and password"
              }
            }
          })
        } catch (e) {
          if (e !== BreakException)...