raf-sh/api_call.html

## api_call.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Api tester</title>
</head>

<div id="login">
    <form id="formLogin">
        Login:<br>
        <input type="text" name="login" value=""><br>
        Password:<br>
        <input type="text" name="password" value=""><br><br>
        <input type="submit" value="Submit">
    </form>
</div>

<div id="requester">
    <button id="sendApiCall"></button>
</div>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var url = "url";
        var store = store || {};

        /*
        * Sets the jwt to the store object
        */
        store.setJWT = function(data){
            this.JWT = data;
        }

        /*
        * Submit the login form
        */
        $("#formLogin").submit(function(e){
            e.preventDefault();
            $.ajax({
                url: 'api/authentificate',
                beforeSend: function(request){

                },
                type: 'POST',
                success: function(data) {
                    store.setJWT(data.JWT);
                    console.log(store);
                    $("#login").hide();
                },
                error: function() {
                    alert(data);
                }
            });
        });

        /*
        * Send api call
        */
        $("#sendApiCall").click(function(e){
            e.preventDefault();
            $.ajax({
                url: '/api/campaigns',
                beforeSend: function(request){
                    request.setRequestHeader('Authorization', 'Bearer ' + store.JWT);
                },
                type: 'GET',
                success: function(data) {
                    console.log(data);
                    // Decode and show the returned data nicely.
                },
                error: function() {
                    alert(data);
                }
            });
        });
    });
    </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Api tester</title>
	</head>

	<div id="login">
	<form id="formLogin">
	Login:<br>
	<input type="text" name="login" value=""><br>
	Password:<br>
	<input type="text" name="password" value=""><br><br>
	<input type="submit" value="Submit">
	</form>
	</div>

	<div id="requester">
	<button id="sendApiCall"></button>
	</div>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
	var url = "url";
	var store = store \|\| {};

	/*
	* Sets the jwt to the store object
	*/
	store.setJWT = function(data){
	this.JWT = data;
	}

	/*
	* Submit the login form
	*/
	$("#formLogin").submit(function(e){
	e.preventDefault();
	$.ajax({
	url: 'api/authentificate',
	beforeSend: function(request){

	},
	type: 'POST',
	success: function(data) {
	store.setJWT(data.JWT);
	console.log(store);
	$("#login").hide();
	},
	error: function() {
	alert(data);
	}
	});
	});

	/*
	* Send api call
	*/
	$("#sendApiCall").click(function(e){
	e.preventDefault();
	$.ajax({
	url: '/api/campaigns',
	beforeSend: function(request){
	request.setRequestHeader('Authorization', 'Bearer ' + store.JWT);
	},
	type: 'GET',
	success: function(data) {
	console.log(data);
	// Decode and show the returned data nicely.
	},
	error: function() {
	alert(data);
	}
	});
	});
	});
	</script>
	</body>
	</html>