https://github.com/thinkphp/react-vernam-cipher
React Vernam Cipher
https://github.com/thinkphp/react-vernam-cipher
algorithms decryption encryption react vernam-cipher xor-cipher
Last synced: 2 months ago
JSON representation
React Vernam Cipher
- Host: GitHub
- URL: https://github.com/thinkphp/react-vernam-cipher
- Owner: thinkphp
- Created: 2025-01-27T08:20:43.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-01-27T08:24:29.000Z (4 months ago)
- Last Synced: 2025-01-27T09:26:44.898Z (4 months ago)
- Topics: algorithms, decryption, encryption, react, vernam-cipher, xor-cipher
- Language: JavaScript
- Homepage: https://react-vernam-cipher.vercel.app/
- Size: 171 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vernam Cipher React Component
This is a React-based implementation of the Vernam Cipher, a symmetric key cipher used for encryption and decryption of text. The component allows users to input text, generate a key, encrypt the text using the Vernam Cipher, and decrypt it back using the same key.
## Features
- Input text to encrypt
- Generate a random key for encryption
- Encrypt text using the Vernam Cipher
- Decrypt encrypted text using the same key
- Displays the generated key in hexadecimal format
- Responsive UI for better user interaction
## Requirements
- React (v17 or higher)
- Basic understanding of the Vernam Cipher
## Installation
1. Clone this repository:
```bash
git clone https://github.com/yourusername/vernam-cipher-react.git
```
2. Navigate into the project directory:
```bash
cd vernam-cipher-react
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
Visit `http://localhost:3000` in your browser to see the component in action.
## Usage
1. **Enter Text**: Type the text you want to encrypt into the "Enter Text" field.
2. **Generate Key**: Click the "Generate Key" button to generate a random key for encryption. The key is displayed in hexadecimal format.
3. **Encrypt**: Click the "Encrypt" button to encrypt the entered text using the generated key. The encrypted output will be displayed in hexadecimal.
4. **Decrypt**: If you have encrypted text, click the "Decrypt" button to decrypt the text back to its original form.
## Example Workflow
1. Enter a text, e.g., "Hello World".
2. Click "Generate Key" to generate a random key.
3. Click "Encrypt" to encrypt the text.
4. Click "Decrypt" to decrypt the text back to "Hello World".
## Styling
The component uses a simple, clean layout that you can customize in the accompanying `VernamCipher.css` file.
## Component Structure
- `inputText`: Holds the user input text to be encrypted.
- `key`: Holds the random key used for encryption and decryption.
- `keyDisplay`: Displays the key in hexadecimal format.
- `outputText`: Displays the output text (either encrypted or decrypted).
- `encryptedText`: Stores the encrypted text for decryption.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
- **Adrian Statescu**
Feel free to open issues or submit pull requests for any improvements or suggestions.