From ad7ce07f5db1b7a01fdde9d24cb12fb2bb244859 Mon Sep 17 00:00:00 2001
From: raccoon254 <tomsteve187@gmail.com>
Date: Fri, 14 Jun 2024 16:05:55 +0300
Subject: [PATCH] Phone number fixes

---
 resources/views/auth/register.blade.php | 107 +++++++++++++-----------
 1 file changed, 59 insertions(+), 48 deletions(-)

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index ba18009..7865fc3 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -5,7 +5,7 @@
         <div>
             <x-input-label for="name" :value="__('Name')"/>
             <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" required autofocus
-                          autocomplete="name"/>
+                          autocomplete="name" value="{{ old('name') }}"/>
             @error('name')
             <x-input-error :messages="$message" class="mt-2"/> @enderror
         </div>
@@ -16,14 +16,14 @@
                 <div data-tip="Make sure we can contact you" class="mt-4 flex flex-col justify-start tooltip w-1/2 mr-2">
                     <x-input-label class="text-start mb-1" for="phone" :value="__('Phone Number')"></x-input-label>
                     <x-text-input id="phone" class="block tooltip mt-1 w-full" type="tel" name="phone" required
-                                  autocomplete="phone"/>
+                                  autocomplete="phone" value="{{ old('phone') }}"/>
                 </div>
 
                 <!-- Location -->
                 <div class="mt-4 ml-2">
                     <x-input-label for="location" :value="__('Location')"></x-input-label>
-                    <x-text-input id="location" disabled class="block opacity-30 mt-1 w-full" type="text" name="location" required
-                                  autocomplete="location"/>
+                    <x-text-input id="location" class="block phone opacity-30 mt-1 w-full" type="text" name="location" required
+                                  autocomplete="location" value="{{ old('location') }}"/>
                 </div>
             </div>
             @error('phone')<x-input-error :messages="$message" class="mt-2"/> @enderror
@@ -34,7 +34,7 @@
         <div class="mt-4">
             <x-input-label for="email" :value="__('Email')"/>
             <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" required
-                          autocomplete="username"/>
+                          autocomplete="username" value="{{ old('email') }}"/>
             @error('email')
             <x-input-error :messages="$message" class="mt-2"/> @enderror
         </div>
@@ -71,52 +71,63 @@
     </form>
 
     <script>
-        let phoneInputField = document.querySelector("#phone");
-        let update_location_success = false;
-        let phoneInput = window.intlTelInput(phoneInputField, {
-            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
-            initialCountry: "auto",
-            //add favourite countries
-            preferredCountries: ["us", "gb", "ca", "au", "nz"],
-            geoIpLookup: function (success, failure) {
-                try {
-                    fetch("https://ipinfo.io/json?token=cbcffb988673b9", {
-                        headers: {
-                            "Accept": "application/json",
-                        },
-                        mode: "cors",
-                    }).then((resp) => {
-                        if (resp.ok) {
-                            return resp.json();
-                        }
-                        return Promise.reject("Failed to fetch location from IP");
-                    }).then((data) => {
-                        let countryCode = data.country;
-                        success(countryCode);
+        // Wait for the page to load
+        window.onload = function () {
 
-                        // Set success flag to true
-                        update_location_success = true;
-                    }).catch((err) => {
-                        console.error(err);
+            // Initialize variables
+            let phoneInputField = document.querySelector("#phone");
+            let update_location_success = false;
+            let placeholder = null;
+
+            let phoneInput = window.intlTelInput(phoneInputField, {
+                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
+                initialCountry: "auto",
+                //add favourite countries
+                preferredCountries: ["us", "gb", "ca", "au", "nz"],
+                geoIpLookup: function (success, failure) {
+                    try {
+                        fetch("https://ipinfo.io/json?token=cbcffb988673b9", {
+                            headers: {
+                                "Accept": "application/json",
+                            },
+                            mode: "cors",
+                        }).then((resp) => {
+                            if (resp.ok) {
+                                return resp.json();
+                            }
+                            return Promise.reject("Failed to fetch location from IP");
+                        }).then((data) => {
+                            let countryCode = data.country;
+                            success(countryCode);
+
+                            // Set success flag to true
+                            update_location_success = true;
+                        }).catch((err) => {
+                            console.error(err);
+                            failure("NG");
+                        });
+                    } catch (error) {
+                        console.error(error);
                         failure("NG");
-                    });
-                } catch (error) {
-                    console.error(error);
-                    failure("NG");
-                }
-            },
-        });
+                    }
+                },
+            });
 
-        if (!update_location_success) {
-            // Default to US if we can't get the location
-            phoneInput.setCountry("us");
-            document.querySelector("#location").value = "United States";
-        }
+            if (!update_location_success) {
+                // Default to US if we can't get the location
+                phoneInput.setCountry("us");
+                document.querySelector("#location").value = "United States";
+                placeholder = document.querySelector('[data-intl-tel-input-id="0"]').placeholder;
+            }
 
-        // When we select a country, update the location field
-        phoneInputField.addEventListener("countrychange", function () {
-            let countryData = phoneInput.getSelectedCountryData();
-            document.querySelector("#location").value = countryData.name;
-        });
+            // When we select a country, update the location field
+            phoneInputField.addEventListener("countrychange", function () {
+                let countryData = phoneInput.getSelectedCountryData();
+                document.querySelector("#location").value = countryData.name;
+
+                //get the placeholder for data-intl-tel-input-id="0"
+                placeholder = document.querySelector('[data-intl-tel-input-id="0"]').placeholder;
+            });
+        }
     </script>
 </x-guest-layout>