UI refactor

Author: man2k

Server/.gitignore

@@ -1,2 +1,3 @@
 node_modules
 
+.jpg

Windows_Client_Tauri/Encryption_Client_Windows/package-lock.json

@@ -15,6 +15,7 @@
     "canvas": "^2.11.2",
     "crypto-js": "^4.1.1",
     "file-saver": "^2.0.5",
+    "framer-motion": "^10.12.4",
     "jimp": "^0.22.7",
     "js-file-download": "^0.4.12",
     "js-sha256": "^0.9.0",

Windows_Client_Tauri/Encryption_Client_Windows/package.json

@@ -41,8 +41,8 @@
         "fullscreen": false,
         "resizable": true,
         "title": "client",
-        "width": 800,
-        "height": 600
+        "width": 1280,
+        "height": 720
       }
     ]
   }

Windows_Client_Tauri/Encryption_Client_Windows/src-tauri/tauri.conf.json

@@ -0,0 +1,6 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}

Windows_Client_Tauri/Encryption_Client_Windows/src/App.css

@@ -16,11 +16,12 @@ import Card from "./Components/Card";
 import SelectBox from "./Components/SelectBox";
 import ImgSteganography from "./Components/ImgSteganography";
 
-const baseUrl = "http://localhost:3000";
+const baseUrl = "https://enc-dec-uem-prod.vercel.app";
 
 function App() {
   //States
   const [file, setFile] = useState();
+  const [fileDec, setFileDec] = useState();
   const [UserChoice, setChoice] = useState("");
   const [UserDecChoice, setDecChoice] = useState("");
   const [key, setKey] = useState("");
@@ -32,21 +33,28 @@ function App() {
   const handleFile = (e) => {
     setFile(e.target.files[0]);
   };
+  const handleFileDec = (e) => {
+    setFileDec(e.target.files[0]);
+    // console.log(fileDec);
+  };
 
-  const handleForm = async (e) => {
+  const handleForm = async (e, opname) => {
     e.preventDefault();
+    // console.log(opname);
     const formData = new FormData();
     try {
-      formData.append("file", file);
-      formData.append("fileName", file.name);
+      formData.append("file", opname === "enc" ? file : fileDec);
+      formData.append("fileName", opname === "enc" ? file.name : fileDec.name);
       const config = {
         headers: {
           "Content-Type": "multipart/form-data; boundary=MyBoundary",
         },
       };
-      await axios.post(`${baseUrl}/upload`, formData, config).then((res) => {
-        setUploaded(true);
-      });
+      await axios
+        .post(`${baseUrl}/upload/${opname}`, formData, config)
+        .then((res) => {
+          setUploaded(true);
+        });
     } catch (error) {
       console.log(error);
     }
@@ -69,7 +77,7 @@ function App() {
   };
 
   const handleDecrypt = async () => {
-    const url = `${baseUrl}/decrypt/${UserChoice}`;
+    const url = `${baseUrl}/decrypt/${UserDecChoice}`;
 
     const json = JSON.stringify({ key: keyDec });
     let fileName;
@@ -104,7 +112,11 @@ function App() {
         <div>
           <h1 className="w-full mb-5">Encryption</h1>
           <div className="flex flex-col w-full space-y-5">
-            <FormBox handleForm={handleForm} handleFile={handleFile} />
+            <FormBox
+              name="enc"
+              handleForm={handleForm}
+              handleFile={handleFile}
+            />
             <SelectBox setChoice={setChoice} type="Encryption" />
             <div>
               <ButtonEnc
@@ -121,19 +133,27 @@ function App() {
         <div>
           <h1 className="w-full mb-5">Decryption</h1>
           <div className="flex flex-col w-full space-y-5">
-            <FormBox handleForm={handleForm} handleFile={handleFile} />
+            <FormBox
+              name="dec"
+              handleForm={handleForm}
+              handleFile={handleFileDec}
+            />
             <SelectBox setChoice={setDecChoice} type="Decryption" />
             {UserDecChoice && <InputKeyBox setKeyDec={setKeyDec} />}
             <div>
               {keyDec && (
-                <ButtonDec handleDecrypt={handleDecrypt} keyDec={keyDec} />
+                <ButtonDec
+                  handleDecrypt={handleDecrypt}
+                  keyDec={keyDec}
+                  UserChoice={UserDecChoice}
+                />
               )}
             </div>
           </div>
         </div>
       </div>
 
-      <div className="flex flex-row justify-around mb-5">
+      <div className="flex flex-row justify-between mb-10 gap-5">
         <EncodeDecodeKey />
         <ImgSteganography />
       </div>

Windows_Client_Tauri/Encryption_Client_Windows/src/App.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import ZwspSteg from "zwsp-steg";
-
+import { motion } from "framer-motion";
 const EncodeDecodeKey = () => {
   const [input, setInput] = useState("");
   const [decInput, setDecInput] = useState("");
@@ -43,7 +43,12 @@ const EncodeDecodeKey = () => {
   }
 
   return (
-    <div className="flex flex-col mt-16 bg-gray-900">
+    <motion.div
+      className="flex flex-col mt-16 bg-inherit p-5 w-full h-full"
+      animate={{ transform: "rotateY(360deg)" }}
+      transition={{ type: "spring", stiffness: 100, mass: 1, duration: 0.1 }}
+      key={encodeDecode}
+    >
       <div className="flex justify-center">
         <input
           className="appearance-none checked:bg-blue-500 form-checkbox h-5 w-5 text-gray-600 mt-3"
@@ -54,25 +59,25 @@ const EncodeDecodeKey = () => {
         />
       </div>
       {encodeDecode ? (
-        <h1 className="text-slate-800 mb-5 mt-3">Invisible Encoding</h1>
+        <h1 className="text-white mb-5 mt-3">Invisible Encoding</h1>
       ) : (
-        <h1 className="text-slate-800 mb-5 mt-3">Invisible Decoding</h1>
+        <h1 className="text-white mb-5 mt-3">Invisible Decoding</h1>
       )}
       <div>
         <div>
           {encodeDecode ? (
-            <label className="text-slate-900" htmlFor="input-secret">
+            <label className="text-white" htmlFor="input-secret">
               Input Secret Message
             </label>
           ) : (
-            <label className="text-slate-900" htmlFor="input-secret">
+            <label className="text-white" htmlFor="input-secret">
               Input your encoded Message
             </label>
           )}
         </div>
         <div>
           <input
-            className="text-slate-500 mt-3 mb-3"
+            className="text-white mt-3 mb-3"
             type="text"
             id="secret-message"
             accept="text"
@@ -83,15 +88,15 @@ const EncodeDecodeKey = () => {
       <div>
         {encodeDecode && (
           <div>
-            <label className="text-slate-900" htmlFor="salt">
+            <label className="text-white" htmlFor="salt">
               Enter any salt/story you want your secret in
             </label>
           </div>
         )}
         {encodeDecode && (
           <div>
             <input
-              className="text-slate-900 mt-3 mb-3"
+              className="text-white mt-3 mb-3"
               type="text"
               id="secret-message"
               accept="text"
@@ -149,7 +154,7 @@ const EncodeDecodeKey = () => {
           </div>
         )}
       </div>
-    </div>
+    </motion.div>
   );
 };
 

Windows_Client_Tauri/Encryption_Client_Windows/src/Components/EncodeDecodeKey.jsx

@@ -2,11 +2,13 @@ import React from "react";
 // import { useState } from "react";
 
 const FormBox = (props) => {
+  console.log(props.name);
   return (
     <div className="flex w-full">
-      <form id="UploadForm" onSubmit={props.handleForm}>
+      <form id="UploadForm" onSubmit={(e) => props.handleForm(e, props.name)}>
         <input
-          className="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-1 file:border-dashed hover:file:border-dotted file:text-sm file:font-semibold file:bg-green-50 file:text-violet-700 hover:file:bg-green-100"
+          key={props.name}
+          className="block w-full text-sm file:text-black text-white file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-2 file:border-black file:border-dashed hover:file:border-dotted file:text-sm file:font-semibold file:bg-green-50 file:text-violet-700 hover:file:bg-green-100"
           type="file"
           name="file"
           onChange={props.handleFile}