views/selfService.ejs
<!DOCTYPE html>
<html class="has-background-dark" id="is-self-service-page" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content="<%= csrfToken %>" />
<title>
Employee Self Service:
<%= configFunctions.getConfigProperty("application.applicationName") %>
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="apple-touch-icon" sizes="180x180" href="<%= urlPrefix %>/images/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="<%= urlPrefix %>/images/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="<%= urlPrefix %>/images/favicon/favicon-16x16.png" />
<link rel="icon" type="image/svg+xml" href="<%= urlPrefix %>/images/favicon/favicon.svg" />
<link rel="mask-icon" href="<%= urlPrefix %>/images/favicon/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="<%= urlPrefix %>/images/favicon/favicon.ico" />
<link rel="stylesheet" href="<%= urlPrefix %>/stylesheets/style.css" />
</head>
<body>
<input name="_csrf" type="hidden" value="<%= csrfToken %>" />
<main class="panel m-2">
<header class="panel-heading is-flex is-justify-content-space-between">
<h1 class="title is-5 mb-0">Employee Self Service</h1>
<a href="https://cityssm.github.io/MonTY/docs/employeeSelfService.html" target="_blank" rel="noopener noreferrer">
<i class="fas fa-question-circle" aria-hidden="true"></i>
Help
</a>
</header>
<div class="panel-block is-block has-background-white" style="height:calc(100vh - 112px);overflow:auto">
<div class="panel-tab" id="tab--employee">
<div class="columns">
<div class="column is-5">
<p class="has-text-centered">
<img src="<%= urlPrefix + configFunctions.getConfigProperty('application.bigLogoURL') %>" alt="" style="max-height:400px" />
</p>
</div>
<div class="column">
<h2 class="title is-4">Log into Employee Self Service</h2>
<div class="message is-info">
<div class="message-body">
<p>
To manage aspects of your employee record,
enter your employee number
and the last four digits of your home phone number.
</p>
</div>
</div>
<div class="field">
<label class="label" for="employee--employeeNumber">
Employee Number
</label>
<div class="control">
<input class="input is-large" id="employee--employeeNumber" name="employeeNumber"
maxlength="20"
autocomplete="off"
required />
</div>
</div>
<div class="field">
<label class="label" for="employee--homeContact_lastFourDigits">
Last Four Digits of Home Phone Number
</label>
<div class="control">
<input class="input is-large" id="employee--homeContact_lastFourDigits" name="homeContact_lastFourDigits"
inputmode="numeric"
pattern="\d{4}"
minlength="4" maxlength="4"
autocomplete="off"
required />
</div>
</div>
<div class="has-text-right">
<button class="button is-large is-primary" id="employee--nextButton" type="button">
<span>Load Employee and Continue</span>
<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</button>
</div>
<div class="mt-4" id="employee--message"></div>
</div>
</div>
</div>
<div class="panel-tab is-hidden" id="tab--employeeOptions">
<div class="columns">
<div class="column is-5">
<h1 class="title is-3 has-text-centered">
Welcome <span id="employeeOptions--employeeName"></span>
</h1>
<div class="columns">
<div class="column">
<button class="button is-fullwidth is-large is-info is-back-to-options-button" type="button">
<span class="icon"><i class="fas fa-arrow-left" aria-hidden="true"></i></span>
<span>Back to Options</span>
</button>
</div>
<div class="column">
<button class="button is-fullwidth is-large is-primary is-sign-out-button" type="button">
<span class="icon"><i class="fas fa-sign-out-alt" aria-hidden="true"></i></span>
<span>Sign Out</span>
</button>
</div>
</div>
</div>
<div class="column">
<div class="employeeOptionsTab" id="employeeOptionsTab--menu">
<h2 class="title is-4">
Employee Self Service Menu
</h2>
<div class="panel">
<% if (configFunctions.getConfigProperty('features.attendance.callOuts')) { %>
<a class="panel-block" href="#employeeOptionsTab--callOutListAdd">
<div class="columns is-mobile">
<div class="column is-narrow">
<span class="fa-layers fa-4x fa-fw" aria-hidden="true">
<i class="fas fa-phone"></i>
<i class="fas fa-plus" data-fa-transform="shrink-8 right-8 down-4" data-fa-glow="10"></i>
</span>
</div>
<div class="column">
<strong>Join a Call Out List</strong><br />
Choose a call out list with open sign up that you are eligible to join.
</div>
</div>
</a>
<% } %>
</div>
</div>
<% if (configFunctions.getConfigProperty('features.attendance.callOuts')) { %>
<div class="employeeOptionsTab is-hidden" id="employeeOptionsTab--callOutListAdd">
<h2 class="title is-4">
Join a Call Out List
</h2>
<div class="mb-4" id="container--callOutListAdd"></div>
</div>
<% } %>
</div>
</div>
</div>
</div>
<footer class="panel-block is-justify-content-flex-end has-background-grey-lighter">
<em><%= configFunctions.getConfigProperty("application.applicationName") %> - Build <%= buildNumber %></em>
</footer>
</main>
<script>
window.exports = window.exports || {};
exports.urlPrefix = "<%= urlPrefix %>" + "<%= configFunctions.getConfigProperty('settings.selfService.path') %>";
</script>
<script src="<%= urlPrefix %>/lib/cityssm-bulma-js/bulma-js.js"></script>
<script src="<%= urlPrefix %>/lib/cityssm-bulma-webapp-js/cityssm.min.js"></script>
<script src="<%= urlPrefix %>/lib/fa/js/all.min.js" defer></script>
<script src="<%= urlPrefix %>/javascripts/selfService.min.js" defer></script>
</body>
</html>