adding extra confirmation on profile delete

app/mobile/src/session/profile/Profile.jsx

@@ -66,18 +66,16 @@ export function Profile() {
   }
 
   const remove = async () => {
-    Alert.alert(
-      "Deleting Account",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Delete", onPress: () => {
-          actions.remove();
-        }}
-      ]
-    );
+    try {
+      await actions.remove();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Delete Account',
+        'Please try again.'
+      )
+    }
   }
 
   const logout = async () => {
@@ -187,7 +185,7 @@ export function Profile() {
           <Ionicons name="logout" size={14} color={Colors.white} />
           <Text style={styles.logoutText}>Logout</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.delete} onPress={remove}>
+        <TouchableOpacity style={styles.delete} onPress={actions.showDelete}>
           <Ionicons name="delete" size={14} color={Colors.white} />
           <Text style={styles.deleteText}>Delete</Text>
         </TouchableOpacity>
@@ -385,6 +383,39 @@ export function Profile() {
           </View>
         </KeyboardAvoidingView>
       </Modal>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.showDelete}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideDelete}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.editWrapper}>
+          <View style={styles.editContainer}>
+            <Text style={styles.editHeader}>Deleting Your Account</Text>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.confirmDelete} onChangeText={actions.setConfirmDelete}
+                  autoCapitalize="none" placeholder="Type 'delete' to Confirm" placeholderTextColor={Colors.grey} />
+            </View>
+            <View style={styles.editControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideDelete}>
+                <Text>Cancel</Text>
+              </TouchableOpacity>
+              { state.confirmDelete === 'delete' && (
+                <TouchableOpacity style={styles.remove} onPress={remove}>
+                  <Text style={styles.removeText}>Delete</Text>
+                </TouchableOpacity>
+              )}
+              { state.confirmDelete !== 'delete' && (
+                <TouchableOpacity style={styles.unconfirmed}>
+                  <Text style={styles.removeText}>Delete</Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
     </ScrollView>
   )
 }

app/mobile/src/session/profile/Profile.styled.js

@@ -136,21 +136,26 @@ export const styles = StyleSheet.create({
     color: Colors.white,
     paddingLeft: 8,
   },
-  delete: {
-    marginTop: 32,
+  unconfirmed: {
+    backgroundColor: Colors.lightgrey,
     borderRadius: 4,
-    backgroundColor: Colors.error,
+    padding: 8,
+    width: 72,
     display: 'flex',
-    flexDirection: 'row',
     alignItems: 'center',
-    paddingLeft: 8,
-    paddingRight: 8,
-    paddingTop: 8,
-    paddingBottom: 8,
+    justifyContent: 'center',
   },
-  deleteText: {
+  remove: {
+    backgroundColor: Colors.error,
+    borderRadius: 4,
+    padding: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  removeText: {
     color: Colors.white,
-    paddingLeft: 8,
   },
   switch: {
     false: Colors.grey,
@@ -240,12 +245,36 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
   },
+  save: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.error,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
   link: {
     marginTop: 16,
   },
   linkText: {
     color: Colors.primary,
   },
+  delete: {
+    backgroundColor: Colors.error,
+    marginTop: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 4,
+  }, 
+  deleteText: {
+    paddingLeft: 8,
+    color: Colors.white,
+  },
   saveText: {
     color: Colors.white,
   },

app/mobile/src/session/profile/useProfile.hook.js

@@ -28,11 +28,13 @@ export function useProfile() {
     available: true,
     showPassword: false,
     showConfirm: false,
+    showDelete: false,
     blockedChannels: false,
     blockedCards: false,
     blockedMessages: false,
     tabbed: null,
     disconnected: false,
+    confirmDelete: null,
   });
 
   const app = useContext(AppContext);
@@ -78,6 +80,7 @@ export function useProfile() {
     },
     remove: async () => {
       await app.actions.remove();
+      updateState({ showDelete: false });
       navigate('/');
     },
     setVisible: async (searchable) => {
@@ -126,6 +129,9 @@ export function useProfile() {
     setEditDescription: (editDescription) => {
       updateState({ editDescription });
     },
+    setConfirmDelete: (confirmDelete) => {
+      updateState({ confirmDelete });
+    },
     showPassword: () => {
       updateState({ showPassword: true });
     },
@@ -138,6 +144,12 @@ export function useProfile() {
     hideConfirm: () => {
       updateState({ showConfirm: false });
     },
+    showDelete: () => {
+      updateState({ showDelete: true });
+    },
+    hideDelete: () => {
+      updateState({ showDelete: false });
+    },
     setEditHandle: (editHandle) => {
       updateState({ editHandle, checked: false });