Merge pull request #100 from pedrolivaresanchez/feat/auto-login-check…

…box-privacidad

Feat: auto login + politica de privacidad + fix styles

src/app/auth/page.js

@@ -18,7 +18,7 @@ export default function AuthPage() {
   });
 
   return (
-    <section className="m-16">
+    <section className="mx-6 lg:m-16">
       <Login onSuccessCallback={() => (window.location.href = '/')} />
     </section>
   );

src/app/politica-privacidad/page.tsx

@@ -0,0 +1,119 @@
+export default function politicaPrivacidad() {
+  return (
+    <div className="flex flex-col gap-6 [&>article>h2]:text-xl [&>article>h2]:font-semibold [&>article>h2]:mb-2 [&>article>p>a]:text-blue-500 [&>article>ul]:list-disc [&>article>ul]:ml-5">
+      <h1 className="text-center text-4xl font-bold">Politica de privacidad</h1>
+      <article>
+        <h2>1. Datos Personales que Recopilamos</h2>
+        <p>
+          Recopilamos datos personales para facilitar el contacto entre personas que ofrecen ayuda sin ánimo de lucro y
+          aquellas que la necesitan en las zonas afectadas por catástrofes naturales. Los datos recopilados incluyen:
+        </p>
+        <ul>
+          <li>
+            Datos obligatorios: correo electrónico para el registro y ubicación aproximada (barrio o área general).
+          </li>
+          <li>Datos opcionales: número de teléfono y descripción de las necesidades de ayuda.</li>
+        </ul>
+        <p>
+          Nota: No proporciones ningún dato que no esté indicado en el formulario, como nombre completo, DNI o cuentas
+          bancarias.
+        </p>
+      </article>
+      <article>
+        <h2>2. Finalidad y Base Legal del Tratamiento de Datos</h2>
+        <ul>
+          <li>Finalidad: Facilitar la conexión entre personas que ofrecen y requieren ayuda en las áreas afectadas.</li>
+          <li>
+            Base legal: El tratamiento de los datos se basa en el consentimiento expreso del usuario, otorgado al
+            registrarse y rellenar el formulario de solicitud de ayuda.
+          </li>
+        </ul>
+      </article>
+      <article>
+        <h2>3. Consentimiento para la Recopilación y Publicación de Datos</h2>
+        <p>
+          Al registrarse y rellenar el formulario de solicitud de ayuda, el usuario otorga su consentimiento para la
+          recopilación y, cuando lo autorice expresamente, la publicación de su ubicación aproximada en el mapa, número
+          de teléfono y necesidades. Este consentimiento es revocable en cualquier momento.
+        </p>
+        <p>
+          Para revocar el consentimiento de publicación, envía un correo a{' '}
+          <a href="mailto:[email protected]" title="Enviar correo electrónico a ajudadana">
+            [email protected]
+          </a>
+          , indicando ELIMINACIÓN DE SOLICITUD DE AYUDA EN EL MAPA, junto con el correo de registro y la ubicación
+          aproximada. Responderemos en un plazo máximo de 30 días.
+        </p>
+      </article>
+      <article>
+        <h2>4. Duración de Conservación de los Datos</h2>
+        <p>
+          Los datos serán utilizados durante la emergencia y hasta un máximo de 6 meses después de la normalización de
+          la situación, momento en el cual serán eliminados y destruidos de forma segura.
+        </p>
+      </article>
+      <article>
+        <h2>5. Derechos de los Usuarios</h2>
+        <p>De acuerdo con el RGPD, los usuarios tienen derecho a:</p>
+        <ul>
+          <li>Acceso: Solicitar una copia de sus datos personales.</li>
+          <li>Rectificación: Modificar información incorrecta.</li>
+          <li>Supresión: Solicitar la eliminación de sus datos en cualquier momento.</li>
+          <li>Oposición y Limitación del Tratamiento: Oponerse al tratamiento o limitar su uso.</li>
+          <li>Portabilidad: Solicitar que sus datos sean transferidos a otra entidad.</li>
+        </ul>
+        <p>
+          Para ejercer estos derechos, envía una solicitud a{' '}
+          <a href="mailto:[email protected]" title="Enviar correo electrónico a ajudadana">
+            [email protected]
+          </a>
+          , incluyendo el derecho específico que deseas ejercer. La solicitud se procesará en un plazo de 30 días.
+        </p>
+      </article>
+      <article>
+        <h2>6. Seguridad de los Datos</h2>
+        <p>
+          Implementamos medidas técnicas y organizativas para proteger los datos personales. En caso de una violación de
+          seguridad que pueda afectar los derechos y libertades de los usuarios, notificaremos a la AEPD en un plazo de
+          72 horas y, si procede, a los usuarios afectados.
+        </p>
+      </article>
+      <article>
+        <h2>7. Transferencia de Datos a Terceros</h2>
+        <p>
+          Actualmente, Ayuda Dana no realiza transferencias de datos personales fuera del Espacio Económico Europeo
+          (EEE). Si esto cambia, se informará y solicitará el consentimiento explícito de los usuarios.
+        </p>
+      </article>
+      <article>
+        <h2>8. Privacidad de los Menores</h2>
+        <p>
+          El sitio no está dirigido a menores de 18 años. Si un padre o tutor detecta que un menor ha proporcionado
+          datos personales sin el debido consentimiento, contacta con nosotros en{' '}
+          <a href="mailto:[email protected]" title="Enviar correo electrónico a ajudadana">
+            [email protected]
+          </a>{' '}
+          para su eliminación.
+        </p>
+      </article>
+      <article>
+        <h2>9. Modificaciones de la Política de Privacidad</h2>
+        <p>
+          Ayuda Dana se reserva el derecho de modificar esta Política de Privacidad. En caso de cambios sustanciales,
+          notificaremos a los usuarios registrados y solicitaremos nuevamente su consentimiento si los cambios implican
+          un uso ampliado de sus datos.
+        </p>
+      </article>
+      <article>
+        <h2>10. Contacto</h2>
+        <p>
+          Para preguntas sobre nuestra Política de Privacidad o el uso de tus datos, contáctanos en{' '}
+          <a href="mailto:[email protected]" title="Enviar correo electrónico a ajudadana">
+            [email protected]
+          </a>
+        </p>
+      </article>
+      <p>Última actualización: 5 de noviembre de 2024</p>
+    </div>
+  );
+}

src/components/auth/Login.js

@@ -112,9 +112,6 @@ export default function Login({ onSuccessCallback }) {
           onBackButtonClicked={() => {
             setIsSignUp(false);
           }}
-          onSuccessCallback={() => {
-            setIsSignUp(false);
-          }}
         />
       )}
     </>

src/components/auth/SignUp.js

@@ -8,12 +8,13 @@ import { PhoneInput } from '@/components/PhoneInput';
 import { formatPhoneNumber } from '@/helpers/utils';
 import { isValidPhone } from '@/helpers/utils';
 
-export default function SignUp({ onSuccessCallback, onBackButtonClicked }) {
+export default function SignUp({ onBackButtonClicked }) {
   const [formData, setFormData] = useState({
     nombre: '',
     email: '',
     password: '',
     telefono: '',
+    privacyPolicy: '',
   });
   const [status, setStatus] = useState({
     isSubmitting: false,
@@ -71,16 +72,39 @@ export default function SignUp({ onSuccessCallback, onBackButtonClicked }) {
       return;
     }
 
-    const response = await authService.signUp(formData.email, formData.password, formData.nombre, formatedPhoneNumber);
+    // privacy policy
+    if (!formData.privacyPolicy) {
+      setError('Para continuar, debes aceptar la Política de Privacidad.');
+      return;
+    }
+
+    // SEND SIGN-UP REQUEST TO AUTHENTICATION SERVICE
+    const response = await authService.signUp(
+      formData.email,
+      formData.password,
+      formData.nombre,
+      formatedPhoneNumber,
+      formData.privacyPolicy,
+    );
+
     if (response.error) {
-      setError('Ha habido un error inesperado creando el usuario');
+      // SHOW ERROR IF PASSWORD IS WEAK OR USER ALREDY EXISTS
+      if (response.error.code === 'weak_password') {
+        setError('La contraseña debe tener al menos 6 caracteres.');
+      } else if (response.error.code === 'user_already_exists') {
+        setError('Ya existe una cuenta con este correo. Inicia sesión o intenta con otro.');
+      } else {
+        setError('Ocurrió un error. Inténtalo de nuevo.');
+      }
       return;
     }
 
     setStatus({ isSubmitting: false, error: null, success: true });
-    if (typeof onSuccessCallback === 'function') {
-      onSuccessCallback(response.data);
-    }
+
+    // SIGN IN WITH NEW USER CREATED
+    await authService.signIn(formData.email, formData.password);
+    // REDIRECT USER TO HOME PAGE
+    window.location.href = '/';
   };
 
   return (
@@ -137,6 +161,27 @@ export default function SignUp({ onSuccessCallback, onBackButtonClicked }) {
             />
           </div>
         </div>
+
+        {/* Política de privacidad */}
+        <div className="grid gap-4">
+          <div className="flex gap-2 items-start lg:items-center">
+            <input
+              type="checkbox"
+              value={formData.privacyPolicy}
+              onChange={(e) => setFormData({ ...formData, privacyPolicy: e.target.checked })}
+              className="min-w-4 min-h-4 cursor-pointer"
+              id="privacyPolicy"
+              required
+            />
+            <label htmlFor="privacyPolicy" className="text-sm font-medium text-gray-700">
+              He leído y aceptado la{' '}
+              <a href="/politica-privacidad/" className="text-blue-400">
+                política de privacidad
+              </a>{' '}
+              y acepto que «ajudadana.es» recoja y guarde los datos enviados a través de este formulario.
+            </label>
+          </div>
+        </div>
       </div>
 
       {/* Boton */}

src/components/layout/EmergencyLayout.tsx

@@ -27,7 +27,7 @@ export default function EmergencyLayout({ children }: PropsWithChildren) {
     <div className="min-h-screen bg-gray-100 flex">
       <Sidebar isOpen={isSidebarOpen} toggle={() => setIsSidebarOpen(!isSidebarOpen)} />
       <div className={`flex flex-col flex-1 transition-margin duration-300 ${isSidebarOpen ? 'md:ml-72' : 'ml-0'}`}>
-        <main className="p-4 flex flex-1  justify-center">
+        <main className="p-4 flex flex-1 justify-center items-center lg:items-start">
           <div className="max-w-7xl w-full">{children}</div>
         </main>
         <Footer />

src/components/layout/Footer.tsx

@@ -7,9 +7,14 @@ const Footer = () => {
             Web creada por personas voluntarias,{' '}
             <span className="block sm:inline">independiente de cualquier organismo.</span>
           </p>
-          <a className="text-gray-400 text-sm" href="mailto:[email protected]">
-            [email protected]
-          </a>
+          <div className="flex gap-4">
+            <a className="text-gray-400 text-sm" href="mailto:[email protected]">
+              [email protected]
+            </a>
+            <a className="text-gray-400 text-sm" href="/politica-privacidad/">
+              Política de privacidad
+            </a>
+          </div>
           <p className="text-gray-400 text-xs">© {new Date().getFullYear()} Emergency CV</p>
         </div>
       </div>

src/lib/service.ts

@@ -199,14 +199,15 @@ export const authService = {
   async getSessionUser() {
     return supabase.auth.getUser();
   },
-  async signUp(email: string, password: string, nombre: string, telefono: string) {
+  async signUp(email: any, password: any, nombre: any, telefono: any, privacyPolicy: boolean) {
     return supabase.auth.signUp({
       email,
       password,
       options: {
         data: {
           nombre,
           telefono,
+          privacyPolicy,
         },
       },
     });