Release!

README.md

@@ -1,76 +1,27 @@
-# Replugged plugin template
+# Invisible Chat
 
-[Use this template](https://github.com/replugged-org/plugin-template/generate)
-
-## Prerequisites
-
-- NodeJS
-- pnpm: `npm i -g pnpm`
-- [Replugged](https://github.com/replugged-org/replugged#installation)
+Encrypt your Messages with the power of Stegcloak
 
 ## Install
 
-1. [Create a copy of this template](https://github.com/replugged-org/plugin-template/generate)
-2. Clone your new repository and cd into it
-3. Install dependencies: `pnpm i`
-4. Build the plugin: `pnpm run build`
-5. Reload Discord to load the plugin
-
-The unmodified plugin will log "Typing prevented" in the console when you start typing in any
-channel.
-
-## Development
-
-The code must be rebuilt after every change. You can use `pnpm run watch` to automatically rebuild
-the plugin when you save a file.
-
-Building using the script above will automatically install the updated version of the plugin in
-Replugged. You can find the plugin folder directories for your OS
-[here](https://github.com/replugged-org/replugged#installing-plugins-and-themes).  
-If you don't want to install the updated version, set the `NO_INSTALL` environment variable with any
-value: `NO_INSTALL=true pnpm run build`.
-
-You can format the code by running `pnpm run lint:fix`. The repository includes VSCode settings to
-automatically format on save.
+1. Go to "Releases"
+2. Download the file "dev.sammcheese.InvisibleChat.asar"
+3. Move the file to your plugin folder
 
-API docs coming soon(tm)
+## Usage
 
-## Distribution
+Right now, you have to use the shortcut (CTRL + J) to toggle Encryption.
 
-For plugin distribution, Replugged uses bundled `.asar` files. Bundled plugins can be installed to
-the same plugin folder as listed above.
+Once toggled, you need to send a message in this format:
 
-This repository includes a GitHub workflow to compile and publish a release with the asar file. To
-trigger it, create a tag with the version number preceded by a `v` (e.g. `v1.0.0`) and push it to
-GitHub:
-
-```sh
-git tag v1.0.0
-git push --tags
+```
+this is the cover message *this will be hidden*
 ```
 
-The Replugged updater (coming soon™) will automatically check for updates on the repository
-specified in the manifest. Make sure to update it to point to the correct repository!
-
-You can manually compile the asar file with `pnpm run build-and-bundle`.
-
-## Troubleshooting
-
-### Make sure Replugged is installed and running.
-
-Open Discord settings and make sure the Replugged tab is there. If not,
-[follow these instructions](https://github.com/replugged-org/replugged#installation) to install
-Replugged.
-
-### Make sure the plugin is installed.
+Decryption works by pressing the (currently) Transparent button in the Minipopover
 
-Check the [plugin folder](https://github.com/replugged-org/replugged#installing-plugins-and-themes)
-for your OS and make sure the plugin is there. If not, make sure you have built the plugin and that
-the `NO_INSTALL` environment variable is not set.  
-You can run `replugged.plugins.list().then(console.log)` in the console to see a list of plugins in
-the plugin folder.
+Encrypted messages look like 🔒this🔒
 
-### Make sure the plugin is running.
+## Credits
 
-Check the console for a message saying `[Replugged:Plugin:Plugin Template] Plugin started`. If you
-don't see it, try reloading Discord. If that doesn't work, check for any errors in the console.
+None of this would have been possible without [0x41c](https://github.com/0x41c)

manifest.json

@@ -7,7 +7,7 @@
     "discordID": "372148345894076416",
     "github": "SammCheese"
   },
-  "version": "0.1.0",
+  "version": "1.0.0",
   "updater": {
     "type": "github",
     "id": "SammCheese/invisible-chat"

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "plugin-template",
+  "name": "Invisible Chat",
   "version": "1.0.0",
-  "description": "A plugin template",
+  "description": "Encrypt your Discord Messages",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -34,7 +34,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.31.10",
     "prettier": "^2.8.1",
-    "replugged": "4.0.0-beta0.15",
+    "replugged": "4.0.0-beta0.17",
     "tsx": "^3.10.3",
     "typescript": "^4.8.4"
   },

src/assets/chatbarLock.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { buildEncModal } from "../components/EncryptionModal";
+
+export const chatbarLock = React.createElement(
+  "svg",
+  {
+    key: "Encrypt Message",
+    fill: "#EBEBEB",
+    width: "30",
+    height: "30",
+    viewBox: "0 0 64 64",
+    style: { marginTop: 7 },
+    onClick: () => buildEncModal(),
+  },
+  React.createElement("path", {
+    d: "M 32 9 C 24.832 9 19 14.832 19 22 L 19 27.347656 C 16.670659 28.171862 15 30.388126 15 33 L 15 49 C 15 52.314 17.686 55 21 55 L 43 55 C 46.314 55 49 52.314 49 49 L 49 33 C 49 30.388126 47.329341 28.171862 45 27.347656 L 45 22 C 45 14.832 39.168 9 32 9 z M 32 13 C 36.963 13 41 17.038 41 22 L 41 27 L 23 27 L 23 22 C 23 17.038 27.037 13 32 13 z",
+  }),
+);

src/assets/popoverIcon.tsx

@@ -1,17 +1,21 @@
 import React from "react";
 
-export const popoverIcon = () => {
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 448 512"
-    width={24}
-    height={24}
-    fill="#000000"
-    className="icon-1zidb7"
-    role="img">
-    <path
-      fill="#000000"
-      d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"
-    />
+/*export const popoverIcon = () => {
+  <svg viewBox="0 0 64 64" width={24} height={24} fill="#EBEBEB">
+    <path d="M 32 9 C 24.832 9 19 14.832 19 22 L 19 27.347656 C 16.670659 28.171862 15 30.388126 15 33 L 15 49 C 15 52.314 17.686 55 21 55 L 43 55 C 46.314 55 49 52.314 49 49 L 49 33 C 49 30.388126 47.329341 28.171862 45 27.347656 L 45 22 C 45 14.832 39.168 9 32 9 z M 32 13 C 36.963 13 41 17.038 41 22 L 41 27 L 23 27 L 23 22 C 23 17.038 27.037 13 32 13 z" />
   </svg>;
-};
+};*/
+
+export const popoverIcon = () =>
+  React.createElement(
+    "svg",
+    {
+      fill: "#EBEBEB",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 64 64",
+    },
+    React.createElement("path", {
+      d: "M 32 9 C 24.832 9 19 14.832 19 22 L 19 27.347656 C 16.670659 28.171862 15 30.388126 15 33 L 15 49 C 15 52.314 17.686 55 21 55 L 43 55 C 46.314 55 49 52.314 49 49 L 49 33 C 49 30.388126 47.329341 28.171862 45 27.347656 L 45 22 C 45 14.832 39.168 9 32 9 z M 32 13 C 36.963 13 41 17.038 41 22 L 41 27 L 23 27 L 23 22 C 23 17.038 27.037 13 32 13 z",
+    }),
+  );

src/components/DecryptionModal.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { webpack } from "replugged";
+import {
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalRoot,
+  ModalSize,
+  closeModal,
+  openModal,
+} from "./Modals";
+
+import { buildEmbed, decrypt } from "../index";
+
+let TextInput: any;
+let Button: any;
+setTimeout(() => {
+  TextInput = webpack.getByProps(["defaultProps", "Sizes", "contextType"]);
+  Button = webpack.getByProps(["Hovers", "Looks", "Sizes"]);
+}, 1500);
+
+export function buildDecModal(msg: any) {
+  let secret: string = msg?.content;
+  let password: string;
+  const s = openModal!((props = msg) => (
+    <ModalRoot {...props} size={ModalSize.MEDIUM}>
+      <ModalHeader>
+        <div style={{ color: "gray", fontSize: "30px" }}>Decrypt Message</div>
+      </ModalHeader>
+      <ModalContent>
+        <div style={{ color: "gray" }}>Secret</div>
+        <TextInput defaultValue={msg.content} disabled={true}></TextInput>
+        <div style={{ color: "gray" }}>Password</div>
+        <TextInput
+          onChange={(e: string) => {
+            password = e;
+          }}></TextInput>
+      </ModalContent>
+      <ModalFooter>
+        <Button
+          onClick={() => {
+            const toSend = decrypt(secret, password);
+            if (!toSend) return;
+            buildEmbed(msg, toSend);
+            // @ts-ignore
+            closeModal(s);
+          }}>
+          Decrypt
+        </Button>
+        <Button
+          style={{ left: 15, position: "absolute" }}
+          onClick={() => {
+            // @ts-ignore
+            closeModal(s);
+          }}>
+          Cancel
+        </Button>
+      </ModalFooter>
+    </ModalRoot>
+  ));
+}

src/components/EncryptionModal.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { webpack } from "replugged";
+import {
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalRoot,
+  ModalSize,
+  closeModal,
+  openModal,
+} from "./Modals";
+
+import { encrypt } from "../index";
+
+let TextInput: any;
+let Button: any;
+setTimeout(() => {
+  TextInput = webpack.getByProps(["defaultProps", "Sizes", "contextType"]);
+  Button = webpack.getByProps(["Hovers", "Looks", "Sizes"]);
+}, 1500);
+
+export function buildEncModal() {
+  let secret: string;
+  let cover: string;
+  let password: string;
+  const s = openModal!((props) => (
+    <ModalRoot {...props} size={ModalSize.MEDIUM}>
+      <ModalHeader>
+        <div style={{ color: "gray", fontSize: "30px" }}>Encrypt Message</div>
+      </ModalHeader>
+      <ModalContent>
+        <div style={{ color: "gray" }}>Secret</div>
+        <TextInput
+          onChange={(e: string) => {
+            secret = e;
+          }}></TextInput>
+        <div style={{ color: "gray" }}>Cover</div>
+        <TextInput
+          onChange={(e: string) => {
+            cover = e;
+          }}></TextInput>
+        <div style={{ color: "gray" }}>Password</div>
+        <TextInput
+          onChange={(e: string) => {
+            password = e;
+          }}></TextInput>
+      </ModalContent>
+      <ModalFooter>
+        <Button
+          onClick={() => {
+            const toSend = encrypt(secret, password, cover);
+            if (!toSend) return;
+
+            webpack.common.messages.sendMessage(
+              webpack.common.channels.getCurrentlySelectedChannelId(),
+              { content: toSend },
+            );
+            // @ts-ignore
+            closeModal(s);
+          }}>
+          Send
+        </Button>
+        <Button
+          style={{ left: 15, position: "absolute" }}
+          onClick={() => {
+            // @ts-ignore
+            closeModal(s);
+          }}>
+          Cancel
+        </Button>
+      </ModalFooter>
+    </ModalRoot>
+  ));
+}