<!-- BEGIN [% component.name %] -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="[% settings.charset %]">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>[% settings.appname %]</title>
<!-- bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
crossorigin="anonymous"></script>
<!-- Latest Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="[% request.uri_base %]/css/login.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- local.css last to provide overrides -->
<link rel="stylesheet" type="text/css" href="[% request.uri_base %]/css/local.css">
<!-- Grab jQuery from a CDN, fall back to local if necessary -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="></script>
<script type="text/javascript">/* <![CDATA[ */
!window.jQuery && document.write('<script type="text/javascript" '
+ 'src="[% request.uri_base %]/javascripts/jquery.js"><\/script>')
/* ]]> */
</script>
<script src="[% request.uri_base %]/javascripts/jquery.timeago.js" type="text/javascript"></script>
</head>
[% USE date %]
<body>
<div>
<a href="#session-data" data-bs-toggle="collapse">
<i class="bi bi-arrows-expand"></i></a>
</div>
<div class="collapse" id="session-data">
<div class="card card-body" style="font-size: 12px">
<div>Session expires: [% date.format(session_object.expires) %]</div>
<div style="font-size: 13px">
[% PROCESS dumper.tt dump = session_object %]
[% # PROCESS dumper.tt dump = request %]
</div>
</div>
</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"
[% UNLESS settings.environment.match('development'); 'required'; END %] />
<span><i class="fa-regular fa-user"></i></span>
<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>
<script type="text/javascript">
jQuery.timeago.settings.allowFuture = true;
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});
</script>
<hr class="my-3">
<!-- footer -->
<div class="container" id="footer">
Powered by <a href="http://perldancer.org/">Dancer2</a> [% dancer_version %]
</div>
<div class="container" id="session">
Session expires: [% IF session_expires; # session_expires.strftime('%R on %x') %]
<abbr class="timeago" title="[% session_expires %]"></abbr>
[% ELSE %][not defined][% END%]
</div>
</body>
</html>
<!-- END [% component.name %] -->