added ipinfo.is api , fixed innertext on html

docker-compose.yml

@@ -1,6 +1,8 @@
 ---
 services:
   website:
+    env_file:
+      - .env
     build:
       context: .
       dockerfile: Dockerfile

mysite/settings.py

@@ -26,9 +26,9 @@ load_dotenv()
 SECRET_KEY = os.getenv('DJANGO_KEY')
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = False
+DEBUG = True
 
-ALLOWED_HOSTS = ['localhost']
+ALLOWED_HOSTS = ['*']
 
 
 # Application definition
@@ -133,19 +133,3 @@ STATIC_ROOT = BASE_DIR / 'staticfiles'
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-
-
-# Security settings for production
-SECURE_SSL_REDIRECT = False
-USE_TLS = False
-SECURE_BROWSER_XSS_FILTER = True
-SECURE_CONTENT_TYPE_NOSNIFF = True
-CSRF_COOKIE_SECURE = True
-SESSION_COOKIE_SECURE = True
-
-
-REST_FRAMEWORK = {
-    'DEFAULT_RENDERER_CLASSES': [
-        'rest_framework.renderers.JSONRenderer',
-    ],
-}

mysite/views.py

@@ -31,11 +31,16 @@ class Doxme(APIView):
     def get(self, request):
         client_ip = self.get_client_ip(request)
 
-        token = os.getenv('TOKEN')
-        url = f'http://api.ipinfo.io/lite/{client_ip}?token={token}'
-        ip_info = requests.get(url)
+        ipinfo_token = os.getenv('IPINFO_TOKEN')
+        ipinfo_url = f'http://api.ipinfo.io/lite/{client_ip}?token={ipinfo_token}'
+        ip_info = requests.get(ipinfo_url)
 
-        if ip_info.ok and not ip_info.json().get('bogon'):
-            print(ip_info)
-            return Response({'method': 'get', 'ip_info': ip_info.json()}, status=status.HTTP_200_OK)
+
+        ipis_token = os.getenv('IPIS_TOKEN')
+        ipis_url = f'https://api.ipapi.is?q={client_ip}&key={ipis_token}'
+        ipis_info = requests.get(ipis_url)
+
+        if ip_info.ok or ipis_info.ok:
+            print('ipinfo:',ip_info)
+            return Response({'method': 'get', 'ip_info': ip_info.json(),'ipis':ipis_info.json()}, status=status.HTTP_200_OK)
         return Response({'message': 'error at ipinfo'}, status=status.HTTP_400_BAD_REQUEST)

static/scripts.js

@@ -1,34 +1,41 @@
-var requestOptions = {
+document.addEventListener('DOMContentLoaded', function () {
+  const requestOptions = {
     method: 'GET',
     headers: { 'Content-Type': 'application/json' },
   };
+
   fetch('/doxme/', requestOptions) //call api
-    .then(function (response) { return response.json(); })
-    .then(function (jsonResponse) {
-    var user_ip = jsonResponse.ip_info.ip;
-    var user_country = jsonResponse.ip_info.country;
-    var user_region = jsonResponse.ip_info.country_code;
+    .then((response) => response.json())
+    .then((jsonResponse) => {
+      const user_ip = jsonResponse.ip_info.ip;
+      const user_country = jsonResponse.ip_info.country;
+      const user_region = jsonResponse.ip_info.country_code;
+
       // Update the HTML elements with the fetched information
-    document.getElementById('ip').textContent = "".concat(user_ip);
-    document.getElementById('country').textContent = "".concat(user_country);
-    document.getElementById('region').textContent = "".concat(user_region);
+      document.getElementById('ip').innerText = `${user_ip}`;
+      document.getElementById('country').innerText = `${user_country}`;
+      document.getElementById('region').innerText = `${user_region}`;
+
       console.log('user_ip:', user_ip);
       console.log('couintry:', user_country);
       console.log('region:', user_region);
+
+      // IPIS api
+      const city = jsonResponse.ipis.location.city;
+      const state = jsonResponse.ipis.location.state;
+      const isp = jsonResponse.ipis.company.name;
+      const longitude = jsonResponse.ipis.location.longitude;
+
+      console.log('city', city);
+      console.log('state', state);
+      console.log('isp', isp);
+      console.log('longitude', longitude);
+
+      //  innerText
+      document.getElementById('isp').innerText = `${isp}`;
+      document.getElementById('city').innerText = `${city}`;
     })
-    .catch(function (error) {
+    .catch((error) => {
       console.error('Error fetching IP information:', error);
     });
-fetch('http://ip-api.com/json/')
-    .then(function (response) { return response.json(); })
-    .then(function (data) {
-    var user_city = data.city;
-    var user_isp = data.isp;
-    console.log('user_city', user_city);
-    console.log('user_isp', user_isp);
-    document.getElementById('city').textContent = "".concat(user_city);
-    document.getElementById('isp').textContent = "".concat(user_isp);
-})
-    .catch(function (err) {
-    console.log('idk error', err);
 });

static/scripts.ts

@@ -1,18 +1,5 @@
-interface ApiResponse {
-    method: string;
-    ip_info: {
-        as_domain: string;
-        as_name: string;
-        asn: string;
-        continent: string;
-        continent_code: string;
-        country: string;
-        country_code: string;
-        ip: string;
-    };
-}
-
-const requestOptions = {
+document.addEventListener('DOMContentLoaded', function () {
+  const requestOptions: RequestInit = {
     method: 'GET',
     headers: { 'Content-Type': 'application/json' },
   };
@@ -20,9 +7,9 @@ const requestOptions = {
   fetch('/doxme/', requestOptions) //call api
     .then((response) => response.json())
     .then((jsonResponse) => {
-        const user_ip = jsonResponse.ip_info.ip;
-        const user_country = jsonResponse.ip_info.country;
-        const user_region = jsonResponse.ip_info.country_code;
+      const user_ip: string | null = jsonResponse.ip_info.ip;
+      const user_country: string | null = jsonResponse.ip_info.country;
+      const user_region: string | null = jsonResponse.ip_info.country_code;
 
       // Update the HTML elements with the fetched information
       document.getElementById('ip').textContent = `${user_ip}`;
@@ -32,22 +19,23 @@ fetch('/doxme/', requestOptions) //call api
       console.log('user_ip:', user_ip);
       console.log('couintry:', user_country);
       console.log('region:', user_region);
+
+      // IPIS api
+      const city = jsonResponse.ipis.location.city;
+      const state = jsonResponse.ipis.location.state;
+      const isp = jsonResponse.ipis.company.name;
+      const longitude = jsonResponse.ipis.location.longitude;
+
+      console.log('city', city);
+      console.log('state', state);
+      console.log('isp', isp);
+      console.log('longitude', longitude);
+
+      document.getElementById('city').textContent = `${city}`;
+      document.getElementById('state').textContent = `${state}`;
+      // document.getElementById('isp').textContent = `${longitude}`;
     })
     .catch((error) => {
       console.error('Error fetching IP information:', error);
     });
-
-fetch('http://ip-api.com/json/')
-    .then((response) => response.json())
-    .then((data) => {
-        const user_city = data.city;
-        const user_isp = data.isp;
-        console.log('user_city', user_city);
-        console.log('user_isp', user_isp);
-
-        document.getElementById('city').textContent = `${user_city}`;
-        document.getElementById('isp').textContent = `${user_isp}`;
-    })
-    .catch((err) => {
-        console.log('idk error', err);
 });

templates/home.html

@@ -37,9 +37,9 @@
             <h2>Internet Provider:</h2>
             <p id="isp">Loading...</p>
         </div>
-    </div>
+
+<script src='{% static "scripts.js" %}' defer></script>
 </body>
 
-<script src='{% static "scripts.js" %}'></script>
 
 </html>