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 = "Success" */
                                /*   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 = "Success"
                         ...