merge dev into feature/challenge1_error_message

fix/login signup logout session bugs

src/public/scripts/geolocation.js

@@ -5,38 +5,47 @@ function getLocation() {
 }
 
 function update(data) {
-    document.getElementById("loading").style = "display: none";
-    document.getElementById("currencyExchange").style = "display: flex";
-
-    document.getElementById("yourFlag").src = `/static/svgs/flags/${data.data.country}.svg`
-    document.getElementById("yourFlag").alt = data.data.country;
-    document.getElementById("flagTag").innerHTML = `(${data.data.country})`;
-
-    document.getElementById("exchangeFlag").src = `/static/svgs/flags/USD.svg`;
-    document.getElementById("exchangeFlag").alt = "USD";
-    document.getElementById("exFlagTag").innerHTML = "(USD)";
+    if (data.data.message != "error") {
+        document.getElementById("loading").style = "display: none";
+        document.getElementById("currencyExchange").style = "display: flex";
     
-    document.getElementById("dropdown-country-button").value = data.data.toCurrencyRates["USD"];
-
-    updateExchange(document.getElementById("dropdown-country-button").value);
-
-    const dropdown = document.getElementById("dropdown");
-    let countries = Object.keys(data.data.toCurrencyRates);
-
-    countries.forEach(item => {
-        if (dropdown.querySelector(`button[value="${data.data.toCurrencyRates[item]}"]`)) {
-            return;
-        }
-
-        const listItem = document.createElement("li");
-        listItem.innerHTML  = `<button onclick="switchButton(this)" type="button" value="${data.data.toCurrencyRates[item]}" class="country Button inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
-                    <span class="inline-flex items-center">
-                        <img src="/static/svgs/flags/${item}.svg" class="h-4 w-4 me-2" alt="${item}"> (${item})
-                    </span>
-                </button>`;
-
-        dropdown.appendChild(listItem);
-    });
+        document.getElementById("yourFlag").src = `/static/svgs/flags/${data.data.country}.svg`
+        document.getElementById("yourFlag").alt = data.data.country;
+        document.getElementById("flagTag").innerHTML = `(${data.data.country})`;
+    
+        document.getElementById("exchangeFlag").src = `/static/svgs/flags/USD.svg`;
+        document.getElementById("exchangeFlag").alt = "USD";
+        document.getElementById("exFlagTag").innerHTML = "(USD)";
+        
+        document.getElementById("dropdown-country-button").value = data.data.toCurrencyRates["USD"];
+    
+        updateExchange(document.getElementById("dropdown-country-button").value);
+    
+        const dropdown = document.getElementById("dropdown");
+        let countries = Object.keys(data.data.toCurrencyRates);
+    
+        countries.forEach(item => {
+            if (dropdown.querySelector(`button[value="${data.data.toCurrencyRates[item]}"]`)) {
+                return;
+            }
+    
+            const listItem = document.createElement("li");
+            listItem.innerHTML  = `<button onclick="switchButton(this)" type="button" value="${data.data.toCurrencyRates[item]}" class="country Button inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
+                        <span class="inline-flex items-center">
+                            <img src="/static/svgs/flags/${item}.svg" class="h-4 w-4 me-2" alt="${item}"> (${item})
+                        </span>
+                    </button>`;
+    
+            dropdown.appendChild(listItem);
+        });
+    } else {
+        document.getElementById("loading").style = "display: none";
+        document.getElementById("exFrom").style = "display: none";
+        document.getElementById("dropdown-country-button").style = "display: none";
+        document.getElementById("currencyExchange").style = "display: flex";
+        document.getElementById("exchange").innerHTML = "Country not supported";
+        document.getElementById("exchange").className = "block rounded-lg text-center p-2.5 w-50 z-20 text-sm border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-blue-500";
+    }
 }
 
 function switchButton(clickedButton) {
@@ -60,10 +69,16 @@ async function getLatestExchange(position) {
     let lon = position.coords.longitude;
     const res = await fetch(`/exRates/${lat}/${lon}`);
     const data = await res.json();
-
+    
     update(data);
 }
 
 function error(err) {
-    console.error("Geolocation error: ", err);
+    const data = {
+        data: {
+            message: "error"
+        }
+    }
+
+    update(data);
 }

src/router/user.js

@@ -550,11 +550,19 @@ module.exports = (middleware, users, plans, assets) => {
 
             country = data.results[0].formatted_address;
             let results = await getRates(country);
-            req.session.geoData = {
-                country: results.abbreviation,
-                toCurrencyRates: results.exRates,
-                geoData: req.session.geoData
+
+            if (!results.exRates) {
+                req.session.geoData = {
+                    message: "error"
+                }
+            } else {
+                req.session.geoData = {
+                    country: results.abbreviation,
+                    toCurrencyRates: results.exRates,
+                    geoData: req.session.geoData
+                }
             }
+
         }
 
         return res.status(status.Ok).send({ data: req.session.geoData });

src/views/partials/header.ejs

@@ -17,12 +17,12 @@
                 </div>
                 
                 <div style="display: none;" class="flex items-center" id="currencyExchange">
-                    <div class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">
+                    <div id="exFrom" class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">
                         <img src="" id="yourFlag" class="h-4 w-4 me-2" alt="">
                         <p id="flagTag"></p>
                     </div>
                     <div class="relative w-full">
-                        <p id="exchange" class="block text-center p-2.5 w-40 z-20 text-sm text-gray-900 bg-gray-50 border-s-0 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500">
+                        <p id="exchange" class="block text-center p-2.5 w-40 z-20 text-sm border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-blue-500">
                         </p>
                     </div>
                     <button id="dropdown-country-button" value="" data-dropdown-toggle="dropdown-country" class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-e-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
@@ -38,6 +38,8 @@
                         </ul>
                     </div>
                 </div>
+            <% } else if(geoData.message == "error") { %>
+                <p>error</p>
             <% } else { %>
                 <div class="flex items-center">
                     <div class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">