Merge remote-tracking branch 'origin/main' into feat/ocultar-menus-in…

…necesarios

# Conflicts:
#	src/components/layout/Sidebar.tsx

.env.example

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
-
-API_KEY=
+SUPABASE_GOOGLE_AUTH_ID=
+SUPABASE_GOOGLE_AUTH_SECRET=
+API_KEY=

CONTRIBUTING.md

@@ -46,33 +46,69 @@ Este mensaje indica que se han añadido instrucciones de instalación local en e
 
 ¡Gracias por contribuir! Tu ayuda hace una gran diferencia para el proyecto.
 
-<br/>
-
 ## Desarrollo local - levantar db de desarrollo local
 
 ### Pre requisitos
 
-- [docker](https://docs.docker.com/engine/install/) y [docker compose](https://docs.docker.com/compose/install/)
-- [cli de supabase](https://supabase.com/docs/guides/local-development/cli/getting-started)
+- [Docker](https://docs.docker.com/engine/install/) y [Docker Compose](https://docs.docker.com/compose/install/)
+- [Supabase CLI](https://supabase.com/docs/guides/local-development/cli/getting-started)
 
-### Instalar self hosted supabase
+Si ya tienes cualquiera de los dos, **actualizalos para evitar errores**.
 
-```
+Si usas docker desktop en Windows, esta es la configuración que deberías tener.
+<img src="https://supabase.com/docs/_next/image?url=%2Fdocs%2Fimg%2Fguides%2Fcli%2Fdocker-win.png&w=3840&q=75&dpl=dpl_EU6MXvnLKJuwyo4VfbBx9GiJt9Qx" style="margin: 10px 0px; width: 55rem;">
+
+### Iniciar supabase en local
+
+Entramos en la carpeta del repositorio
+
+```bash
 cd ${DIRECTORIO_DE_EMERGENCY_CV}
-supabase login
-supabase init
-supabase link --project-ref nmvcsenkfqbdlfdtiqdo
+```
+
+Iniciamos la base de datos (**tener docker encendido**)
+
+```bash
 supabase start
 ```
 
-### Para hacer cambios en el schema
+Si no vemos las tablas ni los datos de ejemplo cargados podemos refrescar la base de datos con:
+
+```bash
+supabase db reset
+```
+
+### Hacer cambios en el schema
 
-- Editar como queremos que sea en local (studio de supabase)
-- Ejecutar el comando:
+#### Crear migracion automatica
 
+Nos interesa usar esta opción, cuando queremos **editar la base de datos desde el studio web**
+
+Cuando acabemos de realizar los cambios en el studio web, ejecutaremos el siguiente comando para generar la migration.
+
+```bash
+supabase db diff -f nombre_migracion
 ```
-// nombre de la migracion es indicativo, no tiene nigun efecto
-supabase db diff -f ${NOMBRE_DE_LA_MIGRACION}
+
+#### Crear migración manual
+
+Nos interesa usar esta opción, cuando queremos **editar la base de datos con codigo SQL manual**.
+
+Primero, creamos la el archivo migration con
+
+```bash
+supabase migration new nombre_migracion
+```
+
+Se creara un **nuevo fichero** con el nombre que hemos usado **en supabase/migrations**
+
+En ese archivo añadiremos todo el código SQL que necesitemos
+
+Si queremos visualizar nuestros cambios en local, podemos usar
+
+```bash
+supabase db reset
 ```
 
-- Esto generara una migracion en el local, hay que añadir esto al PR y github actions lo pondra en produccion.
+<br>
+La migration que generemos, la añadiremos en el PR.

src/app/page.tsx

@@ -159,10 +159,10 @@ export default function Home() {
       priority: 'high',
     },
     {
-      title: 'Personas Desaparecidas',
-      description: 'Reportar o buscar personas',
+      title: 'Desaparecidos y Extraviados',
+      description: 'Reportar o buscar Personas, animales y vehículos',
       icon: Users,
-      path: 'https://desaparecidosdana.pythonanywhere.com/',
+      path: '/personas-animales-desaparecidos',
       color: 'purple',
       priority: 'high',
     },

src/app/personas-animales-desaparecidos/page.js

@@ -0,0 +1,61 @@
+// personas-animales-desaparecidos/page.js
+
+import { Users, PawPrint, Car, UserSearch } from 'lucide-react';
+
+export default function PersonasAnimalesDesaparecidos() {
+  return (
+    <div className="mx-auto p-4 max-w-4xl">
+      {/* Encabezado con fondo de color e icono */}
+      <div className="flex items-center justify-between bg-purple-100 p-6 rounded-t-lg shadow">
+        <h1 className="text-2xl font-bold text-purple-800 flex items-center gap-2">
+          <UserSearch className="h-8 w-8 text-purple-500" />
+          Personas, Animales y Vehículos Desaparecidos
+        </h1>
+      </div>
+
+      {/* Tarjeta grande para información */}
+      <div className="bg-white p-8 rounded-b-lg shadow mb-8">
+        <p className="text-gray-700 text-lg">
+          En esta página puedes acceder a diferentes herramientas externas para encontrar personas, animales y vehículos desaparecidos. 
+          Selecciona la opción que necesitas para más información y para reportar un caso o buscar ayuda.
+        </p>
+      </div>
+
+      {/* Tres columnas de botones */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Botón para Personas Desaparecidas */}
+        <a
+          href="https://desaparecidosdana.pythonanywhere.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-blue-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <Users className="h-10 w-10 text-blue-500 mb-2" />
+          <h2 className="text-lg font-bold text-blue-600 text-center">Personas Desaparecidas</h2>
+        </a>
+
+        {/* Botón para Animales Desaparecidos */}
+        <a
+          href="https://gorogoro.es/dana"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-green-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <PawPrint className="h-10 w-10 text-green-500 mb-2" />
+          <h2 className="text-lg font-bold text-green-600 text-center">Animales Desaparecidos</h2>
+        </a>
+
+        {/* Botón para Vehículos Extraviados */}
+        <a
+          href="https://tucochedana.es/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center justify-center bg-white border-l-4 border-purple-500 p-6 rounded-lg shadow hover:shadow-md transition-transform transform hover:-translate-y-1"
+        >
+          <Car className="h-10 w-10 text-purple-500 mb-2" />
+          <h2 className="text-lg font-bold text-purple-600 text-center">Vehículos Extraviados</h2>
+        </a>
+      </div>
+    </div>
+  );
+}

src/components/UserInfo.js

@@ -1,10 +1,8 @@
 import Link from 'next/link';
 import { LogIn } from 'lucide-react';
 import { authService } from '@/lib/service';
-import { useSession } from '../context/SessionProvider';
 
-export default function UserProfile() {
-  const { user } = useSession();
+export default function UserProfile({ user }) {
   const handleLogout = async () => {
     const response = await authService.signOut();
     if (!response.error) {

src/components/auth/PhoneNumberDialog.js

@@ -12,27 +12,41 @@ import { isValidPhone } from '@/helpers/utils';
 const MODAL_NAME = 'phone-number';
 
 const PhoneForm = ({ onSubmit }) => {
-  const [phoneNumber, setPhoneNumber] = useState('');
+  const [formData, setFormData] = useState({
+    phoneNumber: '',
+    privacyPolicy: '',
+  });
 
   const handleSubmit = useCallback(
     (e) => {
       e.preventDefault();
 
-      /* Form validation */
-      if (!isValidPhone(phoneNumber)) {
+      /* PHONE VALIDATION */
+      if (!isValidPhone(formData.phoneNumber)) {
         alert('El teléfono de contacto no es válido.');
         return;
       }
 
-      const formatedPhoneNumber = formatPhoneNumber(phoneNumber);
-      onSubmit(formatedPhoneNumber);
-      setPhoneNumber('');
+      /* POLICY PRIVACY VALIDATION */
+      if (!formData.privacyPolicy) {
+        alert('Para continuar, debes aceptar la Política de Privacidad.');
+        return;
+      }
+
+      const formatedPhoneNumber = formatPhoneNumber(formData.phoneNumber);
+
+      onSubmit(formData.phoneNumber, formData.privacyPolicy);
+
+      setFormData({
+        phoneNumber: '',
+        privacyPolicy: '',
+      });
     },
-    [onSubmit, phoneNumber],
+    [onSubmit, formData],
   );
 
   const handleChange = useCallback((phoneNumber) => {
-    setPhoneNumber(phoneNumber);
+    setFormData((formData) => ({ ...formData, phoneNumber }))
   }, []);
 
   return (
@@ -51,9 +65,31 @@ const PhoneForm = ({ onSubmit }) => {
               Tu número de teléfono no será usado con ningún otro propósito ni compartido con terceras personas.
             </p>
           </div>
-          <PhoneInput onChange={handleChange} phoneNumber={phoneNumber} />
+
+          {/* PHONE NUMBER */}
+          <PhoneInput onChange={handleChange} phoneNumber={formData.phoneNumber} />
+
+          {/* PRIVACY POLICY */}
+          <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 className="flex justify-end space-x-2">
+          {/* ACCEPT AND SAVE */}
+          <div className="flex justify-end space-x-2 mt-2">
             <button
               type="submit"
               className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@@ -87,15 +123,15 @@ const PhoneNumberDialog = () => {
     fetchNumber();
   }, []);
 
-  const handleSubmit = useCallback(async (phoneNumber) => {
+  const handleSubmit = useCallback(async (phoneNumber, privacyPolicy) => {
     const { data: session, error: errorGettingUser } = await authService.getSessionUser();
 
     if (!session.user || errorGettingUser) {
       throw new Error('Error a la hora de obtener el usuario');
     }
 
     const metadata = session.user.user_metadata;
-    const metadataWithPhone = { ...metadata, telefono: phoneNumber };
+    const metadataWithPhone = { ...metadata, telefono: phoneNumber, privacyPolicy };
 
     const { error: updateUserError } = await authService.updateUser({
       data: metadataWithPhone,

supabase/config.toml

@@ -190,11 +190,11 @@ verify_enabled = true
 # Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
 # `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin_oidc`, `notion`, `twitch`,
 # `twitter`, `slack`, `spotify`, `workos`, `zoom`.
-[auth.external.apple]
-enabled = false
-client_id = ""
+[auth.external.google]
+enabled = true
+client_id = "env(SUPABASE_GOOGLE_AUTH_ID)"
 # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
-secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
+secret = "env(SUPABASE_GOOGLE_AUTH_SECRET)"
 # Overrides the default auth redirectUrl.
 redirect_uri = ""
 # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,