add confirmation modal for system actions.

themes/antergos/css/style.css

@@ -368,10 +368,15 @@ div.password, div.status, div.timer {
 	width: auto;
 }
 
+input.password.form-control {
+	box-shadow: 0 1px #dddddd;
+	margin-top: -1px;
+}
 input.password.form-control:focus {
 	-webkit-box-shadow: inset 0 -2px 0 #2196F3 !important;
 	box-shadow: inset 0 -2px 0 #2196F3 !important;
 	border-bottom: 2px solid #2196F3 !important;
+	margin-top: 0;
 }
 
 #passwordArea .btn {
@@ -544,3 +549,19 @@ a.list-group-item:focus:after, a.list-group-item:hover:after, a.list-group-item.
 	width: 100%;
 	margin-top: 5px;
 }
+.modal-title {
+	text-align: center;
+	padding-top: 20px;
+}
+
+.modal-footer {
+	text-align: center;
+	padding-bottom: 30px;
+	padding-left: 25px;
+	padding-right: 25px;
+}
+
+.modal-header {
+	padding-left: 25px;
+	padding-right: 25px;
+}

themes/antergos/index.html

@@ -52,7 +52,7 @@
 	<script src="js/vendor/moment-with-locales.min.js"></script>
 
 	<!-- Theme JavaScript -->
-	<script type="text/javascript" src="js/greeting_translations.js"></script>
+	<script type="text/javascript" src="js/translations.js"></script>
 	<script type="text/javascript" src="js/greeter-compiled.js"></script>
 
 	<script type="text/javascript">
@@ -322,15 +322,14 @@
 <div id="logArea" class="log"></div>
 
 <div class="modal">
-	<div class="modal-dialog">
+	<div class="modal-dialog modal-sm">
 		<div class="modal-content">
 			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&close;</button>
+				<button type="button" class="close fa fa-close" data-dismiss="modal" aria-hidden="true"></button>
-				<h4 class="modal-title"></h4>
+				<h4 class="modal-title" data-i18n="confirm_system_action">${i18n}</h4>
-			</div>
-			<div class="modal-body">
-				<p data-i18n="confirm_system_action">${i18n}</p>
 			</div>
+			<!--<div class="modal-body">
+			</div>-->
 			<div class="modal-footer">
 				<button type="button" class="btn btn-default" data-dismiss="modal" data-i18n="cancel">${i18n}</button>
 				<button type="button" class="btn btn-primary"></button>

themes/antergos/js/greeter-compiled.js

@@ -56,6 +56,8 @@ var AntergosTheme = (function () {
 
 		if (null !== _self) {
 			return _self;
+		} else {
+			_self = this;
 		}
 		this.debug = this.cache_get('debug', 'enabled');
 		this.user_list_visible = false;
@@ -71,12 +73,18 @@ var AntergosTheme = (function () {
 		this.lang = window.navigator.language.split('-')[0].toLowerCase();
 		this.translations = window.ant_translations;
 
+		if ('undefined' === typeof window.navigator.languages) {
+			window.navigator.languages = [window.navigator.language];
+		}
+
 		this.initialize();
 	}
 
 	_createClass(AntergosTheme, [{
 		key: 'initialize',
 		value: function initialize() {
+			this.prepare_translations();
+			this.do_static_translations();
 			this.initialize_clock();
 			this.prepare_login_panel_header();
 			this.prepare_user_list();
@@ -95,9 +103,10 @@ var AntergosTheme = (function () {
 	}, {
 		key: 'log',
 		value: function log(text) {
-			if ('true' === this.debug || true) {
+			if ('true' === this.debug) {
-				$('#logArea').append(text + '<br/>');
+				console.log(text);
 			}
+			$('#logArea').append(text + '<br/>');
 		}
 
 		/**
@@ -343,9 +352,7 @@ var AntergosTheme = (function () {
 					template = '\n\t\t\t\t<a href="#" id="' + action + '" class="btn btn-default ' + action + '" data-toggle="tooltip" data-placement="top" title="' + action.capitalize() + '" data-container="body">\n\t\t\t\t\t<i class="fa fa-' + actions[action] + '"></i>\n\t\t\t\t</a>';
 
 					if (lightdm[cmd]) {
-						$(template).appendTo($(this.$actions_container)).click(action, function (event) {
+						$(template).appendTo($(this.$actions_container)).click(this.system_action_handler);
-							lightdm[event.data]();
-						});
 					}
 				} // END for (var [action, icon] of actions)
 			} catch (err) {
@@ -364,6 +371,7 @@ var AntergosTheme = (function () {
 			}
 
 			$('[data-toggle=tooltip]').tooltip();
+			$('.modal').modal({ show: false });
 		}
 	}, {
 		key: 'initialize_clock',
@@ -373,7 +381,6 @@ var AntergosTheme = (function () {
 			var saved_format = this.cache_get('clock', 'time_format'),
 			    format = null !== saved_format ? saved_format : 'LT',
 			    detected_language = this.lang;
-			window.navigator.languages = typeof window.navigator.languages !== 'undefined' ? window.navigator.languages : [window.navigator.language];
 
 			// Workaround for moment.js bug: https://github.com/moment/moment/issues/2856
 			var _iteratorNormalCompletion6 = true;
@@ -437,22 +444,25 @@ var AntergosTheme = (function () {
 	}, {
 		key: 'prepare_login_panel_header',
 		value: function prepare_login_panel_header() {
-			var greeting = null;
+			var greeting = this.translations.greeting ? this.translations.greeting : 'Welcome!';
 
-			if (this.translations.greeting.hasOwnProperty(this.lang)) {
+			$('.welcome').text(greeting);
-				greeting = this.translations.greeting[this.lang];
+			$('#hostname').append(lightdm.hostname);
-			} else {
+		}
+	}, {
+		key: 'prepare_translations',
+		value: function prepare_translations() {
+			if (!this.translations.hasOwnProperty(this.lang)) {
 				var _iteratorNormalCompletion7 = true;
 				var _didIteratorError7 = false;
 				var _iteratorError7 = undefined;
 
 				try {
-
 					for (var _iterator7 = window.navigator.languages[Symbol.iterator](), _step7; !(_iteratorNormalCompletion7 = (_step7 = _iterator7.next()).done); _iteratorNormalCompletion7 = true) {
 						var lang = _step7.value;
 
-						if (this.translations.greeting.hasOwnProperty(lang)) {
+						if (this.translations.hasOwnProperty(lang)) {
-							greeting = this.translations.greeting[lang];
+							this.lang = lang;
 							break;
 						}
 					}
@@ -471,11 +481,30 @@ var AntergosTheme = (function () {
 					}
 				}
 			}
+			if (!this.translations.hasOwnProperty(this.lang)) {
+				this.lang = 'en';
+			}
 
-			greeting = null === greeting ? 'Welcome!' : greeting;
+			this.translations = this.translations[this.lang];
+		}
 
-			$('.welcome').text(greeting);
+		/**
-			$('#hostname').append(lightdm.hostname);
+   * Replace '${i18n}' with translated string for all elements that
+   * have the data-i18n attribute. This is for elements that are not generated
+   * dynamically (they can be found in index.html).
+   */
+
+	}, {
+		key: 'do_static_translations',
+		value: function do_static_translations() {
+			$('[data-i18n]').each(function () {
+				var key = $(this).attr('data-i18n'),
+				    html = $(this).html(),
+				    translated = _self.translations[key],
+				    new_html = html.replace('${i18n}', translated);
+
+				$(this).html(new_html);
+			});
 		}
 
 		/**
@@ -635,6 +664,24 @@ var AntergosTheme = (function () {
 					break;
 			}
 		}
+	}, {
+		key: 'system_action_handler',
+		value: function system_action_handler() {
+			var _this2 = this;
+
+			var action = $(this).attr('id'),
+			    $modal = $('.modal');
+
+			$modal.find('.btn-primary').text(_self.translations[action]).click(action, function (event) {
+				$(_this2).off('click');
+				lightdm[event.data]();
+			});
+			$modal.find('.btn-default').click(function () {
+				$(_this2).next().off('click');
+			});
+
+			$modal.modal('toggle');
+		}
 
 		/**
    * User image on('error') handler.

themes/antergos/js/greeter.js

@@ -49,8 +49,10 @@ String.prototype.capitalize = function() {
 class AntergosTheme {
 
 	constructor() {
-		if (null !== _self) {
+		if ( null !== _self ) {
 			return _self;
+		} else {
+			_self = this;
 		}
 		this.debug = this.cache_get( 'debug', 'enabled' );
 		this.user_list_visible = false;
@@ -66,10 +68,16 @@ class AntergosTheme {
 		this.lang = window.navigator.language.split( '-' )[ 0 ].toLowerCase();
 		this.translations = window.ant_translations;
 
+		if ( 'undefined' === typeof window.navigator.languages ) {
+			window.navigator.languages = [ window.navigator.language ];
+		}
+
 		this.initialize();
 	}
 
 	initialize() {
+		this.prepare_translations();
+		this.do_static_translations();
 		this.initialize_clock();
 		this.prepare_login_panel_header();
 		this.prepare_user_list();
@@ -85,9 +93,10 @@ class AntergosTheme {
 	 * @param {string} text - To be added to the log.
 	 */
 	log( text ) {
-		if ( 'true' === this.debug || true ) {
+		if ( 'true' === this.debug ) {
-			$( '#logArea' ).append( `${text}<br/>` );
+			console.log( text );
 		}
+		$( '#logArea' ).append( `${text}<br/>` );
 	}
 
 	/**
@@ -228,20 +237,18 @@ class AntergosTheme {
 				</a>`;
 
 			if ( lightdm[ cmd ] ) {
-				$( template ).appendTo( $( this.$actions_container ) ).click( action, ( event ) => {
+				$( template ).appendTo( $( this.$actions_container ) ).click( this.system_action_handler );
-					lightdm[ event.data ]();
-				} );
 			}
 		} // END for (var [action, icon] of actions)
 
 		$( '[data-toggle=tooltip]' ).tooltip();
+		$('.modal').modal({show: false});
 	}
 
 	initialize_clock() {
 		var saved_format = this.cache_get( 'clock', 'time_format' ),
 			format = (null !== saved_format) ? saved_format : 'LT',
 			detected_language = this.lang;
-		window.navigator.languages = (typeof window.navigator.languages !== 'undefined') ? window.navigator.languages : [ window.navigator.language ];
 
 		// Workaround for moment.js bug: https://github.com/moment/moment/issues/2856
 		for ( var lang of window.navigator.languages ) {
@@ -280,26 +287,46 @@ class AntergosTheme {
 		}
 	}
 
+
 	prepare_login_panel_header() {
-		var greeting = null;
+		var greeting = (this.translations.greeting) ? this.translations.greeting : 'Welcome!';
 
-		if ( this.translations.greeting.hasOwnProperty( this.lang ) ) {
+		$( '.welcome' ).text( greeting );
-			greeting = this.translations.greeting[ this.lang ];
+		$( '#hostname' ).append( lightdm.hostname );
+	}
 
-		} else {
 
+	prepare_translations() {
+		if ( ! this.translations.hasOwnProperty( this.lang ) ) {
 			for ( var lang of window.navigator.languages ) {
-				if ( this.translations.greeting.hasOwnProperty( lang ) ) {
+				if ( this.translations.hasOwnProperty( lang ) ) {
-					greeting = this.translations.greeting[ lang ];
+					this.lang = lang;
 					break;
 				}
 			}
 		}
+		if ( ! this.translations.hasOwnProperty( this.lang ) ) {
+			this.lang = 'en';
+		}
 
-		greeting = (null === greeting) ? 'Welcome!' : greeting;
+		this.translations = this.translations[ this.lang ];
+	}
 
-		$( '.welcome' ).text( greeting );
+
-		$( '#hostname' ).append( lightdm.hostname );
+	/**
+	 * Replace '${i18n}' with translated string for all elements that
+	 * have the data-i18n attribute. This is for elements that are not generated
+	 * dynamically (they can be found in index.html).
+	 */
+	do_static_translations() {
+		$( '[data-i18n]' ).each( function() {
+			var key = $( this ).attr( 'data-i18n' ),
+				html = $( this ).html(),
+				translated = _self.translations[ key ],
+				new_html = html.replace( '${i18n}', translated );
+
+			$( this ).html( new_html );
+		} );
 	}
 
 
@@ -431,6 +458,21 @@ class AntergosTheme {
 		}
 	}
 
+	system_action_handler() {
+		var action = $( this ).attr( 'id' ),
+			$modal = $( '.modal' );
+
+		$modal.find( '.btn-primary' ).text( _self.translations[ action ] ).click( action, ( event ) => {
+			$( this ).off( 'click' );
+			lightdm[ event.data ]();
+		} );
+		$modal.find( '.btn-default' ).click( () => {
+			$( this ).next().off( 'click' );
+		} );
+
+		$modal.modal('toggle');
+	}
+
 	/**
 	 * User image on('error') handler.
 	 */