Elep

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Modal</title>
	{% block styles %}
		{# <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"> #}
		<style>
			.content {
			  height: 100%;
			}

.content {
			  display: -ms-flexbox;
			  display: flex;
			  -ms-flex-align: center;
			  align-items: center;
			  padding-top: 40px;
			  padding-bottom: 40px;
			  background-color: #f5f5f5;
			}

.modal {
				position: relative;
				padding: 0;
			}

.modal a.close-modal {
				top: 0;
				right: 0;
			}

.form-signin {
			  width: 100%;
			  max-width: 90%;
			  padding: 15px;
			  margin: auto;
			  /*background: #ccc;*/
			}
			.form-signin .checkbox {
			  font-weight: 400;
			}
			.form-signin .form-control {
			  position: relative;
			  box-sizing: border-box;
			  height: auto;
			  padding: 10px;
			  font-size: 16px;
			}
			.form-signin .form-control:focus {
			  z-index: 2;
			}
		</style>
	{% endblock %}

</head>
<body>
	<div class="content">
		{% block content %}
			
		{% endblock %}
	</div>

{% block scripts %}
		<script>
			$(document).ready(function(){
				$('.form-signin').on('submit', function(e){
					e.preventDefault();
					const $target = $(e.currentTarget);
					var serialized = $target.serializeArray()
					
					var details = {};
					for(let i=0; i<serialized.length; i++){
					    details[serialized[i].name] = serialized[i].value;
					}

fetch($target.attr('action'), { 
						credentials: 'same-origin',
						method: 'POST',
						body: JSON.stringify(details)
					})
					.then(response => response.json())
					.then(json => {
						if (json.status === 'success') {
							window.location.reload();
						}
					})
				})
			});
		</script>

{% endblock %}
</body>
</html>