Merge pull request #19 from janeumnn/develop

Merge "develop" into "main"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openssl-webapp",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "homepage": "https://janeumnn.github.io/openssl-webapp",
   "dependencies": {

src/components/app/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Card } from 'react-bootstrap';
 import CardControl from '../card-control/CardControl';
 import CommandLine from '../../components/command-line/CommandLine';
@@ -87,7 +87,19 @@ function App() {
     }
   };
 
+  const getAvailableCiphers = useCallback(async () => {
+    const ciphers = await command.getCiphers();
+    dispatch({ type: 'SET_AVAILABLE_CIPHERS', ciphers: ciphers });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const getAvailableDigests = useCallback(async () => {
+    const digests = await command.getDigests();
+    dispatch({ type: 'SET_AVAILABLE_DIGEST', digests: digests });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
+    getAvailableCiphers();
+    getAvailableDigests();
     const result = command.resultAsObservable.subscribe((value) => {
       if (value) {
         dispatch({ type: 'SET_LOADING', isLoading: false });

src/components/card-control/components/tab-digest/TabDigest.js

@@ -6,26 +6,6 @@ import { useTranslation } from 'react-i18next';
 
 import './TabDigest.css';
 
-const ALGORITHMS = [
-  'blake2s256',
-  'blake2b512',
-  'md5',
-  'sha1',
-  'sha3-224',
-  'sha3-256',
-  'sha3-384',
-  'sha3-512',
-  'sha224',
-  'sha384',
-  'sha256',
-  'sha512',
-  'sha512-224',
-  'sha512-256',
-  'shake128',
-  'shake256',
-  'sm3',
-];
-
 function TabDigest({ runCommand }) {
   const { t } = useTranslation('translation');
   const { state, dispatch } = useStore();
@@ -35,7 +15,7 @@ function TabDigest({ runCommand }) {
     fileOutput: false,
   });
   const [dgst, setDgst] = useState({
-    algorithm: ALGORITHMS[0],
+    algorithm: '',
     out: false,
     outFile: '',
     text: true,
@@ -55,6 +35,15 @@ function TabDigest({ runCommand }) {
     });
   }, [state.files]);
 
+  useEffect(() => {
+    setDgst((prev) => {
+      return {
+        ...prev,
+        algorithm: state.availableDigests[0],
+      };
+    });
+  }, [state.availableDigests]);
+
   const set = (key) => (event) => {
     const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
     switch (key) {
@@ -194,7 +183,7 @@ function TabDigest({ runCommand }) {
         <Form.Group as={Col} md={5} controlId="dgst-algorithm">
           <Form.Label className="mb-2">{t('tabDigest.hashFunction')}</Form.Label>
           <Form.Control as="select" value={dgst.algorithm} onChange={set('algorithm')} custom>
-            {ALGORITHMS.map((algorithm) => (
+            {state.availableDigests.map((algorithm) => (
               <option key={algorithm}>{algorithm}</option>
             ))}
           </Form.Control>

src/components/card-control/components/tab-encryption/TabEncryption.js

@@ -15,30 +15,6 @@ import { useTranslation } from 'react-i18next';
 
 import './TabEncryption.css';
 
-const CIPHERS = [
-  'aes-128-cbc',
-  'aes-192-cbc',
-  'aes-256-cbc',
-  'aria-128-cbc',
-  'aria-192-cbc',
-  'aria-256-cbc',
-  'bf',
-  'cast-cbc',
-  'cast5-cbc',
-  'camellia-128-cbc',
-  'camellia-192-cbc',
-  'camellia-256-cbc',
-  'des',
-  'des-ede',
-  'des-ede3',
-  'des3',
-  'desx',
-  'rc2',
-  'rc4',
-  'seed',
-  'sm4',
-];
-
 function TabEncryption({ runCommand }) {
   const { t } = useTranslation('translation');
   const { state, dispatch } = useStore();
@@ -52,7 +28,7 @@ function TabEncryption({ runCommand }) {
   const [enc, setEnc] = useState({
     e: true,
     d: false,
-    cipher: CIPHERS[0],
+    cipher: '',
     in: false,
     inFile: '',
     out: false,
@@ -83,6 +59,15 @@ function TabEncryption({ runCommand }) {
     });
   }, [state.files]);
 
+  useEffect(() => {
+    setEnc((prev) => {
+      return {
+        ...prev,
+        cipher: state.availableCiphers[0],
+      };
+    });
+  }, [state.availableCiphers]);
+
   const set = (key) => (event) => {
     const value =
       event.target.type === 'checkbox' || event.target.type === 'radio'
@@ -320,7 +305,7 @@ function TabEncryption({ runCommand }) {
         <Form.Group as={Col} md={5} controlId="enc-cipher">
           <Form.Label className="mb-2">{t('tabEncryption.cipher')}</Form.Label>
           <Form.Control as="select" value={enc.cipher} onChange={set('cipher')} custom>
-            {CIPHERS.map((cipher) => (
+            {state.availableCiphers.map((cipher) => (
               <option key={cipher}>{cipher}</option>
             ))}
           </Form.Control>

src/contexts/store.js

@@ -5,6 +5,8 @@ const initialState = {
   isLoading: false,
   command: '',
   files: [],
+  availableCiphers: [],
+  availableDigests: [],
 };
 
 const reducer = (state, action) => {
@@ -45,6 +47,18 @@ const reducer = (state, action) => {
         files: state.files.filter((item) => item !== action.item),
       };
 
+    case 'SET_AVAILABLE_CIPHERS':
+      return {
+        ...state,
+        availableCiphers: action.ciphers,
+      };
+
+    case 'SET_AVAILABLE_DIGEST':
+      return {
+        ...state,
+        availableDigests: action.digests,
+      };
+
     default:
       throw new Error(`Unhandled action type: ${action.type}`);
   }