awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: change ui for new secret and add button for existing shared secret

Browse Source
This commit is contained in:
ShubhamPalriwala
2024-06-07 12:12:39 +05:30
parent 263d321d75
commit 24b8b64d3b
7 changed files with 101 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/services/secret-sharing/secret-sharing-service.ts
View File

@@ -80,6 +80,7 @@ export const secretSharingServiceFactory = ({
const getActiveSharedSecretByIdAndHashedHex = async (sharedSecretId: string, hashedHex: string) => { const getActiveSharedSecretByIdAndHashedHex = async (sharedSecretId: string, hashedHex: string) => {
const sharedSecret = await secretSharingDAL.findOne({ id: sharedSecretId, hashedHex }); const sharedSecret = await secretSharingDAL.findOne({ id: sharedSecretId, hashedHex });
if (!sharedSecret) return;
if (sharedSecret.expiresAt && sharedSecret.expiresAt < new Date()) { if (sharedSecret.expiresAt && sharedSecret.expiresAt < new Date()) {
return; return;
} }

10
frontend/src/pages/share-secret/index.tsx
View File

@@ -2,7 +2,7 @@ import Head from "next/head";
import { ShareSecretPublicPage } from "@app/views/ShareSecretPublicPage"; import { ShareSecretPublicPage } from "@app/views/ShareSecretPublicPage";
const SecretApproval = () => { const ShareNewPublicSecretPage = () => {
return ( return (
<> <>
<Head> <Head>
@@ -12,13 +12,13 @@ const SecretApproval = () => {
<meta property="og:title" content="" /> <meta property="og:title" content="" />
<meta name="og:description" content="" /> <meta name="og:description" content="" />
</Head> </Head>
<div className="h-full dark"> <div className="dark h-full">
<ShareSecretPublicPage /> <ShareSecretPublicPage isNewSession />
</div> </div>
</> </>
); );
}; };
export default SecretApproval; export default ShareNewPublicSecretPage;
SecretApproval.requireAuth = false; ShareNewPublicSecretPage.requireAuth = false;

10
frontend/src/pages/shared/secret/[id]/index.tsx
View File

@@ -2,7 +2,7 @@ import Head from "next/head";
import { ShareSecretPublicPage } from "@app/views/ShareSecretPublicPage"; import { ShareSecretPublicPage } from "@app/views/ShareSecretPublicPage";
const SecretApproval = () => { const SecretSharedPublicPage = () => {
return ( return (
<> <>
<Head> <Head>
@@ -12,13 +12,13 @@ const SecretApproval = () => {
<meta property="og:title" content="" /> <meta property="og:title" content="" />
<meta name="og:description" content="" /> <meta name="og:description" content="" />
</Head> </Head>
<div className="h-full dark"> <div className="dark h-full">
<ShareSecretPublicPage /> <ShareSecretPublicPage isNewSession={false} />
</div> </div>
</> </>
); );
}; };
export default SecretApproval; export default SecretSharedPublicPage;
SecretApproval.requireAuth = false; SecretSharedPublicPage.requireAuth = false;

8
frontend/src/views/ShareSecretPage/components/AddShareSecretForm.tsx
View File

@@ -125,11 +125,7 @@ export const AddShareSecretForm = ({
}; };
return ( return (
<form className="flex w-full flex-col items-center" onSubmit={handleSubmit(onFormSubmit)}> <form className="flex w-full flex-col items-center" onSubmit={handleSubmit(onFormSubmit)}>
<div <div className={`${!inModal && "border border-mineshaft-600 bg-mineshaft-800 p-4"}`}>
className={`w-[${inModal ? "33rem" : "36rem"}] ${
!inModal && "border border-mineshaft-600 bg-mineshaft-800 p-4"
}`}
>
<div className="mb-4"> <div className="mb-4">
<Controller <Controller
control={control} control={control}
@@ -215,7 +211,7 @@ export const AddShareSecretForm = ({
</div> </div>
</div> </div>
</div> </div>
<div className={`flex items-center ${!inModal && "justify-center"}`}> <div className={`flex items-center ${!inModal && "justify-center pt-1"}`}>
<Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}> <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
{inModal ? "Create" : "Share your own Secret"} {inModal ? "Create" : "Share your own Secret"}
</Button> </Button>

34
frontend/src/views/ShareSecretPage/components/ViewAndCopySharedSecret.tsx
View File

@@ -15,24 +15,22 @@ export const ViewAndCopySharedSecret = ({
copyUrlToClipboard: () => void; copyUrlToClipboard: () => void;
}) => { }) => {
return ( return (
<div <div className={`flex w-full justify-center ${!inModal ? "mx-auto max-w-[40rem]" : ""}`}>
className={`w-[${inModal ? "33rem" : "36rem"}] ${ <div className={`${!inModal ? "border border-mineshaft-600 bg-mineshaft-800 p-4" : ""}`}>
!inModal && "border border-mineshaft-600 bg-mineshaft-800 p-4" <div className="my-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
}`} <p className="mr-4 break-all">{newSharedSecret}</p>
> <IconButton
<div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400"> ariaLabel="copy icon"
<p className="mr-4 break-all">{newSharedSecret}</p> colorSchema="secondary"
<IconButton className="group relative"
ariaLabel="copy icon" onClick={copyUrlToClipboard}
colorSchema="secondary" >
className="group relative" <FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
onClick={copyUrlToClipboard} <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
> Click to Copy
<FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} /> </span>
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn"> </IconButton>
Click to Copy </div>
</span>
</IconButton>
</div> </div>
</div> </div>
); );

100
frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx
View File

@@ -3,16 +3,18 @@ import Head from "next/head";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { faArrowRight, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { decryptSymmetric } from "@app/components/utilities/cryptography/crypto"; import { decryptSymmetric } from "@app/components/utilities/cryptography/crypto";
import { useTimedReset } from "@app/hooks"; import { Button } from "@app/components/v2";
import { usePopUp, useTimedReset } from "@app/hooks";
import { useGetActiveSharedSecretByIdAndHashedHex } from "@app/hooks/api/secretSharing"; import { useGetActiveSharedSecretByIdAndHashedHex } from "@app/hooks/api/secretSharing";
import { AddShareSecretModal } from "../ShareSecretPage/components/AddShareSecretModal";
import { SecretTable } from "./components"; import { SecretTable } from "./components";
export const ShareSecretPublicPage = () => { export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean }) => {
const router = useRouter(); const router = useRouter();
const { id, key: urlEncodedPublicKey } = router.query; const { id, key: urlEncodedPublicKey } = router.query;
const [hashedHex, key] = urlEncodedPublicKey const [hashedHex, key] = urlEncodedPublicKey
@@ -52,7 +54,7 @@ export const ShareSecretPublicPage = () => {
navigator.clipboard.writeText(decryptedSecret); navigator.clipboard.writeText(decryptedSecret);
setIsUrlCopied(true); setIsUrlCopied(true);
}; };
// const { popUp, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const); const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
return ( return (
<div className="h-screen bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200"> <div className="h-screen bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200">
@@ -60,16 +62,22 @@ export const ShareSecretPublicPage = () => {
<title>Secret Shared | Infisical</title> <title>Secret Shared | Infisical</title>
<link rel="icon" href="/infisical.ico" /> <link rel="icon" href="/infisical.ico" />
</Head> </Head>
<div className="flex-col items-center justify-center h-screen w-full overflow-y-auto dark:[color-scheme:dark]"> <div className="h-screen w-full flex-col items-center justify-center dark:[color-scheme:dark]">
<Link href="https://infisical.com"> <div className="mb-4 flex justify-center pt-8 md:pt-16">
<div className="mb-4 flex justify-center pt-8 md:pt-0 sm:mt-28"> <Link href="https://infisical.com">
<Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" /> <Image
</div> src="/images/gradientLogo.svg"
</Link> height={90}
<h1 className="mt-6 mb-4 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-2xl font-medium text-transparent px-4"> width={120}
alt="Infisical logo"
className="cursor-pointer"
/>
</Link>
</div>
<h1 className="mt-6 mb-4 bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-2xl font-medium text-transparent">
{id ? "Someone shared a secret on Infisical with you." : "Share Secrets with Infisical"} {id ? "Someone shared a secret on Infisical with you." : "Share Secrets with Infisical"}
</h1> </h1>
<div className="flex max-w-xl w-full mt-8 flex justify-center m-auto px-4"> <div className="m-auto mt-8 flex w-full max-w-xl justify-center px-4">
{id && ( {id && (
<SecretTable <SecretTable
isLoading={isLoading} isLoading={isLoading}
@@ -80,52 +88,74 @@ export const ShareSecretPublicPage = () => {
)} )}
</div> </div>
<div className="my-6 sm:my-10 max-w-xl w-full px-8 flex justify-center m-auto px-4"> {isNewSession && (
<div className="border-t border-mineshaft-600 w-full"/> <AddShareSecretModal
popUp={popUp}
handlePopUpToggle={handlePopUpToggle}
inModal={false}
isPublic
/>
)}
<div className="m-auto my-6 flex w-full max-w-xl justify-center px-8 px-4 sm:my-10">
<div className="w-full border-t border-mineshaft-600" />
</div> </div>
<div className="max-w-xl m-auto px-4"> <div className="m-auto max-w-xl px-4">
<div className="flex flex-col rounded-md gap-2 max-w-xl border bg-primary/5 p-6 border-primary-500/30 mb-8 sm:mb-20 flex justify-center m-auto"> <div className="m-auto mb-8 flex flex max-w-xl flex-col justify-center gap-2 rounded-md border border-primary-500/30 bg-primary/5 p-6">
<p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl"> <p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
Safe, Secure, & Open Source Safe, Secure, & Open Source
</p> </p>
<p className="md:text-md text-sm"> <p className="md:text-md text-sm">
Infisical is the <a Infisical is the{" "}
<a
href="https://github.com/infisical/infisical" href="https://github.com/infisical/infisical"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-primary underline" className="text-primary underline"
> >
open source open source
</a> secrets management platform for developers. <br className="hidden md:inline" /> </a>{" "}
<div className="pb-2"/> secrets management platform for developers. <br className="hidden md:inline" />
Infisical Secret Sharing uses end-to-end encrypted architecture to ensure that <div className="pb-2" />
your secrets are truly private (even from us). Infisical Secret Sharing uses end-to-end encrypted architecture to ensure that your
secrets are truly private (even from us).
</p> </p>
<Link href="https://infisical.com"><span className="hover:text-primary duration-200 cursor-pointer mt-4">Learn More <FontAwesomeIcon icon={faArrowRight} /></span></Link> <Link href="https://infisical.com">
<span className="mt-4 cursor-pointer duration-200 hover:text-primary">
Learn More <FontAwesomeIcon icon={faArrowRight} />
</span>
</Link>
</div> </div>
{!isNewSession && (
<div className="flex flex-1 flex-col items-center justify-center px-4">
<Button
className="bg-mineshaft-700 text-bunker-200"
colorSchema="primary"
variant="outline_bg"
size="sm"
onClick={() => {
handlePopUpOpen("createSharedSecret");
}}
leftIcon={<FontAwesomeIcon icon={faPlus} />}
>
Share your own Secret
</Button>
</div>
)}
</div> </div>
<div className="bottom-0 flex w-full items-center justify-center bg-mineshaft-600 p-2 sm:absolute">
{/* <div className="flex flex-1 flex-col items-center justify-center px-4">
<div className="pt-20">
<AddShareSecretModal
popUp={popUp}
handlePopUpToggle={handlePopUpToggle}
isPublic
inModal={false}
/>
</div>
</div> */}
<div className="sm:absolute bottom-0 w-full bg-mineshaft-600 flex items-center justify-center p-2">
<p className="text-center text-sm text-mineshaft-300"> <p className="text-center text-sm text-mineshaft-300">
© 2024{" "} © 2024{" "}
<a className="text-primary" href="https://infisical.com"> <a className="text-primary" href="https://infisical.com">
Infisical Infisical
</a>. All rights reserved. </a>
. All rights reserved.
<br /> <br />
156 2nd st, 3rd Floor, San Francisco, California, 94105, United States. 🇺🇸 156 2nd st, 3rd Floor, San Francisco, California, 94105, United States. 🇺🇸
</p> </p>
</div> </div>
<AddShareSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} isPublic inModal />
</div> </div>
</div> </div>
); );

12
frontend/src/views/ShareSecretPublicPage/components/SecretTable.tsx
View File

@@ -16,7 +16,7 @@ export const SecretTable = ({
isUrlCopied, isUrlCopied,
copyUrlToClipboard copyUrlToClipboard
}: Props) => ( }: Props) => (
<div className="flex items-center w-full h-full rounded border border-solid border-mineshaft-700 bg-mineshaft-800 p-2"> <div className="flex w-full items-center justify-center rounded border border-solid border-mineshaft-700 bg-mineshaft-800 p-2">
{isLoading && <div className="bg-mineshaft-800 text-center text-bunker-400">Loading...</div>} {isLoading && <div className="bg-mineshaft-800 text-center text-bunker-400">Loading...</div>}
{!isLoading && !decryptedSecret && ( {!isLoading && !decryptedSecret && (
<Tr> <Tr>
@@ -26,16 +26,18 @@ export const SecretTable = ({
</Tr> </Tr>
)} )}
{!isLoading && decryptedSecret && ( {!isLoading && decryptedSecret && (
<div className="relative h-full w-full p-2 border border-mineshaft-700 bg-mineshaft-900 overflow-y-auto dark"> <div className="dark relative flex h-full w-full items-center overflow-y-auto border border-mineshaft-700 bg-mineshaft-900 p-2">
<div className="w-full h-full flex-1 break-words pr-4 overflow-y-scroll max-h-60 dark:[color-scheme:dark] thin-scrollbar"> <div className="thin-scrollbar flex h-full max-h-44 w-full flex-1 overflow-y-scroll break-words pr-4 dark:[color-scheme:dark]">
<div className="whitespace-pre-line w-full min-w-full">{decryptedSecret}</div> <div className="align-center flex w-full min-w-full whitespace-pre-line">
{decryptedSecret}
</div>
</div> </div>
<IconButton <IconButton
variant="outline_bg" variant="outline_bg"
colorSchema="primary" colorSchema="primary"
ariaLabel="copy to clipboard" ariaLabel="copy to clipboard"
onClick={copyUrlToClipboard} onClick={copyUrlToClipboard}
className="absolute right-6 top-2 rounded" className="mx-1 flex max-h-8 items-center rounded"
size="xs" size="xs"
> >
<FontAwesomeIcon className="pr-2" icon={isUrlCopied ? faCheck : faCopy} /> Copy <FontAwesomeIcon className="pr-2" icon={isUrlCopied ? faCheck : faCopy} /> Copy