V2.0.3 (#28)

* remove extra spaces

* use style.setProperty()

* login-form: use global-bg

* rename debug-mode to debug

* sidebar button css

* css

* accounts: fix bug if default user suddenly doesnt exists

* sessions: fix bug if default session suddenly doesnt exists

* sessions: fix bug if default session suddenly doesnt exists

* sessions: fix bug if default session suddenly doesnt exists part 3

* readme and cleanup

* readme

Author: eromatiya

README.md

@@ -1,12 +1,12 @@
-## The glorious lightdm webkit2 theme
+## glorious - a lightdm webkit2 theme
 
 [![maintained](https://img.shields.io/maintenance/yes/2020?label=maintained&style=flat-square)](https://github.com/manilarome/the-glorious-lightdm-webkit2-theme/commits/master) [![contributions](https://img.shields.io/badge/contribution-welcome-brightgreen&?style=flat-square)](https://github.com/manilarome/the-glorious-lightdm-webkit2-theme/pulls) [![HitCount](http://hits.dwyl.com/manilarome/the-glorious-lightdm-webkit2-theme.svg)](http://hits.dwyl.com/manilarome/the-glorious-lightdm-webkit2-theme) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/0812167ef9954b74ac23f7c1bfeb3764)](https://www.codacy.com?utm_source=github.com&utm_medium=referral&utm_content=manilarome/the-glorious-lightdm-webkit2-theme&utm_campaign=Badge_Grade)
 
 A sleek, modern, and glorified lightdm webkit2 theme
 
 ## [Live Demo](https://manilarome.github.io/lightdm-webkit2-theme-glorious)
 
-#### Demo password: `toor`
+### Demo password: `toor`
 
 <p align='center'><img alt='glorious' src='glorious.gif'/><br/><i>glorious - a lightdm webkit 2 theme</i></p>
 
@@ -16,7 +16,6 @@ Please make sure you don't have an ancient version of these.
 
 + lightdm
 + lightdm-webkit2-greeter
-+ an environment, a desktop environment or a window manager
 
 ### Installation
 
@@ -61,6 +60,10 @@ Please make sure you don't have an ancient version of these.
 	# If you encountered an error, right-click then reload.
 	```
 
+### Uninstall
+
+1. Follow the [installation instruction](#installation) in reverse order.
+
 ### Features
 
 + Multi-user support
@@ -102,10 +105,10 @@ There are two clock modes available - `24-hour` and `12-hour`. Switch between cl
 
 ### Notes
 
-+ You can add more background images by putting your wallpapers/images in `/usr/share/backgrounds/`.
-+ Make sure that you only have image files and directories inside `/usr/share/backgrounds/` or it will cause an error!
-+ If you're on a desktop environment like KDE Plasma and GNOME3, you can set your profile picture and real name in the settings. While if you're on a more minimal environment like window managers, you can install and use the program called `mugshot`.
-+ If your desktop environment or window manager's logo is not in the sessions screen, feel free to submit a [pull request](https://github.com/manilarome/lightdm-webkit2-theme-glorious/pulls)!
++ Add more background images by putting your wallpapers/images in `/usr/share/backgrounds/`.
++ Non-image and directory inside `/usr/share/backgrounds/` will cause an error! You will likely encounter this if you installed a package (for example `archlinux-wallpaper` that includes `AUTHORS` file).
++ Set your profile image in system settings or by using `mugshot`.
++ Missing DE/WM logo? Submit a [pull request](https://github.com/manilarome/lightdm-webkit2-theme-glorious/pulls)!
 + Translations are not yet supported. PR's are welcome!
 
 ### Credits

css/global.css

@@ -8,7 +8,7 @@
 	--button-bg-hover: #F2F2F230;
 	--button-bg-focus: #F2F2F245;
 	--button-bg-active: #F2F2F260;
-	--login-form-elements-bg: #F2F2F222;
+	--login-form-elements-bg: var(--global-bg);
 	--login-form-elements-fg: #F2F2F2;
 	--login-form-elements-button-bg: var(--login-form-elements-bg);
 	--login-form-elements-button-bg-hover: var(--button-bg-hover);

css/screens.css

@@ -91,17 +91,12 @@
 	top: 0;
 	position: fixed;
 	pointer-events: unset;
-	transform: translateZ();
-	transition:
-						top var(--global-animation-speed),
-						pointer-events var(--global-animation-speed),
-						transform var(--global-animation-speed);
+	transition: all var(--global-animation-speed);
 }
 
 #screen-greeter.screen-greeter-hide {
-	top: -100vh;
+	top: -100%;
 	pointer-events: none;
-	transform: translateZ();
 }
 
 #screen-greeter-content-parent.screen-content-parent {

css/sidebar.css

@@ -22,7 +22,7 @@
 	backdrop-filter: blur(var(--global-blur-strength));
 	position: fixed;
 	top: 0;
-	right: -411px;
+	right: -100%;
 	box-sizing: border-box;
 	box-shadow: none;
 	padding: 10px 10px;
@@ -337,6 +337,17 @@ button.button-input {
 	border-radius: 6px;
 	padding: 10px;
 	margin: 10px 0;
+	cursor: pointer;
+}
+
+button.button-input:hover {
+	opacity: 1;
+	background: var(--button-bg-hover);
+}
+
+button.button-input:active {
+	opacity: 1;
+	background: var(--button-bg-active);
 }
 
 #input-buttons-parent.input-parent button:nth-child(1) {

index.html

@@ -296,7 +296,7 @@
 			</button>
 		</div>
 	</div>
-	<script type='text/javascript' src='js/debug-mode.js'></script>
+	<script type='text/javascript' src='js/debug.js'></script>
 	<script type='text/javascript' src='js/user-profile.js'></script>
 	<script type='text/javascript' src='js/authenticate.js'></script>
 	<script type='text/javascript' src='js/greeter.js'></script>

js/accounts.js

@@ -68,10 +68,29 @@ class Accounts {
 		);
 	}
 
+	_setAccountDefaultOnStartUpFallback() {
+		this._defaultUser = this._usersObject[0].username;
+		this._defaultUserDisplayName = this._usersObject[0].display_name;
+		this._defaultUserProfileImage =  this._usersObject[0].image;
+		this._defaultUserProfileImageFallback = 'assets/profiles/user.svg';
+		const userDefault = {
+			'userName': this._defaultUser,
+			'displayName': this._defaultUserDisplayName,
+			'profileImage': this._defaultUserProfileImage,
+			'profileImageFallBack': this._defaultUserProfileImageFallback
+		};
+		this._updateUserProfileDefaults(userDefault);
+	}	
+
 	_setAccountDefaultOnStartUp() {
+		let defaultAccountItem = document.querySelector(`#button-accounts-item-${this._defaultUser}`);
+		if (!defaultAccountItem) {
+			// If the should've been default user does not exist
+			defaultAccountItem = document.querySelector(`#button-accounts-item-${this._usersObject[parseInt(0, 10)].username}`);
+			this._setAccountDefaultOnStartUpFallback();
+		}
 		this._setUserImageProfile(this._defaultUserProfileImage, this._defaultUserProfileImageFallback);
 		this._setUserNameLabel(this._defaultUserDisplayName);
-		const defaultAccountItem = document.querySelector(`#button-accounts-item-${this._defaultUser}`);
 		this._updateAccountDefault(defaultAccountItem);
 	}
 

js/authenticate.js

@@ -20,7 +20,8 @@ class Authenticate {
 			'“You miss 100% of the shots you don\'t take – Wayne Gretzky – Michael Scott”',
 			'Get out of there, it\'s gonna blow!',
 			'I can do this all day.',
-			'You father is right. You are a disappointment...'
+			'You father is right. You are a disappointment...',
+			'PAM will lock you out...'
 		];
 		return errorMessages[Math.floor(Math.random() * errorMessages.length)];	
 	}
@@ -41,8 +42,8 @@ class Authenticate {
 	}
 
 	startAuthentication() {
-			lightdm.cancel_authentication();
-			lightdm.authenticate(String(accounts.getDefaultUserName()));
+		lightdm.cancel_authentication();
+		lightdm.authenticate(String(accounts.getDefaultUserName()));
 	}
 
 	// Timer expired, create new authentication session

js/backgrounds.js

@@ -63,7 +63,7 @@ class Backgrounds {
 		dummyImg.onload = () => {
 			const src = `url('${dummyImg.src}')`;
 			for (let background of this._backgrounds) {
-				background.style.backgroundImage = src;
+				background.style.setProperty('background-image', src);
 			}
 		}
 	}
@@ -106,7 +106,7 @@ class Backgrounds {
 			'click',
 			() => {
 				for (let background of this._backgrounds) {
-					background.style.backgroundImage = `url('${path}')`;
+					background.style.setProperty('background-image', `url('${path}')`);
 				}
 				this._localStorage.setItem('defaultBackgroundImage', String(path));
 				this._backgroundRandomMode = false;

js/debug-mode.js renamed to js/debug.js

@@ -1,10 +1,10 @@
-class DebugMode {
+class Debug {
 	constructor() {
 		this._debugModePass = 'toor';
-		this._debugModeProc();
+		this._loadDebugObjects();
 	}
 
-	_debugModeProc() {
+	_loadDebugObjects() {
 		if (!window.config) {
 			window.config = {};
 			window.config.get_str = function() {

js/script.js

@@ -1,5 +1,5 @@
 // Instantiate debug mode
-const debugMode = new DebugMode();
+const debug = new Debug();
 
 // Instantiate image profile
 const userProfile = new UserProfile();