wip

app/Http/Middleware/Authenticate.php

@@ -14,6 +14,6 @@ class Authenticate extends Middleware
      */
     protected function redirectTo(Request $request): ?string
     {
-        return $request->expectsJson() ? null : route('login');
+        return $request->expectsJson() ? null : route('auth.login');
     }
 }

app/Http/Middleware/HandleInertiaRequests.php

@@ -6,6 +6,7 @@
 
 use App\Http\Resources\UserResource;
 use App\Models\User;
+use App\Services\Nominatim;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 
@@ -32,6 +33,7 @@ protected function shareOnce(Request $request): array
 
         return [
             'recaptcha_site_key' => config('recaptcha.api_site_key'),
+            'max_map_bounds' => Nominatim::make()->maxBounds(),
         ];
     }
 

app/Services/Nominatim.php

@@ -6,6 +6,7 @@
 
 use App\DataTransferObjects\Location;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Cache;
 use NominatimLaravel\Content\Nominatim as NominatimClient;
 
 class Nominatim
@@ -79,4 +80,29 @@ public function reverse(float $latitude, float $longitude): Location
 
         return new Location($result);
     }
+
+    public function maxBounds(): array
+    {
+        return Cache::remember('max-map-bounds', now()->addDay(), function () {
+            $request = $this->nominatim->newSearch()
+                ->country('ro')
+                ->format('jsonv2');
+
+            $bounds = collect(rescue(fn () => $this->nominatim->find($request)))
+                ->filter(fn (array $result) => $result['place_rank'] === 4)
+                ->take(1)
+                ->pluck('boundingbox')
+                ->flatten()
+                ->map('floatval');
+
+            if ($bounds->count() !== 4) {
+                return null;
+            }
+
+            return [
+                [$bounds[0], $bounds[2]],
+                [$bounds[1], $bounds[3]],
+            ];
+        });
+    }
 }

resources/js/Components/AddPointSteps/Location.vue

@@ -10,6 +10,8 @@
                 ref="map"
                 :zoom="18"
                 :center="[form.location.lat, form.location.lng]"
+                :max-bounds="maxBounds"
+                :max-bounds-viscosity="1.0"
                 @ready="ready"
                 :options="{
                     attributionControl: false,
@@ -36,21 +38,12 @@
 </template>
 
 <script setup>
-    import axios from 'axios';
-    import { computed, ref, watch } from 'vue';
-    import { usePage } from '@inertiajs/vue3';
-    import { useDebounceFn } from '@vueuse/core';
+    import { inject } from 'vue';
     import { LMap, LControlScale, LControlZoom, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
-    import route from '@/Helpers/useRoute.js';
     import useLocate from '@/Helpers/useLocate.js';
     import { reverse } from '@/Helpers/useReverse.js';
 
-    import Button from '@/Components/Button.vue';
-    import Modal from '@/Components/Modal.vue';
     import FormField from '@/Components/Form/Field.vue';
-    import Select from '@/Components/Form/Select.vue';
-
-    const page = usePage();
 
     const props = defineProps({
         form: {
@@ -59,7 +52,9 @@
         },
     });
 
-    const { locateControl, startLocate } = useLocate();
+    const maxBounds = inject('max_map_bounds');
+
+    const { locateControl } = useLocate();
 
     const updatePoint = (lat, lng) => {
         props.form.location.lat = lat;

resources/js/Components/Button.vue

@@ -1,36 +1,25 @@
 <template>
-    <template v-if="isLink">
-        <a
-            v-if="external"
-            :href="href"
-            :class="[buttonBase, buttonSize, buttonShadow, buttonColor]"
-            target="_blank"
-            rel="noopener noreferrer"
-        >
-            <Icon v-if="icon" :icon="icon" :class="[iconBase, iconSize, iconColor]" />
-
-            <slot>{{ label }}</slot>
-        </a>
-
-        <Link v-else :href="href" :class="[buttonBase, buttonSize, buttonShadow, buttonColor]">
-            <Icon v-if="icon" :icon="icon" :class="[iconBase, iconSize, iconColor]" />
-
-            <slot>{{ label }}</slot>
-        </Link>
-    </template>
-
-    <button v-else :type="type" :class="[buttonBase, buttonSize, buttonShadow, buttonColor]" :disabled="disabled">
-        <Icon v-if="icon" :icon="icon" :class="[iconBase, iconSize, iconColor]" />
+    <component
+        :is="tag"
+        v-bind="attributes"
+        class="flex items-center font-medium select-none ring-inset whitespace-nowrap disabled:opacity-75 disabled:cursor-default"
+        :class="[buttonBase, buttonSize, buttonShadow, buttonColor]"
+        @click="$emit('click', $event)"
+        @keydown="$emit('keydown', $event)"
+    >
+        <Icon v-if="icon" :icon="icon" class="shrink-0" :class="[iconSize, iconColor]" />
 
         <slot>{{ label }}</slot>
-    </button>
+    </component>
 </template>
 
 <script setup>
     import { computed } from 'vue';
     import { Link } from '@inertiajs/vue3';
     import Icon from '@/Components/Icon.vue';
 
+    const emit = defineEmits(['click', 'keydown']);
+
     const props = defineProps({
         href: {
             type: String,
@@ -65,16 +54,53 @@
             type: Boolean,
             default: false,
         },
+        method: {
+            type: String,
+            default: 'get',
+            validator: (value) => ['get', 'post', 'put', 'patch', 'delete'].includes(value),
+        },
         simple: {
             type: Boolean,
             default: false,
         },
     });
 
-    const isLink = computed(() => props.href !== null);
+    const attributes = computed(() => {
+        if (props.href === null) {
+            return {
+                type: props.type,
+                disabled: props.disabled,
+            };
+        }
+
+        if (props.external) {
+            return {
+                href: props.href,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+            };
+        }
+
+        return {
+            href: props.href,
+            method: props.method,
+            as: props.method === 'get' ? 'a' : 'button',
+        };
+    });
+
+    const tag = computed(() => {
+        if (props.href === null) {
+            return 'button';
+        }
+
+        if (props.external) {
+            return 'a';
+        }
+
+        return Link;
+    });
 
     const buttonBase = computed(() => ({
-        'flex items-center ring-inset select-none font-medium whitespace-nowrap disabled:opacity-75 disabled:cursor-default': true,
         'justify-start': props.simple,
         'justify-center rounded-full': !props.simple,
     }));

resources/js/Components/Form/MapPreview.vue

@@ -9,6 +9,8 @@
                 ref="map"
                 :zoom="18"
                 :center="[form.location.lat, form.location.lng]"
+                :max-bounds="maxBounds"
+                :max-bounds-viscosity="1.0"
                 @ready="ready"
                 :options="{
                     attributionControl: false,
@@ -55,10 +57,9 @@
 </template>
 
 <script setup>
-    import { ref, watch } from 'vue';
+    import { ref, watch, inject } from 'vue';
     import { LMap, LControl, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
     import FormField from '@/Components/Form/Field.vue';
-    import Button from '@/Components/Button.vue';
 
     const props = defineProps({
         form: {
@@ -75,6 +76,8 @@
         },
     });
 
+    const maxBounds = inject('max_map_bounds');
+
     const marker = ref(null);
 
     watch(
@@ -85,4 +88,3 @@
         { deep: true }
     );
 </script>
-

resources/js/Layouts/DefaultLayout.vue

@@ -1,5 +1,11 @@
 <template>
-    <div class="flex flex-col h-screen overflow-hidden">
+    <div
+        class="flex flex-col overflow-hidden bg-gray-100"
+        :class="{
+            'h-screen': !dashboard,
+            'min-h-screen ': dashboard,
+        }"
+    >
         <EmailVerifiedAlert v-if="$page.props.auth?.is_unverified || $page.props.auth?.show_verified_message" />
 
         <Header class="shrink-0" :dashboard="dashboard" />

resources/js/Layouts/MapLayout.vue

@@ -63,11 +63,12 @@
 
             <LMap
                 ref="map"
-                :useGlobalLeaflet="true"
                 :min-zoom="8"
                 :max-zoom="18"
                 :center="mapOptions.center"
                 :zoom="mapOptions.zoom"
+                :max-bounds="maxBounds"
+                :max-bounds-viscosity="1.0"
                 @ready="ready"
                 @movestart="cancelMapVisits"
                 @moveend="moveend"
@@ -121,16 +122,14 @@
     import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
     import { XMarkIcon } from '@heroicons/vue/24/outline';
 
-    import { LMap, LControl, LControlScale, LControlZoom, LIcon, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
+    import { LMap, LControlScale, LControlZoom, LIcon, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
     import { LMarkerClusterGroup } from 'vue-leaflet-markercluster';
 
     import 'leaflet/dist/leaflet.css';
     import 'vue-leaflet-markercluster/dist/style.css';
 
-    import { ref, computed, watch } from 'vue';
-    import { router } from '@inertiajs/vue3';
+    import { ref, computed, watch, inject } from 'vue';
 
-    import route from '@/Helpers/useRoute.js';
     import { refreshPoints, openPoint, fetchPoint, cancelMapVisits } from '@/Helpers/useMap.js';
     import useLocate from '@/Helpers/useLocate.js';
 
@@ -165,6 +164,8 @@
         },
     });
 
+    const maxBounds = inject('max_map_bounds');
+
     const map = ref(null);
     const bounds = ref(null);
     const center = ref(null);

resources/js/app.js

@@ -22,6 +22,8 @@ createInertiaApp({
     },
     setup({ el, App, props, plugin }) {
         const app = createApp({ render: () => h(App, props) })
+            .provide('recaptcha_site_key', props.initialPage.props.recaptcha_site_key)
+            .provide('max_map_bounds', props.initialPage.props.max_map_bounds)
             .use(PrimeVue, {
                 unstyled: true,
                 pt,