ReCAPTCHA nos formularios.

site/templates/contacto.php

@@ -2,6 +2,7 @@
 
 /** @var Page $page API variable */
 
+define("RECAPTCHA_V3_SECRET_KEY", '6LexXqYiAAAAAOoFqs4kfWd7zW6stVRK0aViyiQo');
 $menu = '';
 $contido = '';
 
@@ -22,9 +23,32 @@ if(isset($_POST['enviar']))
     $correo->fromName($sanitizer->text($input->post->nome));
     $correo->subject($sanitizer->text($input->post->asunto));
     $correo->body($sanitizer->text($input->post->mensaxe));
+
+    $token = $input->post->token;
+    $action = $input->post->action;
+
+    $ch = curl_init();
+    curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
+    curl_setopt($ch, CURLOPT_POST, 1);
+    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => RECAPTCHA_V3_SECRET_KEY, 'response' => $token)));
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+    $response = curl_exec($ch);
+    curl_close($ch);
+    $arrResponse = json_decode($response, true);
+
+    if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5)
+    {
         $correo->send();
         $enviado = $correo->getResult();
     }
+    else
+    {
+        $mensaxe_tipo = "alerta";
+        $mensaxe = _x('Wrong reCaptcha', 'Wrong reCaptcha');
+    }
+
+    
+}
 
 $contido .= renderMigasPan($page) . "\n";
 $contido .= '<article id="' . $page->name .'" class="container">' . "\n";
@@ -33,7 +57,7 @@ $contido .= '<h2 class="visually-hidden">' . ucfirst($page->title) . '</h2>' . "
 $contido .= '<div class="row align-items-lg-stretch mb-5">' . "\n";
 $contido .= '<div class="col-lg-7">' . "\n";
 $contido .= '<div class="h-100 p-5 text-bg-light border rounded-3">' . "\n";
-$contido .= '<form method="POST" id="formulario-contacto" name="formulario-contacto" action="#">' . "\n";
+$contido .= '<form method="POST" id="formulario-contacto" name="formulario-contacto" onSubmit="getContact(event)" action="#">' . "\n";
 $contido .= '<div class="row mb-3">' . "\n";
 $contido .= '<div class="col-md-6">' . "\n";
 $contido .= '<label class="form-label" for="nome">' . _x('Name', 'name') . '</label>' . "\n";

site/templates/css/style.css

@@ -10,6 +10,15 @@ body
     font-size: 1rem;
 }
 
+body.signin
+{
+    display: flex;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    background-color: #f5f5f5;
+}
+
 a
 {
     color: rgba(var(--cor_30), var(--bs-link-opacity, 1));
@@ -274,18 +283,18 @@ time span
     padding-right: unset;
 }
 
-.form-floating > .form-control,
+#search .form-floating > .form-control,
-.form-floating > .form-control-plaintext,
+#search .form-floating > .form-control-plaintext,
-.form-floating > .form-select
+#search .form-floating > .form-select
 {
     height: calc(2.25rem + 2px);
     line-height: 1.25;
 }
 
-.form-floating > .form-control:focus ~ label,
+#search .form-floating > .form-control:focus ~ label,
-.form-floating > .form-control:not(:placeholder-shown) ~ label,
+#search .form-floating > .form-control:not(:placeholder-shown) ~ label,
-.form-floating > .form-control-plaintext ~ label,
+#search .form-floating > .form-control-plaintext ~ label,
-.form-floating > .form-select ~ label
+#search .form-floating > .form-select ~ label
 {
     height: unset;
     width: unset;
@@ -410,6 +419,31 @@ a.collapse-head.active:before
     border-color: rgba(var(--cor_30), var(--bs-border-opacity)) !important;
 }
 
+.form-signin
+{
+    max-width: 330px;
+    padding: 15px;
+}
+
+.form-signin .form-floating:focus-within
+{
+    z-index: 2;
+}
+
+.form-signin input[type="text"]
+{
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"]
+{
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
 @media (min-width: 992px)
 {
     #menu-desplegable .nav-item,

site/templates/js/main.js

@@ -22,7 +22,6 @@ document.addEventListener("hide.bs.collapse", function (e)
     e.target.previousElementSibling.classList.remove("active");
 });
 
-
 const swiper_galeria = new Swiper("#galeria",
 {
     slidesPerView: 1,
@@ -50,3 +49,58 @@ const swiper_galeria = new Swiper("#galeria",
     },
 });
 
+function getLogin(event)
+{
+    event.preventDefault();
+    grecaptcha.ready(function()
+    {
+        grecaptcha.execute('6LexXqYiAAAAACwDpMGIg1OMnAXVJU0VmbEMQUD8', { action: 'submit' }).then(function(token)
+        {
+            var form = document.getElementById("inicio-sesion");
+            var boton_token = document.createElement('input');
+
+            boton_token.type = 'hidden';
+            boton_token.name = 'token';
+            boton_token.id = 'token';
+            boton_token.value = token;
+
+            var boton_action = document.createElement('input');
+            boton_action.type = 'hidden';
+            boton_action.name = 'action';
+            boton_action.id = 'action';
+            boton_action.value = 'submit';
+
+            form.appendChild(boton_token);
+            form.appendChild(boton_action);
+            form.submit();
+        });;
+    });
+}
+
+function getContact(event)
+{
+    event.preventDefault();
+    grecaptcha.ready(function()
+    {
+        grecaptcha.execute('6LexXqYiAAAAACwDpMGIg1OMnAXVJU0VmbEMQUD8', { action: 'submit' }).then(function(token)
+        {
+            var form = document.getElementById("formulario-contacto");
+            var boton_token = document.createElement('input');
+
+            boton_token.type = 'hidden';
+            boton_token.name = 'token';
+            boton_token.id = 'token';
+            boton_token.value = token;
+
+            var boton_action = document.createElement('input');
+            boton_action.type = 'hidden';
+            boton_action.name = 'action';
+            boton_action.id = 'action';
+            boton_action.value = 'submit';
+
+            form.appendChild(boton_token);
+            form.appendChild(boton_action);
+            form.submit();
+        });;
+    });
+}

site/templates/layout/partial/main_foot.php

@@ -27,6 +27,8 @@
                 </div>
             </div>
         </footer>
+        <script src="https://www.google.com/recaptcha/api.js?render=6LexXqYiAAAAACwDpMGIg1OMnAXVJU0VmbEMQUD8"></script>
+        <script src="<?php echo $config->urls->templates?>vendors/Swiperjs/js/swiper-bundle.min.js"></script>
         <script src="<?php echo $config->urls->templates?>js/main.js"></script>
     </body>
 </html>

site/templates/layout/partial/main_head.php

@@ -97,7 +97,7 @@ if($input->get->logout == true)
                     <h1 class="visually-hidden"><?php echo $configuracion['sitio_nome']; ?> <?php echo $configuracion['sitio_descripcion']; ?></h1>
                 </a>
                 <div class="d-flex flex-row justify-content-between">
-                    <form class="col-7 py-2 mb-3 mb-md-0" action="<?php echo pages()->get('template=atopar')->url; ?>" method="get" role="search">
+                    <form id="search" class="col-7 py-2 mb-3 mb-md-0" action="<?php echo pages()->get('template=atopar')->url; ?>" method="get" role="search">
                         <div class="input-group">
                             <div class="form-floating">
                                 <input type="search" id="atopar-consulta" name="q" class="form-control rounded-0 shadow-none py-1" placeholder="<?php echo _x("Search", "search"); ?>&hellip;" />

site/templates/xes-acceder.php

@@ -46,10 +46,11 @@ else
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $config->urls->templates; ?>images/favicon-32x32.png">
         <link rel="shortcut icon" href="<?php echo $config->urls->templates; ?>images/favicon.ico">
-        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/reset.css" />
+        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/reset.css">
-        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/fonts.css" />
+        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/fonts.css">
-        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/swiper.css" />
+        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>vendors/Bootstrap/css/bootstrap.css">
-        <link title="Praia de Seselle" rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>css/style.css" />
+        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>vendors/Swiperjs/css/swiper-bundle.min.css">
+        <link title="Praia de Seselle" rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>css/style.css">
         <style>
             :root
                 {
@@ -58,54 +59,45 @@ else
                     --cor_60: <?php echo $configuracion['cor_fondo'] ?>;
                     --cor_30: <?php echo $configuracion['cor_principal'] ?>;
                     --cor_10: <?php echo $configuracion['cor_secundario'] ?>;
+                    --imaxe_destacada: <?php echo $page->imaxe ? 'url("'. $page->imaxe->url . '")' : 'none'; ?>;
                 }
         </style>
     </head>
-    <body>
+    <body class="signin text-center">
-        <a href="#contido" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>
+        <main class="form-signin w-100 m-auto">
-        <header id="cabeceira">
+        <form id="inicio-sesion" onSubmit="getLogin(event)" action="/es/gestion/acceder/" method='post'>
-            <div class="contedor">
+                <picture class="mb-4">
-                <div id="logo">
-                    <picture>
                     <source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-150x116.jpg" media="(max-width: 767px)">
                     <source srcset="<?php echo $config->urls->templates?>images/logo-praia-seselle-230x179.jpg" media="(min-width: 768px)">
                     <img src="<?php echo $config->urls->templates?>images/logo-praia-seselle.svg" alt="<?php echo _x('Logo of Praia de Seselle Tourist Apartments', 'Site logo'); ?>">
                 </picture>
                 <h1 class="visually-hidden"><?php echo $configuracion['sitio_nome']; ?> <?php echo $configuracion['sitio_descripcion']; ?></h1>
+                <h2 class="h3 mb-3 fw-normal"><?php echo _x('Log in', 'Log in'); ?></h2>
+                <div class="form-floating">
+                    <input type="text" class="form-control" id="usuario" placeholder="<?php echo _x('Username', 'Username') ?>">
+                    <label for="usuario"><?php echo _x('Username', 'Username') ?>:</label>
                 </div>
+                <div class="form-floating">
+                    <input type="password" class="form-control" id="contrasinal" placeholder="<?php echo _x('Password', 'Password') ?>">
+                    <label for="contrasinal"><?php echo _x('Password', 'Password') ?>:</label>
                 </div>
-        </header>
-        <main id="contido">
-            <div class="contedor">
-                <form id="inicio-sesion" onSubmit="getToken(event)" action="/es/gestion/acceder/" method='post'>
-                    <h2><?php echo _x('Log in', 'Log in'); ?></h2>
 <?php if($input->post->usuario): ?>
                 <div id="notificacions" class="<?php echo $mensaxe_tipo; ?>">
                     <h3><i class="icon-x-circle"></i> <?php echo $mensaxe ?></h2>
                 </div>
 <?php endif; ?>
-                    <div class="elemento">
+                <div class="checkbox mb-3">
-                        <label for="usuario"><?php echo _x('Username', 'Username') ?>:</label>
+                <label>
-                        <input type="text" id="usuario" name="usuario">
+                    <input type="checkbox" value="remember-me"> Remember me
+                </label>
                 </div>
-                    <div class="elemento">
+                <input class="w-100 btn btn-lg btn-primary" type="submit" id="enviar" name="enviar" value="<?php echo _x('Log in', 'Log in'); ?>">
-                        <label for="contrasinal"><?php echo _x('Password', 'Password') ?>:</label>
-                        <input type="password" id="contrasinal" name="contrasinal">
-                    </div>
-                    <input type="submit" id="enviar" name="enviar" value="<?php echo _x('Log in', 'Log in'); ?>">
-                </form>
-            </div>
-        </main>
-        <footer id="pe">
-            <h2 class="visually-hidden"><?php echo _x('Footer', 'Page footer');?></h2>
-            <div class="contedor">
                 <p>&copy;2022 <?php echo $configuracion['sitio_nome'] 
                     . ' ' . $configuracion['sitio_descripcion']; ?>.</p>
-                <p><?php echo _x('All rights reserved', 'copyright');?></p>
+            </form>
-                <p><?php echo _x('Designed and Developed by', 'developer');?> <a target="_blank" href="https://artabro.org">Codigo Artabro</a></p>
+        </main>
-            </div>
-        </footer>
         <script src="https://www.google.com/recaptcha/api.js?render=6LexXqYiAAAAACwDpMGIg1OMnAXVJU0VmbEMQUD8"></script>
+        <script src="<?php echo $config->urls->templates?>vendors/Swiperjs/js/swiper-bundle.min.js"></script>
         <script src="<?php echo $config->urls->templates?>js/main.js"></script>
     </body>
 </html>