-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/materialize.min.css">
display: flex;
min-height: 100vh;
flex-direction: column;
+ background-color: white;
}
main {
flex: 1 0 auto;
<script src="js/moment-with-locales.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/materialize.min.js"></script>
+<!-- <script src="js/lightdm-sample.js"></script> -->
<script src="js/theme.js"></script>
<body>
+ <text style="z-index: 9999; font-size: 23pt; color: blue;" id="debug"></text>
<div id="splash-screen">
<!--TODO autogenerate this content -->
<img class="splash-screen-img" src="images/splash-screen.jpg">
<!-- User Select -->
<div class="row">
<div class="input-field col s4 offset-s4">
- <select>
- <option value="1">Option 1</option>
- <option value="2">Option 2</option>
- <option value="3">Option 3</option>
- </select>
+ <select id="selectUser"></select>
<label>User</label>
</div>
</div>
<!-- Password field -->
<div class="row">
<div class="input-field col s4 offset-s4">
- <input id="password" type="password" class="validate">
- <label for="password">Password</label>
+ <input id="inputPassword" type="password" class="validate">
+ <label for="inputPassword">Password</label>
</div>
</div>
<!-- End Password field -->
</div>
</div>
+
+
</main>
<!-- Window Manager Select -->
<div class="input-field col s2 offset-s1">
- <select>
- <option value="1">Option 1</option>
- <option value="2">Option 2</option>
- <option value="3">Option 3</option>
- </select>
+ <select id="selectSession"></select>
<label>Select Session</label>
</div>
<!-- End Window Manager Select -->
</footer>
<script>
+
+
// create singleton
const greeter = new LoginManager();
// called after greeter and lightdm are initialized
$(greeter).ready(function() {
-
- $('select').formSelect();
- greeter.login("jay", "");
- $(greeter).on("access-grant", () => {
- lightdm.start_session_sync("i3");
- }).on("access-deny", () => console.log("denied!"));
+ let $user = $("#selectUser");
+ let $session = $("#selectSession");
+ let $password = $("#inputPassword");
+
+ greeter.fillUserSelect($user);
+ greeter.fillSessionSelect($session);
+
+ // $("#debug").text(JSON.stringify(greeter.lightdm,null, 2));
+ $password.keypress((e) => {
+ let username = $user.children("option:selected").val();
+ let pass = $password.val();
+
+ /* attempt authentication, 'grant' event will be emitted on sucecss
+ and 'deny' will be emitted on failure */
+ if (e.keyCode == 13)
+ greeter.auth(username, pass);
+ });
+
+ // when the user is authenticated do transitions and login
+ $(greeter).on("grant", () => {
+ let session_key = $session.children("option:selected").val();
+ greeter.login(session_key);
+ })
+ .on("deny", () => {
+ // inform the user that the credentials are invalid
+ $password.addClass("invalid");
+ });
$(greeter.splash).on("active", function() {
$(".active-appear").fadeIn();
}).on("inactive", function() {
$(".active-appear").fadeOut();
-
});
});
+</script>
+<script>
+ /*
+ * Define this fuction so lightdm doesnt crash, gets resassigned per
+ * in login manager
+ */
+ window.authentication_complete = function() {
+ };
- /*********************************************************/
- /* 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.
- */
- var ac = function(session_key) {
- if (lightdm.is_authenticated) {
- // Start default session
- document.documentElement.addEventListener('transitionend', () => lightdm.start_session_sync(session_key));
- document.documentElement.className = 'session_starting';
- } else {
- window.show_message("Authentication Failed", "error");
- setTimeout(window.start_authentication, 3000);
- }
- };
-
- /**
- * 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);
- };
-
-
-// setTimeout(() => login("jay", "", () => {
-// for(var x = 0; x < lightdm.sessions.length; x++){
-// window.show_message(lightdm.sessions[x].key, "info");
-// }
-// ac("i3");
-// }) , 10);
</script>
</body>
</html>
}]
}
};
+window.onerror = function() {
+ log.error("Error caught");
+};
+
+var log = {
+ error (str) {
+ if (typeof str == "object") str = JSON.stringify(str,null, 2);
+ let $line = $("<text>").text(str);
+ $("#debug").append($line);
+ },
+ warn () {
+
+ },
+ debug () {
+
+ }
+}
/**
* Scale an image up or down until it's larger than or equal to the viewport
var overlapWidth = $img.width() - screen.width;
var overlapHeight = $img.height() - screen.height;
- console.log("overlapwidth: " + overlapWidth + " overlapHeight " + overlapHeight);
+
// image overlaps viewport, move the image back
// half the length of the overlap
$img.css({
}
init() {
+ this.lightdm = typeof (lightdm) == "undefined" ? {} : lightdm;
+
if (this.use_splash) {
this.splash = new SplashScreen();
}
}
- login(username, password, callback) {
- // set default values
- if (typeof lightdm == 'undefined') {
- console.warn("Cannot attempt login without lightdm");
+ auth(username, password, callback) {
+ // lightdm must have each of
+ let req = ["select_user", "is_authenticated", "authenticate"];
+ if (!req.every((x) => this.lightdm.hasOwnProperty(x) )) {
+ log.warn("Cannot attempt login because lightdm is missing the " +
+ "required fields. Please note that lightdm is not explicitly " +
+ "instantiated in a browser session.");
+
// call async so that events can be binded in cascade
- setTimeout(() => $(this).trigger("access-deny"));
+ setTimeout(() => $(this).trigger("deny"));
return;
}
- username = username || lightdm.select_user;
+
+ username = username || this.lightdm.select_user;
password = password || "";
// session_key = session_key || lightdm.sessions[0].key;
let auth_cb = () => {
- lightdm.respond(password);
- }
+ this.lightdm.respond(password);
+ }
let auth_complete_cb = () => {
if (typeof callback == "function")
- callback(lightdm.is_authenticated);
+ callback(this.lightdm.is_authenticated);
- $(this).trigger(lightdm.is_authenticated ? "access-grant" : "access-deny");
+ $(this).trigger(this.lightdm.is_authenticated ? "grant" : "deny");
}
- window.show_prompt = auth_cb;
+
+ window.show_prompt = auth_cb;
window.authentication_complete = auth_complete_cb;
- lightdm.authenticate(username);
- }
+ this.lightdm.authenticate(username);
+ }
+
+ login(session_key) {
+ if (!this.lightdm.sessions.find(x => x.key == session_key)) {
+ log.error("Attempting to login without a valid session.");
+ return;
+ }
+
+ if (!this.lightdm.is_authenticated) {
+ log.error("Attempting to login without authentication.");
+ return;
+ }
+ this.lightdm.start_session_sync(session_key);
+ }
+ authenticateWithSelected($user_input, $password_input) {
+
+ }
+
+ fillUserSelect($el) {
+ if (!Array.isArray(this.lightdm.users)) {
+ log.warn("Cannot fill empty user list in lightdm.");
+ return;
+ }
+
+ $el.empty();
+ for (let s of this.lightdm.users)
+ $el.append("<option value=" + s.username + ">" + s.display_name + "</option>");
+ $el.formSelect();
+ }
+
+ fillSessionSelect($el) {
+ if (!Array.isArray(this.lightdm.sessions)) {
+ log.warn("Cannot fill empty session list in lightdm.");
+ return;
+ }
+
+ $el.empty();
+
+ for (let s of this.lightdm.sessions)
+ $el.append("<option value=" + s.key + ">" + s.name + "</option>");
+
+
+ $el.formSelect();
+ }
+
+ get users() {
+ return this.lightdm.users;
+ }
+
+ get sessions() {
+ return this.lightdm.sessions;
+ }
}
class SplashScreen {
this.active_timeout = 15;
if (!this.$el.length)
- console.error("Missing-screen element.");
+ log.error("Missing-screen element.");
// fit background image to sreen size and center
this.$img = $(".splash-screen-img");
if (!this.$img.length)
- console.warn("No background images supplied for splash screen.");
+ log.warn("No background images supplied for splash screen.");
this.$img.each((i, v) => adjustBackground($(v)));
let options = this.options; // shorthand
/******************** Event Listeners ********************/
this.clock = setInterval(() => {
$(this).trigger("tick");
-
+ log.error("tick");
if (!this.isActive())
$(this).trigger("inactive");
}, 500);
if (!this.isActive())
$(this).trigger("active", e)
});
- setTimeout(() => $(this).trigger("active"));
+ setTimeout(() => $(this).trigger("active"), 1);
}
+
/**
* Loops through the user specified content and adds them to the DOM in order
*/
else if (content_type == "html")
this.initHTML(content[content_type]);
else
- console.warn("Specified content " + content_type + " is not valid.");
+ log.warn("Specified content " + content_type + " is not valid.");
}
}
$.extend(true, options, {});
return options;
}
+
/**
* open and close will toggle the screen and animate it opening and closing
* adds a resetTimeout function to automatically close after a period of user
}
reset() {
if (this.is_open == true) {
+
this.close();
$(this).trigger("timeout");
}
*/
initClock(opts) {
if (typeof opts != "object") {
- console.error("Unable to initialize clock thats not an object");
+ log.error("Unable to initialize clock thats not an object");
return -1;
}
// handle arrays and a single clock object
*/
startClock($clock, opts) {
if (typeof opts != "object") {
- console.error("Clock opts is not a valid object");
+ log.error("Clock opts is not a valid object");
return -1;
}
// handle multiple formats for multiple clocks on the same line
// ensure the format is now an array
if(!Array.isArray(opts.format)) {
- console.error(`Specfied clock format is not a valid type.
+ log.error(`Specfied clock format is not a valid type.
Type can be a single string or Array.`);
return -1;
}
if (typeof opts["parent-css"] == "object")
$clock.css(opts["parent-css"]);
- console.debug($clock);
+ log.debug($clock);
$clock.show();
}
this.$content.append($el);
} else {
- console.warn("Splash screen html element is invalid type");
+ log.warn("Splash screen html element is invalid type");
}
}
OSDN Git Service
