adding logout to drawer view

app/client/mobile/src/identity/Identity.styled.ts

@@ -54,4 +54,78 @@ export const styles = StyleSheet.create({
   username: {
     fontSize: 16,
   },
+  modal: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+  },
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  container: {
+    width: 600,
+    maxWidth: '80%',
+  },
+  content: {
+    display: 'flex',
+    justifyContent: 'center',
+    height: '100%',
+    gap: 8,
+  },
+  surface: {
+    padding: 16,
+  },
+  modalHeader: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  modalLabel: {
+    fontSize: 20,
+  },
+  modalClose: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    backgroundColor: 'transparent',
+  },
+  modalControls: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 16,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  allControl: {
+    flexShrink: 1,
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 16,
+  },
+  modalControls: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 16,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  controlLabel: {
+    fontSize: 16,
+  },
+  controlSwitch: {
+    transform: [
+      { scaleX: 0.7 },
+      {scaleY: 0.7 },
+    ]
+  },
 });

app/client/mobile/src/identity/Identity.tsx

@@ -1,14 +1,33 @@
 import { useState } from 'react';
-import { TouchableOpacity, SafeAreaView, View, Image } from 'react-native';
+import { Modal, TouchableOpacity, SafeAreaView, View, Image } from 'react-native';
-import { Icon, Text, Menu } from 'react-native-paper';
+import { Surface, IconButton, Button, Switch, Icon, Text, Menu } from 'react-native-paper';
 import { styles } from './Identity.styled';
 import { useIdentity } from './useIdentity.hook';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {BlurView} from '@react-native-community/blur';
 
 export function Identity({ openSettings }) {
   const [menu, setMenu] = useState(false);
   const { state, actions } = useIdentity();
+  const [logout, setLogout] = useState(false);
+  const [applyingLogout, setApplyingLogout] = useState(false);
+
+  const showLogout = () => {
+    setMenu(false);
+    setLogout(true);
+  }
+
+  const applyLogout = async () => {
+    if (!applyingLogout) {
+      setApplyingLogout(true);
+      await actions.logout();
+      setLogout(false);
+      setApplyingLogout(false);
+    }
+  }
 
   return (
+    <>
       <SafeAreaView style={styles.identity}>
         <TouchableOpacity style={styles.identityData} activeOpacity={1} onPress={() => setMenu(true)}>
           <View style={styles.image}>
@@ -34,8 +53,40 @@ export function Identity({ openSettings }) {
           anchor={<View style={styles.anchor}><Text> </Text></View>}>
           <Menu.Item leadingIcon="cog-outline" onPress={() => {setMenu(false); openSettings()}} title={state.strings.settings} />
           <Menu.Item leadingIcon="contacts-outline" onPress={() => {}} title={state.strings.contacts} />
-        <Menu.Item leadingIcon="logout" onPress={() => {}} title={state.strings.logout} />
+          <Menu.Item leadingIcon="logout" onPress={showLogout} title={state.strings.logout} />
         </Menu>
       </SafeAreaView>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        supportedOrientations={['portrait', 'landscape']}
+        visible={logout}
+        onRequestClose={() => setLogout(false)}>
+        <View style={styles.modal}>
+          <BlurView
+            style={styles.blur}
+            blurType="dark"
+            blurAmount={2}
+            reducedTransparencyFallbackColor="dark"
+          />
+          <KeyboardAwareScrollView style={styles.container} contentContainerStyle={styles.content}>
+            <Surface elevation={5} mode="flat" style={styles.surface}>
+              <Text style={styles.modalLabel}>{ state.strings.loggingOut }</Text>
+              <IconButton style={styles.modalClose} icon="close" size={24} onPress={() => setLogout(false)} />
+
+              <View style={styles.allControl}>
+                <Text style={styles.controlLabel}>{state.strings.allDevices}</Text>
+                <Switch style={styles.controlSwitch} value={state.all} onValueChange={actions.setAll} />
+              </View>
+
+              <View style={styles.modalControls}>
+                <Button mode="outlined" onPress={() => setLogout(false)}>{ state.strings.cancel }</Button>
+                <Button mode="contained" loading={applyingLogout} onPress={applyLogout}>{ state.strings.logout }</Button>
+              </View>
+            </Surface>
+            </KeyboardAwareScrollView>
+        </View>
+      </Modal>
+    </>
   )
 }

app/client/mobile/src/identity/useIdentity.hook.ts

@@ -13,6 +13,7 @@ export function useIdentity() {
     profile: {} as Profile,
     profileSet: false,
     imageUrl: null,
+    strings: display.state.strings,
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -41,8 +42,11 @@ export function useIdentity() {
   }, [])
 
   const actions = {
+    setAll: (all) => {
+      updateState({ all });
+    },
     logout: async () => {
-      await app.actions.accountLogout();
+      await app.actions.accountLogout(state.all);
     }
   }