Replace crypto-browserify with simple js-md5

Author: ml-evs

webapp/cypress/component/UserBubbleLoginTest.cy.jsx

@@ -1,11 +1,9 @@
 import { createStore } from "vuex";
 import UserBubbleLogin from "@/components/UserBubbleLogin.vue";
 import NotificationDot from "@/components/NotificationDot.vue";
-import crypto from "crypto";
+import { md5 } from "js-md5";
 
 describe("UserBubbleLogin", () => {
-  const md5 = (value) => crypto.createHash("md5").update(value).digest("hex");
-
   const creator = {
     contact_email: "[email protected]",
     display_name: "Test User",

webapp/cypress/component/UserBubbleTest.cy.jsx

@@ -1,9 +1,7 @@
 import UserBubble from "@/components/UserBubble.vue";
-import crypto from "crypto";
+import { md5 } from "js-md5";
 
 describe("UserBubble", () => {
-  const md5 = (value) => crypto.createHash("md5").update(value).digest("hex");
-
   const creator = {
     contact_email: "[email protected]",
     display_name: "Test User",

webapp/package.json

@@ -25,7 +25,6 @@
     "@vueuse/components": "^10.7.2",
     "bootstrap": "^4.5.3",
     "buffer": "^6.0.3",
-    "crypto-browserify": "^3.12.0",
     "cytoscape": "^3.23.0",
     "cytoscape-cola": "^2.5.1",
     "cytoscape-elk": "^2.1.0",
@@ -35,6 +34,7 @@
     "highlight.js": "^11.7.0",
     "markdown-it": "^13.0.1",
     "mermaid": "^10.1.0",
+    "js-md5": "^0.8.3",
     "primeicons": "^7.0.0",
     "primevue": "^4.0.0",
     "process": "^0.11.10",

webapp/src/components/UserBubble.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import crypto from "crypto";
+import { md5 } from "js-md5";
 import { GRAVATAR_STYLE } from "@/resources.js";
 export default {
   props: {
@@ -38,7 +38,7 @@ export default {
   methods: {
     md5(value) {
       // Returns the MD5 hash of the given string.
-      return crypto.createHash("md5").update(value).digest("hex");
+      return md5(value);
     },
   },
 };

webapp/src/components/UserBubbleLogin.vue

@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import crypto from "crypto";
 import { GRAVATAR_STYLE } from "@/resources.js";
 
 import NotificationDot from "./NotificationDot.vue";
 
 import { getUsersList } from "@/server_fetch_utils.js";
+import { md5 } from "js-md5";
 
 export default {
   components: {
@@ -57,7 +57,7 @@ export default {
   methods: {
     md5(value) {
       // Returns the MD5 hash of the given string.
-      return crypto.createHash("md5").update(value).digest("hex");
+      return md5(value);
     },
   },
 };

webapp/vue.config.js

@@ -4,7 +4,6 @@ module.exports = {
   transpileDependencies: ["mermaid"],
   configureWebpack: (config) => {
     config.resolve.fallback = {
-      crypto: require.resolve("crypto-browserify"),
       stream: require.resolve("stream-browserify"),
       process: require.resolve("process/browser"),
       buffer: require.resolve("buffer/"),