From 3c643595977549552da193dfc7f3ac12709e6c32 Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Tue, 6 Aug 2024 18:29:43 +0300
Subject: [PATCH] feat: handle error logs and validate password

---
 .../src/hooks/api/secretSharing/queries.ts    | 28 ++++++++++-
 frontend/src/hooks/api/secretSharing/types.ts |  4 ++
 .../ViewSecretPublicPage.tsx                  |  2 +-
 .../components/PasswordContainer.tsx          | 46 ++++++++++++++-----
 4 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/frontend/src/hooks/api/secretSharing/queries.ts b/frontend/src/hooks/api/secretSharing/queries.ts
index 403521759..d8aee233c 100644
--- a/frontend/src/hooks/api/secretSharing/queries.ts
+++ b/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 }
+    }
+  })
+}
diff --git a/frontend/src/hooks/api/secretSharing/types.ts b/frontend/src/hooks/api/secretSharing/types.ts
index 47263d977..253321cbf 100644
--- a/frontend/src/hooks/api/secretSharing/types.ts
+++ b/frontend/src/hooks/api/secretSharing/types.ts
@@ -42,3 +42,7 @@ export enum SecretSharingAccessType {
   Anyone = "anyone",
   Organization = "organization"
 }
+
+export type ValidateSecretPassword = {
+  isValid: boolean
+}
diff --git a/frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx b/frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx
index 337c581fb..7352235da 100644
--- a/frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx
+++ b/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} />
           )
diff --git a/frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx b/frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx
index 20334837e..6a0ea649b 100644
--- a/frontend/src/views/ViewSecretPublicPage/components/PasswordContainer.tsx
+++ b/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>