feat: validate via password before showing secret

frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx

@@ -1,3 +1,4 @@
+import { useState, useCallback } from 'react'
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -6,9 +7,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useGetActiveSharedSecretById } from "@app/hooks/api/secretSharing";
 
-import { SecretContainer, SecretErrorContainer } from "./components";
+import { SecretContainer, SecretErrorContainer, PasswordContainer } from "./components";
 
 export const ViewSecretPublicPage = () => {
+  const [passMatches, setPassMatch] = useState(false)
   const router = useRouter();
   const { id, key: urlEncodedPublicKey } = router.query;
 
@@ -21,6 +23,10 @@ export const ViewSecretPublicPage = () => {
     hashedHex
   });
 
+  const handlePassMatch = useCallback((val: boolean) => {
+    setPassMatch(val)
+  }, [setPassMatch])
+
   return (
     <div className="flex h-screen flex-col justify-between overflow-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:[color-scheme:dark]">
       <div />
@@ -52,7 +58,13 @@ export const ViewSecretPublicPage = () => {
             </a>
           </p>
         </div>
-        {secret && key && <SecretContainer secret={secret} secretKey={key} />}
+        {secret && (
+          !passMatches ? (
+            <PasswordContainer secret={secret} handlePassMatch={handlePassMatch} />
+          ) : (
+            key && <SecretContainer secret={secret} secretKey={key} />
+          )
+        )}
         {error && <SecretErrorContainer />}
         <div className="m-auto my-8 flex w-full">
           <div className="w-full border-t border-mineshaft-600" />

frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx

@@ -0,0 +1,60 @@
+import { useState, ChangeEvent } from "react";
+import {
+  faArrowRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, IconButton, Input } from "@app/components/v2";
+import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
+
+type Props = {
+  secret: TViewSharedSecretResponse;
+  handlePassMatch: (val: boolean) => void;
+};
+
+export const PasswordContainer = ({ secret, handlePassMatch }: Props) => {
+  const [password, setPassword] = useState<string>('')
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value)
+  }
+
+  const validatePassword = () => {
+    if (secret.password === password) {
+      handlePassMatch(true)
+      console.log('match')
+    } else {
+      console.log({secret})
+    }
+  }
+
+  return (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <div className="flex items-center gap-2 justify-between rounded-md">
+        <Input onChange={handleChange} placeholder="Enter Password to view secret"></Input>
+        <div className="flex">
+        <IconButton
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="group relative"
+            onClick={() => {
+              validatePassword()
+            }}
+          >
+            <FontAwesomeIcon icon={faArrowRight} />
+          </IconButton>
+        </div>
+      </div>
+      <Button
+        className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
+        colorSchema="primary"
+        variant="outline_bg"
+        size="sm"
+        onClick={() => window.open("https://app.infisical.com/share-secret", "_blank")}
+        rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
+      >
+        Share your own secret
+      </Button>
+    </div>
+  );
+};

frontend/src/views/ViewSecretPublicPage/components/index.tsx

@@ -1,2 +1,3 @@
 export { SecretContainer } from "./SecretContainer";
 export { SecretErrorContainer } from "./SecretErrorContainer";
+export { PasswordContainer } from "./PasswordContainer";