feat: handle error logs and validate password

frontend/src/hooks/api/secretSharing/queries.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { TSharedSecret, TViewSharedSecretResponse } from "./types";
+import { TSharedSecret, TViewSharedSecretResponse, ValidateSecretPassword } from "./types";
 
 export const secretSharingKeys = {
   allSharedSecrets: () => ["sharedSecrets"] as const,
@@ -67,3 +67,29 @@ export const useGetActiveSharedSecretById = ({
     }
   });
 };
+
+export const useValidateSecretPassword = ({
+  sharedSecretId,
+  hashedHex,
+  userPassword,
+}: {
+  sharedSecretId: string;
+  hashedHex: string;
+  userPassword: string;
+}) => {
+  return useQuery({
+    enabled: Boolean(sharedSecretId) && Boolean(userPassword),
+    queryKey: `validateSecretPass-${sharedSecretId}`,
+    queryFn: async () => {
+      const { data, isLoading, refetch } = await apiRequest.post<ValidateSecretPassword>(
+        `/api/v1/secret-sharing/public/${sharedSecretId}/validate`,
+        {
+          hashedHex,
+          password: userPassword
+        }
+      );
+
+      return { data, isLoading, refetch }
+    }
+  })
+}

frontend/src/hooks/api/secretSharing/types.ts

@@ -42,3 +42,7 @@ export enum SecretSharingAccessType {
   Anyone = "anyone",
   Organization = "organization"
 }
+
+export type ValidateSecretPassword = {
+  isValid: boolean
+}

frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx

@@ -60,7 +60,7 @@ export const ViewSecretPublicPage = () => {
         </div>
         {secret && (
           !passMatches && secret.password ? (
-            <PasswordContainer secret={secret} handlePassMatch={handlePassMatch} />
+            <PasswordContainer secretId={id} hashedHex={hashedHex} handlePassMatch={handlePassMatch} />
           ) : (
             key && <SecretContainer secret={secret} secretKey={key} />
           )

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

@@ -1,27 +1,51 @@
 import { useState, ChangeEvent } from "react";
-import {
-  faArrowRight,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon, faSpinner } from "@fortawesome/react-fontawesome";
 
 import { Button, IconButton, Input } from "@app/components/v2";
-import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
+import { useValidateSecretPassword } from "@app/hooks/api/secretSharing";
+import { createNotification } from "@app/components/notifications";
 
 type Props = {
-  secret: TViewSharedSecretResponse;
+  secretId: string;
+  hashedHex: string;
   handlePassMatch: (val: boolean) => void;
 };
 
-export const PasswordContainer = ({ secret, handlePassMatch }: Props) => {
+export const PasswordContainer = ({ secretId, hashedHex, handlePassMatch }: Props) => {
   const [password, setPassword] = useState<string>('')
+  const [isLoading, setLoading] = useState(false)
+  const { refetch } = useValidateSecretPassword({
+    sharedSecretId: secretId,
+    hashedHex,
+    userPassword: password,
+  })
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value)
   }
 
-  const validatePassword = () => {
-    if (secret.password === password) {
-      handlePassMatch(true)
+  const validatePassword = async () => {
+    try {
+      const { data: freshData } = await refetch();
+
+      if (freshData.data.isValid === true) {
+        handlePassMatch(true);
+      } else {
+        createNotification({
+          text: "Password is Invalid. Try again",
+          type: "error"
+        })
+      }
+    } catch (error) {
+      console.error("Failed to validate password:", error);
+      createNotification({
+        text: "Failed to validate password",
+        type: "error"
+      })
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -38,7 +62,7 @@ export const PasswordContainer = ({ secret, handlePassMatch }: Props) => {
               validatePassword()
             }}
           >
-            <FontAwesomeIcon icon={faArrowRight} />
+            <FontAwesomeIcon icon={isLoading ? faSpinner : faArrowRight} />
           </IconButton>
         </div>
       </div>