Skip to content

Commit

Permalink
Modal UI overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
SammCheese committed Dec 28, 2022
1 parent 119412a commit a4519b7
Show file tree
Hide file tree
Showing 8 changed files with 87 additions and 178 deletions.
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"discordID": "372148345894076416",
"github": "SammCheese"
},
"version": "1.0.6",
"version": "1.1.0",
"updater": {
"type": "github",
"id": "SammCheese/invisible-chat"
Expand Down
1 change: 1 addition & 0 deletions scripts/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const globalModules = {
"ignition",
"plugins",
"util",
"components",
],
defaultExport: true,
},
Expand Down
2 changes: 1 addition & 1 deletion src/assets/chatbarLock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const { React } = common;
export const chatbarLock = (
<svg
key="Encrypt Message"
fill="#EBEBEB"
fill="var(--header-secondary)"
width="30"
height="30"
viewBox={"0 0 64 64"}
Expand Down
2 changes: 1 addition & 1 deletion src/assets/popoverIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { common } from "replugged";
const { React } = common;

export const popoverIcon = () => (
<svg fill="#EBEBEB" width="24" height="24" viewBox="0 0 64 64">
<svg fill="var(--header-secondary)" width="24" height="24" viewBox="0 0 64 64">
<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>
);
55 changes: 29 additions & 26 deletions src/components/DecryptionModal.tsx
Original file line number Diff line number Diff line change
@@ -1,56 +1,55 @@
import { common, webpack } from "replugged";
import {
ModalContent,
ModalFooter,
ModalHeader,
ModalProps,
ModalRoot,
closeModal,
openModal,
} from "./Modals";
import { common, components, webpack } from "replugged";

import { buildEmbed, decrypt } from "../index";

const { React } = common;
const { Button, Modal } = components;
// @ts-expect-error Package doesnt include it yet
const { closeModal, openModal } = common.modal;

const FormText = components.FormText.DEFAULT;

const rawTextInput: any = webpack.waitForModule(
webpack.filters.byProps("defaultProps", "Sizes", "contextType"),
);

const rawButton = webpack.waitForModule(webpack.filters.byProps("Hovers", "Looks", "Sizes"));

let Button: any;
let TextInput: any;

export async function initDecModal() {
TextInput = webpack.getExportsForProps(await rawTextInput, ["contextType"]);
Button = webpack.getExportsForProps(await rawButton, ["Link"]);
}

let modalKey: any;

interface ModalProps {
transitionState: any;
onClose(): Promise<void>;
}

function DecModal(props: ModalProps) {
// @ts-ignore
let secret: string = props?.message?.content;
let [password, setPassword] = React.useState("password");

return (
<ModalRoot {...props}>
<ModalHeader>
<div style={{ color: "gray", fontSize: "30px" }}>Decrypt Message</div>
</ModalHeader>
<ModalContent>
<div style={{ color: "gray" }}>Secret</div>
<Modal.ModalRoot {...props}>
<Modal.ModalHeader>
<FormText style={{ fontSize: "30px" }}>Decrypt Message</FormText>
</Modal.ModalHeader>
<Modal.ModalContent>
<FormText>Secret</FormText>
<TextInput defaultValue={secret} disabled={true}></TextInput>
<div style={{ color: "gray" }}>Password</div>
<FormText>Password</FormText>
<TextInput
defaultValue={"password"}
onChange={(e: string) => {
setPassword(e);
}}></TextInput>
<div style={{ marginTop: 10 }} />
</ModalContent>
<ModalFooter>
</Modal.ModalContent>
<Modal.ModalFooter>
<Button
color={Button.Colors.GREEN}
onClick={() => {
const toSend = decrypt(secret, password);
if (!toSend) return;
Expand All @@ -62,18 +61,22 @@ function DecModal(props: ModalProps) {
Decrypt
</Button>
<Button
color={Button.Colors.TRANSPARENT}
look={Button.Looks.LINK}
style={{ left: 15, position: "absolute" }}
onClick={() => {
// @ts-ignore
closeModal(modalKey);
}}>
Cancel
</Button>
</ModalFooter>
</ModalRoot>
</Modal.ModalFooter>
</Modal.ModalRoot>
);
}

export function buildDecModal(msg: any): any {
modalKey = openModal((props) => <DecModal {...props} {...msg} />);
modalKey = openModal((props: JSX.IntrinsicAttributes & ModalProps) => (
<DecModal {...props} {...msg} />
));
}
74 changes: 41 additions & 33 deletions src/components/EncryptionModal.tsx
Original file line number Diff line number Diff line change
@@ -1,95 +1,103 @@
import { common, webpack } from "replugged";
import {
ModalContent,
ModalFooter,
ModalHeader,
ModalProps,
ModalRoot,
ModalSize,
closeModal,
openModal,
} from "./Modals";
import { common, components, webpack } from "replugged";

import { encrypt } from "../index";

const { React } = common;
// @ts-expect-error Package not updated yet
const { closeModal, openModal } = common.modal;
const { Button, SwitchItem, Modal, Divider } = components;
const FormText = components.FormText.DEFAULT;

const rawTextInput: any = webpack.waitForModule(
webpack.filters.byProps("defaultProps", "Sizes", "contextType"),
);

const rawButton = webpack.waitForModule(webpack.filters.byProps("Hovers", "Looks", "Sizes"));

let Button: any;
let TextInput: any;

export async function initEncModal() {
TextInput = webpack.getExportsForProps(await rawTextInput, ["contextType"]);
Button = webpack.getExportsForProps(await rawButton, ["Link"]);
}

let modalKey: any;

export function EncModal(props: ModalProps) {
interface ModalProps {
transitionState: any;
onClose(): Promise<void>;
}

function EncModal(props: ModalProps) {
let [secret, setSecret] = React.useState("");
let [cover, setCover] = React.useState("");
let [password, setPassword] = React.useState("password");
let [DontUseCover, setDontUseCover] = React.useState(false);

const valid = secret && cover && /\w \w/.test(cover);
const valid = secret && DontUseCover ? true : cover && /\w \w/.test(cover);

return (
<ModalRoot {...props} size={ModalSize.MEDIUM}>
<ModalHeader>
<div style={{ color: "gray", fontSize: "30px" }}>Encrypt Message</div>
</ModalHeader>
<ModalContent>
<div style={{ color: "gray" }}>Secret</div>
<Modal.ModalRoot {...props}>
<Modal.ModalHeader>
<FormText style={{ fontSize: "30px" }}>Encrypt Message</FormText>
</Modal.ModalHeader>
<Modal.ModalContent>
<FormText style={{ marginTop: "10px" }}>Secret Message</FormText>
<TextInput
onChange={(e: string) => {
setSecret(e);
}}></TextInput>
<div style={{ color: "gray" }}>Cover (2 or more Words!!)</div>
<FormText style={{ marginTop: "10px" }}>Cover (2 or more Words!!)</FormText>
<TextInput
disabled={DontUseCover}
onChange={(e: string) => {
setCover(e);
}}></TextInput>
<div style={{ color: "gray" }}>Password</div>
<FormText style={{ marginTop: "10px" }}>Password</FormText>
<TextInput
defaultValue={"password"}
onChange={(e: string) => {
setPassword(e);
}}></TextInput>
</ModalContent>
<ModalFooter>
<Divider style={{ marginTop: "10px", marginBottom: "10px" }} />
<SwitchItem
value={DontUseCover}
onChange={(e: boolean) => {
console.log(e);
setDontUseCover(e);
}}>
Don't use a cover
</SwitchItem>
</Modal.ModalContent>
<Modal.ModalFooter>
<Button
color={Button.Colors.GREEN}
disabled={!valid}
onClick={() => {
if (!valid) return;
const toSend = encrypt(secret, password, cover);
const encrypted = encrypt(secret, password, DontUseCover ? "d d" : cover);
const toSend = DontUseCover ? encrypted.replaceAll("d", "") : encrypt;
if (!toSend) return;

// @ts-expect-error
common.messages.sendMessage(common.channels.getCurrentlySelectedChannelId(), {
content: `${toSend}`,
});
// @ts-ignore
closeModal(modalKey);
}}>
Send
</Button>
<Button
color={Button.Colors.TRANSPARENT}
look={Button.Looks.LINK}
style={{ left: 15, position: "absolute" }}
onClick={() => {
// @ts-ignore
closeModal(modalKey);
}}>
Cancel
</Button>
</ModalFooter>
</ModalRoot>
</Modal.ModalFooter>
</Modal.ModalRoot>
);
}

export function buildEncModal(): any {
modalKey = openModal((props) => <EncModal {...props} />);
modalKey = openModal((props: JSX.IntrinsicAttributes & ModalProps) => <EncModal {...props} />);
}
112 changes: 0 additions & 112 deletions src/components/Modals.tsx

This file was deleted.

Loading

0 comments on commit a4519b7

Please sign in to comment.