fix: Improve OTP

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!"
                 }
             }
         },

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 />}
 						>

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()
 						}}