From b0fb86a6acec9e548790e065afecba0f60d3c674 Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Sat, 7 Jan 2023 11:46:17 -0800 Subject: [PATCH 1/2] Added docs link to the dashboard --- frontend/components/basic/Layout.tsx | 1 - frontend/components/navigation/NavBarDashboard.tsx | 9 +++++++++ frontend/pages/404.tsx | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/components/basic/Layout.tsx b/frontend/components/basic/Layout.tsx index 8ac9ec92b6..235bfaa25b 100644 --- a/frontend/components/basic/Layout.tsx +++ b/frontend/components/basic/Layout.tsx @@ -11,7 +11,6 @@ import { faKey, faMobile, faPlug, - faTimeline, faUser, } from "@fortawesome/free-solid-svg-icons"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; diff --git a/frontend/components/navigation/NavBarDashboard.tsx b/frontend/components/navigation/NavBarDashboard.tsx index 8246148198..b2752f3edf 100644 --- a/frontend/components/navigation/NavBarDashboard.tsx +++ b/frontend/components/navigation/NavBarDashboard.tsx @@ -13,6 +13,7 @@ import { faGear, faPlus, faRightFromBracket, + faUpRightFromSquare, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Menu, Transition } from "@headlessui/react"; @@ -107,6 +108,14 @@ export default function Navbar() {
+ + Docs + +
diff --git a/frontend/pages/404.tsx b/frontend/pages/404.tsx index 6192f87737..3c2ce3f507 100644 --- a/frontend/pages/404.tsx +++ b/frontend/pages/404.tsx @@ -20,7 +20,7 @@ export default function Custom404() { src="/images/dragon-404.svg" height={554} width={942} - alt="google logo" + alt="infisical dragon - page not found" >
From 6de4eca4fcf462b9474d9a0613c362a6552c0c60 Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Sat, 7 Jan 2023 16:40:28 -0800 Subject: [PATCH 2/2] Refactored signup and added team invitation step --- frontend/components/basic/Error.tsx | 6 +- frontend/components/basic/Layout.tsx | 1 + frontend/components/dashboard/DropZone.tsx | 2 +- frontend/components/signup/CodeInputStep.tsx | 136 +++++ .../signup/DonwloadBackupPDFStep.tsx | 60 ++ frontend/components/signup/EnterEmailStep.tsx | 97 ++++ frontend/components/signup/TeamInviteStep.tsx | 72 +++ frontend/components/signup/UserInfoStep.tsx | 306 ++++++++++ ...not-verified.js => email-not-verified.tsx} | 2 +- frontend/pages/signup.tsx | 525 +----------------- frontend/pages/signupinvite.js | 2 +- frontend/public/locales/en/common.json | 4 +- frontend/public/locales/en/dashboard.json | 1 + frontend/public/locales/en/signup.json | 6 +- 14 files changed, 706 insertions(+), 514 deletions(-) create mode 100644 frontend/components/signup/CodeInputStep.tsx create mode 100644 frontend/components/signup/DonwloadBackupPDFStep.tsx create mode 100644 frontend/components/signup/EnterEmailStep.tsx create mode 100644 frontend/components/signup/TeamInviteStep.tsx create mode 100644 frontend/components/signup/UserInfoStep.tsx rename frontend/pages/{email-not-verified.js => email-not-verified.tsx} (93%) diff --git a/frontend/components/basic/Error.tsx b/frontend/components/basic/Error.tsx index 79cc6e5f17..b5f0b7a4c7 100644 --- a/frontend/components/basic/Error.tsx +++ b/frontend/components/basic/Error.tsx @@ -4,13 +4,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export default function Error({ text }: { text: string }): JSX.Element { return ( -
+
{text && ( -

{text}

+

{text}

)}
); diff --git a/frontend/components/basic/Layout.tsx b/frontend/components/basic/Layout.tsx index 235bfaa25b..ef8eda727c 100644 --- a/frontend/components/basic/Layout.tsx +++ b/frontend/components/basic/Layout.tsx @@ -183,6 +183,7 @@ export default function Layout({ children }: LayoutProps) { if ( userWorkspaces.length == 0 && router.asPath != "/noprojects" && + !router.asPath.includes("home")&& !router.asPath.includes("settings") ) { router.push("/noprojects"); diff --git a/frontend/components/dashboard/DropZone.tsx b/frontend/components/dashboard/DropZone.tsx index 38e293f4e3..ffde34566a 100644 --- a/frontend/components/dashboard/DropZone.tsx +++ b/frontend/components/dashboard/DropZone.tsx @@ -216,7 +216,7 @@ const DropZone = ({
+
+
+ + Not seeing an email? + + + + +
+

+ {t("signup:step2-spam-alert")} +

+
+
+ ); +} diff --git a/frontend/components/signup/DonwloadBackupPDFStep.tsx b/frontend/components/signup/DonwloadBackupPDFStep.tsx new file mode 100644 index 0000000000..786c49fd22 --- /dev/null +++ b/frontend/components/signup/DonwloadBackupPDFStep.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { useTranslation } from "next-i18next"; +import { faWarning } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import Button from "../basic/buttons/Button"; +import issueBackupKey from "../utilities/cryptography/issueBackupKey"; + + +interface DownloadBackupPDFStepProps { + incrementStep: () => void; + email: string; + password: string; + name: string; +} + +/** + * This is the step of the signup flow where the user downloads the backup pdf + * @param {object} obj + * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup + * @param {string} obj.email - user's email + * @param {string} obj.password - user's password + * @param {string} obj.name - user's name + * @returns + */ +export default function DonwloadBackupPDFStep({ incrementStep, email, password, name }: DownloadBackupPDFStepProps): JSX.Element { + const { t } = useTranslation(); + + return ( +
+

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

+
+
{t("signup:step4-description1")}
+
{t("signup:step4-description2")}
+
+
+ + {t("signup:step4-description3")} +
+
+
+
+ ); +} diff --git a/frontend/components/signup/EnterEmailStep.tsx b/frontend/components/signup/EnterEmailStep.tsx new file mode 100644 index 0000000000..5f98710b75 --- /dev/null +++ b/frontend/components/signup/EnterEmailStep.tsx @@ -0,0 +1,97 @@ +import React, { useState } from "react"; +import Link from "next/link"; +import { useTranslation } from "next-i18next"; + +import sendVerificationEmail from "~/pages/api/auth/SendVerificationEmail"; + +import Button from "../basic/buttons/Button"; +import InputField from "../basic/InputField"; + + +interface DownloadBackupPDFStepProps { + incrementStep: () => void; + email: string; + setEmail: (value: string) => void; +} + +/** + * This is the first step of the sign up process - users need to enter their email + * @param {object} obj + * @param {string} obj.email - email of a user signing up + * @param {function} obj.setEmail - funciton that manages the state of the email variable + * @param {function} obj.incrementStep - function to go to the next step of the signup flow + * @returns + */ +export default function EnterEmailStep({ email, setEmail, incrementStep }: DownloadBackupPDFStepProps): JSX.Element { + const [emailError, setEmailError] = useState(false); + const [emailErrorMessage, setEmailErrorMessage] = useState(""); + const { t } = useTranslation(); + + /** + * Verifies if the entered email "looks" correct + */ + const emailCheck = () => { + let emailCheckBool = false; + if (!email) { + setEmailError(true); + setEmailErrorMessage("Please enter your email."); + emailCheckBool = true; + } else if ( + !email.includes("@") || + !email.includes(".") || + !/[a-z]/.test(email) + ) { + setEmailError(true); + setEmailErrorMessage("Please enter a valid email."); + emailCheckBool = true; + } else { + setEmailError(false); + } + + // If everything is correct, go to the next step + if (!emailCheckBool) { + sendVerificationEmail(email); + incrementStep(); + } + }; + + return ( +
+
+

+ {'Let\''}s get started +

+
+ +
+
+

+ {t("signup:step1-privacy")} +

+
+
+
+
+
+ + + +
+
+ ); +} diff --git a/frontend/components/signup/TeamInviteStep.tsx b/frontend/components/signup/TeamInviteStep.tsx new file mode 100644 index 0000000000..e2639b88fd --- /dev/null +++ b/frontend/components/signup/TeamInviteStep.tsx @@ -0,0 +1,72 @@ +import React, { useState } from "react"; +import { useRouter } from "next/router"; +import { useTranslation } from "next-i18next"; + +import addUserToOrg from "~/pages/api/organization/addUserToOrg"; +import getWorkspaces from "~/pages/api/workspace/getWorkspaces"; + +import Button from "../basic/buttons/Button"; + + +/** + * This is the last step of the signup flow. People can optionally invite their teammates here. + */ +export default function TeamInviteStep(): JSX.Element { + const [emails, setEmails] = useState(""); + const { t } = useTranslation(); + const router = useRouter(); + + // Redirect user to the getting started page + const redirectToHome = async () => { + const userWorkspaces = await getWorkspaces(); + const userWorkspace = userWorkspaces[0]._id; + router.push("/home/" + userWorkspace); + + } + + const inviteUsers = async ({ emails }: { emails: string; }) => { + emails + .split(',') + .map(email => email.trim()) + .map(async (email) => await addUserToOrg(email, String(localStorage.getItem('orgData.id')))); + + await redirectToHome(); + } + + return ( +
+

+ {t("signup:step5-invite-team")} +

+

+ {t("signup:step5-subtitle")} +

+
+
+
+ +
+
+