From d0cfd213db4d8f18a9015be047deec515191849b Mon Sep 17 00:00:00 2001 From: arunnats Date: Sun, 17 Mar 2024 10:50:12 +0530 Subject: [PATCH 1/2] yes --- .../src/components/About/About.module.css | 8 + fairplay/src/components/ChatBox/Chatbot.jsx | 2 +- .../src/components/ChatBox/Chatbot.module.css | 1 + .../components/CipherForm copy/CipherForm.jsx | 82 +++++++++ .../src/components/CipherForm copy/decrypt.js | 130 ++++++++++++++ .../src/components/CipherForm copy/encrypt.js | 123 +++++++++++++ .../src/components/CipherForm/ChipherForm.css | 78 +++++---- .../src/components/CipherForm/CipherForm.jsx | 81 +++++---- .../FiveFiveDynamic/FiveFiveDynamic.jsx | 2 +- .../FiveFiveDynamic.module.css | 35 ++-- .../FiveFiveHighlight.module.css | 12 +- .../FiveFiveStatic/FiveFiveStatic.jsx | 162 +++++++++--------- .../FiveFiveStatic/FiveFiveStatic.module.css | 44 ++--- 13 files changed, 556 insertions(+), 204 deletions(-) create mode 100644 fairplay/src/components/CipherForm copy/CipherForm.jsx create mode 100644 fairplay/src/components/CipherForm copy/decrypt.js create mode 100644 fairplay/src/components/CipherForm copy/encrypt.js diff --git a/fairplay/src/components/About/About.module.css b/fairplay/src/components/About/About.module.css index 17fb123..6fa660f 100644 --- a/fairplay/src/components/About/About.module.css +++ b/fairplay/src/components/About/About.module.css @@ -2,4 +2,12 @@ color: black; width: 80%; margin: auto; + background-color: rgba( + 89, + 75, + 61, + 0.8 + ); /* White background with decreased opacity */ + border-radius: 10px; /* Rounded corners */ + padding: 30px; /* Add padding */ } diff --git a/fairplay/src/components/ChatBox/Chatbot.jsx b/fairplay/src/components/ChatBox/Chatbot.jsx index ff913f8..738569a 100644 --- a/fairplay/src/components/ChatBox/Chatbot.jsx +++ b/fairplay/src/components/ChatBox/Chatbot.jsx @@ -16,7 +16,7 @@ const Chatbot = () => { const apiEndpoint = "https://api.openai.com/v1/chat/completions"; const headers = { "Content-Type": "application/json", - Authorization: ` Bearer ${config.OPENAI_API_KEY}`, + Authorization: ` Bearer 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`, }; // Get the last 10 messages diff --git a/fairplay/src/components/ChatBox/Chatbot.module.css b/fairplay/src/components/ChatBox/Chatbot.module.css index fca09da..9b36b6a 100644 --- a/fairplay/src/components/ChatBox/Chatbot.module.css +++ b/fairplay/src/components/ChatBox/Chatbot.module.css @@ -2,6 +2,7 @@ body { font-family: "Frank Ruhl Libre", sans-serif; + color: #4d270a; } .chatbotInputForm input::placeholder { diff --git a/fairplay/src/components/CipherForm copy/CipherForm.jsx b/fairplay/src/components/CipherForm copy/CipherForm.jsx new file mode 100644 index 0000000..7eaa6e4 --- /dev/null +++ b/fairplay/src/components/CipherForm copy/CipherForm.jsx @@ -0,0 +1,82 @@ +import React, { useState } from "react"; +import FiveFiveStatic from "../FiveFiveStatic/FiveFiveStatic"; +import FilterInputText from "../FilterInputText/FilterInputText"; +import { encryptByPlayfairCipher } from "./encrypt"; +import { decryptByPlayfairCipher } from "./decrypt"; +import SubstringDisplay from "../SubstringDisplay/SubstringDisplay"; + +function CipherForm() { + const [plainText, setPlainText] = useState(""); + const [key, setKey] = useState(""); + const [cipherText, setCipherText] = useState(""); + const [decryptedText, setDecryptedText] = useState(""); + const [showEmptyCipher, setShowEmptyCipher] = useState(true); + + const handlePlainTextChange = (e) => { + setPlainText(e.target.value.replace(/\s/g, "")); + }; + + const handleKeyChange = (e) => { + setKey(e.target.value); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + + // Encrypt the plain text + setCipherText( + encryptByPlayfairCipher(plainText.replace(/\s/g, ""), key).toUpperCase() + ); + }; + + const handleDecrypt = () => { + // Decrypt the cipher text + setDecryptedText(decryptByPlayfairCipher(cipherText, key).toUpperCase()); + }; + + return ( +
+
+
+
+ + +
+
+ {plainText ? ( // Conditionally render FilterInputText if plainText is not empty + + ) : ( + + )} +
+ + +
+ +
+ +
+ + + + + +
+ {cipherText &&
Encrypted Text: {cipherText}
} +
+ {decryptedText &&
Decrypted Text: {decryptedText}
} +
+ ); +} + +export default CipherForm; diff --git a/fairplay/src/components/CipherForm copy/decrypt.js b/fairplay/src/components/CipherForm copy/decrypt.js new file mode 100644 index 0000000..806d9ae --- /dev/null +++ b/fairplay/src/components/CipherForm copy/decrypt.js @@ -0,0 +1,130 @@ +export function generateKeyTable(key, ks, keyT) { + let i, + j, + k, + flag = 0; + + // a 26 character hashmap + // to store count of the alphabet + let dicty = new Array(26).fill(0); + for (i = 0; i < ks; i++) { + let r = key[i].charCodeAt(0) - 97; + + if (key[i] !== "j") { + dicty[r] = 2; + } + } + + dicty["j".charCodeAt(0) - 97] = 1; + i = 0; + j = 0; + + for (k = 0; k < ks; k++) { + let r = key[k].charCodeAt(0) - 97; + if (dicty[r] === 2) { + dicty[r] -= 1; + keyT[i][j] = key[k]; + j++; + if (j === 5) { + i++; + j = 0; + } + } + } + + for (k = 0; k < 26; k++) { + if (dicty[k] === 0) { + keyT[i][j] = String.fromCharCode(k + 97); + j++; + if (j === 5) { + i++; + j = 0; + } + } + } + return keyT; +} + +export function mod5(n) { + return ((n % 5) + 5) % 5; +} + +export function decrypt(str, keyT, ps) { + let i; + let a = new Array(4).fill(0); + let newstr = new Array(ps); + + function mod5(n) { + return ((n % 5) + 5) % 5; + } + + for (i = 0; i < ps; i += 2) { + let brr = search(keyT, str[i], str[i + 1], a); + let k1 = brr[0]; + let k2 = brr[1]; + let k3 = brr[2]; + let k4 = brr[3]; + if (k1 === k3) { + newstr[i] = keyT[k1][mod5(k2 - 1)]; + newstr[i + 1] = keyT[k1][mod5(k4 - 1)]; + } else if (k2 === k4) { + newstr[i] = keyT[mod5(k1 - 1)][k2]; + newstr[i + 1] = keyT[mod5(k3 - 1)][k2]; + } else { + newstr[i] = keyT[k1][k4]; + newstr[i + 1] = keyT[k3][k2]; + } + } + let res = ""; + + for (let i = 0; i < newstr.length; i++) { + res += newstr[i]; + } + + return res; +} + +export function search(keyT, a, b, arr) { + let i, j; + + if (a === "j") a = "i"; + else if (b === "j") b = "i"; + + for (i = 0; i < 5; i++) { + for (j = 0; j < 5; j++) { + if (keyT[i][j] === a) { + arr[0] = i; + arr[1] = j; + } else if (keyT[i][j] === b) { + arr[2] = i; + arr[3] = j; + } + } + } + return arr; +} + +// export export function to make the plain text length to be even +export function prepare(str, ptrs) { + if (ptrs % 2 !== 0) { + str += "z"; + } + + return [str, ptrs]; +} + +// export function to decrypt using Playfair Cipher +export function decryptByPlayfairCipher(str, key) { + let ps, ks; + let keyT = new Array(5).fill(null).map(() => new Array(5)); + + str = str.trim().toLowerCase(); + key = key.trim().toLowerCase(); + + ps = str.length; + ks = key.length; + [str, ps] = prepare(str, ps); + + let kt = generateKeyTable(key, ks, keyT); + return decrypt(str, kt, ps); +} diff --git a/fairplay/src/components/CipherForm copy/encrypt.js b/fairplay/src/components/CipherForm copy/encrypt.js new file mode 100644 index 0000000..1a91bc0 --- /dev/null +++ b/fairplay/src/components/CipherForm copy/encrypt.js @@ -0,0 +1,123 @@ +export function generateKeyTable(key, ks, keyT) { + let i, + j, + k, + flag = 0; + + // a 26 character hashmap + // to store count of the alphabet + let dicty = new Array(26).fill(0); + for (i = 0; i < ks; i++) { + let r = key[i].charCodeAt(0) - 97; + + if (key[i] !== "j") { + dicty[r] = 2; + } + } + + dicty["j".charCodeAt(0) - 97] = 1; + i = 0; + j = 0; + + for (k = 0; k < ks; k++) { + let r = key[k].charCodeAt(0) - 97; + if (dicty[r] === 2) { + dicty[r] -= 1; + keyT[i][j] = key[k]; + j++; + if (j === 5) { + i++; + j = 0; + } + } + } + + for (k = 0; k < 26; k++) { + if (dicty[k] === 0) { + keyT[i][j] = String.fromCharCode(k + 97); + j++; + if (j === 5) { + i++; + j = 0; + } + } + } + return keyT; +} + +// export export function to search for the characters of a digraph +// in the key square and return their position +export function search(keyT, a, b, arr) { + let i, j; + + if (a === "j") a = "i"; + else if (b === "j") b = "i"; + + for (i = 0; i < 5; i++) { + for (j = 0; j < 5; j++) { + if (keyT[i][j] === a) { + arr[0] = i; + arr[1] = j; + } else if (keyT[i][j] === b) { + arr[2] = i; + arr[3] = j; + } + } + } + return arr; +} + +// export export function to make the plain text length to be even +export function prepare(str, ptrs) { + if (ptrs % 2 !== 0) { + str += "z"; + } + + return [str, ptrs]; +} + +// export export function for performing the encryption +export function encrypt(str, keyT, ps) { + let i; + let a = new Array(4).fill(0); + let newstr = new Array(ps); + + for (i = 0; i < ps; i += 2) { + let brr = search(keyT, str[i], str[i + 1], a); + let k1 = brr[0]; + let k2 = brr[1]; + let k3 = brr[2]; + let k4 = brr[3]; + if (k1 === k3) { + newstr[i] = keyT[k1][(k2 + 1) % 5]; + newstr[i + 1] = keyT[k1][(k4 + 1) % 5]; + } else if (k2 === k4) { + newstr[i] = keyT[(k1 + 1) % 5][k2]; + newstr[i + 1] = keyT[(k3 + 1) % 5][k2]; + } else { + newstr[i] = keyT[k1][k4]; + newstr[i + 1] = keyT[k3][k2]; + } + } + let res = ""; + + for (let i = 0; i < newstr.length; i++) { + res += newstr[i]; + } + return res; +} + +export function encryptByPlayfairCipher(str, key) { + let ps, ks; + let keyT = new Array(5).fill(null).map(() => new Array(5)); + + str = str.trim().toLowerCase(); + key = key.trim().toLowerCase(); + + ps = str.length; + ks = key.length; + [str, ps] = prepare(str, ps); + + let kt = generateKeyTable(key, ks, keyT); + return encrypt(str, kt, ps); +} diff --git a/fairplay/src/components/CipherForm/ChipherForm.css b/fairplay/src/components/CipherForm/ChipherForm.css index 7d51615..27dcdc8 100644 --- a/fairplay/src/components/CipherForm/ChipherForm.css +++ b/fairplay/src/components/CipherForm/ChipherForm.css @@ -1,53 +1,59 @@ .Main { - margin: 20px; - padding: 20px; - border: 1px solid #bca1a1; - border-radius: 5px; - background-color: rgba(89, 75, 61, 0.8); + margin: 20px; + padding: 20px; + border: 1px solid #bca1a1; + border-radius: 5px; + background-color: rgba(89, 75, 61, 0.8); + width: 60%; + margin: auto; } -.CipherForm{ - - - - background-color: rgba(89, 75, 61, 0.8); - +.CipherForm { + background-color: rgba(89, 75, 61, 0.8); + width: 80%; + margin: auto; + padding: 20px; } +.flexThing { + display: flex; + justify-content: space-between; + flex-direction: row-reverse; +} .Main label { - display: block; - margin-bottom: 10px; - font-weight: bold; - color: #000; - font-size: 22px; + display: block; + margin-bottom: 10px; + font-weight: bold; + color: #000; + font-size: 22px; } .inputBox { - width: 90%; - padding: 10px; - margin-bottom: 20px; - border: 1px solid #888; - border-radius: 4px; - font-size: 22px; - font-family: "Times New Roman", Times, serif; - background-color: #f9f9f9; - color: #333; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + width: 90%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid #888; + border-radius: 4px; + font-size: 22px; + font-family: "Times New Roman", Times, serif; + background-color: #f9f9f9; + color: #333; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .move_button { - padding: 10px 20px; - margin: 0 10px; - background-color: rgba(73, 55, 33, 0.7); - color: #fff; - border: none; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; - margin : 20px; + padding: 10px 20px; + margin: 0 10px; + background-color: rgba(73, 55, 33, 0.7); + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; + margin: 20px; } .move_button:hover { - background-color: #954a00; /* Darker blue on hover */ + background-color: #954a00; /* Darker blue on hover */ } diff --git a/fairplay/src/components/CipherForm/CipherForm.jsx b/fairplay/src/components/CipherForm/CipherForm.jsx index 515cc29..9c2ab9a 100644 --- a/fairplay/src/components/CipherForm/CipherForm.jsx +++ b/fairplay/src/components/CipherForm/CipherForm.jsx @@ -38,51 +38,56 @@ function CipherForm() { }; return ( -
+
-
-
- - +
+
+
+ + +
+
+ {plainText ? ( + + ) : ( + + )} +
+
+ + +
+
- {plainText ? ( - - ) : ( - - )} +
-
- - -
- -
- -
- - + + -
{cipherText &&
Encrypted Text: {cipherText}
}
diff --git a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx index a1c7d58..6710aba 100644 --- a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx +++ b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx @@ -102,7 +102,7 @@ const FiveFiveDynamic = () => { setInputString(""); setSubstrings([]); setEncryptedSubstrings([]); - setFlag(flag === 1); + setFlag((flag = 1)); }; // Function to filter the input string diff --git a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css index 428755a..19d9dae 100644 --- a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css +++ b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css @@ -27,18 +27,15 @@ padding: 0; margin: 0; transition: all 0.3s ease; - - border: 2px solid #000; } .inputbox { - - /* Container styles */ - margin: 20px; - padding: 20px; - border: 1px solid #bca1a1; - border-radius: 5px; - background-color: rgba(89, 75, 61,0.8); + /* Container styles */ + margin: 20px; + padding: 20px; + border: 1px solid #bca1a1; + border-radius: 5px; + background-color: rgba(89, 75, 61, 0.8); } .inputbox label { @@ -89,17 +86,15 @@ } .move_button { - - /* Button styles */ - padding: 10px 20px; - margin: 0 10px; /* Add space between buttons */ - background-color: rgba(210, 183, 150,0.7); /* Blue color */ - color: #fff; /* White text color */ - border: none; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; - + /* Button styles */ + padding: 10px 20px; + margin: 0 10px; /* Add space between buttons */ + background-color: rgba(210, 183, 150, 0.7); /* Blue color */ + color: #fff; /* White text color */ + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; } .move_button:hover { diff --git a/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css b/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css index dc43797..cacad93 100644 --- a/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css +++ b/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css @@ -15,8 +15,8 @@ align-items: center; } -.box p{ - +.box p { + font-size: 30px; } .box:hover { @@ -32,9 +32,13 @@ .row { display: flex; flex-direction: row; - } .highlight { - background-color: rgba(202, 160, 85,0.5); /* Change highlight color as needed */ + background-color: rgba( + 202, + 160, + 85, + 0.5 + ); /* Change highlight color as needed */ } diff --git a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx index 4282077..75022a5 100644 --- a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx +++ b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx @@ -2,99 +2,97 @@ import React, { useEffect } from "react"; import styles from "./FiveFiveStatic.module.css"; // Import the CSS module const FiveFiveStatic = ({ cipherText }) => { + const matrix5x5 = [ + [1, 2, 3, 4, 5], + [6, 7, 8, 9, 10], + [11, 12, 13, 14, 15], + [16, 17, 18, 19, 20], + [21, 22, 23, 24, 25], + ]; - const matrix5x5 = [ - [1, 2, 3, 4, 5], - [6, 7, 8, 9, 10], - [11, 12, 13, 14, 15], - [16, 17, 18, 19, 20], - [21, 22, 23, 24, 25] - ]; + // Convert the cipher text to uppercase and replace 'J' with 'I' + let modifiedCipherText = cipherText + .toUpperCase() + .replace(/J/g, "I") + .replace(/[^A-Z]/g, ""); - // Convert the cipher text to uppercase and replace 'J' with 'I' - let modifiedCipherText = cipherText - .toUpperCase() - .replace(/J/g, "I") - .replace(/[^A-Z]/g, ""); + modifiedCipherText = removeDuplicates(modifiedCipherText); - modifiedCipherText = removeDuplicates(modifiedCipherText); + // Function to remove duplicate characters + function removeDuplicates(str) { + let uniqueChars = ""; + for (let char of str) { + if (!uniqueChars.includes(char)) { + uniqueChars += char; + } + } + return uniqueChars; + } - // Function to remove duplicate characters - function removeDuplicates(str) { - let uniqueChars = ""; - for (let char of str) { - if (!uniqueChars.includes(char)) { - uniqueChars += char; - } - } - return uniqueChars; - } + // console.log(modifiedCipherText); + let ogCipherLength = modifiedCipherText.length; - // console.log(modifiedCipherText); - let ogCipherLength = modifiedCipherText.length; + // Create a hash to keep track of letters used + const hash = {}; - // Create a hash to keep track of letters used - const hash = {}; + // Iterate over the modifiedCipherText and mark the letters in the hash + for (let i = 0; i < modifiedCipherText.length; i++) { + if (modifiedCipherText[i] !== " ") { + // Exclude spaces + hash[modifiedCipherText[i]] = (hash[modifiedCipherText[i]] || 0) + 1; + if (modifiedCipherText[i] === "I") hash["J"] = 1; // Mark 'J' as used if 'I' is used + } + } - // Iterate over the modifiedCipherText and mark the letters in the hash - for (let i = 0; i < modifiedCipherText.length; i++) { - if (modifiedCipherText[i] !== " ") { - // Exclude spaces - hash[modifiedCipherText[i]] = (hash[modifiedCipherText[i]] || 0) + 1; - if (modifiedCipherText[i] === "I") hash["J"] = 1; // Mark 'J' as used if 'I' is used - } - } + // Create a string to hold the unique letters for the cipher + let uniqueLetters = ""; - // Create a string to hold the unique letters for the cipher - let uniqueLetters = ""; + // Iterate over the alphabet (excluding 'J') and add letters not in the hash to the uniqueLetters string + for ( + let charCode = "A".charCodeAt(0); + charCode <= "Z".charCodeAt(0); + charCode++ + ) { + const letter = String.fromCharCode(charCode); + if (letter !== "J" && !hash[letter]) { + uniqueLetters += letter; + } + } - // Iterate over the alphabet (excluding 'J') and add letters not in the hash to the uniqueLetters string - for ( - let charCode = "A".charCodeAt(0); - charCode <= "Z".charCodeAt(0); - charCode++ - ) { - const letter = String.fromCharCode(charCode); - if (letter !== "J" && !hash[letter]) { - uniqueLetters += letter; - } - } + if (!hash["J"]) { + uniqueLetters += "J"; + } - if (!hash["J"]) { - uniqueLetters += "J"; - } - - modifiedCipherText += uniqueLetters; - - return ( -
- {matrix5x5.map((row, i) => ( -
- {row.map((_, j) => ( -
-

- {modifiedCipherText[(i * 5 + j) % modifiedCipherText.length] === - "I" - ? "I/J" - : modifiedCipherText[(i * 5 + j) % modifiedCipherText.length]} -

-
- ))} -
- ))} -
- ); + modifiedCipherText += uniqueLetters; + return ( +
+ {matrix5x5.map((row, i) => ( +
+ {row.map((_, j) => ( +
+

+ {modifiedCipherText[(i * 5 + j) % modifiedCipherText.length] === + "I" + ? "I/J" + : modifiedCipherText[(i * 5 + j) % modifiedCipherText.length]} +

+
+ ))} +
+ ))} +
+ ); }; export default FiveFiveStatic; diff --git a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css index 1cdb3c4..f7337fb 100644 --- a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css +++ b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css @@ -13,42 +13,42 @@ display: flex; justify-content: center; align-items: center; - } - - .box:hover { + + font-size: 30px; +} + +.box:hover { scale: 1.1; transition: ease 0.3s; - } - - /* Add styles for animate__pulse class */ - .animate__pulse { +} + +/* Add styles for animate__pulse class */ +.animate__pulse { animation: anpulse 1s infinite; /* Adjust animation duration and other properties as needed */ - } - - .row { +} + +.row { display: flex; flex-direction: row; align-items: center; justify-content: center; - } - - .x { +} + +.x { background-color: yellow; /* Change background color to yellow */ font-weight: bold; /* Make text bold */ /* Add any other styling you want */ animation: pulse 1s ease 0.3s 3 linear infinite; - } - - @keyframes pulse { +} + +@keyframes pulse { 0% { - transform: scale(1); + transform: scale(1); } 50% { - transform: scale(1.1); + transform: scale(1.1); } 100% { - transform: scale(1); + transform: scale(1); } - } - - +} From 935c43d89df01b8420edba2ee7c553bba8fe6f5f Mon Sep 17 00:00:00 2001 From: arunnats Date: Sun, 17 Mar 2024 11:05:44 +0530 Subject: [PATCH 2/2] more progress --- .../src/components/CipherForm/ChipherForm.css | 14 +++ .../src/components/CipherForm/CipherForm.jsx | 102 ++++++++++++------ 2 files changed, 81 insertions(+), 35 deletions(-) diff --git a/fairplay/src/components/CipherForm/ChipherForm.css b/fairplay/src/components/CipherForm/ChipherForm.css index 27dcdc8..fdd647c 100644 --- a/fairplay/src/components/CipherForm/ChipherForm.css +++ b/fairplay/src/components/CipherForm/ChipherForm.css @@ -57,3 +57,17 @@ .move_button:hover { background-color: #954a00; /* Darker blue on hover */ } + +.outputText { + color: white; + font-size: 24px; + text-align: center; + text-transform: capitalize; +} + +.radioMaybe { + display: flex; + justify-content: space-around; + align-items: center; + padding: 10px 0; +} diff --git a/fairplay/src/components/CipherForm/CipherForm.jsx b/fairplay/src/components/CipherForm/CipherForm.jsx index 9c2ab9a..ce1c958 100644 --- a/fairplay/src/components/CipherForm/CipherForm.jsx +++ b/fairplay/src/components/CipherForm/CipherForm.jsx @@ -8,15 +8,13 @@ import SubstringDisplay from "../SubstringDisplay/SubstringDisplay"; import "../CipherForm/ChipherForm.css"; // Import the CSS file function CipherForm() { - const [plainText, setPlainText] = useState(""); + const [mode, setMode] = useState("encrypt"); + const [inputText, setInputText] = useState(""); const [key, setKey] = useState(""); - const [cipherText, setCipherText] = useState(""); - const [decryptedText, setDecryptedText] = useState(""); - // Remove unused variables - // const [showEmptyCipher, setShowEmptyCipher] = useState(true); + const [outputText, setOutputText] = useState(""); - const handlePlainTextChange = (e) => { - setPlainText(e.target.value.replace(/\s/g, "")); + const handleInputChange = (e) => { + setInputText(e.target.value.replace(/\s/g, "")); }; const handleKeyChange = (e) => { @@ -25,16 +23,23 @@ function CipherForm() { const handleSubmit = (e) => { e.preventDefault(); - - // Encrypt the plain text - setCipherText( - encryptByPlayfairCipher(plainText.replace(/\s/g, ""), key).toUpperCase() - ); + if (mode === "encrypt") { + setOutputText( + encryptByPlayfairCipher(inputText.replace(/\s/g, ""), key).toUpperCase() + ); + } else { + setOutputText( + decryptByPlayfairCipher(inputText.replace(/\s/g, ""), key).toUpperCase() + ); + } }; - const handleDecrypt = () => { - // Decrypt the cipher text - setDecryptedText(decryptByPlayfairCipher(cipherText, key).toUpperCase()); + const handleModeChange = (newMode) => { + if (newMode !== mode) { + setInputText(""); // Reset input text when mode changes + setOutputText(""); // Reset output text when mode changes + setMode(newMode); + } }; return ( @@ -42,27 +47,52 @@ function CipherForm() {
+
+ + +
- +
+

- {plainText ? ( - - ) : ( - - )} + {mode === "encrypt" ? ( + inputText ? ( + + ) : ( + + ) + ) : null}
@@ -80,18 +110,20 @@ function CipherForm() {
+ -
- {cipherText &&
Encrypted Text: {cipherText}
} + {outputText && ( +
+ {mode === "encrypt" ? "Encrypted Text:" : "Decrypted Text:"}{" "} + {outputText} +
+ )}
- {decryptedText &&
Decrypted Text: {decryptedText}
}
); }