Merge pull request #2244 from LemmyMwaura/password-protect-secret-share

feat: password protect secret share

frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx

@@ -32,7 +32,8 @@ const viewLimitOptions = [
 
 const schema = z.object({
   name: z.string().optional(),
-  secret: z.string(),
+  password: z.string().optional(),
+  secret: z.string().min(1),
   expiresIn: z.string(),
   viewLimit: z.string(),
   accessType: z.nativeEnum(SecretSharingAccessType).optional()
@@ -67,7 +68,14 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
     }
   });
 
-  const onFormSubmit = async ({ name, secret, expiresIn, viewLimit, accessType }: FormData) => {
+  const onFormSubmit = async ({
+    name,
+    password,
+    secret,
+    expiresIn,
+    viewLimit,
+    accessType
+  }: FormData) => {
     try {
       const expiresAt = new Date(new Date().getTime() + Number(expiresIn));
 
@@ -80,6 +88,7 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
 
       const { id } = await createSharedSecret.mutateAsync({
         name,
+        password,
         encryptedValue: ciphertext,
         hashedHex,
         iv,
@@ -149,6 +158,20 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
           </FormControl>
         )}
       />
+      <Controller
+        control={control}
+        name="password"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Password"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isOptional
+          >
+            <Input {...field} placeholder="Password" type="password" />
+          </FormControl>
+        )}
+      />
       <Controller
         control={control}
         name="expiresIn"

frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx

@@ -1,26 +1,43 @@
+import { useState } from "react";
 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 { AxiosError } from "axios";
 
 import { useGetActiveSharedSecretById } from "@app/hooks/api/secretSharing";
 
-import { SecretContainer, SecretErrorContainer } from "./components";
+import { PasswordContainer,SecretContainer, SecretErrorContainer } from "./components";
 
 export const ViewSecretPublicPage = () => {
   const router = useRouter();
+  const [password, setPassword] = useState<string>();
   const { id, key: urlEncodedPublicKey } = router.query;
 
   const [hashedHex, key] = urlEncodedPublicKey
     ? urlEncodedPublicKey.toString().split("-")
     : ["", ""];
 
-  const { data: secret, error } = useGetActiveSharedSecretById({
+  const {
+    data: fetchSecret,
+    error,
+    isLoading,
+    isFetching
+  } = useGetActiveSharedSecretById({
     sharedSecretId: id as string,
-    hashedHex
+    hashedHex,
+    password
   });
 
+  const isInvalidCredential =
+    ((error as AxiosError)?.response?.data as { message: string })?.message ===
+    "Invalid credentials";
+
+  const shouldShowPasswordPrompt =
+    isInvalidCredential || (fetchSecret?.isPasswordProtected && !fetchSecret.secret);
+  const isValidatingPassword = Boolean(password) && isFetching;
+
   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,8 +69,23 @@ export const ViewSecretPublicPage = () => {
             </a>
           </p>
         </div>
-        {secret && key && <SecretContainer secret={secret} secretKey={key} />}
-        {error && <SecretErrorContainer />}
+        {(shouldShowPasswordPrompt || isValidatingPassword) && (
+          <PasswordContainer
+            isSubmitting={isValidatingPassword}
+            onPasswordSubmit={(el) => {
+              setPassword(el);
+            }}
+            isInvalidCredential={!isFetching && isInvalidCredential}
+          />
+        )}
+        {!isLoading && (
+          <>
+            {!error && fetchSecret?.secret && key && (
+              <SecretContainer secret={fetchSecret.secret} secretKey={key} />
+            )}
+            {error && !isInvalidCredential && <SecretErrorContainer />}
+          </>
+        )}
         <div className="m-auto my-8 flex w-full">
           <div className="w-full border-t border-mineshaft-600" />
         </div>

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

@@ -0,0 +1,80 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowRight, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+
+type Props = {
+  onPasswordSubmit: (val: any) => void;
+  isSubmitting?: boolean;
+  isInvalidCredential?: boolean;
+};
+
+const formSchema = z.object({
+  password: z.string()
+});
+
+export type FormData = z.infer<typeof formSchema>;
+
+export const PasswordContainer = ({
+  onPasswordSubmit,
+  isSubmitting,
+  isInvalidCredential
+}: Props) => {
+  const { control, handleSubmit } = useForm<FormData>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const onFormSubmit = async ({ password }: FormData) => {
+    onPasswordSubmit(password);
+  };
+
+  return (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+      <form onSubmit={handleSubmit(onFormSubmit)}>
+        <Controller
+          control={control}
+          name="password"
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error) || isInvalidCredential}
+              errorText={isInvalidCredential ? "Invalid credential" : error?.message}
+              isRequired
+              label="Password"
+            >
+              <div className="flex items-center justify-between gap-2 rounded-md">
+                <Input {...field} placeholder="Enter Password to view secret" type="password" />
+                <div className="flex">
+                  <IconButton
+                    ariaLabel="copy icon"
+                    colorSchema="secondary"
+                    className="group relative"
+                    onClick={handleSubmit(onFormSubmit)}
+                  >
+                    <FontAwesomeIcon
+                      className={isSubmitting ? "fa-spin" : ""}
+                      icon={isSubmitting ? faSpinner : faArrowRight}
+                    />
+                  </IconButton>
+                </div>
+              </div>
+            </FormControl>
+          )}
+        />
+      </form>
+      <Button
+        className="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/SecretContainer.tsx

@@ -14,7 +14,7 @@ import { useTimedReset, useToggle } from "@app/hooks";
 import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
 
 type Props = {
-  secret: TViewSharedSecretResponse;
+  secret: TViewSharedSecretResponse["secret"];
   secretKey: string;
 };
 

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

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