Add base64 tool

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^17.0.31",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
+    "buffer": "^6.0.3",
     "i18next": "^20.2.1",
     "i18next-browser-languagedetector": "^6.1.0",
     "i18next-http-backend": "^1.2.1",

public/locales/de/translation.json

@@ -29,6 +29,10 @@
                 "description": "Die <wikipedia>ROT-Verschlüsselung</wikipedia>, auch oft als Caesar-Verschlüsselung bezeichnet, basiert auf der Idee, jeden Buchstaben um einen bestimmten Versatz zu verschieben, z.B. <pre>A => +13 => N</pre>",
                 "outOfRangeWarning": "ROT unterstützt nur Buchstaben des Grundalphabets (A-Z). Nummern und Umlaute werden nicht unterstützt und unverschlüsselt kopiert!",
                 "offset": "ROT-Versatz (oftmals 13)"
+            },
+            "base64": {
+                "title": "Base64",
+                "description": "<wikipedia>Base64-Codierung</wikipedia> wird oft genutzt um beliebige Binärdaten in pure Zeichenfolgen zu schreiben, indem die Daten auf 64 ASCII-Zeichen projeziert werden."
             }
         }
     },

public/locales/en/translation.json

@@ -29,6 +29,10 @@
                 "description": "The <wikipedia>ROT-cipher</wikipedia>, also commonly referred to as the Caesar-cipher, is based on the idea of ofsetting every letter of the alphabet by a certain amount, i.e. <pre>A => +13 => N</pre>",
                 "outOfRangeWarning": "ROT only supports letters of the basic alphabet (A-Z). Numbers and accented letters are not supported and will be copied as-is!",
                 "offset": "ROT-Offset (commonly 13)"
+            },
+            "base64": {
+                "title": "Base64",
+                "description": "<wikipedia>Base64-encoding</wikipedia> is commonly used for storing arbitrary binary data in pure strings, by mapping it to 64 ASCII characters."
             }
         }
     },

src/tools/ToolLoader.js

@@ -6,6 +6,7 @@ import NotFoundPage from "../pages/NotFound";
 
 const HomePage = prerenderedLoadable(() => import('../pages/Home'));
 const RotTool = prerenderedLoadable(() => import('./cyphers_and_cryptography/rot/RotTool'));
+const Base64Tool = prerenderedLoadable(() => import('./cyphers_and_cryptography/base64/Base64Tool'));
 
 const ToolLoader = () => {
     const {tool} = useParams();
@@ -17,6 +18,9 @@ const ToolLoader = () => {
         case "rot":
             return <RotTool/>;
 
+        case "base64":
+            return <Base64Tool/>;
+
         default:
             return <NotFoundPage/>;
     }

src/tools/cyphers_and_cryptography/base64/Base64Tool.js

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import { AlertOctagon } from "lucide-react";
+import { useTranslation, Trans } from "react-i18next";
+import BoxMessage from "../../../components/BoxMessage";
+import * as styles from "./Base64Tool.module.scss"
+import { Helmet } from "react-helmet";
+import {Buffer} from "buffer/"
+
+const Base64Tool = () => {
+    const { t } = useTranslation();
+
+    let [input, setInput] = useState("");
+    let [output, setOutput] = useState("");
+    let [reversed, setReversed] = useState(false)
+
+    useEffect(() => {
+        if(!reversed) {
+            const buf = new Buffer.from(input)
+            setOutput(buf.toString("base64"))
+        }
+
+        if(reversed) {
+            const buf = new Buffer.from(output, "base64")
+            setInput(buf.toString("utf-8"))
+        }
+
+    }, [input, output, reversed])
+    
+    return (
+        <main>
+            <Helmet>
+                <title>{t("tools.cryptography.base64.title")} | {t("site.title")}</title>
+                <meta name="keywords" content="Base64, encryption, decryption, verschlüsselung, entschlüsselung, base, 64, binary, tool" />
+            </Helmet>
+            <div className={styles.layoutBox}>
+                <h1>{t("tools.cryptography.base64.title")}</h1>
+
+                <p><Trans i18nKey={"tools.cryptography.base64.description"} components={{wikipedia: <a href="https://en.wikipedia.org/wiki/Base64">xxx</a>, pre: <pre/>}} /></p>
+
+                <label for="base64-input">{t("tools.cryptography.common.cleartext")}</label>
+                <textarea id="base64-input" placeholder={t("tools.cryptography.common.cleartext")} onChange={(e) => {setReversed(false); setInput(e.currentTarget.value);}} value={input}></textarea>
+
+                <label for="base64-output">{t("tools.cryptography.common.ciphertext")}</label>
+                <textarea id="base64-output" placeholder={t("tools.cryptography.common.ciphertext")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value);}} value={output}></textarea>
+            </div>
+        </main>
+    )
+}
+
+export default Base64Tool;

src/tools/cyphers_and_cryptography/base64/Base64Tool.module.scss

@@ -0,0 +1 @@
+@import "../../../common";

src/tools/tools.json

@@ -16,6 +16,15 @@
             "category": "cryptography",
             "hidden": false,
             "keywords": "rot, rot-n, caesar, rotation, cryptography, encryption, decryption"
+        },
+        {
+            "name": "Base64",
+            "external": false,
+            "urlname": "base64",
+            "icon": "Binary",
+            "category": "cryptography",
+            "hidden": false,
+            "keywords": "binary, base64, base, 64, cryptography, encryption, decryption"
         }
     ]
 }

yarn.lock

@@ -2751,7 +2751,7 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -3024,6 +3024,14 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
@@ -5806,7 +5814,7 @@ identity-obj-proxy@3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-ieee754@^1.1.4:
+ieee754@^1.1.4, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==