web-greeter-theme-basealt/main.js

const DEFAULT_USER = "defaultUser";
const DEFAULT_SESSION = "defaultSession";
const DEFAULT_WALLPAPPER = "defaultWallpapper";
const WALLPAPPER_ELEMENT = "wallpappers";
const WAITING_CLASS = "waiting";

function togglePasswordVisibility() {
  var passwd = document.getElementById("password");
  var eye = document.getElementById("eye");
  if (passwd.type === "password") {
    passwd.type = "text";
    eye.src = "images/eye2.png"
  } else {
    passwd.type = "password";
    eye.src = "images/eye.png"
  }
}

function toggleWaitingState(waiting) {
  var cylon_eye = document.getElementById("cylon_eye");
  var passwd = document.getElementById("password");
  passwd.disabled = waiting;

  var submit = document.getElementById("submit");
//  submit.disabled = waiting;

  if (waiting) {
	  cylon_eye.classList.add(WAITING_CLASS);
  } else {
	  cylon_eye.classList.remove(WAITING_CLASS);
  }
}

function updateDefaults(user, session) {

	console.log(user)
	console.log(session)
	window.localStorage.setItem(DEFAULT_USER, user)
	window.localStorage.setItem(DEFAULT_SESSION, session)

	var wallpapper = document.getElementById(WALLPAPPER_ELEMENT).value
	if(wallpapper) {
		console.log(wallpapper)
		window.localStorage.setItem(DEFAULT_WALLPAPPER, wallpapper)
	}
}

function dateFormat(date) {
	var parts=date.split('.');
	var options = { weekday: 'long', month: 'long', day: 'numeric' };
	var today  = new Date('20' + parts[2], parts[1] - 1, parts[0]);

	return today.toLocaleDateString("ru-RU", options); // Saturday, September 17
	//return `${parts[2]}, ${parts[1]} - 1, ${parts[0]}`
}

function selectItemByValue(elmnt, value){

  for(var i=0; i < elmnt.options.length; i++)
  {
    if(elmnt.options[i].value === value) {
      elmnt.selectedIndex = i;
      break;
    }
  }
}

function doLogin() {
    event.preventDefault();
	var user = document.getElementById("user").textContent
	var session = document.getElementById("sessions").value
	if (!user || !session) {
		return false;
	}

	lightdm.cancel_authentication();

	updateDefaults(user, session);

	toggleWaitingState(true);
	lightdm.authenticate(user)
	return false;
}

function updateUser(username) {
	document.getElementById("user-image").src = 'images/default_face.png'
	document.getElementById("user").textContent = username
	theme_utils.dirlist(`/var/lib/lightdm-data/${username}`, true, (images) => {
		if(images) {
			for (let i = 0; i < images.length; i++) {
				let image = images[i]
				if(image.indexOf("/face.png") == image.length - 9) {
					document.getElementById("user-image").src = image
					return;
				}
			}
		}
	});
}

function updateWallpapper(wallpapper) {
	var body = document.getElementsByTagName('body')[0];
	body.style.backgroundImage = `url(wallpappers/${wallpapper})`;
}

function initGreeter() {

	let users = lightdm.users
	let defaultUser = window.localStorage.getItem(DEFAULT_USER) || users[0].username;
	updateUser(defaultUser);

	let select = document.getElementById('user-dropdown-content')
	for (let i = 0; i < users.length; i++) {
		var btn = document.createElement('button')
		btn.innerHTML = users[i].username
		btn.addEventListener("click", () => {
		  updateUser(users[i].username)
		})

		select.appendChild(btn)
	}

	const wallpappers = document.getElementById(WALLPAPPER_ELEMENT);

	wallpappers.addEventListener('change', (event) => {
		updateWallpapper(event.target.value);
	});

	let defaultWallpapper = window.localStorage.getItem(DEFAULT_WALLPAPPER);
	if(defaultWallpapper) {
		selectItemByValue(wallpappers, defaultWallpapper);
		updateWallpapper(defaultWallpapper);
	}

	let sessions = lightdm.sessions
	let defaultSession = window.localStorage.getItem(DEFAULT_SESSION) || sessions[0].key;
	let sessionsSelect = document.getElementById('sessions')
	for (let i = 0; i < sessions.length; i++) {
		var opt = document.createElement('option')
		opt.innerHTML = sessions[i].key
		opt.value = sessions[i].key
		if(defaultSession == sessions[i].key) {
			opt.selected = true
		}

		sessionsSelect.appendChild(opt)
	}
	sessionsSelect.value = defaultSession;

	document.getElementById("date").textContent=dateFormat(theme_utils.get_current_localized_date());
	document.getElementById("time").textContent=theme_utils.get_current_localized_time();

	lightdm.show_prompt.connect((text, type) => {
	  var password = document.getElementById("password").value
	  lightdm.respond(password);
	});
	lightdm.authentication_complete.connect(() => {
		toggleWaitingState(false);
		if (lightdm.is_authenticated) {
            var session = document.getElementById("sessions").value
			lightdm.start_session(session);
		} else {
			var password = document.getElementById("password")
			// Add a class that defines an animation
            password.classList.add('error');
          
            // remove the class after the animation completes
            setTimeout(function() {
                password.classList.remove('error');
            }, 300);
		}
	});
}

window.addEventListener("GreeterReady", initGreeter)