From 2100fa0ccf1377d4160fa7b0e85cc87527829614 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sun, 26 Feb 2023 14:10:31 +0100
Subject: [PATCH] fix: Improve OTP

---
 public/locales/en-US/translation.json                | 6 ++++--
 src/route-widgets/Settings2FARoute/Delete2FA.tsx     | 9 ++++++---
 src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx | 7 +++++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json
index bf3a3fa..e5a8537 100644
--- a/public/locales/en-US/translation.json
+++ b/public/locales/en-US/translation.json
@@ -306,7 +306,8 @@
                         "title": "Note down your recovery codes",
                         "description": "These codes are used to recover your account if you lose access to your authenticator app. Note them down and store them in a safe place. You will not be able to view them again. Do not store them in your password manager. IF YOU LOSE YOUR RECOVERY CODES, YOU WILL LOSE ACCESS TO YOUR ACCOUNT. WE WILL NOT BE ABLE TO HELP YOU.",
                         "submit": "I have noted down my recovery codes"
-                    }
+                    },
+                    "success": "You have successfully enabled 2FA!"
                 },
                 "delete": {
                     "showAction": "Disable 2FA",
@@ -320,7 +321,8 @@
                     "askRecoveryCode": {
                         "label": "Recovery Code"
                     },
-                    "submit": "Disable 2FA"
+                    "submit": "Disable 2FA",
+                    "success": "You have successfully disabled 2FA!"
                 }
             }
         },
diff --git a/src/route-widgets/Settings2FARoute/Delete2FA.tsx b/src/route-widgets/Settings2FARoute/Delete2FA.tsx
index 771d57e..eb0c2a0 100644
--- a/src/route-widgets/Settings2FARoute/Delete2FA.tsx
+++ b/src/route-widgets/Settings2FARoute/Delete2FA.tsx
@@ -18,9 +18,12 @@ export interface Delete2FAProps {
 
 export default function Delete2FA({onSuccess}: Delete2FAProps): ReactElement {
 	const {t} = useTranslation()
-	const {showError} = useErrorSuccessSnacks()
+	const {showSuccess, showError} = useErrorSuccessSnacks()
 	const {mutate} = useMutation<SimpleDetailResponse, AxiosError, Delete2FAData>(delete2FA, {
-		onSuccess,
+		onSuccess: () => {
+			showSuccess(t("routes.SettingsRoute.2fa.delete.success"))
+			onSuccess()
+		},
 		onError: showError,
 	})
 
@@ -92,7 +95,7 @@ export default function Delete2FA({onSuccess}: Delete2FAProps): ReactElement {
 					</Grid>
 					<Grid item>
 						<LoadingButton
-							onClick={() => mutate({recoveryCode: value})}
+							onClick={() => mutate({recoveryCode: value.replaceAll("-", "")})}
 							variant="contained"
 							startIcon={<BsShieldLockFill />}
 						>
diff --git a/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx b/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx
index 4b76cbd..dfef00b 100644
--- a/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx
+++ b/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx
@@ -42,7 +42,7 @@ export default function Settings2FARoute({
 	secret,
 }: VerifyOTPFormProps): ReactElement {
 	const {t} = useTranslation()
-	const {showError} = useErrorSuccessSnacks()
+	const {showSuccess, showError} = useErrorSuccessSnacks()
 	const user = useUser()
 	const theme = useTheme()
 
@@ -112,6 +112,7 @@ export default function Settings2FARoute({
 											</InputAdornment>
 										),
 									}}
+									onSubmit={formik.handleSubmit}
 								/>
 							</Grid>
 							<Grid item>
@@ -127,7 +128,7 @@ export default function Settings2FARoute({
 					</Grid>
 				</Grid>
 			</form>
-			<Dialog open={showRecoveryCodes} onClose={() => setShowRecoveryCodes(false)}>
+			<Dialog open={showRecoveryCodes}>
 				<DialogTitle>{t("routes.SettingsRoute.2fa.setup.recoveryCodes.title")}</DialogTitle>
 				<DialogContent
 					sx={{
@@ -145,7 +146,9 @@ export default function Settings2FARoute({
 				</DialogContent>
 				<DialogActions>
 					<Button
+						variant="contained"
 						onClick={() => {
+							showSuccess(t("routes.SettingsRoute.2fa.setup.success"))
 							setShowRecoveryCodes(false)
 							onSuccess()
 						}}