Merge pull request #7 from fosslife/dev

Dev

package.json

@@ -24,6 +24,7 @@
     "crypto-js": "^4.1.1",
     "framer-motion": "^5",
     "generate-password-ts": "^1.6.3",
+    "jose": "^4.5.0",
     "lowdb": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.1.3"
+version = "0.1.4"
 description = "Developer tools desktop application"
 authors = [ "Sparkenstein" ]
 license = "MIT"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "dev-tools",
-    "version": "0.1.3"
+    "version": "0.1.4"
   },
   "build": {
     "distDir": "../dist",
@@ -13,7 +13,7 @@
     "bundle": {
       "active": true,
       "targets": "all",
-      "identifier": "com.fosslife.devtools",
+      "identifier": "devtools",
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",

src/App.tsx

@@ -3,6 +3,7 @@ import loadable from "@loadable/component";
 import { useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
 
+// import { JWT } from "./Features/jwt/JWT";
 import { Navbar } from "./Layout/Navbar";
 import { db } from "./utils";
 
@@ -11,6 +12,7 @@ const Welcome = loadable(() => import("./Components/Welcome"));
 const Hash = loadable(() => import("./Features/hash/Hash"));
 const JsonFormatter = loadable(() => import("./Features/Json/JsonFormatter"));
 const Random = loadable(() => import("./Features/random/Random"));
+const JWT = loadable(() => import("./Features/jwt/JWT"));
 
 function App() {
   useEffect(() => {
@@ -36,6 +38,7 @@ function App() {
           <Route path="/json-formatter" element={<JsonFormatter />}></Route>
           <Route path="/hash" element={<Hash />}></Route>
           <Route path="/random" element={<Random />}></Route>
+          <Route path="/jwt" element={<JWT />}></Route>
         </Routes>
       </Flex>
     </Flex>

src/Features/jwt/JWT.tsx

@@ -0,0 +1,61 @@
+import { Flex, Textarea } from "@chakra-ui/react";
+import { decodeJwt, decodeProtectedHeader } from "jose";
+import { useEffect, useState } from "react";
+
+// const token = test token:
+//   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
+
+const JWT = () => {
+  const [jwt, setJwt] = useState({
+    token: "",
+    decoded: {},
+    headers: {},
+  });
+
+  useEffect(() => {
+    if (jwt.token) {
+      let decoded = decodeJwt(jwt.token);
+      let headers = decodeProtectedHeader(jwt.token);
+      setJwt({ ...jwt, decoded: decoded, headers: headers });
+    }
+  }, [jwt]);
+
+  return (
+    <Flex
+      h="full"
+      w="100%"
+      gap={3}
+      alignSelf={"start"}
+      flexDir="column"
+      sx={{
+        "& div": {
+          maxWidth: "98%",
+        },
+      }}
+    >
+      <Textarea
+        onChange={(e) => setJwt({ ...jwt, token: e.target.value })}
+        resize={"none"}
+        placeholder="Enter JWT"
+      />
+      Payload:
+      <Textarea
+        height={60}
+        readOnly
+        resize={"none"}
+        value={JSON.stringify(jwt.decoded, null, 2)}
+      />
+      Headers:
+      <Textarea
+        height={40}
+        readOnly
+        resize={"none"}
+        value={JSON.stringify(jwt.headers, null, 2)}
+      />
+    </Flex>
+  );
+};
+
+export default JWT;
+
+// TODO: add token verify? any other features?

src/Layout/Navbar.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Icon, Input, Text } from "@chakra-ui/react";
 import { FaRandom } from "react-icons/fa";
 import { FiHash } from "react-icons/fi";
 import { MdAnchor } from "react-icons/md";
+import { SiJsonwebtokens } from "react-icons/si";
 
 import { Card } from "../Components/Card";
 
@@ -41,6 +42,13 @@ export const Navbar = () => {
           <Text>Random Text</Text>
         </Card>
       </Box>
+
+      <Box mt="1.5">
+        <Card linkto="/jwt">
+          <Icon as={SiJsonwebtokens}></Icon>
+          <Text>JWT tools</Text>
+        </Card>
+      </Box>
     </Flex>
   );
 };

src/utils/db.ts

@@ -9,7 +9,6 @@ const getConfFile = async () => {
   return path.join(await getAppDir(), "conf.json");
 };
 
-//TODO: Json parsing strigify is slow. look for possible alternatives - p5 since conf file will be really small
 class CustomAdaptor {
   // Optional: your adapter can take arguments
   constructor() {}
@@ -34,11 +33,49 @@ class CustomAdaptor {
   }
 }
 
+const dir = await path.appDir();
+try {
+  await fs.readDir(dir);
+  console.log("dir exists");
+  try {
+    await fs.readTextFile(await path.join(dir, "conf.json"));
+  } catch (e) {
+    console.error("conf file doesnt exist, creating one", e);
+    await fs.writeFile({
+      path: `${dir}${path.sep}conf.json`,
+      contents: "{}",
+    });
+  }
+} catch {
+  console.log("conf dir doesn't exist, creating one");
+  await fs.createDir(dir);
+  await fs.writeFile({
+    path: `${dir}${path.sep}conf.json`,
+    contents: "{}",
+  });
+}
+
 const adapter = new CustomAdaptor();
 // TODO: it's possible to type this.
 const db = new Low<any>(adapter);
 
 // Read data from JSON file, this will set db.data content
 await db.read();
 
+console.log("DB:", db.data);
+
+if (!db.data || Object.keys(db.data).length === 0) {
+  // conf file structure
+  db.data = {
+    json: {
+      editor: "",
+      diff: "",
+    },
+    hash: {
+      editor: "",
+    },
+  };
+  db.write();
+}
+
 export { db };

vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { visualizer } from "rollup-plugin-visualizer";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({

yarn.lock

@@ -3758,6 +3758,11 @@ isurl@^1.0.0-alpha5:
     has-to-string-tag-x "^1.2.0"
     is-object "^1.0.1"
 
+jose@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-4.5.0.tgz#92829d8cf846351eb55aaaf94f252fb1d191f2d5"
+  integrity sha512-GFcVFQwYQKbQTUOo2JlpFGXTkgBw26uzDsRMD2q1WgSKNSnpKS9Ug7bdQ8dS+p4sZHNH6iRPu6WK2jLIjspaMA==
+
 js-crypto-env@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/js-crypto-env/-/js-crypto-env-1.0.4.tgz#2be3b0987124bfaf094aadd3c9d91a56aedb0f2a"