0.0.2 - UUID Creation system integrated. Hash creation removed.

hacimertgokhan · Sep 2, 2024 · a721ecf · a721ecf
1 parent 5f2479b
commit a721ecf
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 29 deletions.
diff --git 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,46 +57,47 @@ 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>
               </label>
               <label>
                   <button onClick={() => setType("Password")}>Password</button>
               </label>
-              <label>
-                  <button onClick={() => setType("Hash")}>Hash</button>
-              </label>
           </span>
           <span className={"Options"}>
               {
                   type === "Password" ? (
                       <>
                           <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
diff --git a/src/style/main.css.map b/src/style/main.css.map
diff --git 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 {