autofill language from Accept-Language

Author: Surfoo

assets/app.js

@@ -127,6 +127,13 @@ function initUploadForm() {
             return;
         }
 
+        const localeSelect = document.getElementById('locale');
+        if (localeSelect.value === '') {
+            showError('Please choose a roadbook language.');
+            localeSelect.focus();
+            return;
+        }
+
         const payload = {
             gpx: gpxContent,
             referenceCode,

src/Controller/GeoroadBookController.php

@@ -42,11 +42,12 @@ public function __construct(
     }
 
     #[Route('/', name: 'app_homepage', methods: ['GET'])]
-    public function index(): Response
+    public function index(Request $request): Response
     {
         $params = [
             'suffix_css_js' => 'aa',
             'locales'       => $this->locales,
+            'language'      => $this->detectBrowserLocale($request),
         ];
 
         $user = $this->getUser();
@@ -69,6 +70,18 @@ public function index(): Response
         return $this->render('index.html.twig', $params);
     }
 
+    private function detectBrowserLocale(Request $request): ?string
+    {
+        foreach ($request->getLanguages() as $language) {
+            $code = strtolower(substr($language, 0, 2));
+            if (isset($this->locales[$code])) {
+                return $code;
+            }
+        }
+
+        return null;
+    }
+
     #[Route('/upload', name: 'app_upload', methods: ['POST'])]
     public function upload(Request $request): JsonResponse
     {

templates/index.html.twig

@@ -5,7 +5,7 @@
 {# Hero Section #}
 <div class="hero-section text-center">
     <div class="container">
-        <span class="section-label">The ultimate geocaching tool</span>
+        <span class="section-label">The ultimate geocaching roadbook tool</span>
         <h1 class="section-title">Ready for your next adventure?</h1>
         <p class="page-desc">Create your roadbook. Generate a customizable, ready-to-print trail booklet from your GPX files.</p>
     </div>
@@ -60,8 +60,8 @@
 
             <div>
                 <label class="form-label form-label-mono" for="locale">Roadbook language</label>
-                <select name="locale" class="form-select" id="locale">
-                    <option value=""></option>
+                <select name="locale" class="form-select" id="locale" required>
+                    <option value="">Choose a language…</option>
                     {% for code, name in locales %}
                         <option value="{{ code|e }}"{% if language is defined and language == code %} selected{% endif %}>{{ name|e }}</option>
                     {% endfor %}