From 205bf70861e7f4311ef761caba076ca0f6108a14 Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Fri, 23 Dec 2022 23:00:26 -0500 Subject: [PATCH] Added overrides for secrets --- frontend/components/basic/Toggle.tsx | 31 +++- .../dashboard/DashboardInputField.tsx | 12 +- frontend/components/dashboard/SideBar.tsx | 90 ++++++++-- frontend/pages/dashboard/[id].js | 167 +++++++----------- 4 files changed, 183 insertions(+), 117 deletions(-) diff --git a/frontend/components/basic/Toggle.tsx b/frontend/components/basic/Toggle.tsx index c2cf3cb07..6a32d588a 100644 --- a/frontend/components/basic/Toggle.tsx +++ b/frontend/components/basic/Toggle.tsx @@ -1,6 +1,25 @@ import React from "react"; import { Switch } from "@headlessui/react"; + +interface OverrideProps { + id: string; + keyName: string; + value: string; + pos: number; +} + +interface ToggleProps { + enabled: boolean; + setEnabled: (value: boolean) => void; + addOverride: (value: OverrideProps) => void; + keyName: string; + value: string; + pos: number; + id: string; + deleteOverride: (id: string) => void; +} + /** * This is a typical 'iPhone' toggle (e.g., user for overriding secrets with personal values) * @param obj @@ -8,11 +27,19 @@ import { Switch } from "@headlessui/react"; * @param {function} obj.setEnabled - change the state of the toggle * @returns */ -export default function Toggle ({ enabled, setEnabled }: { enabled: boolean; setEnabled: (value: boolean) => void; }): JSX.Element { +export default function Toggle ({ enabled, setEnabled, addOverride, keyName, value, pos, id, deleteOverride }: ToggleProps): JSX.Element { + console.log(755, pos, enabled) return ( { + if (enabled == false) { + addOverride({ id, keyName, value, pos }); + } else { + deleteOverride(id); + } + setEnabled(!enabled); + }} className={`${ enabled ? 'bg-primary' : 'bg-bunker-400' } relative inline-flex h-5 w-9 items-center rounded-full`} diff --git a/frontend/components/dashboard/DashboardInputField.tsx b/frontend/components/dashboard/DashboardInputField.tsx index cb75dcf8c..3a5cd80ee 100644 --- a/frontend/components/dashboard/DashboardInputField.tsx +++ b/frontend/components/dashboard/DashboardInputField.tsx @@ -13,6 +13,7 @@ interface DashboardInputFieldProps { type: 'varName' | 'value'; blurred: boolean; duplicates: string[]; + override?: boolean; } /** @@ -33,7 +34,8 @@ const DashboardInputField = ({ type, value, blurred, - duplicates + duplicates, + override }: DashboardInputFieldProps) => { const ref = useRef(null); const syncScroll = (e: SyntheticEvent) => { @@ -85,6 +87,7 @@ const DashboardInputField = ({
+ {override == true &&
Override enabled
} onChangeHandler(e.target.value, position)} @@ -99,10 +102,13 @@ const DashboardInputField = ({
{value.split(REGEX).map((word, id) => { if (word.match(REGEX) !== null) { diff --git a/frontend/components/dashboard/SideBar.tsx b/frontend/components/dashboard/SideBar.tsx index 5e77e7d75..38f575c6b 100644 --- a/frontend/components/dashboard/SideBar.tsx +++ b/frontend/components/dashboard/SideBar.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { faX } from '@fortawesome/free-solid-svg-icons'; +import { faBackward, faDotCircle, faRotateLeft, faX } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import Button from '../basic/buttons/Button'; @@ -13,7 +13,14 @@ interface SecretProps { key: string; value: string; pos: number; - visibility: string; + id: string; +} + +interface OverrideProps { + id: string; + keyName: string; + value: string; + pos: number; } interface SideBarProps { @@ -22,6 +29,8 @@ interface SideBarProps { modifyKey: (value: string) => void; modifyValue: (value: string) => void; modifyVisibility: (value: string) => void; + addOverride: (value: OverrideProps) => void; + deleteOverride: (id: string) => void; } /** @@ -33,7 +42,7 @@ interface SideBarProps { * @param {function} obj.modifyVisibility - function that modifies the secret visibility * @returns the sidebar with 'secret's settings' */ -const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility }: SideBarProps) => { +const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility, addOverride, deleteOverride }: SideBarProps) => { const [overrideEnabled, setOverrideEnabled] = useState(false); return
@@ -44,7 +53,7 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility
-
+

Key

-
+

Override value with a personal value

- +
@@ -97,9 +115,57 @@ const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility isFull={true} />
-
-

Comments & notes

-
+
+

Version History

+
+
+
+
+
+
+
+
+
Current
+

Key:{data[0].key}

+

Value:{data[0].value}

+

Visibility:{'shared'}

+
+
+
+
+
+
+
+
+
12/22/2022 12:36 EST
+
Key: KeyKeyKey
+
Value: ValueValueValue
+

Visibility:{'shared'}

+
+
+
+
+
+
+
+
+
12/21/2022 09:11 EST
+
Key: KeyKey
+
Value: ValueValue
+

Visibility:{'shared'}

+
+
+
+
+
+
+
+

Comments & notes

+
+

Coming soon!

+
+
+
Leave your comment here...
diff --git a/frontend/pages/dashboard/[id].js b/frontend/pages/dashboard/[id].js index ef4db42bd..11519578e 100644 --- a/frontend/pages/dashboard/[id].js +++ b/frontend/pages/dashboard/[id].js @@ -6,7 +6,6 @@ import { faArrowDownAZ, faArrowDownZA, faCheck, - faCircleInfo, faCopy, faDownload, faEllipsis, @@ -83,6 +82,7 @@ const KeyPair = ({ position={keyPair.pos} value={keyPair.value} blurred={isBlurred} + override={keyPair.value == "user1234" && true} />
@@ -176,7 +176,7 @@ export default function Dashboard() { prevSort == 'alphabetical' ? '-alphabetical' : 'alphabetical' ); - sortValuesHandler(dataToReorder); + sortValuesHandler(dataToReorder, ""); }; useEffect(() => { @@ -238,11 +238,43 @@ export default function Dashboard() { ]); }; + /** + * This function add an ovverrided version of a certain secret to the current user + * @param {object} obj + * @param {string} obj.id - if of this secret that is about to be overriden + * @param {string} obj.keyName - key name of this secret + * @param {string} obj.value - value of this secret + * @param {string} obj.pos - position of this secret on the dashboard + */ + const addOverride = ({ id, keyName, value, pos }) => { + setIsNew(false); + const tempdata = [ + ...data, + { + id: id, + pos: pos, + key: keyName, + value: value, + type: 'personal' + } + ]; + sortValuesHandler(tempdata, sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical"); + }; + const deleteRow = (id) => { setButtonReady(true); setData(data.filter((row) => row.id !== id)); }; + /** + * This function deleted the override of a certain secrer + * @param {string} id - id of a secret to be deleted + */ + const deleteOverride = (id) => { + setButtonReady(true); + setData(data.filter((row) => !(row.id == id && row.type == 'personal'))); + }; + const modifyValue = (value, pos) => { setData((oldData) => { oldData[pos].value = value; @@ -335,10 +367,11 @@ export default function Dashboard() { setBlurred(!blurred); }; - const sortValuesHandler = (dataToSort) => { + const sortValuesHandler = (dataToSort, specificSortMethod) => { + const howToSort = specificSortMethod != "" ? specificSortMethod : sortMethod const sortedData = (dataToSort != 1 ? dataToSort : data) .sort((a, b) => - sortMethod == 'alphabetical' + howToSort == 'alphabetical' ? a.key.localeCompare(b.key) : b.key.localeCompare(a.key) ) @@ -397,12 +430,14 @@ export default function Dashboard() { />
- {sidebarSecretNumber != -1 && row.pos == sidebarSecretNumber)} modifyKey={listenChangeKey} modifyValue={listenChangeValue} modifyVisibility={listenChangeVisibility} + addOverride={addOverride} + deleteOverride={deleteOverride} />}
@@ -550,101 +585,33 @@ export default function Dashboard() {
-
- {/* */} -
-

Personal

-
- - - Personal keys are only visible to you - -
-
-
-
- {data - .filter( - (keyPair) => - keyPair.key - .toLowerCase() - .includes(searchKeys.toLowerCase()) && - keyPair.type == 'personal' - ) - ?.map((keyPair) => ( - item.key) - .filter( - (item, index) => - index !== - data?.map((item) => item.key).indexOf(item) - )} - toggleSidebar={toggleSidebar} - sidebarSecretNumber={sidebarSecretNumber} - /> - ))} -
-
-
8 ? 'h-3/4' : 'h-min' - }`} - > -
- {/* */} -
-

Shared

-
- - - Shared keys are visible to your whole team - -
-
-
-
- {data - .filter( - (keyPair) => - keyPair.key - .toLowerCase() - .includes(searchKeys.toLowerCase()) && - keyPair.type == 'shared' - ) - ?.map((keyPair) => ( - item.key) - .filter( - (item, index) => - index !== - data?.map((item) => item.key).indexOf(item) - )} - toggleSidebar={toggleSidebar} - sidebarSecretNumber={sidebarSecretNumber} - /> - ))} +
+ {data?.filter(row => !(data + ?.map((item) => item.key) + .filter( + (item, index) => + index !== + data?.map((item) => item.key).indexOf(item) + ).includes(row.key) && row.type == 'shared')).map((keyPair) => ( + item.key) + .filter( + (item, index) => + index !== + data?.map((item) => item.key).indexOf(item) + )} + toggleSidebar={toggleSidebar} + sidebarSecretNumber={sidebarSecretNumber} + /> + ))}