|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
html, body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
margin: 0;
|
|
|
|
|
background-color: #000;
|
|
|
|
|
transition: opacity 2s, background-color 2s, background-position 2s;
|
|
|
|
|
transition-timing-function: ease-in;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
background: linear-gradient(transparent, SlateGray);
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
font-family: 'sans-serif';
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html.session_starting {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.session_starting body {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
background-position-y: -100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
display: flex;
|
|
|
|
|
-webkit-flex-direction: column;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topBox, .inputBox, .messageBox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 33.33%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inputBox {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrapper {
|
|
|
|
|
height: 85px;
|
|
|
|
|
width: 350px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topBox {
|
|
|
|
|
text-align: right;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.messageBox {
|
|
|
|
|
text-align: center;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input#entry {
|
|
|
|
|
outline: none;
|
|
|
|
|
background: rgba(0, 0, 0, 0.05);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
line-height: normal;
|
|
|
|
|
transition: .3s ease;
|
|
|
|
|
border: none !important;
|
|
|
|
|
padding: 14px 4% !important;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #666;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
border-radius: 3px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input#entry:focus {
|
|
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
|
|
color: rgba(0, 0, 0, 0.75);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input#entry:focus::placeholder {
|
|
|
|
|
color: rgba(255, 255, 255, 0.3);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body id="body">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="topBox">
|
|
|
|
|
<img onclick="javascript:lightdm.shutdown();" src="power_button.png"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<div class="wrapper">
|
|
|
|
|
<div id="prompt"></div>
|
|
|
|
|
<form action="javascript:handle_input();">
|
|
|
|
|
<input id="entry" />
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="messageBox" id="messages"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
/*********************************************************/
|
|
|
|
|
/* Callbacks for the greeter */
|
|
|
|
|
/*********************************************************/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* show_prompt callback.
|
|
|
|
|
*/
|
|
|
|
|
window.show_prompt = function(text, type) {
|
|
|
|
|
// type is either "text" or "password"
|
|
|
|
|
let prompt = document.getElementById("prompt"),
|
|
|
|
|
entry = document.getElementById("entry");
|
|
|
|
|
|
|
|
|
|
entry.placeholder = text.charAt(0).toUpperCase() + text.slice(1, -1);
|
|
|
|
|
|
|
|
|
|
// clear entry
|
|
|
|
|
entry.value = "";
|
|
|
|
|
entry.type = type;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* show_message callback.
|
|
|
|
|
*/
|
|
|
|
|
window.show_message = function(text, type) {
|
|
|
|
|
if (0 === text.length) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let messages = document.getElementById('messages');
|
|
|
|
|
messages.style.visibility = "visible";
|
|
|
|
|
// type is either "info" or "error"
|
|
|
|
|
if (type == 'error') {
|
|
|
|
|
text = `<p style="color:red;">${text}</p>`;
|
|
|
|
|
}
|
|
|
|
|
messages.innerHTML = `${messages.innerHTML}${text}`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* authentication_complete callback.
|
|
|
|
|
*/
|
|
|
|
|
window.authentication_complete = function() {
|
|
|
|
|
if (lightdm.is_authenticated) {
|
|
|
|
|
// Start default session
|
|
|
|
|
// let body = document.getElementById('body');
|
|
|
|
|
let session = lightdm.default_session
|
|
|
|
|
document.documentElement.addEventListener('transitionend', () => {lightdm.start_session(session)});
|
|
|
|
|
document.documentElement.className = 'session_starting';
|
|
|
|
|
} else {
|
|
|
|
|
show_message("Authentication Failed", "error");
|
|
|
|
|
setTimeout(start_authentication, 2000);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* autologin_timer_expired callback.
|
|
|
|
|
*/
|
|
|
|
|
function autologin_timer_expired(username) {
|
|
|
|
|
/* Stub. Does nothing. */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*******************************************************************/
|
|
|
|
|
/* Functions local to this theme */
|
|
|
|
|
/*******************************************************************/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* clear_messages
|
|
|
|
|
*/
|
|
|
|
|
function clear_messages() {
|
|
|
|
|
let messages = document.getElementById("messages");
|
|
|
|
|
messages.innerHTML = "";
|
|
|
|
|
messages.style.visibility = "hidden";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Kickoff the authentication process
|
|
|
|
|
*/
|
|
|
|
|
window.start_authentication = function() {
|
|
|
|
|
clear_messages();
|
|
|
|
|
// start without providing "user" to make the greeter prompt for "user"
|
|
|
|
|
lightdm.authenticate("");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* handle the input from the entry field.
|
|
|
|
|
*/
|
|
|
|
|
window.handle_input = function() {
|
|
|
|
|
let entry = document.getElementById("entry");
|
|
|
|
|
lightdm.respond(entry.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.addEventListener("GreeterReady", () => {
|
|
|
|
|
lightdm.show_message.connect(show_message)
|
|
|
|
|
lightdm.show_prompt.connect(show_prompt)
|
|
|
|
|
lightdm.authentication_complete.connect(authentication_complete)
|
|
|
|
|
lightdm.autologin_timer_expired.connect(autologin_timer_expired)
|
|
|
|
|
|
|
|
|
|
start_authentication()
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<!--<script src="../_vendor/js/mock.js"></script>-->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
