From a721ecfdc8c18bd5687bba886563af1b27d37ac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hac=C4=B1=20Mert=20G=C3=B6khan?= <hacimertgokhan@gmail.com>
Date: Mon, 2 Sep 2024 14:17:32 +0300
Subject: [PATCH] 0.0.2 - UUID Creation system integrated. Hash creation
 removed.

---
 src/App.jsx            | 87 ++++++++++++++++++++++++++++--------------
 src/style/main.css     | 12 ++++++
 src/style/main.css.map |  2 +-
 src/style/main.scss    | 12 ++++++
 4 files changed, 84 insertions(+), 29 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1f6042c..08da529 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,22 +7,47 @@ function App() {
 
     const [type, setType] = useState("UUID");
     const [range, setRange] = useState(50);
-    const [opacity, setOpacity] = useState(0);
-    const [num,setNum] = useState(true);
-    const [char,setChar] = useState(true);
+    const [num,setNum] = useState(false);
+    const [char,setChar] = useState(false);
     const [output, setOutput] = useState("");
+    const [opac, setOpac] = useState(0);
+
+    function generateKey() {
+        let characters;
+
+        if(char) characters += alphabet;
+
+        if(num) characters += numbers;
+
+        let key = '';
+        for (let i = 0; i < 20; i++) {
+            key += characters.charAt(Math.floor(Math.random() * characters.length));
+            if (i === 3 || i === 7 || i === 11 || i === 15) key += '-';
+        }
+        return key;
+    }
 
     const create = () => {
         let pass = '';
+        if(type === "UUID") {
+            pass = generateKey();
+        } else if (type === "Password") {
+            for (let i = 0; i < range; i++) {
+                if (!char && num) {
+                    let rand = Math.floor(Math.random() * numbers.length);
+                    pass += numbers.charAt(rand);
+                }
+                if (!num && char) {
+                    let rand = Math.floor(Math.random() * alphabet.length);
+                    pass += alphabet.charAt(rand);
+                }
 
-        for(let i = 0; i<range;i++) {
-            if (!char) {
-                let rand = Math.floor(Math.random() * numbers.length);
-                pass += numbers.charAt(rand);
-            }
-            if (!num) {
-                let rand = Math.floor(Math.random() * alphabet.length);
-                pass += alphabet.charAt(rand);
+                if (num && char) {
+                    let rand = Math.floor(Math.random() * alphabet.length);
+                    pass += alphabet.charAt(rand);
+                    let randa = Math.floor(Math.random() * numbers.length);
+                    pass += numbers.charAt(randa);
+                }
             }
         }
         setOutput(pass);
@@ -32,7 +57,7 @@ function App() {
   return (
     <div className={"Encryption"}>
       <div className={"Input"}>
-          <p>Types</p>
+          <p>{type}</p>
           <span className={"Types"}>
               <label>
                   <button onClick={() => setType("UUID")}>UUID</button>
@@ -40,9 +65,6 @@ function App() {
               <label>
                   <button onClick={() => setType("Password")}>Password</button>
               </label>
-              <label>
-                  <button onClick={() => setType("Hash")}>Hash</button>
-              </label>
           </span>
           <span className={"Options"}>
               {
@@ -50,28 +72,32 @@ function App() {
                       <>
                           <label>
                               <input onChange={(e) => setRange(e.currentTarget.value)} type={"range"}/>
-                              Current Length: {(!char && !num) === true ? range*2 : range}
-
+                              Current Length: {(char && num) === true ? range*2 : range}
                           </label>
                           <div className={"Contains"}>
                               <label style={{flexDirection: 'row', placeItems: 'center', justifyItems: 'center'}}>
-                                  <input value={num} onChange={(e) => setNum(!num)} type={"checkbox"}/>
+                                  <input onChange={(e) => setNum(!num)} type={"checkbox"}/>
                                   Number
                               </label>
                               <label style={{flexDirection: 'row', placeItems: 'center', justifyItems: 'center'}}>
-                                  <input value={char} onChange={(e) => setChar(!char)} type={"checkbox"}/>
+                                  <input onChange={(e) => setChar(!char)} type={"checkbox"}/>
                                   Chars
                               </label>
                           </div>
                       </>
                   ) : type === "UUID" ? (
-                      <>
-                          <label>
-                              <input onChange={(e) => setRange(e.currentTarget.value)} type={"range"}/>
-                              Current Length: {(char && num) === true ? range * 2 : range}
-
-                          </label>
-                      </>
+                      <div style={{marginTop: '34px'}}>
+                          <div className={"Contains"}>
+                              <label style={{flexDirection: 'row', placeItems: 'center', justifyItems: 'center'}}>
+                                  <input onChange={(e) => setNum(!num)} type={"checkbox"}/>
+                                  Number
+                              </label>
+                              <label style={{flexDirection: 'row', placeItems: 'center', justifyItems: 'center'}}>
+                                  <input onChange={(e) => setChar(!char)} type={"checkbox"}/>
+                                  Chars
+                              </label>
+                          </div>
+                      </div>
                   ) : type === "Hash" ? (
                       <>
                           <label>
@@ -86,17 +112,22 @@ function App() {
                           Current Length: {(char && num) === true ? range * 2 : range}
 
                       </label>
-                      </>
+                  </>
               }
           </span>
           <br/>
           <span className={"Output"}>
               <button onClick={() => create()}>Create</button>
               <div className={"Main"}>
-                  <p onClick={() => {
+                  <p style={{cursor: 'pointer'}} onClick={() => {
+                      setOpac(1)
                       navigator.clipboard.writeText(output)
+                      setInterval(() => {
+                          setOpac(0)
+                      }, 2000)
                   }
                   }>{output}</p>
+                  <strong style={{opacity: opac}}>Copied</strong>
               </div>
               <p style={{fontSize: '11px', textAlign: 'center'}}>Press Shift + Scroll click to scroll.<br/>Click password to copy</p>
           </span>
diff --git a/src/style/main.css b/src/style/main.css
index c543c76..896d4d2 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -69,6 +69,7 @@
 }
 .Encryption .Input .Output .Main {
   overflow: auto;
+  user-select: none;
   width: 325px;
   background: #101010;
   padding: 9px;
@@ -82,6 +83,17 @@
   border-radius: 4px;
   font-size: 15px;
 }
+.Encryption .Input .Output .Main strong {
+  position: absolute;
+  transition: 300ms;
+  right: 15px;
+  top: 0;
+  color: #21d57a;
+  bottom: 0;
+  margin: auto;
+  width: fit-content;
+  height: fit-content;
+}
 .Encryption .Input .Options {
   margin-top: 15px;
   width: 100%;
diff --git a/src/style/main.css.map b/src/style/main.css.map
index f1ef5e8..1dc76f6 100644
--- a/src/style/main.css.map
+++ b/src/style/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEE;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKR;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AACA;EAAO;EACL;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EAAe;EAAqB;EACpC;;AACA;EACE","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEE;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKR;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AACA;EAAO;EACL;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EAAe;EAAqB;EACpC;;AACA;EACE","file":"main.css"}
\ No newline at end of file
diff --git a/src/style/main.scss b/src/style/main.scss
index 159de9f..e8ac2d1 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -69,6 +69,7 @@
       }
       .Main {
         overflow: auto;
+        user-select: none;
         width: 325px;
         background: #101010;
         padding: 9px;
@@ -81,6 +82,17 @@
           border-radius: 4px;
           font-size: 15px;
         }
+        strong {
+          position: absolute;
+          transition: 300ms;
+          right: 15px;
+          top: 0;
+          color: #21d57a;
+          bottom: 0;
+          margin: auto;
+          width: fit-content;
+          height: fit-content;
+        }
       }
     }
     .Options {