New Feature: Customer login settings
you can change or add multiple custom login-page template you can also add your own login page just add a login page with name "login-custom-[template-name].tpl" e.g. login-custom-star.tpl login-custom-moon.tpl login-custom-sun.tpl login-custom-venus.tpl
This commit is contained in:
Focuslinkstech
parent
5bb724b9b3
commit
c3355ad8f7
@ -313,9 +313,23 @@ switch ($do) {
|
|||||||
$ui->assign('code', alphanumeric(_get('code'), "-"));
|
$ui->assign('code', alphanumeric(_get('code'), "-"));
|
||||||
$ui->display('customer/login-noreg.tpl');
|
$ui->display('customer/login-noreg.tpl');
|
||||||
} else {
|
} else {
|
||||||
|
$UPLOAD_URL_PATH = str_replace($root_path, '', $UPLOAD_PATH);
|
||||||
|
$login_logo = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'login-logo.png';
|
||||||
|
$ui->assign('login_logo', $login_logo);
|
||||||
|
$wallpaper = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'wallpaper.png';
|
||||||
|
$ui->assign('wallpaper', $wallpaper);
|
||||||
|
$favicon = (file_exists($UPLOAD_PATH . DIRECTORY_SEPARATOR . 'favicon.png')) ? $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'favicon.png' : $root . DIRECTORY_SEPARATOR . 'ui/ui/images/logo.png';
|
||||||
|
$ui->assign('favicon', $favicon);
|
||||||
$ui->assign('csrf_token', $csrf_token);
|
$ui->assign('csrf_token', $csrf_token);
|
||||||
$ui->assign('_title', Lang::T('Login'));
|
$ui->assign('_title', Lang::T('Login'));
|
||||||
|
switch ($config['login_page_type']) {
|
||||||
|
case 'custom':
|
||||||
|
$ui->display('customer/login-custom-' . $config['login_Page_template'] . '.tpl');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
$ui->display('customer/login.tpl');
|
$ui->display('customer/login.tpl');
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -81,6 +81,14 @@ switch ($action) {
|
|||||||
$logo = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'logo.default.png';
|
$logo = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'logo.default.png';
|
||||||
}
|
}
|
||||||
$ui->assign('logo', $logo);
|
$ui->assign('logo', $logo);
|
||||||
|
|
||||||
|
$login_logo = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'login-logo.png';
|
||||||
|
$ui->assign('login_logo', $login_logo);
|
||||||
|
$wallpaper = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'wallpaper.png';
|
||||||
|
$ui->assign('wallpaper', $wallpaper);
|
||||||
|
$favicon = (file_exists($UPLOAD_PATH . DIRECTORY_SEPARATOR . 'favicon.png')) ? $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'favicon.png' : $root . DIRECTORY_SEPARATOR . 'ui/ui/images/logo.png';
|
||||||
|
$ui->assign('favicon', $favicon);
|
||||||
|
|
||||||
$themes = [];
|
$themes = [];
|
||||||
$files = scandir('ui/themes/');
|
$files = scandir('ui/themes/');
|
||||||
foreach ($files as $file) {
|
foreach ($files as $file) {
|
||||||
@ -88,6 +96,20 @@ switch ($action) {
|
|||||||
$themes[] = $file;
|
$themes[] = $file;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$template_files = glob('ui/ui/customer/login-custom-*.tpl');
|
||||||
|
$templates = [];
|
||||||
|
|
||||||
|
foreach ($template_files as $file) {
|
||||||
|
$parts = explode('-', basename($file, '.tpl'));
|
||||||
|
$template_identifier = $parts[2] ?? 'unknown';
|
||||||
|
$templates[] = [
|
||||||
|
'filename' => basename($file),
|
||||||
|
'value' => $template_identifier,
|
||||||
|
'name' => str_replace('_', ' ', ucfirst($template_identifier))
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
$r = ORM::for_table('tbl_routers')->find_many();
|
$r = ORM::for_table('tbl_routers')->find_many();
|
||||||
$ui->assign('r', $r);
|
$ui->assign('r', $r);
|
||||||
if (function_exists("shell_exec")) {
|
if (function_exists("shell_exec")) {
|
||||||
@ -111,6 +133,7 @@ switch ($action) {
|
|||||||
$d->save();
|
$d->save();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
$ui->assign('template_files', $templates);
|
||||||
$ui->assign('_c', $config);
|
$ui->assign('_c', $config);
|
||||||
$ui->assign('php', $php);
|
$ui->assign('php', $php);
|
||||||
$ui->assign('dir', str_replace('controllers', '', __DIR__));
|
$ui->assign('dir', str_replace('controllers', '', __DIR__));
|
||||||
@ -199,6 +222,94 @@ switch ($action) {
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case 'login-page-post':
|
||||||
|
// Login page post
|
||||||
|
$login_page_title = _post('login_page_head');
|
||||||
|
$login_page_description = _post('login_page_description');
|
||||||
|
$login_Page_template = _post('login_Page_template');
|
||||||
|
$login_page_type = _post('login_page_type');
|
||||||
|
$csrf_token = _post('csrf_token');
|
||||||
|
|
||||||
|
if (!Csrf::check($csrf_token)) {
|
||||||
|
r2(U . 'settings/app', 'e', Lang::T('Invalid or Expired CSRF Token') . ".");
|
||||||
|
}
|
||||||
|
|
||||||
|
$image_paths = [];
|
||||||
|
|
||||||
|
if ($login_page_type == 'custom' && (empty($login_Page_template) || empty($login_page_title) || empty($login_page_description))) {
|
||||||
|
r2(U . 'settings/app', 'e', 'Please fill all required fields');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (strlen($login_page_title) > 25) {
|
||||||
|
r2(U . 'settings/app', 'e', 'Login page title must not exceed 25 characters');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (strlen($login_page_description) > 160) {
|
||||||
|
r2(U . 'settings/app', 'e', 'Login page description must not exceed 160 characters');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$settings = [
|
||||||
|
'login_page_head' => $login_page_title,
|
||||||
|
'login_page_description' => $login_page_description,
|
||||||
|
'login_Page_template' => $login_Page_template,
|
||||||
|
'login_page_type' => $login_page_type,
|
||||||
|
];
|
||||||
|
|
||||||
|
if ($_FILES['login_page_favicon']['name'] != '') {
|
||||||
|
$favicon_type = $_FILES['login_page_favicon']['type'];
|
||||||
|
if (in_array($favicon_type, ['image/jpeg', 'image/png']) && preg_match('/\.(jpg|jpeg|png)$/i', $_FILES['login_page_favicon']['name'])) {
|
||||||
|
$favicon_path = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'favicon.png';
|
||||||
|
File::resizeCropImage($_FILES['login_page_favicon']['tmp_name'], $favicon_path, 30, 30, 100);
|
||||||
|
$image_paths['favicon'] = $favicon_path;
|
||||||
|
if (file_exists($_FILES['login_page_favicon']['tmp_name'])) unlink($_FILES['login_page_favicon']['tmp_name']);
|
||||||
|
} else {
|
||||||
|
r2(U . 'settings/app', 'e', 'Favicon must be a JPG, JPEG, or PNG image.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_FILES['login_page_wallpaper']['name'] != '') {
|
||||||
|
$wallpaper_type = $_FILES['login_page_wallpaper']['type'];
|
||||||
|
if (in_array($wallpaper_type, ['image/jpeg', 'image/png']) && preg_match('/\.(jpg|jpeg|png)$/i', $_FILES['login_page_wallpaper']['name'])) {
|
||||||
|
$wallpaper_path = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'wallpaper.png';
|
||||||
|
File::resizeCropImage($_FILES['login_page_wallpaper']['tmp_name'], $wallpaper_path, 1920, 1080, 100);
|
||||||
|
$image_paths['wallpaper'] = $wallpaper_path;
|
||||||
|
if (file_exists($_FILES['login_page_wallpaper']['tmp_name'])) unlink($_FILES['login_page_wallpaper']['tmp_name']);
|
||||||
|
} else {
|
||||||
|
r2(U . 'settings/app', 'e', 'Wallpaper must be a JPG, JPEG, or PNG image.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_FILES['login_page_logo']['name'] != '') {
|
||||||
|
$logo_type = $_FILES['login_page_logo']['type'];
|
||||||
|
if (in_array($logo_type, ['image/jpeg', 'image/png']) && preg_match('/\.(jpg|jpeg|png)$/i', $_FILES['login_page_logo']['name'])) {
|
||||||
|
$logo_path = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'login-logo.png';
|
||||||
|
File::resizeCropImage($_FILES['login_page_logo']['tmp_name'], $logo_path, 300, 60, 100);
|
||||||
|
$image_paths['logo'] = $logo_path;
|
||||||
|
if (file_exists($_FILES['login_page_logo']['tmp_name'])) unlink($_FILES['login_page_logo']['tmp_name']);
|
||||||
|
} else {
|
||||||
|
r2(U . 'settings/app', 'e', 'Logo must be a JPG, JPEG, or PNG image.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
foreach ($settings as $key => $value) {
|
||||||
|
$d = ORM::for_table('tbl_appconfig')->where('setting', $key)->find_one();
|
||||||
|
if ($d) {
|
||||||
|
$d->value = $value;
|
||||||
|
$d->save();
|
||||||
|
} else {
|
||||||
|
$d = ORM::for_table('tbl_appconfig')->create();
|
||||||
|
$d->setting = $key;
|
||||||
|
$d->value = $value;
|
||||||
|
$d->save();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_log('[' . $admin['username'] . ']: ' . Lang::T('Login Page Settings Saved Successfully'), $admin['user_type'], $admin['id']);
|
||||||
|
r2(U . 'settings/app', 's', Lang::T('Login Page Settings Saved Successfully'));
|
||||||
|
break;
|
||||||
|
|
||||||
case 'localisation':
|
case 'localisation':
|
||||||
if (!in_array($admin['user_type'], ['SuperAdmin', 'Admin'])) {
|
if (!in_array($admin['user_type'], ['SuperAdmin', 'Admin'])) {
|
||||||
_alert(Lang::T('You do not have permission to access this page'), 'danger', "dashboard");
|
_alert(Lang::T('You do not have permission to access this page'), 'danger', "dashboard");
|
||||||
|
|||||||
@ -166,6 +166,94 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<form class="form-horizontal" method="post" role="form" action="{$_url}settings/login-page-post" enctype="multipart/form-data">
|
||||||
|
<input type="hidden" name="csrf_token" value="{$csrf_token}">
|
||||||
|
<div class="panel" id="accordion" role="tablist" aria-multiselectable="true">
|
||||||
|
<div class="panel-heading" role="tab" id="LoginPage">
|
||||||
|
<h3 class="panel-title">
|
||||||
|
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseLoginPage" aria-expanded="true" aria-controls="collapseLoginPage">
|
||||||
|
{Lang::T('Customer Login Page Settings')}
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div id="collapseLoginPage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-2 control-label">{Lang::T('Choose Template')}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<select name="login_page_type" id="login_page_type" class="form-control">
|
||||||
|
<option value="default" {if $_c['login_page_type']=='default' }selected="selected"{/if}>{Lang::T('Default')}</option>
|
||||||
|
<option value="custom" {if $_c['login_page_type']=='custom' }selected="selected"{/if}>{Lang::T('Custom')}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span class="help-block col-md-4"><small>{Lang::T('Select your login template type')}</small></span>
|
||||||
|
</div>
|
||||||
|
<div id="customFields" style="display: none;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-2 control-label">{Lang::T('Select Login Page')}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<select name="login_Page_template" id="login_Page_template" class="form-control">
|
||||||
|
{foreach $template_files as $template}
|
||||||
|
<option value="{$template.value|escape}" {if $_c['login_Page_template'] eq $template.value}selected="selected" {/if}>{$template.name|escape}</option>
|
||||||
|
{/foreach}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<span class="help-block col-md-4"><small>{Lang::T('Select your preferred login template')}</small></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-2 control-label">{Lang::T('Page Heading / Company Name')}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input type="text" required class="form-control" id="login_page_head" name="login_page_head" value="{$_c['login_page_head']}">
|
||||||
|
</div>
|
||||||
|
<span class="help-block col-md-4"><small>{Lang::T('This Name will be shown on the login wallpaper')}</small></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-2 control-label">{Lang::T('Page Description')}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<textarea class="form-control" id="login_page_description" name="login_page_description" rows="3">{Lang::htmlspecialchars($_c['login_page_description'])}</textarea>
|
||||||
|
</div>
|
||||||
|
<span class="help-block col-md-4"><small>{Lang::T('This will also display on wallpaper, You can use html tag')}</small></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-2 control-label">{Lang::T('Favicon')}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input type="file" class="form-control" id="login_page_favicon" name="login_page_favicon" accept="image/*">
|
||||||
|
<span class="help-block"><small>{Lang::T('Best size 30 x 30 | uploaded image will be autosize')}</small></span>
|
||||||
|
</div>
|
||||||
|
<span class="help-block col-md-4">
|
||||||
|
<a href="./{$favicon}" target="_blank"><img src="./{$favicon}" height="48" alt="Favicon"></a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-2 control-label">{Lang::T('Login Page Logo')}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input type="file" class="form-control" id="login_page_logo" name="login_page_logo" accept="image/*">
|
||||||
|
<span class="help-block"><small>{Lang::T('Best size 300 x 60 | uploaded image will be autosize')}</small></span>
|
||||||
|
</div>
|
||||||
|
<span class="help-block col-md-4">
|
||||||
|
<a href="./{$login_logo}" target="_blank"><img src="./{$login_logo}" height="48" alt="Logo"></a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-md-2 control-label">{Lang::T('Login Page Wallpaper')}</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input type="file" class="form-control" id="login_page_wallpaper" name="login_page_wallpaper" accept="image/*">
|
||||||
|
<span class="help-block"><small>{Lang::T('Best size 1920 x 1080 | uploaded image will be autosize')}</small></span>
|
||||||
|
</div>
|
||||||
|
<span class="help-block col-md-4">
|
||||||
|
<a href="./{$wallpaper}" target="_blank"><img src="./{$wallpaper}" height="48" alt="Wallpaper"></a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-success btn-block" name="general" type="submit">
|
||||||
|
{Lang::T('Save Changes')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
<form class="form-horizontal" method="post" role="form" action="{$_url}settings/app-post" enctype="multipart/form-data">
|
<form class="form-horizontal" method="post" role="form" action="{$_url}settings/app-post" enctype="multipart/form-data">
|
||||||
<input type="hidden" name="csrf_token" value="{$csrf_token}">
|
<input type="hidden" name="csrf_token" value="{$csrf_token}">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
@ -1154,4 +1242,17 @@
|
|||||||
document.getElementById("tax_rate").addEventListener("change", toggleCustomTaxRate);
|
document.getElementById("tax_rate").addEventListener("change", toggleCustomTaxRate);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script>
|
||||||
|
document.getElementById('login_page_type').addEventListener('change', function() {
|
||||||
|
var selectedValue = this.value;
|
||||||
|
var customFields = document.getElementById('customFields');
|
||||||
|
|
||||||
|
if (selectedValue === 'custom') {
|
||||||
|
customFields.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
customFields.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.getElementById('login_page_type').dispatchEvent(new Event('change'));
|
||||||
|
</script>
|
||||||
{include file="sections/footer.tpl"}
|
{include file="sections/footer.tpl"}
|
||||||
604
ui/ui/customer/login-custom-moon.tpl
Normal file
604
ui/ui/customer/login-custom-moon.tpl
Normal file
@ -0,0 +1,604 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>{$_title} - {$_c['CompanyName']}</title>
|
||||||
|
<link rel="shortcut icon" href="./{$favicon}" type="image/x-icon" />
|
||||||
|
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' />
|
||||||
|
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' />
|
||||||
|
<!-- SweetAlert CSS -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" />
|
||||||
|
<!-- SweetAlert JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
|
||||||
|
<style>
|
||||||
|
.login-fg .form-container {
|
||||||
|
color: #ccc;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login {
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section {
|
||||||
|
max-width: 370px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-fg {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-group {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-fg {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .input-text {
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
color: #616161;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container img {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-fg input {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
padding: 11px 45px 11px 20px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-fg i {
|
||||||
|
position: absolute;
|
||||||
|
top: 13px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 19px;
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container label {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .forgot {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 45px;
|
||||||
|
color: #535353;
|
||||||
|
font-size: 15px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .bg {
|
||||||
|
background: rgba(0, 0, 0, 0.04) repeat;
|
||||||
|
background-size: cover;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 999;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .info h1 {
|
||||||
|
font-size: 60px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-shadow: 2px 0px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .info {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .info p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 28px;
|
||||||
|
text-shadow: 1px 1px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .btn-md {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px 30px 9px;
|
||||||
|
height: 45px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #d6d6d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container p {
|
||||||
|
margin: 0;
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container p a {
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container button:focus {
|
||||||
|
outline: none;
|
||||||
|
outline: 0 auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .btn-fg.focus,
|
||||||
|
.btn-fg:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .btn-fg {
|
||||||
|
background: #0f96f9;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .btn-fg:hover {
|
||||||
|
background: #108ae4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .logo a {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #333;
|
||||||
|
font-size: 39px;
|
||||||
|
text-shadow: 1px 0px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .checkbox {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-check {
|
||||||
|
float: left;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-check a {
|
||||||
|
color: #d6d6d6;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-check-input {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-check label::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
top: 2px;
|
||||||
|
margin-left: -25px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .form-check-label {
|
||||||
|
padding-left: 25px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .checkbox-fg input[type="checkbox"]:checked+label::before {
|
||||||
|
color: #fff;
|
||||||
|
background: #0f96f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container input[type="checkbox"]:checked+label:before {
|
||||||
|
font-weight: 300;
|
||||||
|
color: #f3f3f3;
|
||||||
|
font-size: 14px;
|
||||||
|
content: "\2713";
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .form-container .checkbox a {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #616161;
|
||||||
|
float: right;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #505050;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section p {
|
||||||
|
margin: 25px 0 0;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section p a {
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section .social li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section .social li a {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 120px;
|
||||||
|
margin: 2px 0 3px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section .social li a i {
|
||||||
|
height: 35px;
|
||||||
|
width: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
float: left;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section .social li a span {
|
||||||
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section .or-login {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin: 20px 0 25px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section .or-login::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: #d8dcdc;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .login-section .or-login>span {
|
||||||
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
background: #fff;
|
||||||
|
padding: 1px 20px;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
font-family: Open Sans;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #616161;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .facebook-i {
|
||||||
|
background: #4867aa;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .twitter-i {
|
||||||
|
background: #3cf;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .google-i {
|
||||||
|
background: #db4437;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .facebook {
|
||||||
|
color: #4867aa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .twitter {
|
||||||
|
color: #3cf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .google {
|
||||||
|
color: #db4437;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.login-fg .info h1 {
|
||||||
|
font-size: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.login-fg .bg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.login-fg .login-section .social li a {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-fg .logo a {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: inherit;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
margin: 10px 0;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: #4facfe;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
background-color: #4facfe;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover {
|
||||||
|
background-color: #00f2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
input,
|
||||||
|
.submit-btn {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
|
||||||
|
input,
|
||||||
|
.submit-btn {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
|
||||||
|
input,
|
||||||
|
.submit-btn {
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
{if isset($notify)}
|
||||||
|
<script>
|
||||||
|
// Display SweetAlert toast notification
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
Swal.fire({
|
||||||
|
icon: '{if $notify_t == "s"}success{else}warning{/if}',
|
||||||
|
title: '{if $notify_t == "s"}Success{else}Error{/if}',
|
||||||
|
text: '{$notify}',
|
||||||
|
backdrop: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
}).then(() => {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{/if}
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<div class="login-fg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-8 col-lg-7 col-md-12 bg" style="background-image:url('./{$wallpaper}')">
|
||||||
|
<div class="info">
|
||||||
|
<h1>{$_c['login_page_head']}</h1>
|
||||||
|
<p>{$_c['login_page_description']}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4 col-lg-5 col-md-12 login">
|
||||||
|
<div class="login-section">
|
||||||
|
<div class="logo clearfix">
|
||||||
|
<a href="./{$login_logo}" target="_blank"><img src="./{$login_logo}" height="60"
|
||||||
|
alt="Logo"></a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<h4>{Lang::T('Sign in into your account')}</h4>
|
||||||
|
<!-- <ul class="social">
|
||||||
|
<li><a href="#" class="facebook"><i
|
||||||
|
class="fa fa-facebook facebook-i"></i><span>Facebook</span></a></li>
|
||||||
|
<li><a href="#" class="twitter"><i
|
||||||
|
class="fa fa-twitter twitter-i"></i><span>Twitter</span></a></li>
|
||||||
|
<li><a href="#" class="google"><i class="fa fa-google google-i"></i><span>Google</span></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="or-login clearfix">
|
||||||
|
<span>Or</span>
|
||||||
|
</div> -->
|
||||||
|
<div class="form-container">
|
||||||
|
<form id="login-form" method="POST" action="{$_url}login/post">
|
||||||
|
<input type="hidden" name="csrf_token" value="{$csrf_token}">
|
||||||
|
<div>
|
||||||
|
<input type="text" name="username"
|
||||||
|
placeholder="{if $_c['registration_username'] == 'phone'}{Lang::T('Phone Number')}{elseif $_c['registration_username'] == 'email'}{Lang::T('Email')}{else}{Lang::T('Username')}{/if}"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="password" name="password" placeholder="{Lang::T('Password')}" required>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox clearfix">
|
||||||
|
<!-- <div class="form-check checkbox-fg">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" id="remember">
|
||||||
|
<label class="form-check-label" for="remember">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div> -->
|
||||||
|
<a href="{$_url}forgot">{Lang::T('Forgot Password')}?</a>
|
||||||
|
</div>
|
||||||
|
<div class="form-group mt-2">
|
||||||
|
<button id="login-btn" type="submit" class="submit-btn">
|
||||||
|
<span id="login-text">{Lang::T('Login')}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{if $_c['disable_registration'] != 'noreg'}
|
||||||
|
<p>{Lang::T('Don\'t have an account?')} <a href="{$_url}register"
|
||||||
|
class="linkButton">{Lang::T('Register')}</a></p>
|
||||||
|
{/if}
|
||||||
|
<footer>
|
||||||
|
© {$smarty.now|date_format:"%Y"} {$_c['CompanyName']}. All rights reserved. <br> <a
|
||||||
|
href="">Privacy</a> | <a href="">Terms
|
||||||
|
&
|
||||||
|
Conditions</a>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- partial -->
|
||||||
|
<script>
|
||||||
|
const loginForm = document.getElementById('login-form');
|
||||||
|
const loginBtn = document.getElementById('login-btn');
|
||||||
|
const loginText = document.getElementById('login-text');
|
||||||
|
|
||||||
|
loginForm.addEventListener('submit', function (event) {
|
||||||
|
loginBtn.classList.add('loading');
|
||||||
|
loginText.textContent = 'Please Wait...';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{if $_c['tawkto'] != ''}
|
||||||
|
<!--Start of Tawk.to Script-->
|
||||||
|
<script type="text/javascript">
|
||||||
|
var isLoggedIn = false;
|
||||||
|
var Tawk_API = {
|
||||||
|
onLoad: function () {
|
||||||
|
if (!isLoggedIn) {
|
||||||
|
isLoggedIn = true;
|
||||||
|
window.Tawk_API.login({
|
||||||
|
name: '{$_user['fullname']}',
|
||||||
|
email: '{$_user['email']}',
|
||||||
|
userId: '{$_user['id']}'
|
||||||
|
}, function (error) {
|
||||||
|
//do something if there's an error
|
||||||
|
});
|
||||||
|
}
|
||||||
|
Tawk_API.setAttributes({
|
||||||
|
'id': '{$_user['id']}',
|
||||||
|
'username': '{$_user['username']}',
|
||||||
|
'service_type': '{$_user['service_type']}',
|
||||||
|
'balance': '{$_user['balance']}',
|
||||||
|
'account_type': '{$_user['account_type']}',
|
||||||
|
'phone': '{$_user['phonenumber']}'
|
||||||
|
}, function (error) { });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var Tawk_LoadStart = new Date();
|
||||||
|
Tawk_API.visitor = {
|
||||||
|
name: '{$_user['fullname']}',
|
||||||
|
email: '{$_user['email']}',
|
||||||
|
userId: '{$_user['id']}'
|
||||||
|
};
|
||||||
|
(function () {
|
||||||
|
var s1 = document.createElement("script"),
|
||||||
|
s0 = document.getElementsByTagName("script")[0];
|
||||||
|
s1.async = true;
|
||||||
|
s1.src = 'https://embed.tawk.to/{$_c['tawkto']}';
|
||||||
|
s1.charset = 'UTF-8';
|
||||||
|
s1.setAttribute('crossorigin', '*');
|
||||||
|
s0.parentNode.insertBefore(s1, s0);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<!--End of Tawk.to Script-->
|
||||||
|
{/if}
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user