about summary refs log tree commit diff
path: root/src/view/com/modals/DeleteAccount.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/modals/DeleteAccount.tsx')
-rw-r--r--src/view/com/modals/DeleteAccount.tsx210
1 files changed, 210 insertions, 0 deletions
diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
new file mode 100644
index 000000000..de29e728d
--- /dev/null
+++ b/src/view/com/modals/DeleteAccount.tsx
@@ -0,0 +1,210 @@
+import React from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import {BottomSheetTextInput} from '@gorhom/bottom-sheet'
+import LinearGradient from 'react-native-linear-gradient'
+import * as Toast from '../util/Toast'
+import {Text} from '../util/text/Text'
+import {useStores} from 'state/index'
+import {s, colors, gradients} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {cleanError} from 'lib/strings/errors'
+
+export const snapPoints = ['60%']
+
+export function Component({}: {}) {
+  const pal = usePalette('default')
+  const store = useStores()
+  const [isEmailSent, setIsEmailSent] = React.useState<boolean>(false)
+  const [confirmCode, setConfirmCode] = React.useState<string>('')
+  const [password, setPassword] = React.useState<string>('')
+  const [isProcessing, setIsProcessing] = React.useState<boolean>(false)
+  const [error, setError] = React.useState<string>('')
+  const onPressSendEmail = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      await store.api.com.atproto.account.requestDelete()
+      setIsEmailSent(true)
+    } catch (e: any) {
+      setError(cleanError(e))
+    }
+    setIsProcessing(false)
+  }
+  const onPressConfirmDelete = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      await store.api.com.atproto.account.delete({
+        did: store.me.did,
+        password,
+        token: confirmCode,
+      })
+      Toast.show('Your account has been deleted')
+      store.nav.tab.fixedTabReset()
+      store.session.clear()
+      store.shell.closeModal()
+    } catch (e: any) {
+      setError(cleanError(e))
+    }
+    setIsProcessing(false)
+  }
+  const onCancel = () => {
+    store.shell.closeModal()
+  }
+  return (
+    <View
+      style={[styles.container, {backgroundColor: pal.colors.backgroundLight}]}>
+      <View style={[styles.innerContainer, pal.view]}>
+        <Text type="title-xl" style={[styles.title, pal.text]}>
+          Delete account
+        </Text>
+        {!isEmailSent ? (
+          <>
+            <Text type="lg" style={[styles.description, pal.text]}>
+              For security reasons, we'll need to send a confirmation code to
+              your email.
+            </Text>
+            {error ? (
+              <View style={s.mt10}>
+                <ErrorMessage message={error} />
+              </View>
+            ) : undefined}
+            {isProcessing ? (
+              <View style={[styles.btn, s.mt10]}>
+                <ActivityIndicator />
+              </View>
+            ) : (
+              <>
+                <TouchableOpacity
+                  style={styles.mt20}
+                  onPress={onPressSendEmail}>
+                  <LinearGradient
+                    colors={[
+                      gradients.blueLight.start,
+                      gradients.blueLight.end,
+                    ]}
+                    start={{x: 0, y: 0}}
+                    end={{x: 1, y: 1}}
+                    style={[styles.btn]}>
+                    <Text type="button-lg" style={[s.white, s.bold]}>
+                      Send email
+                    </Text>
+                  </LinearGradient>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.btn, s.mt10]}
+                  onPress={onCancel}>
+                  <Text type="button-lg" style={pal.textLight}>
+                    Cancel
+                  </Text>
+                </TouchableOpacity>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            <Text type="lg" style={styles.description}>
+              Check your inbox for an email with the confirmation code to enter
+              below:
+            </Text>
+            <BottomSheetTextInput
+              style={[styles.textInput, pal.borderDark, pal.text, styles.mb20]}
+              placeholder="Confirmation code"
+              placeholderTextColor={pal.textLight.color}
+              value={confirmCode}
+              onChangeText={setConfirmCode}
+            />
+            <Text type="lg" style={styles.description}>
+              Please enter your password as well:
+            </Text>
+            <BottomSheetTextInput
+              style={[styles.textInput, pal.borderDark, pal.text]}
+              placeholder="Password"
+              placeholderTextColor={pal.textLight.color}
+              secureTextEntry
+              value={password}
+              onChangeText={setPassword}
+            />
+            {error ? (
+              <View style={styles.mt20}>
+                <ErrorMessage message={error} />
+              </View>
+            ) : undefined}
+            {isProcessing ? (
+              <View style={[styles.btn, s.mt10]}>
+                <ActivityIndicator />
+              </View>
+            ) : (
+              <>
+                <TouchableOpacity
+                  style={[styles.btn, styles.evilBtn, styles.mt20]}
+                  onPress={onPressConfirmDelete}>
+                  <Text type="button-lg" style={[s.white, s.bold]}>
+                    Delete my account
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.btn, s.mt10]}
+                  onPress={onCancel}>
+                  <Text type="button-lg" style={pal.textLight}>
+                    Cancel
+                  </Text>
+                </TouchableOpacity>
+              </>
+            )}
+          </>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  innerContainer: {
+    paddingBottom: 20,
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 12,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    paddingHorizontal: 22,
+    marginBottom: 10,
+  },
+  mt20: {
+    marginTop: 20,
+  },
+  mb20: {
+    marginBottom: 20,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    fontSize: 20,
+    marginHorizontal: 20,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 32,
+    padding: 14,
+    marginHorizontal: 20,
+  },
+  evilBtn: {
+    backgroundColor: colors.red4,
+  },
+})