<!-- BEGIN [% component.name %] -->
<div class="upper-div">
<!-- [% USE DataPrinter; DataPrinter.dump(request.base) %] -->
</div>
<div class="login-wrap">
<h2>Login</h2>
[% IF login_error %]
<div class="container alert alert-warning" role="alert">Invalid login</div>
[% END %]
<form method="post" action="[% request.uri_for('/login') %]">
<input type="hidden" name="return_url" value="[% return_url %]">
<div class="form">
<input type="text" placeholder="Username" name="username" required />
<input type="password" placeholder="Password" name="password" id="passwd" required />
<span><i id="toggler" class="far fa-eye"></i></span>
<div><button> Sign in </button></div>
</div>
</form>
</div>
<script type="text/javascript">
var password = document.getElementById('passwd');
var toggler = document.getElementById('toggler');
showHidePassword = () => {
if (password.type == 'password') {
password.setAttribute('type', 'text');
toggler.classList.add('fa-eye-slash');
} else {
toggler.classList.remove('fa-eye-slash');
password.setAttribute('type', 'password');
}
};
toggler.addEventListener('click', showHidePassword);
</script>
<!-- END [% component.name %] -->