[Web App Base64] Show file body optionally resolves #8

standalone/src/main/resources/application.properties

@@ -1,3 +1,3 @@
 spring.application.name=web-app-base64-standalone
-server.port=8080
+server.port=19100
 server.servlet.context-path=/

web-app-frontend/package.json

@@ -11,22 +11,22 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "bootstrap": "^5.3.3",
     "hugeicons-react": "^0.3.0",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.5",
+    "react-bootstrap": "^2.10.9",
     "react-dom": "^18.3.1",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.3"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",
-    "html-webpack-plugin": "^5.6.0",
+    "html-webpack-plugin": "^5.6.3",
     "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.1",
-    "webpack": "^5.94.0",
+    "ts-loader": "^9.5.2",
+    "webpack": "^5.98.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "webpack-dev-server": "^5.2.0"
   }
 }

web-app-frontend/src/App.tsx

@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'hugeicons-react'
-import { EncodeDecodeText, EncodeDecodeFile } from './componenets';
-import { Container, FormLabel, FormSelect } from 'react-bootstrap';
+import { EncodeDecodeFile, EncodeDecodeText } from './componenets';
+import { Col, Container, FormLabel, FormSelect, Row } from 'react-bootstrap';
+
+type Mode = 'text' | 'file';
 
 const App: React.FC = () => {
-  const [mode, setMode] = useState('text');
-  const [encoding, setEncoding] = useState('UTF-8');
+  const [mode, setMode] = useState<Mode>('text');
 
   const renderModeComponent = () => {
     switch (mode) {
       case 'text':
-        return <EncodeDecodeText encoding={encoding} />;
+        return <EncodeDecodeText />;
       case 'file':
         return <EncodeDecodeFile />;
       default:
@@ -22,13 +23,20 @@ const App: React.FC = () => {
   return (
     <Container className="mt-5">
       <p className={'h2 mb-4'}>Base64 Encoder/Decoder</p>
-      <FormLabel htmlFor="modeSelect">Mode:</FormLabel>
-      <FormSelect
-        id="modeSelect"
-        value={mode} onChange={e => setMode(e.target.value)}>
-        <option value="text">Text Converter</option>
-        <option value="file">File Converter</option>
-      </FormSelect>
+      <Row>
+        <Col md={2}>
+          <FormLabel htmlFor="modeSelect">Mode</FormLabel>
+        </Col>
+        <Col md={5}>
+          <FormSelect
+            id="modeSelect"
+            value={mode}
+            onChange={e => setMode(e.target.value as Mode)}>
+            <option value="text">Text Converter</option>
+            <option value="file">File Converter</option>
+          </FormSelect>
+        </Col>
+      </Row>
       {renderModeComponent()}
     </Container>
   );

web-app-frontend/src/componenets/EncodeDecodeFile.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { base64ToFile, fileToBase64 } from '../utils/converters';
-import { Button, Col, Container, FormControl, FormGroup, FormLabel, InputGroup, Row } from 'react-bootstrap';
+import { Button, Col, Container, Form, InputGroup, Row } from 'react-bootstrap';
 import { Download04Icon } from 'hugeicons-react';
 
 export const EncodeDecodeFile = () => {
   const [base64, setBase64] = useState('');
   const [filename, setFilename] = useState('download.txt');
+  const [base64Disabled, setBase64Disabled] = useState(true);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
@@ -27,44 +28,67 @@ export const EncodeDecodeFile = () => {
   };
 
   return (
-    <Container className="mt-5">
+    <Container className="mt-3">
       <Row>
-        <Col md={4}>
-          <div className="mb-3">
-            <FormLabel htmlFor="fileNameInput">File</FormLabel>
-            <FormControl
-              id={'fileNameInput'}
+        <Row className="mb-3">
+          <Col md={2}>
+            <Form.Label htmlFor="fileInput">File</Form.Label>
+          </Col>
+          <Col md={5}>
+            <Form.Control
+              id={'fileInput'}
               type="file"
               onChange={handleFileChange} />
-          </div>
-          <div className="mb-3">
-            <FormLabel htmlFor="fileNameInput">Filename</FormLabel>
-            <InputGroup>
-              <FormControl
-                id={'fileNameInput'}
-                type="text"
-                value={filename}
-                placeholder="Filename"
-                onChange={(e) => setFilename(e.target.value)} />
-              <Button
-                variant="primary"
-                onClick={handleDownload}>
-                <Download04Icon />
-              </Button>
-            </InputGroup>
-          </div>
+          </Col>
+        </Row>
+      </Row>
+      <Row className="mb-3">
+        <Col md={2}>
+          <Form.Label htmlFor="fileNameInput">Filename</Form.Label>
         </Col>
-        <Col md={8}>
-          <FormLabel htmlFor="base64TextArea">Base64</FormLabel>
-          <textarea
-            id={'base64TextArea'}
-            className="form-control"
-            value={base64}
-            style={{ height: '320px' }}
-            onChange={it => setBase64(it.target.value)}
-            placeholder="Base64" />
+        <Col md={5}>
+          <InputGroup>
+            <Form.Control
+              id={'fileNameInput'}
+              type="text"
+              value={filename}
+              placeholder="Filename"
+              onChange={(e) => setFilename(e.target.value)} />
+            <Button
+              variant="primary"
+              title={'Download'}
+              onClick={handleDownload}
+            >
+              <Download04Icon />
+            </Button>
+          </InputGroup>
         </Col>
       </Row>
+      <Row className="mb-3">
+        <Col md={2}>
+          <Form.Label htmlFor="base64Disabled">Hide Base64 Content</Form.Label>
+        </Col>
+        <Col md={1}>
+        <Form.Check
+          id={'base64Disabled'}
+          type="checkbox"
+          checked={base64Disabled}
+          onChange={(e) => setBase64Disabled(e.target.checked)}
+        />
+        </Col>
+      </Row>
+      <Row className="mb-3">
+        <Form.Label htmlFor="base64TextArea">Base64</Form.Label>
+        <Form.Control
+          as="textarea"
+          id={'base64TextArea'}
+          value={base64Disabled ? '' : base64}
+          style={{ height: '320px' }}
+          onChange={it => setBase64(it.target.value)}
+          placeholder={base64Disabled ? 'Hidden' : 'Base64 content'}
+          disabled={base64Disabled}
+        />
+      </Row>
     </Container>
   );
 };

web-app-frontend/src/componenets/EncodeDecodeText.tsx

@@ -3,46 +3,44 @@ import { decodeBase64ToText, encodeTextToBase64 } from '../utils/converters';
 import { Col, Container, FormLabel, Row } from 'react-bootstrap';
 import Feedback from 'react-bootstrap/Feedback';
 
-export const EncodeDecodeText = ({ encoding }: { encoding: string }) => {
+export const EncodeDecodeText: React.FC = () => {
   const [base64Input, setBase64Input] = useState('');
   const [base64Error, setBase64Error] = useState<string | null>(null);
   const [textInput, setTextInput] = useState('');
   const [textError, setTextError] = useState<string | null>(null);
 
   const handleDecode = (base64: string) => {
-    console.log('handleDecode')
     if (base64 === base64Input) {
       return;
     }
     setTextError(null)
     setBase64Error(null)
     setBase64Input(base64)
     try {
-      const result = decodeBase64ToText(base64, encoding);
+      const result = decodeBase64ToText(base64);
       setTextInput(result);
     } catch (e) {
       setBase64Error('Invalid Base64 data: ' + e);
     }
   };
 
   const handleEncode = (text: string) => {
-    console.log('handleEncode')
     if (text === textInput) {
       return;
     }
     setTextError(null)
     setBase64Error(null)
     setTextInput(text)
     try {
-      const result = encodeTextToBase64(text, encoding);
+      const result = encodeTextToBase64(text);
       setBase64Input(result);
     } catch (e) {
       setBase64Input('Invalid text data');
     }
   };
 
   return (
-    <Container className="mt-5">
+    <Container className="mt-3">
       <Row>
         <Col md={12} lg={6}>
           <FormLabel htmlFor="plainTextArea">Plain text</FormLabel>

web-app-frontend/src/index.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
 const rootElement = document.getElementById('root');
 const root = ReactDOM.createRoot(rootElement!);
-root.render(<App />);
+root.render(<StrictMode>
+    <App />
+  </StrictMode>
+);

web-app-frontend/src/utils/converters.ts

@@ -1,10 +1,10 @@
-export const encodeTextToBase64 = (text: string, encoding: string): string => {
+export const encodeTextToBase64 = (text: string): string => {
   const encoder = new TextEncoder();
   const encoded = encoder.encode(text);
   return btoa(String.fromCharCode(...encoded));
 };
 
-export const decodeBase64ToText = (base64: string, encoding: string): string => {
+export const decodeBase64ToText = (base64: string): string => {
   const decoded = atob(base64);
   const decoder = new TextDecoder();
   return decoder.decode(Uint8Array.from(decoded.split(''), c => c.charCodeAt(0)));