From b7b43858f63fb7d3614ab3ed5f9bdca4186d12ce Mon Sep 17 00:00:00 2001 From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com> Date: Mon, 18 Mar 2024 15:55:01 +0100 Subject: [PATCH 1/5] Fix: Format entire frontend properly --- frontend/.storybook/main.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index 83c1ca9e33..1a68699d29 100644 --- a/frontend/.storybook/main.js +++ b/frontend/.storybook/main.js @@ -1,28 +1,28 @@ -const path = require('path'); +const path = require("path"); module.exports = { - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - 'storybook-dark-mode', + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions", + "storybook-dark-mode", { - name: '@storybook/addon-styling', + name: "@storybook/addon-styling", options: { postCss: { - implementation: require('postcss') + implementation: require("postcss") } } } ], framework: { - name: '@storybook/nextjs', + name: "@storybook/nextjs", options: {} }, core: { disableTelemetry: true }, docs: { - autodocs: 'tag' + autodocs: "tag" } }; From 1ede551c3e436ee012b666fe442f7fa4085b3b7b Mon Sep 17 00:00:00 2001 From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com> Date: Mon, 18 Mar 2024 15:59:47 +0100 Subject: [PATCH 2/5] Fix: Format entire frontend properly --- frontend/src/components/analytics/posthog.ts | 4 +- frontend/src/components/basic/Error.tsx | 6 +- frontend/src/components/basic/InputField.tsx | 28 ++-- frontend/src/components/basic/Listbox.tsx | 24 +-- .../src/components/basic/buttons/Button.tsx | 20 ++- .../basic/dialog/AddProjectMemberDialog.tsx | 6 +- .../dialog/AddUpdateEnvironmentDialog.tsx | 75 ++++----- .../components/basic/dialog/AddUserDialog.tsx | 75 ++++----- .../basic/dialog/AddWorkspaceDialog.tsx | 19 +-- .../basic/dialog/DeleteActionModal.tsx | 89 +++++----- .../components/basic/dialog/DeleteEnvVar.tsx | 16 +- .../basic/dialog/DeleteUserDialog.tsx | 65 +++---- .../basic/popups/BottomRightPopup.tsx | 16 +- .../src/components/basic/table/Checkbox.tsx | 6 +- .../context/Notifications/Notification.tsx | 15 +- .../context/Notifications/Notifications.tsx | 2 +- .../dashboard/ConfirmEnvOverwriteModal.tsx | 4 +- .../dashboard/DashboardInputField.tsx | 151 ++++++++++------- .../dashboard/DeleteActionButton.tsx | 51 +++--- .../dashboard/DownloadSecretsMenu.tsx | 4 +- .../src/components/navigation/NavHeader.tsx | 2 +- .../navigation/NavHeaderSecrets.tsx | 65 +++---- .../src/components/signup/CodeInputStep.tsx | 29 ++-- .../signup/DonwloadBackupPDFStep.tsx | 17 +- .../src/components/signup/EnterEmailStep.tsx | 33 ++-- .../src/components/signup/TeamInviteStep.tsx | 34 ++-- .../components/utilities/SecurityClient.ts | 10 +- .../utilities/attemptChangePassword.ts | 158 +++++++++--------- .../utilities/attemptCliLoginMfa.ts | 153 ++++++++--------- .../components/utilities/attemptLoginMfa.ts | 137 +++++++-------- .../checks/password/PasswordCheck.ts | 32 ++-- .../password/checkIsPasswordBreached.ts | 50 +++--- .../checks/password/checkPassword.ts | 30 ++-- .../checks/password/passwordRegexes.ts | 7 +- .../utilities/cryptography/issueBackupKey.ts | 5 +- .../utilities/intercom/intercomProvider.ts | 14 +- .../components/utilities/isValidHexColor.ts | 10 +- .../utilities/saveTokenToLocalStorage.ts | 7 +- 38 files changed, 746 insertions(+), 723 deletions(-) diff --git a/frontend/src/components/analytics/posthog.ts b/frontend/src/components/analytics/posthog.ts index 246d5c9cc4..cc26e55121 100644 --- a/frontend/src/components/analytics/posthog.ts +++ b/frontend/src/components/analytics/posthog.ts @@ -6,7 +6,7 @@ import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from "../utilities/config"; export const initPostHog = () => { // @ts-ignore - console.log("Hi there 👋") + console.log("Hi there 👋"); try { if (typeof window !== "undefined") { // @ts-ignore @@ -19,7 +19,7 @@ export const initPostHog = () => { return posthog; } catch (e) { - console.log("posthog err", e) + console.log("posthog err", e); } return undefined; diff --git a/frontend/src/components/basic/Error.tsx b/frontend/src/components/basic/Error.tsx index bf892e03de..1ef937e4a4 100644 --- a/frontend/src/components/basic/Error.tsx +++ b/frontend/src/components/basic/Error.tsx @@ -3,9 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const Error = ({ text }: { text: string }): JSX.Element => { return ( -
- - {text &&

{text}

} +
+ + {text &&

{text}

}
); }; diff --git a/frontend/src/components/basic/InputField.tsx b/frontend/src/components/basic/InputField.tsx index 0bc01defc8..346294e563 100644 --- a/frontend/src/components/basic/InputField.tsx +++ b/frontend/src/components/basic/InputField.tsx @@ -39,16 +39,16 @@ const InputField = ({ if (isStatic === true) { return ( -
-

{label}

- {text &&

{text}

} +
+

{label}

+ {text &&

{text}

} onChangeHandler(e.target.value)} type={type} placeholder={placeholder} value={value} required={isRequired} - className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none" + className="text-md min-w-16 w-full rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none" name={name} readOnly autoComplete={autoComplete} @@ -58,12 +58,12 @@ const InputField = ({ ); } return ( -
-
-

{label}

+
+
+

{label}

@@ -75,11 +75,11 @@ const InputField = ({ required={isRequired} className={`${ blurred - ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400" + ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400" : "" } ${ error ? "focus:ring-red/50" : "focus:ring-primary/50" - } relative peer bg-mineshaft-900 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`} + } text-md min-w-16 peer relative w-full rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`} name={name} spellCheck="false" autoComplete={autoComplete} @@ -91,7 +91,7 @@ const InputField = ({ onClick={() => { setPasswordVisible(!passwordVisible); }} - className="absolute self-end mr-3 text-gray-400 cursor-pointer" + className="absolute mr-3 cursor-pointer self-end text-gray-400" > {passwordVisible ? ( @@ -101,7 +101,7 @@ const InputField = ({ )} {blurred && ( -
+

{value .split("") @@ -109,7 +109,7 @@ const InputField = ({ .map(() => ( ))} @@ -121,7 +121,7 @@ const InputField = ({

)} */}
- {error &&

{errorText}

} + {error &&

{errorText}

}
); }; diff --git a/frontend/src/components/basic/Listbox.tsx b/frontend/src/components/basic/Listbox.tsx index 5cdeb26d9e..cad9aaab4c 100644 --- a/frontend/src/components/basic/Listbox.tsx +++ b/frontend/src/components/basic/Listbox.tsx @@ -34,19 +34,19 @@ const ListBox = ({
{text} - + {" "} {isSelected}
{data && ( -
+
)} @@ -58,16 +58,16 @@ const ListBox = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > - + {data.map((person, personIdx) => ( - `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${ - selected ? "bg-white/10 text-gray-400 font-bold" : "" + `relative my-0.5 cursor-default select-none rounded-md py-2 pl-10 pr-4 ${ + selected ? "bg-white/10 font-bold text-gray-400" : "" } ${ active && !selected - ? "bg-white/5 text-mineshaft-200 cursor-pointer" + ? "cursor-pointer bg-white/5 text-mineshaft-200" : "text-gray-400" } ` } @@ -83,7 +83,7 @@ const ListBox = ({ {person} {selected ? ( - + ) : null} @@ -92,9 +92,9 @@ const ListBox = ({ ))} {buttonAction && ( -
diff --git a/frontend/src/components/basic/dialog/AddUserDialog.tsx b/frontend/src/components/basic/dialog/AddUserDialog.tsx index b36c31d6c4..dd2aede0a6 100644 --- a/frontend/src/components/basic/dialog/AddUserDialog.tsx +++ b/frontend/src/components/basic/dialog/AddUserDialog.tsx @@ -13,76 +13,63 @@ type Props = { orgName: string; }; -const AddUserDialog = ({ - isOpen, - closeModal, - submitModal, - email, - setEmail, - orgName, -}: Props) => { +const AddUserDialog = ({ isOpen, closeModal, submitModal, email, setEmail, orgName }: Props) => { const submit = () => { submitModal(email); }; return ( -
+
- + -
+
-
-
+
+
- + Invite others to {orgName} -
-

- An invite is specific to an email address and expires - after 1 day. For security reasons, you will need to - separately add members to projects. +

+

+ An invite is specific to an email address and expires after 1 day. For + security reasons, you will need to separately add members to projects.

-
+
-
-
{/* diff --git a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx index 88dc7cb78b..b1cc1fd074 100644 --- a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx +++ b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx @@ -5,7 +5,6 @@ import Button from "../buttons/Button"; import InputField from "../InputField"; import { Checkbox } from "../table/Checkbox"; - type Props = { isOpen: boolean; closeModal: () => void; @@ -26,8 +25,8 @@ const AddWorkspaceDialog = ({ workspaceName, setWorkspaceName, error, - loading, -}:Props) => { + loading +}: Props) => { const [addAllUsers, setAddAllUsers] = useState(true); const submit = () => { submitModal(workspaceName, addAllUsers); @@ -60,11 +59,8 @@ const AddWorkspaceDialog = ({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - - + + Create a new project
@@ -72,7 +68,7 @@ const AddWorkspaceDialog = ({ This project will contain your secrets and configs.

-
+
- +
-
{textLine1}
-
{textLine2}
-
+
{textLine1}
+
{textLine2}
+ diff --git a/frontend/src/components/context/Notifications/Notification.tsx b/frontend/src/components/context/Notifications/Notification.tsx index 806b68ad2d..14b0ba556f 100644 --- a/frontend/src/components/context/Notifications/Notification.tsx +++ b/frontend/src/components/context/Notifications/Notification.tsx @@ -36,25 +36,28 @@ const Notification = ({ notification, clearNotification }: NotificationProps) => return (
{notification.type === "error" && ( -
+
)} {notification.type === "success" && ( -
+
)} {notification.type === "info" && ( -
+
)} -

{notification.text}

+

{notification.text}

); diff --git a/frontend/src/components/context/Notifications/Notifications.tsx b/frontend/src/components/context/Notifications/Notifications.tsx index 81802fff67..29e2826d7e 100644 --- a/frontend/src/components/context/Notifications/Notifications.tsx +++ b/frontend/src/components/context/Notifications/Notifications.tsx @@ -11,7 +11,7 @@ const Notifications = ({ notifications, clearNotification }: NoticationsProps) = } return ( -
+
{notifications.map((notif) => ( ))} diff --git a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx index 9c8582d6a9..1926e7d37e 100644 --- a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx +++ b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx @@ -30,9 +30,9 @@ const ConfirmEnvOverwriteModal = ({ onClose={onClose} >
-

Your file contains the following duplicate secrets:

+

Your file contains the following duplicate secrets:

{duplicateKeys.join(", ")}

-

Are you sure you want to overwrite these secrets?

+

Are you sure you want to overwrite these secrets?

diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend/src/components/dashboard/DashboardInputField.tsx index 3cf87924e4..60b92a51e8 100644 --- a/frontend/src/components/dashboard/DashboardInputField.tsx +++ b/frontend/src/components/dashboard/DashboardInputField.tsx @@ -1,5 +1,10 @@ import { memo, SyntheticEvent, useRef } from "react"; -import { faCircle, faCodeBranch, faExclamationCircle, faEye } from "@fortawesome/free-solid-svg-icons"; +import { + faCircle, + faCodeBranch, + faExclamationCircle, + faEye +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import guidGenerator from "../utilities/randomId"; @@ -31,8 +36,8 @@ interface DashboardInputFieldProps { * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard * @param {boolean} obj.isDuplicate - if the key name is duplicated * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden - * - * + * + * * @returns */ @@ -61,29 +66,31 @@ const DashboardInputField = ({ const error = startsWithNumber || isDuplicate; return ( -
+
onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)} + onChange={(e) => + onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id) + } type={type} value={value} - className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${ + className={`ph-no-capture min-w-16 peer z-10 h-full w-full bg-transparent px-2 font-mono text-sm caret-bunker-200 outline-none ${ error ? "text-red-600 focus:text-red-500" : "text-bunker-300 focus:text-bunker-100" } duration-200`} spellCheck="false" />
{startsWithNumber && ( -
- + )} {isDuplicate && value !== "" && !startsWithNumber && ( -
- +
)} - {!error &&
- -
} + {!error && ( +
+ +
+ )}
); } @@ -127,20 +145,29 @@ const DashboardInputField = ({ return ( -
+
- {value?.split("\n")[0] ? - {value?.split("\n")[0]} - : - } - {value?.split("\n")[1] && - {value?.split("\n")[1]} - } + {value?.split("\n")[0] ? ( + + {value?.split("\n")[0]} + + ) : ( + - + )} + {value?.split("\n")[1] && ( + + {value?.split("\n")[1]} + + )}
@@ -148,10 +175,10 @@ const DashboardInputField = ({ } if (type === "value") { return ( -
-
+
+
{overrideEnabled === true && ( -
+
Override enabled
)} @@ -160,20 +187,20 @@ const DashboardInputField = ({ onChange={(e) => onChangeHandler(e.target.value, id)} onScroll={syncScroll} className={`${ - blurred - ? "text-transparent focus:text-transparent active:text-transparent" - : "" - } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`} + blurred ? "text-transparent focus:text-transparent active:text-transparent" : "" + } ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none duration-200 no-scrollbar`} spellCheck="false" />
{value?.split(REGEX).map((word) => { if (word.match(REGEX) !== null) { @@ -203,20 +230,24 @@ const DashboardInputField = ({ })}
{blurred && ( -
-
+
+
{value?.split("").map(() => ( ))} - {value?.split("").length === 0 && EMPTY} + {value?.split("").length === 0 && EMPTY} +
+
+
-
)}
diff --git a/frontend/src/components/dashboard/DeleteActionButton.tsx b/frontend/src/components/dashboard/DeleteActionButton.tsx index 530ee37495..da7357fe60 100644 --- a/frontend/src/components/dashboard/DeleteActionButton.tsx +++ b/frontend/src/components/dashboard/DeleteActionButton.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React from "react"; import { useTranslation } from "react-i18next"; import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -8,32 +8,35 @@ import Button from "../basic/buttons/Button"; type Props = { onSubmit: () => void; isPlain?: boolean; -} +}; export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => { const { t } = useTranslation(); return ( -
- {isPlain - ?
null} - role="button" - tabIndex={0} - onClick={onSubmit} - className="invisible group-hover:visible" - > - -
- :
- ) -} + ); +}; diff --git a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx b/frontend/src/components/dashboard/DownloadSecretsMenu.tsx index a921798cad..29942abf03 100644 --- a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx +++ b/frontend/src/components/dashboard/DownloadSecretsMenu.tsx @@ -18,7 +18,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin + > + {" "} + {String(t("signup.verify"))}{" "} +
-
+
{t("signup.step2-resend-alert")} -
+
-

{t("signup.step2-spam-alert")}

+

{t("signup.step2-spam-alert")}

); diff --git a/frontend/src/components/signup/DonwloadBackupPDFStep.tsx b/frontend/src/components/signup/DonwloadBackupPDFStep.tsx index 73082af32a..22d278cc3f 100644 --- a/frontend/src/components/signup/DonwloadBackupPDFStep.tsx +++ b/frontend/src/components/signup/DonwloadBackupPDFStep.tsx @@ -57,19 +57,22 @@ export default function DonwloadBackupPDFStep({ }; return ( -
-

- +

+

+ {t("signup.step4-message")}

-
-
+
+
{t("signup.step4-description1")} {t("signup.step4-description3")}
-
-
+
+
+ > + {" "} + {String(t("signup.step1-submit"))}{" "} +
diff --git a/frontend/src/components/signup/TeamInviteStep.tsx b/frontend/src/components/signup/TeamInviteStep.tsx index d1cc6ef7df..a06fc35684 100644 --- a/frontend/src/components/signup/TeamInviteStep.tsx +++ b/frontend/src/components/signup/TeamInviteStep.tsx @@ -16,7 +16,7 @@ export default function TeamInviteStep(): JSX.Element { const router = useRouter(); const [emails, setEmails] = useState(""); const { data: serverDetails } = useFetchServerStatus(); - + const { mutateAsync } = useAddUserToOrg(); const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const); @@ -40,55 +40,61 @@ export default function TeamInviteStep(): JSX.Element { }; return ( -
-

+

+

{t("signup.step5-invite-team")}

-

+

{t("signup.step5-subtitle")}

-
+
-
+
Emails