Email auth factor (#3602)

* Add email 2fa toggle

* Add UI elements needed for 2fa codes in login

* Wire up to the server

* Give a better failure message for bad 2fa code

* Handle enter key in login form 2fa field

* Trim spaces

* Improve error message

1 files changed, 60 insertions, 0 deletions

diff --git a/src/view/screens/Settings/Email2FAToggle.tsx b/src/view/screens/Settings/Email2FAToggle.tsx
new file mode 100644
index 000000000..93f1b2042
--- /dev/null
+++ b/src/view/screens/Settings/Email2FAToggle.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useModalControls} from '#/state/modals'
+import {getAgent, useSession, useSessionApi} from '#/state/session'
+import {ToggleButton} from 'view/com/util/forms/ToggleButton'
+import {useDialogControl} from '#/components/Dialog'
+import {DisableEmail2FADialog} from './DisableEmail2FADialog'
+
+export function Email2FAToggle() {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {updateCurrentAccount} = useSessionApi()
+  const {openModal} = useModalControls()
+  const disableDialogCtrl = useDialogControl()
+
+  const enableEmailAuthFactor = React.useCallback(async () => {
+    if (currentAccount?.email) {
+      await getAgent().com.atproto.server.updateEmail({
+        email: currentAccount.email,
+        emailAuthFactor: true,
+      })
+      updateCurrentAccount({
+        emailAuthFactor: true,
+      })
+    }
+  }, [currentAccount, updateCurrentAccount])
+
+  const onToggle = React.useCallback(() => {
+    if (!currentAccount) {
+      return
+    }
+    if (currentAccount.emailAuthFactor) {
+      disableDialogCtrl.open()
+    } else {
+      if (!currentAccount.emailConfirmed) {
+        openModal({
+          name: 'verify-email',
+          onSuccess: enableEmailAuthFactor,
+        })
+        return
+      }
+      enableEmailAuthFactor()
+    }
+  }, [currentAccount, enableEmailAuthFactor, openModal, disableDialogCtrl])
+
+  return (
+    <>
+      <DisableEmail2FADialog control={disableDialogCtrl} />
+      <ToggleButton
+        type="default-light"
+        label={_(msg`Require email code to log into your account`)}
+        labelType="lg"
+        isSelected={!!currentAccount?.emailAuthFactor}
+        onPress={onToggle}
+      />
+    </>
+  )
+}