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>
               <!-- <h1 class="text-center mt-90">SeedStalk</h1> -->
            </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"...

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/nl8a0",
                  type: "GET",
                  dataType: "json",
                     
                  success: function (data) {
                        console.log(typeof(data));
                     // alert(JSON.stringify(data));
                     var arr = data;
                        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");
                                  /*   window.location.href = "./job-insert.html?role=" + role; */
                                 }
                                 else{
                                    $("#login p").removeClass("d-none");
                                                                  document.getElementById('message').innerHTML = "Please enter a correct login and password"

                                 }
                              }
                              else{
                          ...