From d34f858a4f69bdcd1bee199e732aa87a2540d8f0 Mon Sep 17 00:00:00 2001
From: Riddhiagrawal001 <50551695+Riddhiagrawal001@users.noreply.github.com>
Date: Tue, 4 Jun 2024 14:54:48 +0530
Subject: [PATCH] feat: regenerate recovery codes (#776)

---
 .../AuthModule/TotpAuth/TotpRecoveryCodes.res |  10 +-
 .../AuthModule/TotpAuth/TotpUtils.res         |   8 +
 .../HSwitchProfile/ModifyTwoFaSettings.res    | 207 ++++++++++++++++--
 3 files changed, 200 insertions(+), 25 deletions(-)

diff --git a/src/entryPoints/AuthModule/TotpAuth/TotpRecoveryCodes.res b/src/entryPoints/AuthModule/TotpAuth/TotpRecoveryCodes.res
index 2cf9f1253..577c067f6 100644
--- a/src/entryPoints/AuthModule/TotpAuth/TotpRecoveryCodes.res
+++ b/src/entryPoints/AuthModule/TotpAuth/TotpRecoveryCodes.res
@@ -33,14 +33,6 @@ let make = (~setTwoFaPageState, ~onClickDownload, ~setShowNewQR) => {
     }
   }
 
-  let downloadRecoveryCodes = () => {
-    open LogicUtils
-    DownloadUtils.downloadOld(
-      ~fileName="recoveryCodes.txt",
-      ~content=JSON.stringifyWithIndent(recoveryCodes->getJsonFromArrayOfString, 3),
-    )
-  }
-
   let copyRecoveryCodes = ev => {
     open LogicUtils
     ev->ReactEvent.Mouse.stopPropagation
@@ -84,7 +76,7 @@ let make = (~setTwoFaPageState, ~onClickDownload, ~setShowNewQR) => {
             buttonType={Primary}
             buttonSize={Small}
             onClick={_ => {
-              downloadRecoveryCodes()
+              TotpUtils.downloadRecoveryCodes(~recoveryCodes)
               onClickDownload(~skip_2fa=false)->ignore
             }}
           />
diff --git a/src/entryPoints/AuthModule/TotpAuth/TotpUtils.res b/src/entryPoints/AuthModule/TotpAuth/TotpUtils.res
index 129397c96..80122a827 100644
--- a/src/entryPoints/AuthModule/TotpAuth/TotpUtils.res
+++ b/src/entryPoints/AuthModule/TotpAuth/TotpUtils.res
@@ -143,3 +143,11 @@ let validateTotpForm = (values: JSON.t, keys: array<string>) => {
 
   errors->JSON.Encode.object
 }
+
+let downloadRecoveryCodes = (~recoveryCodes) => {
+  open LogicUtils
+  DownloadUtils.downloadOld(
+    ~fileName="recoveryCodes.txt",
+    ~content=JSON.stringifyWithIndent(recoveryCodes->getJsonFromArrayOfString, 3),
+  )
+}
diff --git a/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res b/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res
index baf71b95d..90760493c 100644
--- a/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res
+++ b/src/screens/Settings/HSwitchProfile/ModifyTwoFaSettings.res
@@ -13,6 +13,7 @@ module Verify2FAModalComponent = {
     ~setOtp=_ => (),
     ~recoveryCode="",
     ~setRecoveryCode=_ => (),
+    ~showOnlyTotp=false,
   ) => {
     open HSwitchSettingTypes
     <div className="flex flex-col items-center gap-2 ">
@@ -20,18 +21,20 @@ module Verify2FAModalComponent = {
       | Totp =>
         <>
           <TwoFaElements.TotpInput otp setOtp />
-          <p className={`${p2Regular} text-jp-gray-700`}>
-            {"Didn't get a code? "->React.string}
-            <span
-              className="cursor-pointer underline underline-offset-2 text-blue-600"
-              onClick={_ => {
-                setOtp(_ => "")
-                setErrorMessage(_ => "")
-                setTwoFaState(_ => RecoveryCode)
-              }}>
-              {"Use recovery-code"->React.string}
-            </span>
-          </p>
+          <UIUtils.RenderIf condition={!showOnlyTotp}>
+            <p className={`${p2Regular} text-jp-gray-700`}>
+              {"Didn't get a code? "->React.string}
+              <span
+                className="cursor-pointer underline underline-offset-2 text-blue-600"
+                onClick={_ => {
+                  setOtp(_ => "")
+                  setErrorMessage(_ => "")
+                  setTwoFaState(_ => RecoveryCode)
+                }}>
+                {"Use recovery-code"->React.string}
+              </span>
+            </p>
+          </UIUtils.RenderIf>
         </>
 
       | RecoveryCode =>
@@ -98,6 +101,9 @@ module ResetTotp = {
           }
           setOtp(_ => "")
           setButtonState(_ => Button.Normal)
+          RescriptReactRouter.push(
+            HSwitchGlobalVars.appendDashboardPath(~url="/account-settings/profile"),
+          )
         }
       }
     }
@@ -184,7 +190,7 @@ module ResetTotp = {
 
     <div>
       <Modal
-        modalHeading="Verify OTP"
+        modalHeading={twoFaState === Totp ? "Verify OTP" : "Verify recovery code"}
         showModal=showVerifyModal
         setShowModal=setShowVerifyModal
         onCloseClickCustomFun={handleModalClose}
@@ -272,6 +278,170 @@ module ResetTotp = {
   }
 }
 
+module RegenerateRecoveryCodes = {
+  @react.component
+  let make = (~checkStatusResponse: HSwitchSettingTypes.checkStatusType) => {
+    open LogicUtils
+    open APIUtils
+
+    let getURL = useGetURL()
+    let fetchDetails = useGetMethod()
+    let showToast = ToastState.useShowToast()
+    let verifyTotpLogic = TotpHooks.useVerifyTotp()
+    let (showVerifyModal, setShowVerifyModal) = React.useState(_ => false)
+    let (otpInModal, setOtpInModal) = React.useState(_ => "")
+    let (buttonState, setButtonState) = React.useState(_ => Button.Normal)
+    let (recoveryCodes, setRecoveryCodes) = React.useState(_ => [])
+    let (errorMessage, setErrorMessage) = React.useState(_ => "")
+    let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Success)
+
+    let generateRecoveryCodes = async () => {
+      try {
+        setScreenState(_ => PageLoaderWrapper.Loading)
+        let url = getURL(~entityName=USERS, ~userType=#GENERATE_RECOVERY_CODES, ~methodType=Get, ())
+        let response = await fetchDetails(url)
+        let recoveryCodesValue = response->getDictFromJsonObject->getStrArray("recovery_codes")
+        setRecoveryCodes(_ => recoveryCodesValue)
+        setScreenState(_ => PageLoaderWrapper.Success)
+      } catch {
+      | _ => {
+          setButtonState(_ => Button.Normal)
+          showToast(~message="Failed to generate recovery codes!", ~toastType=ToastError, ())
+          RescriptReactRouter.push(
+            HSwitchGlobalVars.appendDashboardPath(~url=`/account-settings/profile`),
+          )
+          setScreenState(_ => PageLoaderWrapper.Success)
+        }
+      }
+    }
+
+    let handleModalClose = () => {
+      RescriptReactRouter.push(
+        HSwitchGlobalVars.appendDashboardPath(~url=`/account-settings/profile`),
+      )
+    }
+
+    let verifyTOTP = async () => {
+      try {
+        setButtonState(_ => Button.Loading)
+        if otpInModal->String.length > 0 {
+          let body = [("totp", otpInModal->JSON.Encode.string)]->getJsonFromArrayOfJson
+          let _ = await verifyTotpLogic(body, Fetch.Post)
+          setShowVerifyModal(_ => false)
+          generateRecoveryCodes()->ignore
+        } else {
+          showToast(~message="OTP field cannot be empty!", ~toastType=ToastError, ())
+        }
+        setButtonState(_ => Button.Normal)
+      } catch {
+      | Exn.Error(e) => {
+          let err = Exn.message(e)->Option.getOr("Verification Failed")
+          let errorMessage = err->safeParse->getDictFromJsonObject->getString("message", "")
+          setOtpInModal(_ => "")
+          setErrorMessage(_ => errorMessage)
+          setButtonState(_ => Button.Normal)
+        }
+      }
+    }
+
+    React.useEffect0(() => {
+      if checkStatusResponse.totp {
+        generateRecoveryCodes()->ignore
+      } else {
+        setShowVerifyModal(_ => true)
+      }
+      None
+    })
+
+    let copyRecoveryCodes = ev => {
+      ev->ReactEvent.Mouse.stopPropagation
+      Clipboard.writeText(JSON.stringifyWithIndent(recoveryCodes->getJsonFromArrayOfString, 3))
+      showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
+    }
+
+    <PageLoaderWrapper screenState>
+      <div>
+        <Modal
+          modalHeading="Verify OTP"
+          showModal=showVerifyModal
+          setShowModal=setShowVerifyModal
+          onCloseClickCustomFun={handleModalClose}
+          modalClass="w-fit m-auto">
+          <div className="flex flex-col gap-12">
+            <Verify2FAModalComponent
+              twoFaState=Totp
+              setTwoFaState={_ => ()}
+              otp={otpInModal}
+              setOtp={setOtpInModal}
+              errorMessage
+              setErrorMessage
+              showOnlyTotp=true
+            />
+            <div className="flex flex-1 justify-end">
+              <Button
+                text={"Verify OTP"}
+                buttonType=Primary
+                buttonSize=Small
+                buttonState={otpInModal->String.length === 0 ? Disabled : buttonState}
+                onClick={_ => verifyTOTP()->ignore}
+                rightIcon={CustomIcon(
+                  <Icon
+                    name="thin-right-arrow" size=20 className="group-hover:scale-125 cursor-pointer"
+                  />,
+                )}
+              />
+            </div>
+          </div>
+        </Modal>
+        <div className={`bg-white border h-40-rem w-133 rounded-2xl flex flex-col`}>
+          <div className="p-6 border-b-2 flex justify-between items-center">
+            <p className={`${h2TextStyle} text-grey-900`}>
+              {"Two factor recovery codes"->React.string}
+            </p>
+          </div>
+          <div className="px-8 py-8 flex flex-col flex-1 justify-between">
+            <div className="flex flex-col  gap-6">
+              <p className="text-jp-gray-700">
+                {"Recovery codes provide a way to access your account if you lose your device and can't receive two-factor authentication codes."->React.string}
+              </p>
+              <HSwitchUtils.WarningArea
+                warningText="These codes are the last resort for accessing your account in case you lose your password and second factors. If you cannot find these codes, you will lose access to your account."
+              />
+              <TwoFaElements.ShowRecoveryCodes recoveryCodes />
+            </div>
+            <div className="flex gap-4 justify-end">
+              <Button
+                leftIcon={CustomIcon(<img src={`/assets/CopyToClipboard.svg`} />)}
+                text={"Copy"}
+                buttonType={Secondary}
+                buttonSize={Small}
+                onClick={copyRecoveryCodes}
+              />
+              <Button
+                leftIcon={FontAwesome("download-api-key")}
+                text={"Download"}
+                buttonType={Primary}
+                buttonSize={Small}
+                onClick={_ => {
+                  TotpUtils.downloadRecoveryCodes(~recoveryCodes)
+                  showToast(
+                    ~message="Successfully regenerated new recovery codes !",
+                    ~toastType=ToastSuccess,
+                    (),
+                  )
+                  RescriptReactRouter.push(
+                    HSwitchGlobalVars.appendDashboardPath(~url="/account-settings/profile"),
+                  )
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageLoaderWrapper>
+  }
+}
+
 @react.component
 let make = () => {
   open APIUtils
@@ -316,18 +486,23 @@ let make = () => {
     None
   })
 
+  let pageTitle = switch twofactorAuthType->HSwitchProfileUtils.getTwoFaEnumFromString {
+  | ResetTotp => "Reset totp"
+  | RegenerateRecoveryCode => "Regenerate recovery codes"
+  }
+
   <PageLoaderWrapper screenState>
     <div className="flex flex-col gap-2">
-      <PageUtils.PageHeading title="Reset totp" />
+      <PageUtils.PageHeading title=pageTitle />
       <BreadCrumbNavigation
         path=[{title: "Profile", link: "/account-settings/profile"}]
-        currentPageTitle="Reset totp"
+        currentPageTitle=pageTitle
         cursorStyle="cursor-pointer"
       />
     </div>
     {switch twofactorAuthType->HSwitchProfileUtils.getTwoFaEnumFromString {
     | ResetTotp => <ResetTotp checkStatusResponse />
-    | RegenerateRecoveryCode => React.null
+    | RegenerateRecoveryCode => <RegenerateRecoveryCodes checkStatusResponse />
     }}
   </PageLoaderWrapper>
 }