Converted login to BS5 and other changes

Converted the login view to Bootstrap and Bootswatch 5. Added an option to change the login form style. Shifted some translations around and added new ones. Partially moved from Bower to NPM, added new branding logo's. Some other small changes and optimizations.
2025-12-24 01:57:51 -05:00 · 2021-06-07 23:23:03 +02:00
parent 95f19d6063
commit 2eee6313e0
33 changed files with 493 additions and 169 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ generate_langauges.php
 dist/
 docs/
 public/bower_components
+npm_modules
 *.patch
 patches/
 translations/
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -40,15 +40,6 @@ module.exports = function(grunt) {
 					'jquery-ui': 'themes/base/jquery-ui.min.css'
 				}
 			},
-			targetdistbootswatch: {
-				options: {
-					srcPrefix: 'public/bower_components/bootswatch',
-					destPrefix: 'public/dist'
-				},
-				files: {
-					bootswatch: '*/'
-				}
-			},
 			targetlicense: {
 				options: {
 					srcPrefix: './'
@@ -58,10 +49,89 @@ module.exports = function(grunt) {
 				}
 			}
 		},
+		copy: {
+			themes: {
+				files: [{
+					expand: true,
+					cwd: 'node_modules/bootstrap/dist/css',
+					src: ['bootstrap.css', 'bootstrap.min.css'],
+					dest: 'public/dist/bootswatch/bootstrap/',
+					filter: 'isFile'},
+					{
+					expand: true,
+					cwd: 'node_modules/bootstrap-5/dist/css',
+					src: ['bootstrap.css', 'bootstrap.min.css'],
+					dest: 'public/dist/bootswatch-5/bootstrap/',
+					filter: 'isFile'},
+					{
+					expand: true,
+					cwd: 'node_modules/bootstrap/dist/js',
+					src: ['bootstrap.js', 'bootstrap.min.js'],
+					dest: 'public/dist/bootstrap/js/',
+					filter: 'isFile'},
+					{
+					expand: true,
+					cwd: 'node_modules/bootswatch',
+					src: ['**/bootstrap.css', '**/bootstrap.min.css'],
+					dest: 'public/dist/bootswatch/',
+					filter: 'isFile'},
+					{
+					expand: true,
+					cwd: 'node_modules/bootswatch-5/dist',
+					src: ['**/bootstrap.css', '**/bootstrap.min.css'],
+					dest: 'public/dist/bootswatch-5/',
+					filter: 'isFile'},
+				],
+			},
+			licenses: {
+				files: [{
+					expand: true,
+					src: 'LICENSE',
+					dest: 'public/license/',
+					filter: 'isFile',},
+					{
+					expand: true,
+					cwd: 'node_modules/bootstrap-5',
+					src: 'LICENSE',
+					dest: 'public/license/',
+					rename: function(dest, src) { return dest + src.replace('LICENSE', 'bootstrap-5.license'); },
+					filter: 'isFile',},
+					{
+					expand: true,
+					cwd: 'node_modules/bootstrap',
+					src: 'LICENSE',
+					dest: 'public/license/',
+					rename: function(dest, src) { return dest + src.replace('LICENSE', 'bootstrap.license'); },
+					filter: 'isFile',},
+					{
+					expand: true,
+					cwd: 'node_modules/bootstrap-icons',
+					src: 'LICENSE.md',
+					dest: 'public/license/',
+					rename: function(dest, src) { return dest + src.replace('LICENSE.md', 'bootstrap-icons.license'); },
+					filter: 'isFile',},
+					{
+					expand: true,
+					cwd: 'node_modules/bootswatch',
+					src: 'LICENSE',
+					dest: 'public/license/',
+					rename: function(dest, src) { return dest + src.replace('LICENSE', 'bootswatch.license'); },
+					filter: 'isFile',},
+					{
+					expand: true,
+					cwd: 'node_modules/bootswatch-5',
+					src: 'LICENSE',
+					dest: 'public/license/',
+					rename: function(dest, src) { return dest + src.replace('LICENSE', 'bootswatch-5.license'); },
+					filter: 'isFile',},
+				],
+			},
+		},
 		cssmin: {
 			target: {
 				files: {
-					'public/dist/<%= pkg.name %>.min.css': ['tmp/opensourcepos_bower.css', 'public/css/*.css', '!public/css/login.css', '!public/css/invoice_email.css', '!public/css/barcode_font.css', '!public/css/darkly.css']
+					'public/dist/<%= pkg.name %>.min.css': ['tmp/opensourcepos_bower.css', 'public/css/*.css', '!public/css/login.css', '!public/css/login.min.css', '!public/css/invoice_email.css', '!public/css/barcode_font.css', '!public/css/darkly.css'],
+					'public/css/login.min.css': ['public/css/login.css']
 				}
 			}
 		},
@@ -114,7 +184,7 @@ module.exports = function(grunt) {
 					closeTag: '<!-- end css template tags -->',
 					ignorePath: '../../../public/'
 				},
-				src: ['public/css/*.css', '!public/css/login.css', '!public/css/invoice_email.css', '!public/css/barcode_font.css', '!public/css/darkly.css'],
+				src: ['public/css/*.css', '!public/css/login.css', '!public/css/login.min.css', '!public/css/invoice_email.css', '!public/css/barcode_font.css', '!public/css/darkly.css'],
 				dest: 'application/views/partial/header.php',
 			},
 			mincss_header: {
@@ -135,7 +205,7 @@ module.exports = function(grunt) {
 					closeTag: '<!-- end css template tags -->',
 					ignorePath: '../../public/'
 				},
-				src: ['public/css/login.css'],
+				src: 'public/css/login.min.css',
 				dest: 'application/views/login.php'
 			},
 			js: {
@@ -145,7 +215,7 @@ module.exports = function(grunt) {
 					closeTag: '<!-- end js template tags -->',
 					ignorePath: '../../../public/'
 				},
-				src: ['public/js/jquery*', 'public/js/*.js'],
+				src: ['public/dist/bootstrap/js/*.min.js', 'public/js/jquery*', 'public/js/*.js'],
 				dest: 'application/views/partial/header.php'
 			},
 			minjs: {
@@ -247,6 +317,8 @@ module.exports = function(grunt) {
 							'!/public/images/menubar/png/',
 							'!/public/dist/bootswatch/',
 							'/public/dist/bootswatch/*/*.css',
+							'!/public/dist/bootswatch-5/',
+							'/public/dist/bootswatch-5/*/*.css',
 							'database/**',
 							'*.txt',
 							'*.md',
@@ -269,7 +341,7 @@ module.exports = function(grunt) {
 	grunt.loadNpmTasks('grunt-apigen');
 	grunt.loadNpmTasks('grunt-contrib-compress');

-	grunt.registerTask('default', ['wiredep', 'bower_concat', 'bowercopy', 'concat', 'uglify', 'cssmin', 'tags', 'cachebreaker']);
+	grunt.registerTask('default', ['wiredep', 'bower_concat', 'bowercopy', 'copy', 'concat', 'uglify', 'cssmin', 'tags', 'cachebreaker']);
 	grunt.registerTask('update', ['composer:update', 'bower:update']);
 	grunt.registerTask('genlicense', ['clean:license', 'license', 'bower-licensechecker']);
 	grunt.registerTask('package', ['default', 'compress']);
--- a/28
+++ b/28
@@ -26,12 +26,12 @@ Copyright (c) 2013 Ramel
 Copyright (c) 2012-2014 pappastech
 Copyright (c) 2012 Alain

-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
@@ -40,13 +40,12 @@ You cannot claim copyright or ownership of the Software.

 Versions ≥ 3.3.2:

-Footer signatures "© 2010 - 2021 · opensourcepos.org · 3.3.3 - 6909c8" 
+Footer signatures "© 2010 - 2021 · opensourcepos.org · 3.3.3 - 6909c8"
 In the format of: "© 2010 - Current Year · opensourcepos.org · Version - Commit"

 and/or 

 "· opensourcepos.org ·"
-
 with version, hash and URL link to the official website of the project MUST BE RETAINED, 
 MUST BE VISIBLE IN EVERY PAGE and CANNOT BE MODIFIED.

@@ -61,9 +60,10 @@ and/or
 with version, hash and URL link to the original distribution of the code MUST BE RETAINED, 
 MUST BE VISIBLE IN EVERY PAGE and CANNOT BE MODIFIED.

-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.
--- a/application/controllers/Config.php
+++ b/application/controllers/Config.php
@@ -184,7 +184,7 @@ class Config extends Secure_Controller
 			if($dirinfo->isDir() && !$dirinfo->isDot() && $dirinfo->getFileName() != 'fonts')
 			{
 				$file = $this->xss_clean($dirinfo->getFileName());
-				$themes[$file] = $file;
+				$themes[$file] = ucfirst($file);
 			}
 		}

@@ -283,6 +283,7 @@ class Config extends Secure_Controller
 	{
 		$batch_save_data = array(
 			'theme' => $this->input->post('theme'),
+			'login_form' => $this->input->post('login_form'),
 			'default_sales_discount_type' => $this->input->post('default_sales_discount_type') != NULL,
 			'default_sales_discount' => $this->input->post('default_sales_discount'),
 			'default_receivings_discount_type' => $this->input->post('default_receivings_discount_type') != NULL,
--- a/application/language/en-US/common_lang.php
+++ b/application/language/en-US/common_lang.php
@@ -27,7 +27,8 @@ $lang["common_gender"] = "Gender";
 $lang["common_gender_female"] = "F";
 $lang["common_gender_male"] = "M";
 $lang["common_gender_undefined"] = "";
-$lang["common_id"] = "Id";
+$lang["common_icon"] = "Icon";
+$lang["common_id"] = "ID";
 $lang["common_import"] = "Import";
 $lang["common_import_change_file"] = "Change";
 $lang["common_import_csv"] = "CSV Import";
@@ -40,8 +41,8 @@ $lang["common_last_name_required"] = "Last Name is a required field.";
 $lang["common_last_page"] = "Last";
 $lang["common_learn_about_project"] = "to learn the latest information about the project.";
 $lang["common_list_of"] = "List of";
-$lang["common_logout"] = "Logout";
-$lang["common_migration_needed"] = "A database migration to %1 will start after login.";
+$lang["common_logo"] = "Logo";
+$lang["common_logo_mark"] = "Mark";
 $lang["common_new"] = "New";
 $lang["common_no"] = "";
 $lang["common_no_persons_to_display"] = "There are no people to display.";
@@ -60,6 +61,8 @@ $lang["common_return_policy"] = "Return Policy";
 $lang["common_search"] = "Search";
 $lang["common_search_options"] = "Search options";
 $lang["common_searched_for"] = "Searched for";
+$lang["common_software_short"] = "OSPOS";
+$lang["common_software_title"] = "Open Source Point of Sale";
 $lang["common_state"] = "State";
 $lang["common_submit"] = "Submit";
 $lang["common_total_spent"] = "Total Spent";
--- a/application/language/en-US/config_lang.php
+++ b/application/language/en-US/config_lang.php
@@ -126,6 +126,7 @@ $lang["config_financial_year_may"] = "1st of May";
 $lang["config_financial_year_nov"] = "1st of November";
 $lang["config_financial_year_oct"] = "1st of October";
 $lang["config_financial_year_sep"] = "1st of September";
+$lang["config_floating_labels"] = "Floating Labels";
 $lang["config_gcaptcha_enable"] = "Login Page reCAPTCHA";
 $lang["config_gcaptcha_secret_key"] = "reCAPTCHA Secret Key";
 $lang["config_gcaptcha_secret_key_required"] = "reCAPTCHA Secret Key is a required field";
@@ -145,6 +146,7 @@ $lang["config_image_restrictions"] = "Image Upload Restrictions";
 $lang["config_include_hsn"] = "Include Support for HSN Codes";
 $lang["config_info"] = "Information";
 $lang["config_info_configuration"] = "Store Information";
+$lang["config_input_groups"] = "Input Groups";
 $lang["config_integrations"] = "Integrations";
 $lang["config_integrations_configuration"] = "Third Party Integrations";
 $lang["config_invoice"] = "Invoice";
@@ -174,6 +176,7 @@ $lang["config_locale_info"] = "Localization Configuration Information";
 $lang["config_location"] = "Stock";
 $lang["config_location_configuration"] = "Stock Locations";
 $lang["config_location_info"] = "Location Configuration Information";
+$lang["config_login_form"] = "Login Form Style";
 $lang["config_logout"] = "Do you want to make a backup before logging out? Click [OK] to backup or [Cancel] to logout.";
 $lang["config_mailchimp"] = "MailChimp";
 $lang["config_mailchimp_api_key"] = "MailChimp API Key";
@@ -288,6 +291,7 @@ $lang["config_tax_decimals"] = "Tax Decimals";
 $lang["config_tax_id"] = "Tax Id";
 $lang["config_tax_included"] = "Tax Included";
 $lang["config_theme"] = "Theme";
+$lang["config_theme_preview"] = "Preview Theme:";
 $lang["config_thousands_separator"] = "Thousands Separator";
 $lang["config_timezone"] = "Timezone";
 $lang["config_timezone_error"] = "OSPOS Timezone is Different from your Local Timezone.";
--- a/application/language/en-US/login_lang.php
+++ b/application/language/en-US/login_lang.php
@@ -1,9 +1,12 @@
 <?php
-$lang["login_gcaptcha"] = "I'm not a robot.";
-$lang["login_go"] = "Go";
-$lang["login_invalid_gcaptcha"] = "Please verify that you are not a robot.";
-$lang["login_invalid_installation"] = "The installation is not correct, check your php.ini file.";
-$lang["login_invalid_username_and_password"] = "Invalid Username or Password.";
+$lang["login_welcome"] = "Welcome to %1!";
 $lang["login_login"] = "Login";
-$lang["login_password"] = "Password";
+$lang["login_logout"] = "Logout";
 $lang["login_username"] = "Username";
+$lang["login_password"] = "Password";
+$lang["login_go"] = "Go";
+$lang["login_gcaptcha"] = "I'm not a robot.";
+$lang["login_invalid_gcaptcha"] = "Please verify that you are not a robot.";
+$lang["login_invalid_username_and_password"] = "Invalid username and/or password.";
+$lang["login_invalid_installation"] = "The installation is not correct, check your php.ini file.";
+$lang["login_migration_needed"] = "A database migration to %1 will start after login.";
--- a/application/views/configs/general_config.php
+++ b/application/views/configs/general_config.php
@@ -6,8 +6,28 @@

 			<div class="form-group form-group-sm">
 				<?php echo form_label($this->lang->line('config_theme'), 'theme', array('class' => 'control-label col-xs-2')); ?>
+				<div class='col-sm-10'>
+					<div class="form-group form-group-sm row">
+						<div class='col-sm-3'>
+							<?php echo form_dropdown('theme', $themes, $this->config->item('theme'), array('class' => 'form-control input-sm', 'id' => 'theme-change')); ?>
+						</div>
+						<div class="col-sm-7">
+							<a href="<?php echo 'https://bootswatch.com/3/' . ('bootstrap'==($this->config->item('theme')) ? 'default' : $this->config->item('theme')); ?>" target="_blank" rel=”noopener”>
+								<span><?php echo $this->lang->line('config_theme_preview') . ' ' . ucfirst($this->config->item('theme')) . ' '; ?></span><span class="glyphicon glyphicon-new-window"></span>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="form-group form-group-sm">
+				<?php echo form_label($this->lang->line('config_login_form'), 'login_form', array('class' => 'control-label col-xs-2')); ?>
 				<div class='col-xs-2'>
-					<?php echo form_dropdown('theme', $themes, $this->config->item('theme'), array('class' => 'form-control input-sm')); ?>
+					<?php echo form_dropdown('login_form', array(
+							'floating_labels' => $this->lang->line('config_floating_labels'),
+							'input_groups' => $this->lang->line('config_input_groups')
+						),
+						$this->config->item('login_form'), array('class' => 'form-control input-sm')); ?>
 				</div>
 			</div>

--- a/application/views/login.php
+++ b/application/views/login.php
@@ -1,54 +1,98 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!doctype html>
+<html lang="<?php echo current_language_code(); ?>">
+
 <head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<base href="<?php echo base_url();?>" />
-	<title><?php echo $this->config->item('company') . ' | OSPOS ' . $this->config->item('application_version')  . ' | ' .  $this->lang->line('login_login'); ?></title>
-	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
-	<link rel="stylesheet" type="text/css" href="<?php echo 'dist/bootswatch/' . (empty($this->config->item('theme')) ? 'flatly' : $this->config->item('theme')) . '/bootstrap.min.css' ?>"/>
-	<!-- start css template tags -->
-	<link rel="stylesheet" type="text/css" href="css/login.css"/>
-	<!-- end css template tags -->
+  <meta charset="utf-8">
+	<base href="<?php echo base_url(); ?>">
+	<title><?php echo $this->config->item('company') . '&nbsp;|&nbsp;' . $this->lang->line('common_software_short')  . '&nbsp;|&nbsp;' .  $this->lang->line('login_login'); ?></title>
+	<meta content="width=device-width, initial-scale=1" name="viewport">
+  <meta content="noindex, nofollow" name="robots">
+	<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
+  <link href="<?php echo 'dist/bootswatch-5/' . (empty($this->config->item('theme')) || 'paper' == $this->config->item('theme') || 'readable' == $this->config->item('theme') ? 'flatly' : $this->config->item('theme')) . '/bootstrap.min.css'; ?>" rel="stylesheet" type="text/css">
+  <!-- start css template tags -->
+  <link rel="stylesheet" type="text/css" href="css/login.min.css"/>
+  <!-- end css template tags -->
+	<meta content="#2c3e50" name="theme-color">
 </head>

-<body>
-	<div id="logo" align="center"><img src="<?php echo base_url();?>/images/logo.png"></div>
-
-	<div id="login">
-		<?php echo form_open('login') ?>
-			<div id="container">
-				<div align="center" style="color:red"><?php echo validation_errors(); ?></div>
-
+<body class="bg-light d-flex flex-column">
+  <main class="d-flex justify-content-around align-items-center flex-grow-1">
+    <div class="container-login container-fluid d-flex flex-column flex-md-row bg-body shadow rounded m-3 p-4 p-md-0">
+      <div class="box-logo d-flex flex-column justify-content-center align-items-center border-end px-4 pb-3 p-md-4">
+      <?php if ($this->Appconfig->get('company_logo')): ?>
+        <img class="logo w-100" src="<?php echo base_url('uploads/' . $this->Appconfig->get('company_logo')); ?>" alt="<?php echo $this->lang->line('common_logo') . '&nbsp;' . $this->config->item('company'); ?>">
+      <?php else: ?>
+        <svg class="logo text-primary" role="img" viewBox="0 0 308.57998 308.57997" xmlns="http://www.w3.org/2000/svg">
+          <title><?php echo $this->lang->line('common_software_title') . '&nbsp;' . $this->lang->line('common_logo'); ?></title>
+          <circle cx="154.28999" cy="154.28999" r="154.28999" fill="currentColor"/>
+          <path fill="#fff" d="M154.88998 145.66999c-.03-1.26-.03-3.29.19-4.29 4.6-11.1 15.57-18.82 28.3-18.82h.41v58.3c0 .12-.03.78-.04.9-.54 16.46-14.01 29.7-30.59 29.7v27.08c21 0 39.17-11.27 49.29-28.07l.07-.11c2.9.45 5.86.75 8.9.75 31.95 0 57.81-26 57.81-57.81 0-30.87-24.37-56.46-55.1-57.81h-30.74c-17.18 0-32.61 7.64-43.22 19.63-10.59-11.92-25.86-19.59-43.02-19.59-31.86 0-57.77 25.91-57.77 57.77 0 31.86 25.91 57.77 57.77 57.77 31.86 0 57.77-25.91 57.77-57.77v-3.68c-.01.01-.02-3.31-.03-3.95zm-57.75 38.33c-16.92 0-30.69-13.77-30.69-30.69s13.77-30.69 30.69-30.69 30.69 13.77 30.69 30.69-13.77 30.69-30.69 30.69zm142.96-19.87c-4.33 11.64-15.57 19.9-28.7 19.9h-.54v-61.47h.54c13.13 0 24.37 8.26 28.7 19.9 1.35 3.25 2.03 6.91 2.03 10.83s-.67 7.59-2.03 10.84z"/>
+        </svg>
+      <?php endif; ?>
+      </div>
+      <section class="box-login d-flex flex-column justify-content-center align-items-center p-md-4">
+				<?php echo form_open('login'); ?>
+        <h3 class="text-center m-0"><?php echo $this->lang->line('login_welcome', $this->lang->line('common_software_short')); ?></h3>
+        <?php if (validation_errors()): ?>
+        <div class="alert alert-warning mt-3">
+          <?php echo validation_errors(); ?>
+        </div>
+        <?php endif; ?>
 				<?php if (!$this->migration->is_latest()): ?>
-				<div align="center" style="color:red"><?php echo $this->lang->line('common_migration_needed', $this->config->item('application_version')); ?></div>
-				<?php endif; ?>
-
-				<div id="login_form">
-					<div class="input-group">
-						<span class="input-group-addon input-sm"><span class="glyphicon glyphicon-user"></span></span>
-						<input class="form-control" placeholder="<?php echo $this->lang->line('login_username')?>" name="username" type="text" size=20 autofocus></input>
-					</div>
-
-					<div class="input-group">
-						<span class="input-group-addon input-sm"><span class="glyphicon glyphicon-lock"></span></span>
-						<input class="form-control" placeholder="<?php echo $this->lang->line('login_password')?>" name="password" type="password" size=20></input>
-					</div>
-
-					<?php
-					if($this->config->item('gcaptcha_enable'))
-					{
-						echo '<script src="https://www.google.com/recaptcha/api.js"></script>';
-						echo '<div class="g-recaptcha" align="center" data-sitekey="' . $this->config->item('gcaptcha_site_key') . '"></div>';
-					}
-					?>
-
-					<input class="btn btn-primary btn-block" type="submit" name="loginButton" value="<?php echo $this->lang->line('login_go')?>"/>
+        <div class="alert alert-danger mt-3">
+					<?php echo $this->lang->line('login_migration_needed', $this->config->item('application_version')); ?>
 				</div>
-			</div>
-		<?php echo form_close(); ?>
-
-		<h1>Open Source Point Of Sale <?php echo $this->config->item('application_version'); ?></h1>
-
-	</div>
+				<?php endif; ?>
+        <?php if (empty($this->config->item('login_form')) || 'floating_labels'==($this->config->item('login_form'))): ?>
+        <div class="form-floating mt-3">
+          <input class="form-control" id="input-username" name="username" type="text" placeholder="<?php echo $this->lang->line('login_username'); ?>">
+          <label for="input-username"><?php echo $this->lang->line('login_username'); ?></label>
+        </div>
+        <div class="form-floating mb-3">
+          <input class="form-control" id="input-password" name="password" type="password" placeholder="<?php echo $this->lang->line('login_password'); ?>">
+          <label for="input-password"><?php echo $this->lang->line('login_password'); ?></label>
+        </div>
+      <?php elseif ('input_groups'==($this->config->item('login_form'))): ?>
+        <div class="input-group mt-3">
+          <span class="input-group-text" id="input-username">
+            <svg class="bi" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+              <title><?php echo $this->lang->line('common_icon') . '&nbsp;' . $this->lang->line('login_username'); ?></title>
+              <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+            </svg>
+          </span>
+          <input class="form-control" name="username" type="text" placeholder="<?php echo $this->lang->line('login_username'); ?>" aria-label="<?php echo $this->lang->line('login_username'); ?>" aria-describedby="input-username">
+        </div>
+        <div class="input-group mb-3">
+          <span class="input-group-text" id="input-password">
+            <svg class="bi" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+              <title><?php echo $this->lang->line('common_icon') . '&nbsp;' . $this->lang->line('login_password'); ?></title>
+              <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+            </svg>
+          </span>
+          <input class="form-control" name="password" type="password" placeholder="<?php echo $this->lang->line('login_password'); ?>" aria-label="<?php echo $this->lang->line('login_password'); ?>" aria-describedby="input-password">
+        </div>
+        <?php endif; ?>
+				<?php if($this->config->item('gcaptcha_enable')) {
+					echo '<script src="https://www.google.com/recaptcha/api.js"></script>';
+					echo '<div class="g-recaptcha mb-3" align="center" data-sitekey="' . $this->config->item('gcaptcha_site_key') . '"></div>'; }
+        ?>
+        <div class="d-grid">
+          <button class="btn btn-lg btn-primary" name="login-button" type="submit" ><?php echo $this->lang->line('login_go'); ?></button>
+        </div>
+				<?php echo form_close(); ?>
+      </section>
+    </div>
+  </main>
+  <footer class="d-flex justify-content-center flex-shrink-0 text-center">
+    <div class="footer container-fluid bg-body rounded shadow p-3 mb-md-4 mx-md-3">
+      <span class="text-muted">
+        <svg height="1em" role="img" viewBox="0 0 229.85 143.05001" xmlns="http://www.w3.org/2000/svg">
+          <title><?php echo $this->lang->line('common_software_short') . '&nbsp;' . $this->lang->line('common_logo_mark'); ?></title>
+          <path fill="currentColor" d="M115.51 50.18c-.03-1.26-.03-3.29.19-4.29 4.6-11.1 15.57-18.82 28.3-18.82h.41v58.3c0 .12-.03.78-.04.9-.54 16.46-14.01 29.7-30.59 29.7v27.08c21 0 39.17-11.27 49.29-28.07l.07-.11c2.9.45 5.86.75 8.9.75 31.95 0 57.81-26 57.81-57.81 0-30.87-24.37-56.46-55.1-57.81h-30.74c-17.18 0-32.61 7.64-43.22 19.63C90.2 7.71 74.93.04 57.77.04 25.91.04 0 25.95 0 57.81c0 31.86 25.91 57.77 57.77 57.77 31.86 0 57.77-25.91 57.77-57.77v-3.68c-.01.01-.02-3.31-.03-3.95zM57.76 88.51c-16.92 0-30.69-13.77-30.69-30.69s13.77-30.69 30.69-30.69S88.45 40.9 88.45 57.82 74.68 88.51 57.76 88.51zm142.96-19.87c-4.33 11.64-15.57 19.9-28.7 19.9h-.54V27.07h.54c13.13 0 24.37 8.26 28.7 19.9 1.35 3.25 2.03 6.91 2.03 10.83s-.67 7.59-2.03 10.84z"/>
+        </svg>
+      </span>
+      <span><?php echo $this->lang->line('common_software_title'); ?></span>
+    </div>
+  </footer>
 </body>
+
 </html>
--- a/application/views/partial/header.php
+++ b/application/views/partial/header.php
@@ -37,7 +37,6 @@
 		<script src="bower_components/jquery-form/src/jquery.form.js"></script>
 		<script src="bower_components/jquery-validate/dist/jquery.validate.js"></script>
 		<script src="bower_components/jquery-ui/jquery-ui.js"></script>
-		<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
 		<script src="bower_components/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js"></script>
 		<script src="bower_components/jasny-bootstrap/dist/js/jasny-bootstrap.js"></script>
 		<script src="bower_components/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
@@ -64,6 +63,7 @@
 		<script src="bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
 		<!-- endbower -->
 		<!-- start js template tags -->
+		<script type="text/javascript" src="dist/bootstrap/js/bootstrap.min.js"></script>
 		<script type="text/javascript" src="js/clipboard.min.js"></script>
 		<script type="text/javascript" src="js/imgpreview.full.jquery.js"></script>
 		<script type="text/javascript" src="js/manage_tables.js"></script>
@@ -75,7 +75,7 @@
 		<![endif]-->
 		<!-- start mincss template tags -->
 		<link rel="stylesheet" type="text/css" href="dist/jquery-ui/jquery-ui.min.css"/>
-		<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=afbb40b305"/>
+		<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=d0bbe25210"/>
 		<!-- end mincss template tags -->

 		<!-- Tweaks to the UI for a particular theme should drop here  -->
@@ -84,7 +84,7 @@
 	<?php } ?>

 		<!-- start minjs template tags -->
-		<script type="text/javascript" src="dist/opensourcepos.min.js?rel=32a09a5d0e"></script>
+		<script type="text/javascript" src="dist/opensourcepos.min.js?rel=aafc294e12"></script>
 		<!-- end minjs template tags -->
 	<?php endif; ?>

@@ -109,7 +109,7 @@
 				<div class="navbar-right" style="margin:0">
 					<?php echo anchor('home/change_password/'.$user_info->person_id, $user_info->first_name . ' ' . $user_info->last_name, array('class' => 'modal-dlg', 'data-btn-submit' => $this->lang->line('common_submit'), 'title' => $this->lang->line('employees_change_password'))); ?>
 					<?php echo '  |  ' . ($this->input->get('debug') == 'true' ? $this->session->userdata('session_sha1') . '  |  ' : ''); ?>
-					<?php echo anchor('home/logout', $this->lang->line('common_logout')); ?>
+					<?php echo anchor('home/logout', $this->lang->line('login_logout')); ?>
 				</div>

 				<div class="navbar-center" style="text-align:center">
@@ -148,4 +148,3 @@

 		<div class="container">
 			<div class="row">
-
--- a/bower.json
+++ b/bower.json
@@ -30,7 +30,6 @@
    "jquery-ui": "~1.12.1",
    "bootstrap3-dialog": "https://github.com/nakupanda/bootstrap3-dialog.git#master",
    "jasny-bootstrap": "~3.1.3",
-    "bootswatch": "3.4.1+1",
    "smalot-bootstrap-datetimepicker": "~2.4.4",
    "bootstrap-select": "~1.13.18",
    "bootstrap-table": "~1.18.1",
--- a/branding/STYLE_GUIDE.md
+++ b/branding/STYLE_GUIDE.md
@@ -0,0 +1,25 @@
+## Style Guide
+
+Brand name: `Open Source Point of Sale`\
+Short name: `OSPOS`
+
+Font used for lettermark: `Helvetica Light`
+
+### Brand Colors
+|   | <img width="100px" src="https://user-images.githubusercontent.com/12870258/120387937-c5d44e00-c32a-11eb-84a4-5c48ed7a0f9f.png"> | <img width="100px" src="https://user-images.githubusercontent.com/12870258/120388003-dd133b80-c32a-11eb-8ff1-92907dbc9b35.png"> |
+|---|---|---|
+| **Colors** | Primary | Secondary |
+| Hexadecimal | # 2c3e50 | # ffffff |
+| RGB decimal | R 44, G 62, B 80 | R 255, G 255, B 255 |
+
+### Primary logo styles for use on light backgrounds
+
+|   | <img width="100px" src="logo.svg"> | <img width="100px" src="emblem.svg"> | <img width="100px" src="mark.svg"> | <img width="100px" src="lettermark.svg"> |
+|---|---|---|---|---|
+| **Logo style** | Logo | Emblem | Mark | Lettermark |
+
+### Secondary logo styles or use on dark backgrounds
+
+|   | <img width="100px" src="logo-white.svg"> | <img width="100px" src="emblem-white.svg"> | <img width="100px" src="mark-white.svg"> | <img width="100px" src="lettermark-white.svg"> |
+|---|---|---|---|---|
+| **Logo style** | Logo | Emblem | Mark | Lettermark |
--- a/branding/emblem-white.svg
+++ b/branding/emblem-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.57998 308.57997"><circle cx="154.28999" cy="154.28999" r="154.28999" fill="#fff"/><path fill="#2c3e50" d="M154.88998 145.66999c-.03-1.26-.03-3.29.19-4.29 4.6-11.1 15.57-18.82 28.3-18.82h.41v58.3c0 .12-.03.78-.04.9-.54 16.46-14.01 29.7-30.59 29.7v27.08c21 0 39.17-11.27 49.29-28.07l.07-.11c2.9.45 5.86.75 8.9.75 31.95 0 57.81-26 57.81-57.81 0-30.87-24.37-56.46-55.1-57.81h-30.74c-17.18 0-32.61 7.64-43.22 19.63-10.59-11.92-25.86-19.59-43.02-19.59-31.86 0-57.77 25.91-57.77 57.77 0 31.86 25.91 57.77 57.77 57.77 31.86 0 57.77-25.91 57.77-57.77v-3.68c-.01.01-.02-3.31-.03-3.95zm-57.75 38.33c-16.92 0-30.69-13.77-30.69-30.69s13.77-30.69 30.69-30.69 30.69 13.77 30.69 30.69-13.77 30.69-30.69 30.69zm142.96-19.87c-4.33 11.64-15.57 19.9-28.7 19.9h-.54v-61.47h.54c13.13 0 24.37 8.26 28.7 19.9 1.35 3.25 2.03 6.91 2.03 10.83s-.67 7.59-2.03 10.84z"/></svg>
--- a/branding/emblem.svg
+++ b/branding/emblem.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.57998 308.57997"><circle cx="154.28999" cy="154.28999" r="154.28999" fill="#2c3e50"/><path fill="#fff" d="M154.88998 145.66999c-.03-1.26-.03-3.29.19-4.29 4.6-11.1 15.57-18.82 28.3-18.82h.41v58.3c0 .12-.03.78-.04.9-.54 16.46-14.01 29.7-30.59 29.7v27.08c21 0 39.17-11.27 49.29-28.07l.07-.11c2.9.45 5.86.75 8.9.75 31.95 0 57.81-26 57.81-57.81 0-30.87-24.37-56.46-55.1-57.81h-30.74c-17.18 0-32.61 7.64-43.22 19.63-10.59-11.92-25.86-19.59-43.02-19.59-31.86 0-57.77 25.91-57.77 57.77 0 31.86 25.91 57.77 57.77 57.77 31.86 0 57.77-25.91 57.77-57.77v-3.68c-.01.01-.02-3.31-.03-3.95zm-57.75 38.33c-16.92 0-30.69-13.77-30.69-30.69s13.77-30.69 30.69-30.69 30.69 13.77 30.69 30.69-13.77 30.69-30.69 30.69zm142.96-19.87c-4.33 11.64-15.57 19.9-28.7 19.9h-.54v-61.47h.54c13.13 0 24.37 8.26 28.7 19.9 1.35 3.25 2.03 6.91 2.03 10.83s-.67 7.59-2.03 10.84z"/></svg>
--- a/branding/lettermark-white.svg
+++ b/branding/lettermark-white.svg
--- a/branding/lettermark.svg
+++ b/branding/lettermark.svg
--- a/branding/logo-white.svg
+++ b/branding/logo-white.svg
--- a/branding/logo.svg
+++ b/branding/logo.svg
--- a/branding/mark-white.svg
+++ b/branding/mark-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.85 143.05001"><path fill="#fff" d="M115.51 50.18c-.03-1.26-.03-3.29.19-4.29 4.6-11.1 15.57-18.82 28.3-18.82h.41v58.3c0 .12-.03.78-.04.9-.54 16.46-14.01 29.7-30.59 29.7v27.08c21 0 39.17-11.27 49.29-28.07l.07-.11c2.9.45 5.86.75 8.9.75 31.95 0 57.81-26 57.81-57.81 0-30.87-24.37-56.46-55.1-57.81h-30.74c-17.18 0-32.61 7.64-43.22 19.63C90.2 7.71 74.93.04 57.77.04 25.91.04 0 25.95 0 57.81c0 31.86 25.91 57.77 57.77 57.77 31.86 0 57.77-25.91 57.77-57.77v-3.68c-.01.01-.02-3.31-.03-3.95zM57.76 88.51c-16.92 0-30.69-13.77-30.69-30.69s13.77-30.69 30.69-30.69S88.45 40.9 88.45 57.82 74.68 88.51 57.76 88.51zm142.96-19.87c-4.33 11.64-15.57 19.9-28.7 19.9h-.54V27.07h.54c13.13 0 24.37 8.26 28.7 19.9 1.35 3.25 2.03 6.91 2.03 10.83s-.67 7.59-2.03 10.84z"/></svg>
--- a/branding/mark.svg
+++ b/branding/mark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.85 143.05001"><path fill="#2c3e50" d="M115.51 50.18c-.03-1.26-.03-3.29.19-4.29 4.6-11.1 15.57-18.82 28.3-18.82h.41v58.3c0 .12-.03.78-.04.9-.54 16.46-14.01 29.7-30.59 29.7v27.08c21 0 39.17-11.27 49.29-28.07l.07-.11c2.9.45 5.86.75 8.9.75 31.95 0 57.81-26 57.81-57.81 0-30.87-24.37-56.46-55.1-57.81h-30.74c-17.18 0-32.61 7.64-43.22 19.63C90.2 7.71 74.93.04 57.77.04 25.91.04 0 25.95 0 57.81c0 31.86 25.91 57.77 57.77 57.77 31.86 0 57.77-25.91 57.77-57.77v-3.68c-.01.01-.02-3.31-.03-3.95zM57.76 88.51c-16.92 0-30.69-13.77-30.69-30.69s13.77-30.69 30.69-30.69S88.45 40.9 88.45 57.82 74.68 88.51 57.76 88.51zm142.96-19.87c-4.33 11.64-15.57 19.9-28.7 19.9h-.54V27.07h.54c13.13 0 24.37 8.26 28.7 19.9 1.35 3.25 2.03 6.91 2.03 10.83s-.67 7.59-2.03 10.84z"/></svg>
--- a/database/tables.sql
+++ b/database/tables.sql
@@ -39,7 +39,7 @@ INSERT INTO `ospos_app_config` (`key`, `value`) VALUES
 ('barcode_second_row', 'item_code'),
 ('barcode_third_row', 'unit_price'),
 ('barcode_num_in_row', '2'),
-('barcode_page_width', '100'),      
+('barcode_page_width', '100'),
 ('barcode_page_cellspacing', '20'),
 ('barcode_generate_if_empty', '0'),
 ('receipt_show_company_name', '1'),
@@ -95,6 +95,7 @@ INSERT INTO `ospos_app_config` (`key`, `value`) VALUES
 ('smtp_user', ''),
 ('receipt_template', 'receipt_default'),
 ('theme', 'flatly'),
+('login_form', 'floating_labels'),
 ('customer_sales_tax_support', '0'),
 ('language', 'english'),
 ('language_code', 'en-US'),
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
    "grunt-contrib-clean": "~1.0.0",
    "grunt-contrib-compress": "^1.4.1",
    "grunt-contrib-concat": "~0.5.1",
+    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^0.14.0",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify-es": "github:opensourcepos/grunt-contrib-uglify#harmony",
@@ -45,6 +46,10 @@
    "wd": "^0.3.3"
  },
  "dependencies": {
+    "bootstrap": "^3.4.1",
+    "bootstrap-5": "npm:bootstrap@^5.0.1",
+    "bootswatch": "^3.4.1",
+    "bootswatch-5": "npm:bootswatch@^5.0.1",
    "npm": "^6.14.9"
  }
 }
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -1,60 +1,131 @@
-*
-{
-	margin:0;
-	padding:0;
+/* Standard Dekstop Styling */
+html {
+  height: -webkit-fill-available; /* Prevent mobile webkit browsers from dropping footer behind the navigation bar */
 }

-#logo
-{
-	margin-top:2%;
-	margin-bottom:2%;
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available; /* Prevent mobile webkit browsers from dropping footer behind the navigation bar */
 }

-#login
-{
-	width:400px;
-	margin:0 auto;
-	margin-top:2%;
-	margin-bottom:2%;
-	transition:opacity 1s;
-	-webkit-transition:opacity 1s;
+.container-login, .footer {
+  max-width: 720px;
 }

-#login h1
-{
-	background:#1071b9;
-	padding:20px 0;
-	font-size:140%;
-	font-weight:300;
-	text-align:center;
-	color:#fff;
+.container-login {
+  min-height: 405px;
 }

-form
-{
-	background:#f0f0f0;
-	padding:6% 4%;
+.box-logo {
+  width: 40%;
 }

-input[type="text"], input[type="password"]
-{
-	width:100%;
-	margin-bottom:4%;
-	padding:4%;
+.logo {
+  object-fit: contain; /* Logo contains aspect ratio */
+  max-width: 405px; /* Prevent horizontal logo going too big on large mobile screens */
+  max-height: calc(405px - 3rem); /* Container height minus container padding */
 }

-input[type="submit"]
-{
-	width:100%;
-	background:#1071b9;
-	margin-top:4%;
-	border:0;
-	padding:4%;
-	transition:background .3s;
-	-webkit-transition:background .3s;
+img.logo {
+  filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.87)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.87)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.87)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.87)); /* White border around Company Logo for correct display on darker themes */
 }

-input[type="submit"]:hover
-{
-	background:#2288bb;
+.box-login {
+  width: 60%;
+}
+
+.box-login form {
+  width: 100%; /* Login box content full width */
+}
+
+.box-login .form-floating:focus-within,
+.box-login .input-group:focus-within {
+  z-index: 2;
+}
+
+.box-login input[name="username"],
+.box-login span[id="input-username"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.box-login input[name="password"],
+.box-login span[id="input-password"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.alert div:not(:first-child) {
+  margin-top: 1rem; /* Space between multiple validation errors */
+}
+
+.bi {
+  height: 1em;
+}
+
+footer a:not(:hover) {
+  text-decoration: none;
+}
+
+/* Mobile Styling */
+@media (max-width: 767.98px) {
+  .container-login {
+    min-height: auto;
+  }
+
+  .box-logo, .box-login {
+    width: 100%;
+  }
+
+  .box-logo {
+    border-right: none !important;
+  }
+
+  .logo {
+    max-height: 150px;
+  }
+
+  .footer {
+    max-width: 100%;
+    border-radius: 0 !important;
+  }
+}
+
+/* QHD Styling */
+@media (min-width: 2560px) {
+  .container-login, .footer {
+    max-width: 960px;
+  }
+
+  .container-login {
+    min-height: 540px;
+  }
+
+  .logo {
+    max-height: calc(540px - 3rem);
+  }
+}
+
+/* 4K Styling */
+@media (min-width: 3840px) {
+  .container-login, .footer {
+    max-width: 1140px;
+  }
+
+  .container-login {
+    min-height: 641.25px;
+  }
+
+  .logo {
+    max-height: calc(641.25px - 3rem);
+  }
+}
+
+/* Specific Styling */
+@media (max-width: 359.98px) {
+  .g-recaptcha {
+    overflow-x: auto; /* Makes sure reCAPTCHA is usable on the smallest screens */
+    min-height: 86px;
+  }
 }
--- a/public/css/login.min.css
+++ b/public/css/login.min.css
@@ -0,0 +1 @@
+html{height:-webkit-fill-available}body{min-height:100vh;min-height:-webkit-fill-available}.container-login,.footer{max-width:720px}.container-login{min-height:405px}.box-logo{width:40%}.logo{object-fit:contain;max-width:405px;max-height:calc(405px - 3rem)}img.logo{filter:drop-shadow(1px 0 0 rgba(255, 255, 255, .87)) drop-shadow(0 1px 0 rgba(255, 255, 255, .87)) drop-shadow(-1px 0 0 rgba(255, 255, 255, .87)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .87))}.box-login{width:60%}.box-login form{width:100%}.box-login .form-floating:focus-within,.box-login .input-group:focus-within{z-index:2}.box-login input[name=username],.box-login span[id=input-username]{margin-bottom:-1px;border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.box-login input[name=password],.box-login span[id=input-password]{border-top-left-radius:0;border-top-right-radius:0}.alert div:not(:first-child){margin-top:1rem}.bi{height:1em}footer a:not(:hover){text-decoration:none}@media (max-width:767.98px){.container-login{min-height:auto}.box-login,.box-logo{width:100%}.box-logo{border-right:none!important}.logo{max-height:150px}.footer{max-width:100%;border-radius:0!important}}@media (min-width:2560px){.container-login,.footer{max-width:960px}.container-login{min-height:540px}.logo{max-height:calc(540px - 3rem)}}@media (min-width:3840px){.container-login,.footer{max-width:1140px}.container-login{min-height:641.25px}.logo{max-height:calc(641.25px - 3rem)}}@media (max-width:359.98px){.g-recaptcha{overflow-x:auto;min-height:86px}}
--- a/public/images/favicon.ico
+++ b/public/images/favicon.ico
--- a/public/license/LICENSE
+++ b/public/license/LICENSE
@@ -1,37 +1,37 @@
 The MIT License (MIT)

-Copyright (c) 2012-2014 pappastech
-Copyright (c) 2012 Alain
-Copyright (c) 2013 Rob Garrison
-Copyright (c) 2013 Parq
-Copyright (c) 2013 Ramel
 Copyright (c) 2013-2021 jekkos
 Copyright (c) 2015-2021 FrancescoUK (aka daN4cat)
-Copyright (c) 2015 Aamir Shahzad (aka asakpke), RoshanTech.com
-Copyright (c) 2015 Toni Haryanto (aka yllumi)
-Copyright (c) 2016-2017 Ramkrishna Mondal (aka RamkrishnaMondal)
-Copyright (c) 2016 Rinaldy@dbarber (aka rnld26)
-Copyright (c) 2016-2017 Jorge Colmenarez (aka jlctmaster), frontuari.com
 Copyright (c) 2017-2021 Steve Ireland
 Copyright (c) 2017-2021 objecttothis
 Copyright (c) 2017-2021 odiea
-Copyright (c) 2017-2021 WebShells / Shady Sh
+Copyright (c) 2017-2021 WebShells
+Copyright (c) 2020-2021 Andriux1990
+Copyright (c) 2019 Loyd Jayme (aka loydjayme25)
+Copyright (c) 2018 Erasto Marroquin (aka Erastus)
+Copyright (c) 2018 Nathan Sas (aka nathanzky)
+Copyright (c) 2018 Emilio Silva (aka emi-silva)
 Copyright (c) 2017 Jesus Guerrero Botella (aka i92guboj)
 Copyright (c) 2017 Deep Shah (aka deepshah)
 Copyright (c) 2017 Joshua Fernandez (aka joshua1234511)
 Copyright (c) 2017 asadjaved63
-Copyright (c) 2018 Erasto Marroquin (aka Erastus)
-Copyright (c) 2018 Nathan Sas (aka nathanzky)
-Copyright (c) 2018 Emilio Silva (aka emi-silva)
-Copyright (c) 2019 Loyd Jayme (aka loydjayme25)
-Copyright (c) 2020 Andriux1990
+Copyright (c) 2016-2017 Ramkrishna Mondal (aka RamkrishnaMondal)
+Copyright (c) 2016-2017 Jorge Colmenarez (aka jlctmaster), frontuari.com
+Copyright (c) 2016 Rinaldy@dbarber (aka rnld26)
+Copyright (c) 2015 Aamir Shahzad (aka asakpke), RoshanTech.com
+Copyright (c) 2015 Toni Haryanto (aka yllumi)
+Copyright (c) 2013 Rob Garrison
+Copyright (c) 2013 Parq
+Copyright (c) 2013 Ramel
+Copyright (c) 2012-2014 pappastech
+Copyright (c) 2012 Alain

-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
@@ -40,13 +40,12 @@ You cannot claim copyright or ownership of the Software.

 Versions ≥ 3.3.2:

-Footer signatures "© 2010 - 2021 · opensourcepos.org · 3.3.3 - 6909c8" 
+Footer signatures "© 2010 - 2021 · opensourcepos.org · 3.3.3 - 6909c8"
 In the format of: "© 2010 - Current Year · opensourcepos.org · Version - Commit"

 and/or 

 "· opensourcepos.org ·"
-
 with version, hash and URL link to the official website of the project MUST BE RETAINED, 
 MUST BE VISIBLE IN EVERY PAGE and CANNOT BE MODIFIED.

@@ -61,9 +60,10 @@ and/or
 with version, hash and URL link to the original distribution of the code MUST BE RETAINED, 
 MUST BE VISIBLE IN EVERY PAGE and CANNOT BE MODIFIED.

-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.
--- a/public/license/bootstrap-5.license
+++ b/public/license/bootstrap-5.license
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2011-2021 Twitter, Inc.
+Copyright (c) 2011-2021 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/public/license/bootstrap-5.version
+++ b/public/license/bootstrap-5.version
@@ -0,0 +1 @@
+Bootstrap 5.0.1
--- a/public/license/bootstrap-icons.license
+++ b/public/license/bootstrap-icons.license
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-2020 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/public/license/bootstrap-icons.version
+++ b/public/license/bootstrap-icons.version
@@ -0,0 +1 @@
+Bootstrap Icons 1.5.0
--- a/public/license/bootstrap.license
+++ b/public/license/bootstrap.license
@@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2011-2016 Twitter, Inc
+Copyright (c) 2011-2019 Twitter, Inc.

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/public/license/bootswatch-5.license
+++ b/public/license/bootswatch-5.license
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Thomas Park
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/public/license/bootswatch-5.version
+++ b/public/license/bootswatch-5.version
@@ -0,0 +1 @@
+Bootswatch 5.0.1
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.57998 308.57997"><circle cx="154.28999" cy="154.28999" r="154.28999" fill="#fff"/><path fill="#2c3e50" d="M154.88998 145.66999c-.03-1.26-.03-3.29.19-4.29 4.6-11.1 15.57-18.82 28.3-18.82h.41v58.3c0 .12-.03.78-.04.9-.54 16.46-14.01 29.7-30.59 29.7v27.08c21 0 39.17-11.27 49.29-28.07l.07-.11c2.9.45 5.86.75 8.9.75 31.95 0 57.81-26 57.81-57.81 0-30.87-24.37-56.46-55.1-57.81h-30.74c-17.18 0-32.61 7.64-43.22 19.63-10.59-11.92-25.86-19.59-43.02-19.59-31.86 0-57.77 25.91-57.77 57.77 0 31.86 25.91 57.77 57.77 57.77 31.86 0 57.77-25.91 57.77-57.77v-3.68c-.01.01-.02-3.31-.03-3.95zm-57.75 38.33c-16.92 0-30.69-13.77-30.69-30.69s13.77-30.69 30.69-30.69 30.69 13.77 30.69 30.69-13.77 30.69-30.69 30.69zm142.96-19.87c-4.33 11.64-15.57 19.9-28.7 19.9h-.54v-61.47h.54c13.13 0 24.37 8.26 28.7 19.9 1.35 3.25 2.03 6.91 2.03 10.83s-.67 7.59-2.03 10.84z"/></svg>
				`@@ -0,0 +1 @@`
				html{height:-webkit-fill-available}body{min-height:100vh;min-height:-webkit-fill-available}.container-login,.footer{max-width:720px}.container-login{min-height:405px}.box-logo{width:40%}.logo{object-fit:contain;max-width:405px;max-height:calc(405px - 3rem)}img.logo{filter:drop-shadow(1px 0 0 rgba(255, 255, 255, .87)) drop-shadow(0 1px 0 rgba(255, 255, 255, .87)) drop-shadow(-1px 0 0 rgba(255, 255, 255, .87)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .87))}.box-login{width:60%}.box-login form{width:100%}.box-login .form-floating:focus-within,.box-login .input-group:focus-within{z-index:2}.box-login input[name=username],.box-login span[id=input-username]{margin-bottom:-1px;border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.box-login input[name=password],.box-login span[id=input-password]{border-top-left-radius:0;border-top-right-radius:0}.alert div:not(:first-child){margin-top:1rem}.bi{height:1em}footer a:not(:hover){text-decoration:none}@media (max-width:767.98px){.container-login{min-height:auto}.box-login,.box-logo{width:100%}.box-logo{border-right:none!important}.logo{max-height:150px}.footer{max-width:100%;border-radius:0!important}}@media (min-width:2560px){.container-login,.footer{max-width:960px}.container-login{min-height:540px}.logo{max-height:calc(540px - 3rem)}}@media (min-width:3840px){.container-login,.footer{max-width:1140px}.container-login{min-height:641.25px}.logo{max-height:calc(641.25px - 3rem)}}@media (max-width:359.98px){.g-recaptcha{overflow-x:auto;min-height:86px}}