Add jwt decode tool

mockoon · Aug 25, 2024 · ff81891 · ff81891
1 parent 04b347a
commit ff81891
Show file tree

Hide file tree

Showing 18 changed files with 453 additions and 153 deletions.
diff --git a/components/editors/base-editor.tsx b/components/editors/base-editor.tsx
@@ -20,6 +20,7 @@ const BaseEditor: FunctionComponent<{
   value: string;
   lang: string;
   showValidMsg?: boolean;
+  showErrors?: boolean;
   hideGoToLine?: boolean;
   editorExtensions: Extension[];
   onErrorChange?: (value: string, view?: ViewUpdate) => parseError;
@@ -28,13 +29,15 @@ const BaseEditor: FunctionComponent<{
   value,
   lang,
   showValidMsg,
+  showErrors,
   editorExtensions,
   hideGoToLine,
   onErrorChange,
   onValueChange
 }) {
   const [error, setError] = useState<parseError>(null);
   const editor = useRef<ReactCodeMirrorRef>();
+  showErrors = showErrors ?? true;
 
   const scrollDocToView = (error: parseError) => {
     if (!editor?.current?.state?.doc) {
@@ -53,7 +56,7 @@ const BaseEditor: FunctionComponent<{
   };
 
   return (
-    <div className='d-flex flex-column code-editor-container'>
+    <div className='d-flex flex-column h-100'>
       <CodeMirror
         theme={nordInit({
           settings: {
@@ -83,7 +86,7 @@ const BaseEditor: FunctionComponent<{
           }
         }}
       ></CodeMirror>
-      {error && (
+      {error && showErrors && (
         <div className='bg-danger-subtle border-start border-danger border-4 p-4 mt-4 position-relative d-flex justify-content-between'>
           <div
             style={{

diff --git a/components/editors/json-editor.tsx b/components/editors/json-editor.tsx
@@ -26,6 +26,7 @@ function getErrorPosition(
 const JsonEditor: FunctionComponent<{
   value: string;
   showValidMsg?: boolean;
+  showErrors?: boolean;
   onValueChange?: (value: string) => void;
 }> = function (props) {
   return (

diff --git a/components/editors/text-editor.tsx b/components/editors/text-editor.tsx
@@ -5,6 +5,11 @@ const TextEditor: FunctionComponent<{
   value: string;
   showValidMsg?: boolean;
   onValueChange?: (value: string) => void;
+  onErrorChange?: (
+    currentValue: string,
+    viewUpdate: any
+  ) => { message: string };
+  hideGoToLine?: boolean;
 }> = function (props) {
   return <BaseEditor lang='text' editorExtensions={[]} {...props} />;
 };

diff --git a/pages/tools/base64-encode-decode.tsx b/pages/tools/base64-encode-decode.tsx
@@ -25,27 +25,31 @@ const Base64EncodeDecode: FunctionComponent = function () {
       <section className='pb-5 pb-lg-10'>
         <div className='container'>
           <div className='code-editor-layout-dual'>
-            <TextEditor
-              value={text}
-              onValueChange={(value) => {
-                try {
-                  setBase64(bytesToBase64(new TextEncoder().encode(value)));
-                } catch (error) {}
-              }}
-            />
+            <div className='code-editor-container'>
+              <TextEditor
+                value={text}
+                onValueChange={(value) => {
+                  try {
+                    setBase64(bytesToBase64(new TextEncoder().encode(value)));
+                  } catch (error) {}
+                }}
+              />
+            </div>
 
             <div className='code-editor-sync m-2 fs-1 text-gray-600 align-self-center text-center'>
               <i className='icon-sync'></i>
             </div>
 
-            <Base64Editor
-              value={base64}
-              onValueChange={(value) => {
-                try {
-                  setText(new TextDecoder().decode(base64ToBytes(value)));
-                } catch (error) {}
-              }}
-            />
+            <div className='code-editor-container'>
+              <Base64Editor
+                value={base64}
+                onValueChange={(value) => {
+                  try {
+                    setText(new TextDecoder().decode(base64ToBytes(value)));
+                  } catch (error) {}
+                }}
+              />
+            </div>
           </div>
         </div>
       </section>

diff --git a/pages/tools/csv-parser-json-converter.tsx b/pages/tools/csv-parser-json-converter.tsx
@@ -100,54 +100,56 @@ Alice,35,Chicago,Data Scientist,Amazon,Seattle,345-678-9012`;
       <section className='pb-5 pb-lg-10'>
         <div className='container'>
           <div className='code-editor-layout-dual'>
-            <TextEditor
-              value={initialValue}
-              onValueChange={(csv) => {
-                let lines = [];
-                let headers = [];
-
-                csv.split('\n').forEach((line, index) => {
-                  if (!line.trim()) {
-                    return;
-                  }
-
-                  if (index === 0) {
-                    headers = line.split(',');
-
-                    return;
-                  } else {
-                    const items = line.split(',');
-
-                    lines.push(items);
-                  }
-                });
-
-                setParsedHeaders(headers);
-                setParsedLines(lines);
-
-                // Convert to JSON
-                const json = [];
-                lines.forEach((line) => {
-                  const obj = {};
-
-                  headers.forEach((header, index) => {
-                    obj[header] = line[index];
+            <div className='code-editor-container'>
+              <TextEditor
+                value={initialValue}
+                onValueChange={(csv) => {
+                  let lines = [];
+                  let headers = [];
+
+                  csv.split('\n').forEach((line, index) => {
+                    if (!line.trim()) {
+                      return;
+                    }
+
+                    if (index === 0) {
+                      headers = line.split(',');
+
+                      return;
+                    } else {
+                      const items = line.split(',');
+
+                      lines.push(items);
+                    }
                   });
 
-                  json.push(obj);
-                });
+                  setParsedHeaders(headers);
+                  setParsedLines(lines);
 
-                console.log(json);
+                  // Convert to JSON
+                  const json = [];
+                  lines.forEach((line) => {
+                    const obj = {};
 
-                setJsonContent(JSON.stringify(json, null, 2));
-              }}
-            />
+                    headers.forEach((header, index) => {
+                      obj[header] = line[index];
+                    });
+
+                    json.push(obj);
+                  });
+
+                  setJsonContent(JSON.stringify(json, null, 2));
+                }}
+              />
+            </div>
 
             <div className='code-editor-sync m-2 fs-1 text-gray-600 align-self-center text-center'>
               <i className='icon-sync'></i>
             </div>
 
-            <JsonEditor value={jsonContent} />
+            <div className='code-editor-container'>
+              <JsonEditor value={jsonContent} />
+            </div>
           </div>
 
           <div className='table-responsive mt-8'>

diff --git a/pages/tools/http-headers-analyzer.tsx b/pages/tools/http-headers-analyzer.tsx
@@ -593,25 +593,27 @@ Accept-Language: en-US`;
       />
       <section className='pb-5 pb-lg-10'>
         <div className='container'>
-          <TextEditor
-            value={initialValue}
-            onValueChange={(value) => {
-              setHeaders(
-                value
-                  .split('\n')
-                  .map((header) => {
-                    if (!header) {
-                      return null;
-                    }
+          <div className='code-editor-container'>
+            <TextEditor
+              value={initialValue}
+              onValueChange={(value) => {
+                setHeaders(
+                  value
+                    .split('\n')
+                    .map((header) => {
+                      if (!header) {
+                        return null;
+                      }
 
-                    const [name] = header.split(':');
+                      const [name] = header.split(':');
 
-                    return name.trim();
-                  })
-                  .filter(Boolean)
-              );
-            }}
-          />
+                      return name.trim();
+                    })
+                    .filter(Boolean)
+                );
+              }}
+            />
+          </div>
           <div className='table-responsive'>
             <table className='table table-striped'>
               <thead>

diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
@@ -106,6 +106,18 @@ const tools = [
       }
     ],
     imageSrc: '/images/illustrations/csv-parser-json-converter.svg'
+  },
+  {
+    title: 'Online JWT decoder',
+    description:
+      'Decode your JWT tokens online and extract the header and payload data',
+    links: [
+      {
+        src: '/tools/jwt-decode',
+        text: 'Decode'
+      }
+    ],
+    imageSrc: '/images/illustrations/jwt-decode.svg'
   }
 ];
 

diff --git a/pages/tools/json-formatter-beautifier.tsx b/pages/tools/json-formatter-beautifier.tsx
@@ -83,22 +83,26 @@ const JsonFormatterBeautifier: FunctionComponent = function () {
       <section className='pb-5 pb-lg-10'>
         <div className='container'>
           <div className='code-editor-layout-dual'>
-            <JsonEditor
-              value={originalJsonContent}
-              onValueChange={(value) => {
-                try {
-                  setFormattedJsonContent(
-                    format(value, spacesOrTabs, numberOfSpaces)
-                  );
-                } catch (error) {}
-              }}
-            />
+            <div className='code-editor-container'>
+              <JsonEditor
+                value={originalJsonContent}
+                onValueChange={(value) => {
+                  try {
+                    setFormattedJsonContent(
+                      format(value, spacesOrTabs, numberOfSpaces)
+                    );
+                  } catch (error) {}
+                }}
+              />
+            </div>
 
             <div className='code-editor-sync m-2 fs-1 text-gray-600 align-self-center text-center'>
               <i className='icon-sync'></i>
             </div>
 
-            <JsonEditor value={formattedJsonContent} />
+            <div className='code-editor-container'>
+              <JsonEditor value={formattedJsonContent} />
+            </div>
           </div>
           <div className='d-flex mt-4 align-items-center'>
             <div
@@ -122,7 +126,7 @@ const JsonFormatterBeautifier: FunctionComponent = function () {
                   } catch (error) {}
                 }}
               />
-              <label className='btn btn-outline-dark' htmlFor='spaces'>
+              <label className='btn btn-outline-dark me-2' htmlFor='spaces'>
                 Spaces
               </label>
               <input

diff --git a/pages/tools/json-object-path-evaluator.tsx b/pages/tools/json-object-path-evaluator.tsx
@@ -96,7 +96,7 @@ const JsonPathPlayground: FunctionComponent = function () {
         </div>
         <div className='container'>
           <div className='code-editor-layout-dual'>
-            <div>
+            <div className='code-editor-container'>
               <JsonEditor
                 value={jsonContent}
                 onValueChange={(value) => {
@@ -123,7 +123,9 @@ const JsonPathPlayground: FunctionComponent = function () {
               <i className='icon-arrow_forward'></i>
             </div>
 
-            <JsonEditor value={extractedContent} />
+            <div className='code-editor-container'>
+              <JsonEditor value={extractedContent} />
+            </div>
           </div>
         </div>
       </section>

diff --git a/pages/tools/json-to-yaml.tsx b/pages/tools/json-to-yaml.tsx
@@ -67,28 +67,32 @@ const JsonToYaml: FunctionComponent = function () {
       <section className='pb-5 pb-lg-10'>
         <div className='container'>
           <div className='code-editor-layout-dual'>
-            <JsonEditor
-              value={jsonContent}
-              onValueChange={(value) => {
-                try {
-                  const obj = JSON.parse(value);
-                  setYamlContent(jsyaml.dump(obj));
-                } catch (error) {}
-              }}
-            />
+            <div className='code-editor-container'>
+              <JsonEditor
+                value={jsonContent}
+                onValueChange={(value) => {
+                  try {
+                    const obj = JSON.parse(value);
+                    setYamlContent(jsyaml.dump(obj));
+                  } catch (error) {}
+                }}
+              />
+            </div>
 
             <div className='code-editor-sync m-2 fs-1 text-gray-600 align-self-center text-center'>
               <i className='icon-sync'></i>
             </div>
 
-            <YamlEditor
-              value={yamlContent}
-              onValueChange={(value: string) => {
-                try {
-                  setJsonContent(JSON.stringify(jsyaml.load(value), null, 2));
-                } catch (error) {}
-              }}
-            />
+            <div className='code-editor-container'>
+              <YamlEditor
+                value={yamlContent}
+                onValueChange={(value: string) => {
+                  try {
+                    setJsonContent(JSON.stringify(jsyaml.load(value), null, 2));
+                  } catch (error) {}
+                }}
+              />
+            </div>
           </div>
         </div>
       </section>