Merge pull request #85 from solun-pm/dev

Added IP Informations
solun-pm · Nov 4, 2023 · eee1ddf · eee1ddf
2 parents 42bdb5d + 0330cd3
commit eee1ddf
Show file tree

Hide file tree

Showing 6 changed files with 613 additions and 427 deletions.
diff --git a/app/file/page.tsx b/app/file/page.tsx
@@ -86,71 +86,81 @@ function UploadFile() {
 
   const MAX_FILE_SIZE = 2.5 * 1024 * 1024 * 1024; // 2.5GB in bytes
 
-  const handleFileChange = (event: any) => {
-    const file = event.target.files[0]; // assuming single file upload
-    if (file.size > MAX_FILE_SIZE) {
-      toast.error('File size exceeds the maximum limit of 2.5GB');
-      return;
-    }
-    setFiles([file]);
-  };
-
+const handleFileChange = (event: any) => {
+  const file = event.target.files[0]; // assuming single file upload
+  if (file.size > MAX_FILE_SIZE) {
+    toast.error('File size exceeds the maximum limit of 2.5GB');
+    return;
+  }
+  setFiles([file]);
+};
 
+const handleSubmit = async (e: React.FormEvent) => {
+  e.preventDefault();
+  const target = e.target as typeof e.target & {
+    bruteforceSafe: { checked: boolean };
+    password: { value: string };
+    endToEndEncryption: { checked: boolean };
+    autoDeletion: { value: string };
+  };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const target = e.target as typeof e.target & {
-      bruteforceSafe: { checked: boolean };
-      password: { value: string };
-      endToEndEncryption: { checked: boolean };
-      autoDeletion: { value: string };
-    };
+  setIsUploading(true);
 
-    setIsUploading(true);
+  const bruteforceSafe = target.bruteforceSafe.checked;
+  const password = target.password.value;
+  const endToEndEncryption = target.endToEndEncryption.checked;
 
-    const bruteforceSafe = target.bruteforceSafe.checked;
-    const password = target.password.value;
-    const endToEndEncryption = target.endToEndEncryption.checked;
+  const passwordSet = password !== "";
+  const encrypted_password = passwordSet ? await hashPassword(password) : null;
 
-    const passwordSet = password !== "";
-    const encrypted_password = passwordSet ? await hashPassword(password) : null;
+  const chunkSize = 1024 * 1024 * 5; // 5 MB
+  const totalChunks = Math.ceil(files[0].size / chunkSize);
 
-    if (files.length > 0) {
-      const formData = new FormData();
-      formData.append('file', files[0]);
-      formData.append('bruteforceSafe', bruteforceSafe.toString());
-      formData.append('password', encrypted_password);
-      formData.append('endToEndEncryption', endToEndEncryption.toString());
-      formData.append('autoDeletion', target.autoDeletion.value);
+  for (let i = 0; i < totalChunks; i++) {
+    const start = i * chunkSize;
+    const end = Math.min(start + chunkSize, files[0].size);
+    const chunk = files[0].slice(start, end);
 
-      const config = {
-        onUploadProgress: function(progressEvent: ProgressEvent) {
-          var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-          if (percentCompleted === 100) {
-            toast('Processing your file... This may take a while');
-          }
-          setUploadPercentage(percentCompleted);
-        }
-      };
-      
-      try {
-        // @ts-ignore Config is not assignable to type AxiosRequestConfig
-        const response = await axios.post(process.env.NEXT_PUBLIC_API_DOMAIN + '/file/upload', formData, config);
+    const formData = new FormData();
+    formData.append('file', chunk);
+    formData.append('bruteforceSafe', bruteforceSafe.toString());
+    formData.append('password', encrypted_password);
+    formData.append('endToEndEncryption', endToEndEncryption.toString());
+    formData.append('autoDeletion', target.autoDeletion.value);
+    formData.append('chunkIndex', i.toString());
+    formData.append('totalChunks', totalChunks.toString());
+
+    const config: any = {
+      onUploadProgress: function (progressEvent: ProgressEvent) {
+        const chunkPercentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+        const globalPercentCompleted = Math.round((start + progressEvent.loaded) * 100 / files[0].size);
 
-        const data = await response.data;
-        if (response.status === 200) {
-          setUploadLink(data.link);
-          setUploadCreated(true);
-        } else {
-          toast.error(data.message);
+        if (chunkPercentCompleted === 100 && globalPercentCompleted >= 100) {
+          toast('Processing your file... This may take a while');
         }
-      } catch (err) {
-        toast.error('There was an error uploading your file');
+        setUploadPercentage(globalPercentCompleted);
+      }
+    };
+
+    try {
+      const response = await axios.post(process.env.NEXT_PUBLIC_API_DOMAIN + '/file/upload/chunk', formData, config);
+      const data = await response.data;
+
+      if (response.status !== 200) {
+        toast.error(data.message);
+        break;
       }
-    }
-    setIsUploading(false);
-  };
 
+      setUploadLink(data.link);
+      setUploadCreated(true);
+
+    } catch (err) {
+      toast.error('There was an error uploading your file');
+      break;
+    }
+  }
+  setIsUploading(false);
+};
 
   return (
     <>

diff --git a/app/ip/page.tsx b/app/ip/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEye, faEyeSlash, faQuestionCircle, faLink, faRefresh } from '@fortawesome/free-solid-svg-icons'
+import Link from 'next/link';
+import Header from '@/components/header'
+import Footer from '@/components/footer'
+import toast, { Toaster } from 'react-hot-toast';
+
+const LoadingPlaceholder = () => (
+  <span className="text-gray-500">Loading...</span>
+);
+
+const ipInformations = () => {
+  const [ipData, setIpData] = useState(null) as any;
+
+  useEffect(() => {
+    fetch('http://ip-api.com/json/')
+      .then(response => response.json())
+      .then(data => {
+        if (data.status === 'success') {
+          setIpData(data);
+        } else {
+          toast.error('Error while fetching IP informations');
+        }
+      });
+  }, []);
+
+return (
+  <>
+    <Header />
+    <div className="flex items-center justify-center py-8 px-2 md:min-h-screen">
+      <Toaster
+        position="top-right"
+        toastOptions={{
+          duration: 3000,
+        }}
+      />
+      <div className="bg-slate-800 p-6 rounded-lg shadow-md w-full max-w-7xl">
+        <div className="text-center mb-6">
+          <h2 className="text-2xl first-line:text-white">
+            IP Address: <br />
+            <span className="text-4xl text-blue-600 hover:text-blue-700 transition-all font-semibold">{ipData?.query || <LoadingPlaceholder />}</span>
+          </h2>
+        </div>
+        <div className="text-white grid md:grid-cols-2 gap-4">
+          <div>
+            <p><strong>Country:</strong> {ipData?.country || <LoadingPlaceholder />} ({ipData?.countryCode || <LoadingPlaceholder />})</p>
+            <p><strong>Region:</strong> {ipData?.regionName || <LoadingPlaceholder />} ({ipData?.region || <LoadingPlaceholder />})</p>
+            <p><strong>City:</strong> {ipData?.city || <LoadingPlaceholder />} {ipData?.zip || <LoadingPlaceholder />}</p>
+          </div>
+          <div>
+            <p><strong>Latitude:</strong> {ipData?.lat || <LoadingPlaceholder />}</p>
+            <p><strong>Longitude:</strong> {ipData?.lon || <LoadingPlaceholder />}</p>
+            <p><strong>Timezone:</strong> {ipData?.timezone || <LoadingPlaceholder />}</p>
+          </div>
+          <div className="md:col-span-2">
+            <p><strong>ISP:</strong> {ipData?.isp || <LoadingPlaceholder />}</p>
+            <p><strong>Organization:</strong> {ipData?.org || <LoadingPlaceholder />}</p>
+            <p><strong>AS:</strong> {ipData?.as || <LoadingPlaceholder />}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </>
+);
+}
+
+export default ipInformations;
diff --git a/components/header.tsx b/components/header.tsx
@@ -31,6 +31,8 @@ const Header = () => {
           </Link>
           <Link href="/file" className="text-gray-300 hover:text-white transition duration-200">Upload File
           </Link>
+          <Link href="/ip" className="text-gray-300 hover:text-white transition duration-200">IP Info
+          </Link>
         </div>
         <div className="hidden md:flex">
           <button onClick={goToLogin} className="border border-blue-500 hover:bg-blue-500 hover:text-white text-blue-500 font-semibold px-4 py-2 rounded-l transition duration-200 mr-2">
@@ -53,6 +55,8 @@ const Header = () => {
             </Link>
             <Link href="/file" className="text-gray-300 hover:text-white transition duration-200 block" onClick={toggleMenu}>Upload File
             </Link>
+            <Link href="/ip" className="text-gray-300 hover:text-white transition duration-200 block" onClick={toggleMenu}>IP Info
+            </Link>
             <button onClick={goToLogin} className="border border-blue-500 hover:bg-blue-500 hover:text-white text-blue-500 font-semibold px-4 py-2 rounded-l transition duration-200 mr-2">
               Sign In
             </button>

diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-    experimental: { appDir: true, serverComponentsExternalPackages: ["mongoose"], mdxRs: true, },
+    experimental: { serverComponentsExternalPackages: ["mongoose"], mdxRs: true, },
     webpack(config) {
         config.experiments = { ...config.experiments, topLevelAwait: true };
         return config;