mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-15 15:41:27 +00:00
245 lines
9.0 KiB
TypeScript
245 lines
9.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import Head from "next/head";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/router";
|
|
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
|
import { faSlack } from "@fortawesome/free-brands-svg-icons";
|
|
import {
|
|
faCheckCircle,
|
|
faHandPeace,
|
|
faNetworkWired,
|
|
faPlug,
|
|
faPlus,
|
|
faStar,
|
|
faUserPlus
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
import onboardingCheck from "@app/components/utilities/checks/OnboardingCheck";
|
|
import { TabsObject } from "@app/components/v2/Tabs";
|
|
|
|
import registerUserAction from "../api/userActions/registerUserAction";
|
|
|
|
type ItemProps = {
|
|
text: string;
|
|
subText: string;
|
|
complete: boolean;
|
|
icon: IconProp;
|
|
time: string;
|
|
userAction?: string;
|
|
link?: string;
|
|
};
|
|
|
|
const learningItem = ({
|
|
text,
|
|
subText,
|
|
complete,
|
|
icon,
|
|
time,
|
|
userAction,
|
|
link
|
|
}: ItemProps): JSX.Element => {
|
|
if (link) {
|
|
return (
|
|
<a
|
|
target={`${link.includes("https") ? "_blank" : "_self"}`}
|
|
rel="noopener noreferrer"
|
|
className={`w-full ${complete && "opacity-30 duration-200 hover:opacity-100"}`}
|
|
href={link}
|
|
>
|
|
<div
|
|
onKeyDown={() => null}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={async () => {
|
|
if (userAction && userAction !== "first_time_secrets_pushed") {
|
|
await registerUserAction({
|
|
action: userAction
|
|
});
|
|
}
|
|
}}
|
|
className="group relative mb-3 flex h-[5.5rem] w-full cursor-pointer items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-bunker-500 py-2 pl-2 pr-6 shadow-xl duration-200 hover:bg-mineshaft-700"
|
|
>
|
|
<div className="mr-4 flex flex-row items-center">
|
|
<FontAwesomeIcon icon={icon} className="mx-2 w-16 text-4xl" />
|
|
{complete && (
|
|
<div className="absolute left-12 top-10 flex h-7 w-7 items-center justify-center rounded-full bg-bunker-500 p-2 group-hover:bg-mineshaft-700">
|
|
<FontAwesomeIcon icon={faCheckCircle} className="h-5 w-5 text-4xl text-primary" />
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col items-start">
|
|
<div className="mt-0.5 text-xl font-semibold">{text}</div>
|
|
<div className="text-sm font-normal">{subText}</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`w-28 pr-4 text-right text-sm font-semibold ${complete && "text-primary"}`}
|
|
>
|
|
{complete ? "Complete!" : `About ${time}`}
|
|
</div>
|
|
{complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-primary" />}
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|
|
return (
|
|
<div
|
|
onKeyDown={() => null}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={async () => {
|
|
if (userAction) {
|
|
await registerUserAction({
|
|
action: userAction
|
|
});
|
|
}
|
|
}}
|
|
className="relative my-1.5 flex h-[5.5rem] w-full cursor-pointer items-center justify-between overflow-hidden rounded-md border border-dashed border-bunker-400 bg-bunker-700 py-2 pl-2 pr-6 shadow-xl duration-200 hover:bg-bunker-500"
|
|
>
|
|
<div className="mr-4 flex flex-row items-center">
|
|
<FontAwesomeIcon icon={icon} className="mx-2 w-16 text-4xl" />
|
|
{complete && (
|
|
<div className="absolute left-11 top-10 h-7 w-7 rounded-full bg-bunker-700">
|
|
<FontAwesomeIcon
|
|
icon={faCheckCircle}
|
|
className="absolute left-12 top-16 h-5 w-5 text-4xl text-primary"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col items-start">
|
|
<div className="mt-0.5 text-xl font-semibold">{text}</div>
|
|
<div className="mt-0.5 text-sm font-normal">{subText}</div>
|
|
</div>
|
|
</div>
|
|
<div className={`w-28 pr-4 text-right text-sm font-semibold ${complete && "text-primary"}`}>
|
|
{complete ? "Complete!" : `About ${time}`}
|
|
</div>
|
|
{complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-primary" />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* This tab is called Home because in the future it will include some company news,
|
|
* updates, roadmap, relavant blogs, etc. Currently it only has the setup instruction
|
|
* for the new users
|
|
*/
|
|
export default function Home() {
|
|
const router = useRouter();
|
|
const [hasUserClickedSlack, setHasUserClickedSlack] = useState(false);
|
|
const [hasUserClickedIntro, setHasUserClickedIntro] = useState(false);
|
|
const [hasUserStarred, setHasUserStarred] = useState(false);
|
|
const [hasUserPushedSecrets, setHasUserPushedSecrets] = useState(false);
|
|
const [usersInOrg, setUsersInOrg] = useState(false);
|
|
|
|
useEffect(() => {
|
|
onboardingCheck({
|
|
setHasUserClickedIntro,
|
|
setHasUserClickedSlack,
|
|
setHasUserPushedSecrets,
|
|
setHasUserStarred,
|
|
setUsersInOrg
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mx-6 w-full pt-4 lg:mx-0">
|
|
<Head>
|
|
<title>Infisical Guide</title>
|
|
<link rel="icon" href="/infisical.ico" />
|
|
</Head>
|
|
<div className="relative mx-auto flex max-w-3xl flex-col items-center px-6 py-6 text-lg text-gray-300 lg:max-w-4xl xl:max-w-5xl">
|
|
<div className="mt-12 w-full text-left text-5xl font-bold">Your quick start guide</div>
|
|
<div className="mb-14 w-full pt-2 pb-4 text-left text-lg text-bunker-300">
|
|
Click on the items below and follow the instructions.
|
|
</div>
|
|
<div className="absolute top-0 right-0 hidden h-min lg:block">
|
|
<Image
|
|
src="/images/dragon-book.svg"
|
|
height={250}
|
|
width={400}
|
|
alt="start guise dragon illustration"
|
|
/>
|
|
</div>
|
|
{learningItem({
|
|
text: "Get to know Infisical",
|
|
subText: "",
|
|
complete: hasUserClickedIntro,
|
|
icon: faHandPeace,
|
|
time: "3 min",
|
|
userAction: "intro_cta_clicked",
|
|
link: "https://www.youtube.com/watch?v=3F7FNYX94zA"
|
|
})}
|
|
{learningItem({
|
|
text: "Add your secrets",
|
|
subText: "Click to see example secrets, and add your own.",
|
|
complete: hasUserPushedSecrets,
|
|
icon: faPlus,
|
|
time: "2 min",
|
|
userAction: "first_time_secrets_pushed",
|
|
link: `/dashboard/${router.query.id}`
|
|
})}
|
|
<div className="group relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-bunker-500 pl-2 pr-2 pt-4 pb-2 shadow-xl duration-200">
|
|
<div className="mb-4 flex w-full flex-row items-center pr-4">
|
|
<div className="mr-4 flex w-full flex-row items-center">
|
|
<FontAwesomeIcon icon={faNetworkWired} className="mx-2 w-16 text-4xl" />
|
|
{false && (
|
|
<div className="absolute left-12 top-10 flex h-7 w-7 items-center justify-center rounded-full bg-bunker-500 p-2 group-hover:bg-mineshaft-700">
|
|
<FontAwesomeIcon icon={faCheckCircle} className="h-5 w-5 text-4xl text-green" />
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col items-start pl-0.5">
|
|
<div className="mt-0.5 text-xl font-semibold">Inject secrets locally</div>
|
|
<div className="text-sm font-normal">
|
|
Replace .env files with a more secure and efficient alternative.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`w-28 pr-4 text-right text-sm font-semibold ${false && "text-green"}`}>
|
|
About 2 min
|
|
</div>
|
|
</div>
|
|
<TabsObject />
|
|
{false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
|
|
</div>
|
|
{learningItem({
|
|
text: "Integrate Infisical with your infrastructure",
|
|
subText: "Connect Infisical to various 3rd party services and platforms.",
|
|
complete: false,
|
|
icon: faPlug,
|
|
time: "15 min",
|
|
link: "https://infisical.com/docs/integrations/overview"
|
|
})}
|
|
{learningItem({
|
|
text: "Invite your teammates",
|
|
subText: "",
|
|
complete: usersInOrg,
|
|
icon: faUserPlus,
|
|
time: "2 min",
|
|
link: `/settings/org/${router.query.id}?invite`
|
|
})}
|
|
{learningItem({
|
|
text: "Join Infisical Slack",
|
|
subText: "Have any questions? Ask us!",
|
|
complete: hasUserClickedSlack,
|
|
icon: faSlack,
|
|
time: "1 min",
|
|
userAction: "slack_cta_clicked",
|
|
link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1wehzfnzn-1aMo5JcGENJiNAC2SD8Jlg"
|
|
})}
|
|
{learningItem({
|
|
text: "Star Infisical on GitHub",
|
|
subText: "Like what we're doing? You know what to do! :)",
|
|
complete: hasUserStarred,
|
|
icon: faStar,
|
|
time: "1 min",
|
|
userAction: "star_cta_clicked",
|
|
link: "https://github.com/Infisical/infisical"
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Home.requireAuth = true;
|