mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-09-22 13:39:35 +00:00
updated design of secret sharing
This commit is contained in:
Vladyslav Matsiiako
committed by
ShubhamPalriwala
ShubhamPalriwala
parent
a6e71c98a6
commit
263d321d75
@@ -12,7 +12,7 @@ const SecretApproval = () => {
|
||||
<meta property="og:title" content="" />
|
||||
<meta name="og:description" content="" />
|
||||
</Head>
|
||||
<div className="h-full">
|
||||
<div className="h-full dark">
|
||||
<ShareSecretPublicPage />
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -12,7 +12,7 @@ const SecretApproval = () => {
|
||||
<meta property="og:title" content="" />
|
||||
<meta name="og:description" content="" />
|
||||
</Head>
|
||||
<div className="h-full">
|
||||
<div className="h-full dark">
|
||||
<ShareSecretPublicPage />
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -3,12 +3,13 @@ import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { decryptSymmetric } from "@app/components/utilities/cryptography/crypto";
|
||||
import { usePopUp, useTimedReset } from "@app/hooks";
|
||||
import { useTimedReset } from "@app/hooks";
|
||||
import { useGetActiveSharedSecretByIdAndHashedHex } from "@app/hooks/api/secretSharing";
|
||||
|
||||
import { AddShareSecretModal } from "../ShareSecretPage/components/AddShareSecretModal";
|
||||
import { SecretTable } from "./components";
|
||||
|
||||
export const ShareSecretPublicPage = () => {
|
||||
@@ -51,91 +52,81 @@ export const ShareSecretPublicPage = () => {
|
||||
navigator.clipboard.writeText(decryptedSecret);
|
||||
setIsUrlCopied(true);
|
||||
};
|
||||
const { popUp, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
|
||||
// const { popUp, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col bg-bunker-800 text-gray-200">
|
||||
<div className="h-screen bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200">
|
||||
<Head>
|
||||
<title>Secret Shared | Infisical</title>
|
||||
<link rel="icon" href="/infisical.ico" />
|
||||
</Head>
|
||||
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="flex-col items-center justify-center h-screen w-full overflow-y-auto dark:[color-scheme:dark]">
|
||||
<Link href="https://infisical.com">
|
||||
<Image
|
||||
src="/images/biglogo.png"
|
||||
height={60}
|
||||
width={80}
|
||||
alt="Infisical logo"
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
<div className="mb-4 flex justify-center pt-8 md:pt-0 sm:mt-28">
|
||||
<Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<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">
|
||||
{id ? "Someone shared a secret on Infisical with you." : "Share Secrets with Infisical"}
|
||||
</h1>
|
||||
<div className="flex max-w-xl w-full mt-8 flex justify-center m-auto px-4">
|
||||
{id && (
|
||||
<SecretTable
|
||||
isLoading={isLoading}
|
||||
decryptedSecret={decryptedSecret}
|
||||
isUrlCopied={isUrlCopied}
|
||||
copyUrlToClipboard={copyUrlToClipboard}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col items-center justify-center px-4">
|
||||
<div className="flex w-full max-w-4xl flex-col items-center gap-4 md:gap-20">
|
||||
<p className="text-center text-xl font-semibold text-gray-200 md:text-3xl">
|
||||
{id ? "Secret Shared via Infisical" : "Share Secrets with Infisical"}
|
||||
</p>
|
||||
<div className="flex w-full flex-grow flex-col gap-6 md:flex-row md:gap-12">
|
||||
<div className="flex-1 self-center pt-4 text-center md:pt-0 md:text-left">
|
||||
<p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
|
||||
Safe & Secure
|
||||
</p>
|
||||
<p className="md:text-md text-sm">
|
||||
Infisical uses <span className="text-primary">Zero Knowledge</span> to ensure that
|
||||
your secrets are truly private (even from us).
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 rounded-lg p-2">
|
||||
{id && (
|
||||
<SecretTable
|
||||
isLoading={isLoading}
|
||||
decryptedSecret={decryptedSecret}
|
||||
isUrlCopied={isUrlCopied}
|
||||
copyUrlToClipboard={copyUrlToClipboard}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 self-center text-center md:text-right">
|
||||
<p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
|
||||
Open Source
|
||||
</p>
|
||||
<p className="md:text-md text-sm">
|
||||
Infisical is open source. <br className="hidden md:inline" />
|
||||
Check us out on{" "}
|
||||
<a
|
||||
href="https://github.com/infisical/infisical"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-6 sm:my-10 max-w-xl w-full px-8 flex justify-center m-auto px-4">
|
||||
<div className="border-t border-mineshaft-600 w-full"/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-xl m-auto 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">
|
||||
<p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
|
||||
Safe, Secure, & Open Source
|
||||
</p>
|
||||
<p className="md:text-md text-sm">
|
||||
Infisical is the <a
|
||||
href="https://github.com/infisical/infisical"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline"
|
||||
>
|
||||
open source
|
||||
</a> secrets management platform for developers. <br className="hidden md:inline" />
|
||||
<div className="pb-2"/>
|
||||
Infisical Secret Sharing uses end-to-end encrypted architecture to ensure that
|
||||
your secrets are truly private (even from us).
|
||||
</p>
|
||||
<Link href="https://infisical.com"><span className="hover:text-primary duration-200 cursor-pointer mt-4">Learn More <FontAwesomeIcon icon={faArrowRight} /></span></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-20">
|
||||
<AddShareSecretModal
|
||||
popUp={popUp}
|
||||
handlePopUpToggle={handlePopUpToggle}
|
||||
isPublic
|
||||
inModal={false}
|
||||
/>
|
||||
|
||||
{/* <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">
|
||||
© 2024{" "}
|
||||
<a className="text-primary" href="https://infisical.com">
|
||||
Infisical
|
||||
</a>. All rights reserved.
|
||||
<br />
|
||||
156 2nd st, 3rd Floor, San Francisco, California, 94105, United States. 🇺🇸
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<p className="text-center text-sm text-gray-200">
|
||||
Developed by{" "}
|
||||
<a className="text-primary" href="https://infisical.com">
|
||||
Infisical
|
||||
</a>
|
||||
<br />
|
||||
Open Source Secret Management{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { faCheck, faCopy, faKey } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { EmptyState, IconButton, SecretInput, Td, Tr } from "@app/components/v2";
|
||||
import { EmptyState, IconButton, Td, Tr } from "@app/components/v2";
|
||||
|
||||
type Props = {
|
||||
isLoading: boolean;
|
||||
@@ -16,7 +16,7 @@ export const SecretTable = ({
|
||||
isUrlCopied,
|
||||
copyUrlToClipboard
|
||||
}: Props) => (
|
||||
<div className="flex items-center rounded border border-solid border-mineshaft-700 bg-mineshaft-800 p-4">
|
||||
<div className="flex items-center w-full h-full 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 && !decryptedSecret && (
|
||||
<Tr>
|
||||
@@ -26,19 +26,21 @@ export const SecretTable = ({
|
||||
</Tr>
|
||||
)}
|
||||
{!isLoading && decryptedSecret && (
|
||||
<>
|
||||
<div className="min-w-[12rem] max-w-[20rem] flex-1 break-words pr-4">
|
||||
<SecretInput isVisible value={decryptedSecret} readOnly />
|
||||
<div className="relative h-full w-full p-2 border border-mineshaft-700 bg-mineshaft-900 overflow-y-auto dark">
|
||||
<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="whitespace-pre-line w-full min-w-full">{decryptedSecret}</div>
|
||||
</div>
|
||||
<IconButton
|
||||
variant="outline_bg"
|
||||
colorSchema="primary"
|
||||
ariaLabel="copy to clipboard"
|
||||
onClick={copyUrlToClipboard}
|
||||
className="rounded p-2 hover:bg-gray-700"
|
||||
className="absolute right-6 top-2 rounded"
|
||||
size="xs"
|
||||
>
|
||||
<FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
|
||||
<FontAwesomeIcon className="pr-2" icon={isUrlCopied ? faCheck : faCopy} /> Copy
|
||||
</IconButton>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user