martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-24 02:25:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding logout to drawer view

Browse Source
This commit is contained in:
balzack 2024-09-26 23:06:05 -07:00
parent 0c73c3380e
commit 07b9d06893
3 changed files with 159 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/client/mobile/src/identity/Identity.styled.ts
View File

@ -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 },
]
},
});

109
app/client/mobile/src/identity/Identity.tsx
View File

@ -1,41 +1,92 @@
import { useState } from 'react';
import { TouchableOpacity, SafeAreaView, View, Image } from 'react-native';
import { Icon, Text, Menu } from 'react-native-paper';
import { Modal, TouchableOpacity, SafeAreaView, View, Image } from 'react-native';
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}>
{state.profile.imageSet && (
<Image style={styles.logoSet} resizeMode={'contain'} source={state.imageUrl} />
)}
{!state.profile.imageSet && (
<Image style={styles.logoUnset} resizeMode={'contain'} source={state.imageUrl} />
)}
<>
<SafeAreaView style={styles.identity}>
<TouchableOpacity style={styles.identityData} activeOpacity={1} onPress={() => setMenu(true)}>
<View style={styles.image}>
{state.profile.imageSet && (
<Image style={styles.logoSet} resizeMode={'contain'} source={state.imageUrl} />
)}
{!state.profile.imageSet && (
<Image style={styles.logoUnset} resizeMode={'contain'} source={state.imageUrl} />
)}
</View>
<View style={styles.details}>
{state.profile.name && (
<Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{state.profile.name}</Text>
)}
<Text style={styles.username} adjustsFontSizeToFit={true} numberOfLines={1}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
</View>
<Icon size={18} source="chevron-right" />
</TouchableOpacity>
<Menu
visible={menu}
onDismiss={() => setMenu(false)}
anchorPosition="top"
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={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>
<View style={styles.details}>
{state.profile.name && (
<Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{state.profile.name}</Text>
)}
<Text style={styles.username} adjustsFontSizeToFit={true} numberOfLines={1}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
</View>
<Icon size={18} source="chevron-right" />
</TouchableOpacity>
<Menu
visible={menu}
onDismiss={() => setMenu(false)}
anchorPosition="top"
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>
</SafeAreaView>
</Modal>
</>
)
}

6
app/client/mobile/src/identity/useIdentity.hook.ts
View File

@ -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);
}
}