views/login.ejs
<!DOCTYPE html>
<html class="has-background-grey" id="is-login-page" lang="en">
<head>
<title>
Login: <%= configFunctions.getProperty("application.applicationName") %>
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="<%= urlPrefix %>/images/favicon.png" />
<link rel="stylesheet" href="<%= urlPrefix %>/stylesheets/style.min.css" />
<link rel="stylesheet" href="<%= urlPrefix %>/lib/fa/css/all.min.css" />
</head>
<body>
<div class="columns is-vcentered is-centered has-min-page-height is-marginless">
<div class="column is-half-widescreen is-two-thirds-desktop is-three-quarters-tablet">
<main class="box mx-3 my-3">
<div class="columns is-vcentered">
<div class="column has-text-centered">
<img src="<%= urlPrefix + configFunctions.getProperty("application.logoURL") %>" alt="" />
</div>
<div class="column">
<h1 class="title is-3 has-text-centered">
<%= configFunctions.getProperty("application.applicationName") %>
</h1>
<form id="form--login" method="post" action="<%= urlPrefix %>/login">
<input name="_csrf" type="hidden" value="<%= csrfToken %>" />
<input name="redirect" type="hidden" value="<%= redirect %>" />
<label class="sr-only" for="login--userName">User Name</label>
<div class="field has-addons">
<div class="control">
<span class="button is-static" aria-label="User Domain"><%= configFunctions.getProperty("application.userDomain") %>\</span>
</div>
<div class="control is-expanded has-tooltip-right" data-tooltip="User Name">
<input class="input" id="login--userName" name="userName" type="text" placeholder="User Name" value="<%= userName %>" autofocus required />
</div>
</div>
<div class="field">
<label class="sr-only" for="login--password">Password</label>
<div class="control has-icons-left has-tooltip-right" data-tooltip="Password" >
<input class="input" id="login--password" name="password" type="password" placeholder="Password" required />
<span class="icon is-small is-left">
<i class="fas fa-key" aria-hidden="true"></i>
</span>
</div>
</div>
<% if (useTestDatabases) { %>
<div class="message is-small is-warning">
<p class="message-body has-text-centered">
Testing databases in use!
</p>
</div>
<% } %>
<div class="level is-mobile">
<div class="level-left has-text-danger">
<% if (message !== "") { %>
<span class="icon">
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
</span>
<span><%= message %></span>
<% } %>
</div>
<div class="level-right has-text-right">
<button class="button is-link" type="submit">
<span class="icon">
<i class="fas fa-sign-in-alt" aria-hidden="true"></i>
</span>
<span>Log In</span>
</button>
</div>
</div>
</form>
<hr />
<div class="has-text-right has-text-grey-dark is-size-7">
Build <%= buildNumber %><br />
<a class="has-text-grey-dark" href="https://cityssm.github.io/lottery-licence-manager/" target="_blank" rel="nofollow noreferrer">Help</a>
<a class="has-text-grey-dark ml-4" href="https://github.com/cityssm/lottery-licence-manager" target="_blank" rel="noreferrer">GitHub</a>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
try {
window.localStorage.clear();
} catch (e) {}
</script>
</body>
</html>