forked from SimplesIP/pabx-app
Browse Source
a partir deste commit, esta sendo realizado a implementacao da tela de login que foi feita anteriormente em react e agora esta sendo adaptada para php, html e css. A base ja foi feita, assim como algumas funcoes para gerar automaticamente o footer e as redes sociais, que se encontra na pasta components.dev
5 changed files with 476 additions and 195 deletions
@ -0,0 +1,32 @@
|
||||
<?php |
||||
|
||||
function GerarFooter(){ |
||||
echo '<div class="mainfooter"> |
||||
<div class="footer"> |
||||
<div class="logo"> |
||||
<img src="img/FOOTER_SIMPLES_IP.png" alt="Logo SimplesIp" /> |
||||
<p>Desenvolvido por Simples IP</p> |
||||
</div> |
||||
<div class="content-footer"> |
||||
<p>Telefone: +55 65 3616-8280 - Email: meajuda@simplesip.com.br</p> |
||||
<p>simplesip.net.br</p> |
||||
<p>Copyright © ' . getData() . '</p> |
||||
</div> |
||||
<div class="links"> |
||||
<a href="#"><li>About</li></a> |
||||
<a href="#"><li>Help</li></a> |
||||
<a href="#"><li>Contact</li></a> |
||||
<a href="#"><li>About</li></a> |
||||
<a href="#"><li>Help</li></a> |
||||
</div> |
||||
<div class="line"></div> |
||||
</div> |
||||
</div>'; |
||||
} |
||||
|
||||
function getData(){ |
||||
$dataAtual = date('Y'); |
||||
return $dataAtual; |
||||
} |
||||
|
||||
?> |
||||
@ -0,0 +1,11 @@
|
||||
<?php |
||||
|
||||
function GerarSociais() { |
||||
echo '<div class="menu"> |
||||
<a href="#"><div class="social"><i class="fa-brands fa-whatsapp fa-2x"></i></div></a> |
||||
<a href="#"><div class="social"><i class="fa-brands fa-instagram fa-2x"></i></div></a> |
||||
<a href="#"><div class="social"><i class="fa-brands fa-linkedin-in fa-2x"></i></div></a> |
||||
</div>'; |
||||
} |
||||
|
||||
?> |
||||
@ -0,0 +1,359 @@
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; |
||||
background-color: rgb(74, 125, 245); |
||||
background-image: |
||||
radial-gradient(at 7% 96%, hsla(194, 98%, 50%, 1) 0px, transparent 70%), |
||||
radial-gradient(at 77% 30%, hsla(303, 90%, 50%, 1) 0px, transparent 15%), |
||||
radial-gradient(at 1% 39%, hsla(324, 100%, 50%, 1) 0px, transparent 50%), |
||||
radial-gradient(at 78% 90%, hsla(295, 95%, 51%, 1) 0px, transparent 30%), radial-gradient(at 22% 87%, hsla(253, 100%, 50%, 1) 0px, transparent 30%), |
||||
radial-gradient(at 34% 74%, hsla(240, 100%, 50%, 1) 0px, transparent 80%); |
||||
} |
||||
|
||||
button { |
||||
cursor: pointer; |
||||
} |
||||
/* ///////////////////////////////////////////////////// */ |
||||
|
||||
/* Container de login */ |
||||
.container-home { |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
overflow-y: scroll; |
||||
} |
||||
|
||||
.container-login { |
||||
width: 65vw; |
||||
margin: 0px 40px 0px 40px; |
||||
border-radius: 6px; |
||||
border-color: transparent; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.login-content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 97%; |
||||
} |
||||
|
||||
.login-content .left { |
||||
width: 100%; |
||||
height: calc(100% - 20px); |
||||
border-radius: 400px 0px 0px 400px; |
||||
color: white; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
transition: transform 0.3s ease-in-out; |
||||
overflow: hidden; |
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; |
||||
} |
||||
|
||||
.login-content .left:hover { |
||||
transform: translateX(-8px) scale(1.01); |
||||
overflow: hidden; |
||||
filter: opacity(1); |
||||
} |
||||
|
||||
.left img { |
||||
width: 100%; |
||||
height: 100%; |
||||
filter: saturate(130%) opacity(0.9); |
||||
} |
||||
|
||||
.left>a { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.login-content .right { |
||||
display: flex; |
||||
padding: 10px; |
||||
min-height: 68vh; |
||||
width: 650px; |
||||
border-radius: 20px 4px 4px 20px; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: white; |
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; |
||||
transition: transform 0.3s ease-in-out; |
||||
} |
||||
|
||||
.login-content .right:hover { |
||||
transform: translateX(8px) scale(1.01); |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.right .right-content { |
||||
text-decoration: none; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100%; |
||||
padding: 10px; |
||||
flex: 1; |
||||
} |
||||
|
||||
.right-content h1 { |
||||
color: #2D69F5; |
||||
margin-bottom: 80px; |
||||
} |
||||
|
||||
.right-content h2 { |
||||
color: #2D69F5; |
||||
margin: 15px 0 15px 0; |
||||
} |
||||
|
||||
.right .right-content input { |
||||
border: 0; |
||||
width: 100%; |
||||
padding: 10px; |
||||
} |
||||
|
||||
.right .right-content .user { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin: 15px 0 15px 0; |
||||
color: #2D69F5; |
||||
} |
||||
|
||||
.fa-solid.fa-user { |
||||
width: max-content; |
||||
height: min-content; |
||||
padding: 10px; |
||||
border-radius: 0 12px 12px 12px; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.right .right-content .password { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin: 15px 0 15px 0; |
||||
} |
||||
|
||||
.fa-solid.fa-key { |
||||
width: max-content; |
||||
height: max-content; |
||||
padding: 10px; |
||||
border-radius: 0 12px 12px 12px; |
||||
background-color: transparent; |
||||
color: #2D69F5; |
||||
} |
||||
|
||||
.remember { |
||||
display: flex; |
||||
justify-content: start; |
||||
align-items: center; |
||||
width: 100%; |
||||
} |
||||
|
||||
.remember>a { |
||||
color: #2D69F5; |
||||
font-size: small; |
||||
font-weight: bold; |
||||
text-decoration: none; |
||||
padding: 5px; |
||||
} |
||||
|
||||
:root { |
||||
overflow-y: hidden; |
||||
} |
||||
/* ///////////////////////////////////////////////////// */ |
||||
|
||||
/* Menu de redes sociais */ |
||||
.menu { |
||||
width: 100%; |
||||
font-weight: bolder; |
||||
display: flex; |
||||
align-items: end; |
||||
justify-content: center; |
||||
flex: 1; |
||||
} |
||||
|
||||
.social { |
||||
color: #2D69F5; |
||||
padding: 8px; |
||||
margin: 2px; |
||||
transition: transform 0.3s; |
||||
} |
||||
|
||||
.social:hover { |
||||
transform: scale(1.15); |
||||
} |
||||
/* ///////////////////////////////////////////////////// */ |
||||
|
||||
/* Botão de envio */ |
||||
.bn-login { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.bn632-hover { |
||||
border-radius: 4px; |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
height: 35px; |
||||
width: 75%; |
||||
text-align: center; |
||||
border: none; |
||||
background-size: 300% 100%; |
||||
-o-transition: all 0.6s ease-in-out; |
||||
-webkit-transition: all 0.6s ease-in-out; |
||||
transition: all 0.6s ease-in-out; |
||||
} |
||||
|
||||
.bn632-hover:hover { |
||||
background-position: 100% 0; |
||||
-moz-transition: all .4s ease-in-out; |
||||
-o-transition: all .4s ease-in-out; |
||||
-webkit-transition: all .4s ease-in-out; |
||||
transition: all .4s ease-in-out; |
||||
} |
||||
|
||||
.bn632-hover:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
.bn632-hover.bn24 { |
||||
background-image: linear-gradient(to right, |
||||
#2D69F5, |
||||
#FF007A, |
||||
#6664f1, |
||||
rgb(249, 5, 78)); |
||||
} |
||||
/* ///////////////////////////////////////////////////// */ |
||||
|
||||
/* Responsividade */ |
||||
@media screen and (max-width:950px) { |
||||
.login-content .left { |
||||
display: none; |
||||
} |
||||
|
||||
.login-content .right { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
border: 2px; |
||||
} |
||||
|
||||
.login-content .right:hover { |
||||
transform: none; |
||||
} |
||||
|
||||
.right .right-content>h1 { |
||||
font-size: 26px; |
||||
} |
||||
} |
||||
/* ///////////////////////////////////////////////////// */ |
||||
|
||||
/* Footer */ |
||||
|
||||
.footer { |
||||
display: flex; |
||||
flex: 1; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items: stretch; |
||||
justify-content: center; |
||||
width: 100vw; |
||||
height: 150px; |
||||
position: relative; |
||||
background-color: white; |
||||
border-radius: 60px 60px 0 0; |
||||
top: -80px; |
||||
overflow: hidden; |
||||
transition: slideY 1s ease-in-out; |
||||
} |
||||
|
||||
.logo { |
||||
display: flex; |
||||
flex-direction: column; |
||||
font-size: small; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.mainfooter { |
||||
color: rgba(100, 100, 100, 0.833); |
||||
height: 180px; |
||||
background-color: white; |
||||
} |
||||
|
||||
.content-footer { |
||||
margin-top: 3px; |
||||
margin-left: 20px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: small; |
||||
} |
||||
|
||||
.content-footer>p { |
||||
margin-bottom: 3px; |
||||
} |
||||
|
||||
.footer p { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.foote img { |
||||
width: 60px; |
||||
height: 55px; |
||||
} |
||||
|
||||
.links { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-evenly; |
||||
align-items: start; |
||||
width: 100%; |
||||
margin: 45px 5px 15px 5px; |
||||
} |
||||
|
||||
.links a { |
||||
text-decoration: none; |
||||
color: #2D69F5; |
||||
list-style-type: none; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.line { |
||||
width: 80%; |
||||
height: 2px; |
||||
background-color: whitesmoke; |
||||
} |
||||
|
||||
.mainfooter { |
||||
-webkit-animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; |
||||
animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; |
||||
} |
||||
/* ///////////////////////////////////////////////////// */ |
||||
@ -1,190 +1,59 @@
|
||||
<?php |
||||
|
||||
include "util/funcoesLicenca.php"; |
||||
/** |
||||
* Conexao com banco de dados |
||||
*/ |
||||
//coloca o focus no campo login |
||||
$setFocus = "document.getElementById('loginUser').focus();"; |
||||
//define alinhamento no conteudo do master.tpl |
||||
$vAlineMaster = "middle"; |
||||
|
||||
/** DEFINE A QUANTIDADE DE ERROS DE AUTENTICACAO PARA BLOQUEIO */ |
||||
$tentativaErro = 5; |
||||
|
||||
/* |
||||
* Vefica se existem as configuracoes para recuperacao da senha. |
||||
*/ |
||||
$smarty->assign("recuperaSenha", ValidaRecuperaSenha($dbcon)); |
||||
|
||||
/* |
||||
* usuario nao autenticado |
||||
*/ |
||||
|
||||
if (!isset($_POST["loginUser"])) { |
||||
$jsStartup[] = $setFocus; |
||||
DispLogin($smarty); // or $siteError->GetPhpError("Autentica Usuario", "", "Erro ao chamar funcao smarty!"); |
||||
} else { |
||||
|
||||
$login = strtolower(substr($_POST["loginUser"], 0, 50)); |
||||
$senha = substr($_POST["loginPass"], 0, 14); |
||||
$validaTentativa = countTentativas($dbcon, $login, $tentativaErro); |
||||
|
||||
if (!$validaTentativa && ($_POST["loginUser"] != 'admin')) { |
||||
$jsStartup[] = "alert('Seu acesso foi bloqueado por inúmeras tentativas de acesso inválidos! Para o desbloqueio, realize a alteração de senha ou consulte seu Administrador.');"; |
||||
$jsStartup[] = $setFocus; |
||||
DispLogin($smarty); |
||||
return; |
||||
} else if (!validarLicenca($dbcon) && ($_POST["loginUser"] != 'admin')) { |
||||
$jsStartup[] = "alert('Sua licença é inválida por favor entre em contato com o suporte da Simples IP para ativar sua central!');"; |
||||
DispLogin($smarty); |
||||
return; |
||||
} |
||||
|
||||
$query = "select id, nome, apelido, matricula, |
||||
case when((select count(*) |
||||
from pbx_grupo_usuario a, pbx_grupo_funcoes b, pbx_funcoes c |
||||
where b.gp_id = a.gp_id |
||||
and c.fun_id = b.fun_id |
||||
and a.user_id = u.id |
||||
and c.fun_nome = 'mnSupervisor') > 0)then 1 else 0 end as supervisor, |
||||
cast( admin as int) as admin, case when(agente = true)then 1 else 0 end as agente, |
||||
def_senha, |
||||
senha_expira, senha_dias_expira, |
||||
senha_ult_atualiza, |
||||
senha_ult_atualiza + senha_dias_expira as senha_dt_expira, |
||||
case when((senha_ult_atualiza + senha_dias_expira) < CURRENT_DATE)then 1 else 0 end as senha_expirada, |
||||
penalidade, senha, termo_uso_privacidade |
||||
from pbx_usuarios u |
||||
where (u.check_vl = md5(%s) OR email = %s) |
||||
and coalesce(status, true) = true |
||||
and coalesce(delete_,0) = 0 "; |
||||
|
||||
$result = pg_query($dbcon, sprintf($query, QuotedStr($login), QuotedStr($login))); |
||||
|
||||
/* |
||||
* Faz autenticação do usuário. |
||||
*/ |
||||
$senhaIsValid = false; |
||||
if (pg_num_rows($result)) { |
||||
$row = pg_fetch_array($result); |
||||
$senhaUser = $row['senha']; |
||||
$senhaLogin = md5($senha); |
||||
$senhaIsValid = $senhaUser == $senhaLogin; |
||||
} |
||||
|
||||
if ($senhaIsValid && RegistraAcesso($row['apelido'], $row['id'])) { |
||||
$_SESSION["SSTimeOut"] = time(); |
||||
$_SESSION["SSlogin"] = $row['apelido']; |
||||
$_SESSION["SSnomeUser"] = $row['nome']; |
||||
$_SESSION["SSidUser"] = $row['id']; |
||||
$_SESSION["SSmatriculaUser"] = $row['matricula']; |
||||
$_SESSION["SSsuper"] = $row['supervisor']; |
||||
$_SESSION["SSadmin"] = '0'; //$row['admin']; |
||||
$_SESSION["SSagente"] = '0'; //$row['agente']; |
||||
$_SESSION["SSagentePenalidade"] = $row['penalidade']; |
||||
$_SESSION["SSaut"] = "ok"; |
||||
$_SESSION[SS_SENHA_DEF] = $row["def_senha"]; |
||||
$_SESSION["SSTermoUsoPrivacidade"] = $row["termo_uso_privacidade"]; |
||||
|
||||
//registra o login corrente para registrar log de erros do usuario |
||||
// $siteError->SetLogin($row['apelido']); |
||||
//parametros do sistema |
||||
GetParametros($dbcon); |
||||
|
||||
//armazenha informacoes para relatórios de pabx em base diversa |
||||
SetDefaultSite($dbcon); |
||||
|
||||
SetHosts($dbcon); |
||||
|
||||
// SetSupervisorAcesso($dbcon); Desativaro era usado para identificar se o superfivor tem acesso nas filas ativas e receptiva. |
||||
SetAgente($dbcon); |
||||
|
||||
// Modo de atendimento default |
||||
SetModuAtendimentoDefault(); |
||||
|
||||
// caminhos para gravar arquivos |
||||
GetCofigPadrao($dbcon); |
||||
|
||||
/* |
||||
* expiracao de senha |
||||
*/ |
||||
if ($row["senha_expira"]) { |
||||
$dataNow = date('Y-m-d'); |
||||
|
||||
if (!IsAdmin() && $row["senha_dias_expira"] > 0 && (strtotime($dataNow) >= strtotime($row["senha_ult_atualiza"] . "+{$row["senha_dias_expira"]} days"))) { |
||||
$query = "UPDATE pbx_usuarios SET def_senha = '1' WHERE apelido = '{$row['apelido']}' AND id = {$row['id']};"; |
||||
$result = pg_query($dbcon, $query); |
||||
} |
||||
|
||||
$_SESSION[SS_EXPIRA_SENHA] = 1; |
||||
$_SESSION[SS_PRM_SENHA_EXPIRADA] = $row["senha_expirada"]; |
||||
$_SESSION[SS_PRM_SENHA_DT_EXP] = $row["senha_dt_expira"]; |
||||
$_SESSION[SS_PRM_SENHA_ULT_ATU] = $row["senha_ult_atualiza"]; |
||||
$_SESSION[SS_PRM_SENHA_DIAS_EXP] = $row["senha_dias_expira"]; |
||||
} |
||||
|
||||
/* |
||||
* Informações sobre dac padrao |
||||
*/ |
||||
if (true) { |
||||
$dacParao = GetDacPadraoAgente($dbcon, false); |
||||
$_SESSION[SS_DAC_PADRAO] = $dacParao; |
||||
} |
||||
|
||||
|
||||
/* |
||||
* Vefifica Registros que precisam esta incluidos no banco de dados |
||||
*/ |
||||
VerificaDefaults($dbcon); |
||||
|
||||
/* |
||||
* Captura a resolução do computador cliente. |
||||
*/ |
||||
$w = $_REQUEST['screenW']; |
||||
$h = $_REQUEST['screenH']; |
||||
|
||||
/* |
||||
* Largura do site. |
||||
*/ |
||||
$tbLayoutW = $_REQUEST['tbLayout']; |
||||
SetResScreen($w, $h, $tbLayoutW); |
||||
} else { |
||||
RegistraAcesso($_POST["loginUser"], ($row['id'] ? $row['id'] : '0'), '1'); |
||||
GravaFull(0, '', 'Tentativa de login inválido', $_POST["loginUser"]); |
||||
$_SESSION["SSaut"] = "er"; |
||||
//if(!$siteError->GetNumError()) |
||||
$jsStartup[] = "alert('Usuário ou senha inválidos');"; |
||||
$jsStartup[] = $setFocus; |
||||
DispLogin($smarty); // or $siteError->GetPhpError("Autentica Usuario"); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Captura tela de login |
||||
*/ |
||||
function DispLogin($smarty) |
||||
{ |
||||
$smarty->display('login.tpl'); |
||||
} |
||||
|
||||
function countTentativas($dbcon, $login, $tentativaErro) |
||||
{ |
||||
$login = addslashes($login); |
||||
|
||||
$query = "SELECT COUNT(*) AS tentativas FROM pbx_controle_acesso WHERE acs_login = '$login' AND acs_data_ini::DATE = 'now' AND acs_erro = 1;"; |
||||
$result = pg_query($dbcon, $query); |
||||
$res = pg_fetch_assoc($result); |
||||
if ($res['tentativas'] == $tentativaErro) { |
||||
return false; |
||||
} |
||||
return true; |
||||
} |
||||
|
||||
function ValidaRecuperaSenha($dbcon) |
||||
{ |
||||
$query = "select hosts, usuario, senha, porta from pbx_confmail;"; |
||||
$result = pg_query($dbcon, $query); |
||||
$res = pg_fetch_assoc($result); |
||||
return ($res ? true : false); |
||||
} |
||||
//$habilitaLayout = 1; |
||||
$smarty->assign("habilitaLayout", $habilitaLayout); |
||||
include "components/Footer/footer.php"; |
||||
include "components/Sociais/sociais.php"; |
||||
?> |
||||
|
||||
<html> |
||||
|
||||
<head> |
||||
|
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title> |
||||
SimplesIp Login |
||||
</title> |
||||
<style> |
||||
<?php include 'css/login.css' ?> |
||||
</style> |
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<div class="container-home"> |
||||
<div class="container-login"> |
||||
<div class="login-content"> |
||||
<div class="left"> |
||||
<img src="https://cdn.pixabay.com/photo/2023/09/14/15/54/bird-8253245_1280.jpg" alt="teste" /> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="right-content"> |
||||
<h1>Bem Vindo</h1> |
||||
<h2>login</h2> |
||||
<div class="user"> |
||||
<i class="fa-solid fa-user"></i> |
||||
<input placeholder="Insira seu email ou usuário"/> |
||||
</div> |
||||
|
||||
<div class="password"> |
||||
<i class="fa-solid fa-key"></i> |
||||
<input type="password" placeholder="Insira sua senha"/> |
||||
</div> |
||||
<div class="remember"> |
||||
<a href='#'>Esqueci minha senha</a> |
||||
</div> |
||||
</div> |
||||
<div class='bn-login'> |
||||
<button class="bn632-hover bn24">Entrar</button> |
||||
</div> |
||||
<?php GerarSociais(); ?> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<?php GerarFooter(); ?> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue