martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring profile tab

Browse Source
This commit is contained in:
Roland Osborne 2023-09-07 15:21:47 -07:00
parent bc7f919ca3
commit d0e8ef8be7
6 changed files with 70 additions and 1179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/mobile/src/constants/Colors.js
View File

@ -78,7 +78,7 @@ const DarkColors = {
disabledButtonText: '#aaaaaa', disabledButtonText: '#aaaaaa',
dangerButton: '#ff5555', dangerButton: '#ff5555',
dangerButtonText: '#ffffff', dangerButtonText: '#ffffff',
closeButton: '#111111', closeButton: '#777777',
closeButtonText: '#ffffff', closeButtonText: '#ffffff',
inputBase: '#333333', inputBase: '#333333',
inputPlaceholder: '#aaaaaa', inputPlaceholder: '#aaaaaa',

8
app/mobile/src/session/Session.jsx
View File

@ -10,7 +10,7 @@ import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { useSession } from './useSession.hook'; import { useSession } from './useSession.hook';
import { styles } from './Session.styled'; import { styles } from './Session.styled';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
import { Profile, ProfileHeader, ProfileBody } from './profile/Profile'; import { Profile } from './profile/Profile';
import { CardsHeader, CardsBody, Cards } from './cards/Cards'; import { CardsHeader, CardsBody, Cards } from './cards/Cards';
import { RegistryHeader, RegistryBody, Registry } from './registry/Registry'; import { RegistryHeader, RegistryBody, Registry } from './registry/Registry';
import { ContactHeader, ContactBody, Contact } from './contact/Contact'; import { ContactHeader, ContactBody, Contact } from './contact/Contact';
@ -113,13 +113,13 @@ function SettingsStackScreen() {
function ProfileStackScreen() { function ProfileStackScreen() {
const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false }; const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
const screenParams = { headerShown: true, headerTintColor: Colors.primary }; const screenParams = { headerShown: false, headerTintColor: Colors.primary };
return ( return (
<SafeAreaView edges={['left', 'right']} style={styles.body}> <SafeAreaView edges={['left', 'right']} style={styles.body}>
<ProfileStack.Navigator screenOptions={({ route }) => (screenParams)}> <ProfileStack.Navigator screenOptions={({ route }) => (screenParams)}>
<ProfileStack.Screen name="profile" options={{ ...stackParams, headerTitle: () => <ProfileHeader /> }}> <ProfileStack.Screen name="profile" options={stackParams}>
{(props) => <ScrollView><ProfileBody /></ScrollView>} {(props) => <Profile />}
</ProfileStack.Screen> </ProfileStack.Screen>
</ProfileStack.Navigator> </ProfileStack.Navigator>
</SafeAreaView> </SafeAreaView>

570
app/mobile/src/session/profile/Profile.jsx
View File

@ -1,54 +1,16 @@
import { ActivityIndicator, KeyboardAvoidingView, Modal, View, Switch, Text, TextInput, TouchableOpacity, Alert } from 'react-native'; import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native';
import Ionicons from 'react-native-vector-icons/AntDesign'; import Ionicons from 'react-native-vector-icons/AntDesign';
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import ImagePicker from 'react-native-image-crop-picker' import ImagePicker from 'react-native-image-crop-picker'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { Colors } from 'constants/Colors'; import { Colors } from 'constants/Colors';
import { useProfile } from './useProfile.hook'; import { useProfile } from './useProfile.hook';
import { Logo } from 'utils/Logo';
import { styles } from './Profile.styled'; import { styles } from './Profile.styled';
import { BlockedTopics } from './blockedTopics/BlockedTopics'; import avatar from 'images/avatar.png';
import { BlockedContacts } from './blockedContacts/BlockedContacts';
import { BlockedMessages } from './blockedMessages/BlockedMessages'; export function Profile() {
export function ProfileHeader() {
const { state, actions } = useProfile(); const { state, actions } = useProfile();
const handle = state.node ? `${state.handle}@${state.node}` : state.handle;
return (
<Text style={styles.headerText}>{ handle }</Text>
)
}
export function ProfileBody() {
const { state, actions } = useProfile();
const logout = async () => {
Alert.alert(
"Logging Out",
"Confirm?",
[
{ text: "Cancel",
onPress: () => {},
},
{ text: "Logout", onPress: () => {
actions.logout();
}}
]
);
}
const remove = async () => {
try {
await actions.remove();
}
catch (err) {
console.log(err);
Alert.alert(
'Failed to Delete Account',
'Please try again.'
)
}
}
const onGallery = async () => { const onGallery = async () => {
try { try {
@ -61,19 +23,6 @@ export function ProfileBody() {
} }
} }
const setNotifications = async (notify) => {
try {
await actions.setNotifications(notify);
}
catch (err) {
console.log(err);
Alert.alert(
'Account Update Failed',
'Please try again.',
);
}
}
const setVisible = async (visible) => { const setVisible = async (visible) => {
try { try {
await actions.setVisible(visible); await actions.setVisible(visible);
@ -87,20 +36,6 @@ export function ProfileBody() {
} }
} }
const saveSeal = async () => {
try {
await actions.saveSeal();
actions.hideEditSeal();
}
catch (err) {
console.log(err);
Alert.alert(
'Failed to Update Topic Sealing',
'Please try again.',
)
}
}
const saveDetails = async () => { const saveDetails = async () => {
try { try {
await actions.saveDetails(); await actions.saveDetails();
@ -115,497 +50,24 @@ export function ProfileBody() {
} }
} }
const saveLogin = async () => { console.log(state.imageSource);
try {
await actions.saveLogin();
actions.hideEditLogin();
}
catch (err) {
console.log(err);
Alert.alert(
'Failed to Change Login',
'Please try again.'
)
}
}
return ( return (
<View style={styles.body}> <ScrollView style={styles.content}>
<View style={styles.logo}> <Image source={state.imageSource} style={{ width: state.width, height: state.height }} resizeMode={'contain'} />
<View>
<Logo src={state.imageSource} width={128} height={128} radius={8} /> <View style={styles.details}>
<TouchableOpacity style={styles.gallery} onPress={onGallery}> <View style={styles.control}>
<Ionicons name="picture" size={14} color={Colors.white} /> <TouchableOpacity style={styles.edit}>
<Text style={styles.editLabel}>Edit</Text>
<MatIcons name="square-edit-outline" size={14} color={Colors.text} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={styles.alert}> </ScrollView>
{ state.disconnected && (
<Text style={styles.alertText}>Disconnected</Text>
)}
</View>
<TouchableOpacity style={styles.detail} onPress={actions.showEditDetails}>
<View style={styles.attribute}>
{ state.name && (
<Text style={styles.nametext}>{ state.name }</Text>
)}
{ !state.name && (
<Text style={styles.nonametext}>Name</Text>
)}
<Ionicons name="edit" size={16} color={Colors.text} />
</View>
<View style={styles.attribute}>
<View style={styles.icon}>
<Ionicons name="enviromento" size={14} color={Colors.text} />
</View>
{ state.location && (
<Text style={styles.locationtext}>{ state.location }</Text>
)}
{ !state.location && (
<Text style={styles.nolocationtext}>Location</Text>
)}
</View>
<View style={styles.attribute}>
<View style={styles.icon}>
<Ionicons name="book" size={14} color={Colors.text} />
</View>
{ state.description && (
<Text style={styles.descriptiontext}>{ state.description }</Text>
)}
{ !state.description && (
<Text style={styles.nodescriptiontext}>Description</Text>
)}
</View>
</TouchableOpacity>
<View style={styles.group}>
<View style={styles.enable}>
<TouchableOpacity onPress={() => setVisible(!state.searchable)} activeOpacity={1}>
<Text style={styles.enableText}>Visible in Registry</Text>
</TouchableOpacity>
<Switch style={styles.enableSwitch} value={state.searchable} onValueChange={setVisible} trackColor={styles.switch}/>
</View>
<View style={styles.enable}>
<TouchableOpacity onPress={() => setNotifications(!state.pushEnabled)} activeOpacity={1}>
<Text style={styles.enableText}>Enable Notifications</Text>
</TouchableOpacity>
<Switch style={styles.enableSwitch} value={state.pushEnabled} onValueChange={setNotifications} trackColor={styles.switch}/>
</View>
</View>
<TouchableOpacity style={styles.logout} activeOpacity={1} onPress={logout}>
<Ionicons name="logout" size={14} color={Colors.primary} />
<Text style={styles.logoutText}>Logout</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.logout} onPress={actions.showEditLogin}>
<Ionicons name="user" size={20} color={Colors.primary} />
<Text style={styles.logoutText}>Change Login</Text>
</TouchableOpacity>
{ state.sealable && (
<TouchableOpacity style={styles.logout} onPress={actions.showEditSeal}>
<Ionicons name="lock" size={22} color={Colors.primary} />
<Text style={styles.logoutText}>Sealed Topics</Text>
</TouchableOpacity>
)}
<TouchableOpacity style={styles.delete} activeOpacity={1} onPress={actions.showDelete}>
<Ionicons name="delete" size={16} color={Colors.alert} />
<Text style={styles.deleteText}>Delete Account</Text>
</TouchableOpacity>
<Text style={styles.blockedLabel}>Manage Blocked:</Text>
<View style={styles.blocked}>
<TouchableOpacity style={styles.link} onPress={actions.showBlockedCards}>
<Text style={styles.linkText}>Contacts</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.link} onPress={actions.showBlockedChannels}>
<Text style={styles.linkText}>Topics</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.link} onPress={actions.showBlockedMessages}>
<Text style={styles.linkText}>Messages</Text>
</TouchableOpacity>
</View>
<Modal
animationType="fade"
transparent={true}
visible={state.showDelete}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideDelete}
>
<KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>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.modalControls}>
<TouchableOpacity style={styles.cancel} onPress={actions.hideDelete}>
<Text style={styles.canceltext}>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>
<Modal
animationType="fade"
transparent={true}
visible={state.blockedCards}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideBlockedCards}
>
<KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>Blocked Contacts:</Text>
<View style={styles.modalList}>
<BlockedContacts />
</View>
<View style={styles.modalControls}>
<TouchableOpacity style={styles.close} onPress={actions.hideBlockedCards}>
<Text style={styles.canceltext}>Close</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
<Modal
animationType="fade"
transparent={true}
visible={state.blockedChannels}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideBlockedChannels}
>
<KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>Blocked Topics:</Text>
<View style={styles.modalList}>
<BlockedTopics />
</View>
<View style={styles.modalControls}>
<TouchableOpacity style={styles.close} onPress={actions.hideBlockedChannels}>
<Text style={styles.canceltext}>Close</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
<Modal
animationType="fade"
transparent={true}
visible={state.blockedMessages}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideBlockedMessages}
>
<KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>Blocked Messages:</Text>
<View style={styles.modalList}>
<BlockedMessages />
</View>
<View style={styles.modalControls}>
<TouchableOpacity style={styles.close} onPress={actions.hideBlockedMessages}>
<Text style={styles.canceltext}>Close</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
<Modal
animationType="fade"
transparent={true}
visible={state.editDetails}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideEditDetails}
>
<KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>Edit Details:</Text>
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editName} onChangeText={actions.setEditName}
autoCapitalize="words" placeholder="Name" placeholderTextColor={Colors.grey} />
</View>
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editLocation} onChangeText={actions.setEditLocation}
autoCapitalize="words" placeholder="Location" placeholderTextColor={Colors.grey} />
</View>
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editDescription} onChangeText={actions.setEditDescription}
autoCapitalize="sentences" placeholder="Description" multiline={true}
placeholderTextColor={Colors.grey} />
</View>
<View style={styles.modalControls}>
<TouchableOpacity style={styles.cancel} onPress={actions.hideEditDetails}>
<Text style={styles.canceltext}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.save} onPress={saveDetails}>
<Text style={styles.saveText}>Save</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
<Modal
animationType="fade"
transparent={true}
visible={state.editSeal}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideEditSeal}
>
<KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>Sealed Topics:</Text>
<View style={styles.sealable}>
<TouchableOpacity onPress={() => actions.setSealEnable(!state.sealEnabled)} activeOpacity={1}>
<Text style={styles.sealableText}>Enable Sealed Topics</Text>
</TouchableOpacity>
<Switch style={styles.enableSwitch} value={state.sealEnabled} onValueChange={actions.setSealEnable} trackColor={styles.switch}/>
</View>
{ state.sealMode === 'unlocking' && (
<>
{ !state.showSealUnlock && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.sealUnlock} onChangeText={actions.setSealUnlock}
autoCapitalize={'none'} secureTextEntry={true} placeholder="Password for Seal"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.showSealUnlock}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
{ state.showSealUnlock && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.sealUnlock} onChangeText={actions.setSealUnlock}
autoCapitalize={'none'} secureTextEntry={false} placeholder="Password for Seal"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.hideSealUnlock}>
<Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
</>
)}
{ (state.sealMode === 'updating' || state.sealMode === 'enabling') && (
<>
{ !state.showSealPassword && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.sealPassword} onChangeText={actions.setSealPassword}
autoCapitalize={'none'} secureTextEntry={true} placeholder="Password for Seal"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.showSealPassword}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
{ state.showSealPassword && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.sealPassword} onChangeText={actions.setSealPassword}
autoCapitalize={'none'} secureTextEntry={false} placeholder="Password for Seal"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.hideSealPassword}>
<Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
{ !state.showSealConfirm && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.sealConfirm} onChangeText={actions.setSealConfirm}
autoCapitalize={'none'} secureTextEntry={true} placeholder="Confirm Password"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.showSealConfirm}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
{ state.showSealConfirm && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.sealConfirm} onChangeText={actions.setSealConfirm}
autoCapitalize={'none'} secureTextEntry={false} placeholder="Confirm Password"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.hideSealConfirm}>
<Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
<Text style={styles.notice}>saving can take a few minutes</Text>
</>
)}
{ state.sealMode === 'disabling' && (
<View style={styles.inputField}>
<Ionicons style={styles.warn} name="exclamationcircleo" size={18} color="#888888" />
<TextInput style={styles.input} value={state.sealDelete} onChangeText={actions.setSealDelete}
autoCapitalize={'none'} placeholder="Type 'delete' to remove sealing key"
placeholderTextColor={Colors.grey} />
</View>
)}
{ state.sealMode === 'unlocked' && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={'xxxxxxxx'} editable={false} secureTextEntry={true} />
<Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
<TouchableOpacity style={styles.sealUpdate} onPress={actions.updateSeal} />
</View>
)}
<View style={styles.modalControls}>
<TouchableOpacity style={styles.cancel} onPress={actions.hideEditSeal}>
<Text style={styles.canceltext}>Cancel</Text>
</TouchableOpacity>
{ state.canSaveSeal && (
<>
{ state.sealMode !== 'unlocking' && state.sealMode !== 'unlocked' && (
<TouchableOpacity style={styles.save} onPress={saveSeal}>
{ state.saving && (
<ActivityIndicator style={styles.activity} color={Colors.white} />
)}
<Text style={styles.saveText}>Save</Text>
</TouchableOpacity>
)}
{ state.sealMode === 'unlocked' && (
<TouchableOpacity style={styles.save} onPress={saveSeal}>
{ state.saving && (
<ActivityIndicator style={styles.activity} color={Colors.white} />
)}
<Text style={styles.saveText}>Forget</Text>
</TouchableOpacity>
)}
{ state.sealMode === 'unlocking' && (
<TouchableOpacity style={styles.save} onPress={saveSeal}>
{ state.saving && (
<ActivityIndicator style={styles.activity} color={Colors.white} />
)}
<Text style={styles.saveText}>Unlock</Text>
</TouchableOpacity>
)}
</>
)}
{ !state.canSaveSeal && (
<>
{ state.sealMode !== 'unlocking' && (
<View style={styles.disabled}>
{ state.saving && (
<ActivityIndicator style={styles.activity} color={Colors.white} />
)}
<Text style={styles.disabledText}>Save</Text>
</View>
)}
{ state.sealMode === 'unlocking' && (
<View style={styles.disabled}>
{ state.saving && (
<ActivityIndicator style={styles.activity} color={Colors.white} />
)}
<Text style={styles.disabledText}>Unlock</Text>
</View>
)}
</>
)}
</View>
</View>
</KeyboardAvoidingView>
</Modal>
<Modal
animationType="fade"
transparent={true}
visible={state.editLogin}
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideEditLogin}
>
<KeyboardAvoidingView behavior="height" style={styles.modalWrapper}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>Change Login:</Text>
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editHandle} onChangeText={actions.setEditHandle}
autoCapitalize={'none'} placeholder="Username" placeholderTextColor={Colors.grey} />
{ state.checked && state.available && (
<Ionicons style={styles.icon} name="checkcircleo" size={18} color={Colors.background} />
)}
{ state.checked && !state.available && (
<Ionicons style={styles.icon} name="exclamationcircleo" size={18} color={Colors.alert} />
)}
</View>
{ !state.showPassword && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editPassword} onChangeText={actions.setEditPassword}
autoCapitalize={'none'} secureTextEntry={true} placeholder="Password"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.showPassword}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
{ state.showPassword && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editPassword} onChangeText={actions.setEditPassword}
autoCapitalize={'none'} secureTextEntry={false} placeholder="Password"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.hidePassword}>
<Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
{ !state.showConfirm && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editConfirm} onChangeText={actions.setEditConfirm}
autoCapitalize={'none'} secureTextEntry={true} placeholder="Confirm"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.showConfirm}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
{ state.showConfirm && (
<View style={styles.inputField}>
<TextInput style={styles.input} value={state.editConfirm} onChangeText={actions.setEditConfirm}
autoCapitalize={'none'} secureTextEntry={false} placeholder="Confirm"
placeholderTextColor={Colors.grey} />
<TouchableOpacity onPress={actions.hideConfirm}>
<Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
</TouchableOpacity>
</View>
)}
<View style={styles.modalControls}>
<TouchableOpacity style={styles.cancel} onPress={actions.hideEditLogin}>
<Text style={styles.canceltext}>Cancel</Text>
</TouchableOpacity>
{ (state.checked && state.available && state.editConfirm === state.editPassword && state.editPassword) && (
<TouchableOpacity style={styles.save} onPress={saveLogin}>
<Text style={styles.saveText}>Save</Text>
</TouchableOpacity>
)}
{ !(state.checked && state.available && state.editConfirm === state.editPassword && state.editPassword) && (
<View style={styles.disabled}>
<Text style={styles.disabledText}>Save</Text>
</View>
)}
</View>
</View>
</KeyboardAvoidingView>
</Modal>
</View>
); );
} }
export function Profile() {
return (
<View style={styles.full}>
<ProfileHeader />
<ProfileBody />
</View>
);
}

323
app/mobile/src/session/profile/Profile.styled.js
View File

@ -1,309 +1,48 @@
import { StyleSheet } from 'react-native'; import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors'; import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({ export const styles = StyleSheet.create({
body: { content: {
display: 'flex',
flexGrow: 1,
},
button: {
paddingRight: 16,
},
switch: {
false: Colors.grey,
true: Colors.background,
},
headerText: {
fontSize: 18,
overflow: 'hidden',
textAlign: 'center',
color: Colors.text,
},
logo: {
marginTop: 16,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
display: 'flex',
},
alert: {
height: 16,
width: '100%',
alignItems: 'center',
},
alertText: {
color: Colors.alert,
},
logout: {
marginTop: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
logoutText: {
marginLeft: 8,
color: Colors.primary,
fontSize: 16,
},
delete: {
marginTop: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
deleteText: {
marginLeft: 8,
color: Colors.alert,
fontSize: 16,
},
modalWrapper: {
display: 'flex',
width: '100%', width: '100%',
height: '100%', height: '100%',
alignItems: 'center', display: 'flex',
justifyContent: 'center', backgroundColor: Colors.screenBase,
backgroundColor: 'rgba(52, 52, 52, 0.8)'
}, },
modalContainer: { details: {
backgroundColor: Colors.formBackground,
padding: 16,
width: '80%',
maxWidth: 400,
},
modalHeader: {
fontSize: 18,
paddingBottom: 16,
color: Colors.text,
},
canceltext: {
color: Colors.text,
},
modalList: {
width: '100%', width: '100%',
borderWidth: 1, position: 'relative',
borderColor: Colors.lightgrey, top: -16,
borderRadius: 2, minHeight: 32,
backgroundColor: 'yellow',
borderTopRightRadius: 32,
borderTopLeftRadius: 32,
backgroundColor: Colors.screenBase,
}, },
modalControls: { control: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
},
cancel: {
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 4,
padding: 8,
marginRight: 8,
width: 88,
display: 'flex',
alignItems: 'center',
},
unconfirmed: {
backgroundColor: Colors.lightgrey,
borderRadius: 4,
padding: 8,
width: 72,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
remove: {
backgroundColor: Colors.error,
borderRadius: 4,
padding: 8,
width: 72,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
removeText: {
color: Colors.white,
},
input: {
fontSize: 14,
flexGrow: 1,
color: Colors.text,
},
inputField: {
width: '100%',
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 4,
padding: 8,
marginBottom: 8,
maxHeight: 92,
display: 'flex',
flexDirection: 'row',
},
gallery: {
position: 'absolute', position: 'absolute',
bottom: 0, width: '100%',
right: 0, top: -16,
padding: 8, display: 'flex',
backgroundColor: Colors.lightgrey, alignItems: 'center',
borderBottomRightRadius: 8, },
edit: {
borderTopLeftRadius: 8, borderTopLeftRadius: 8,
}, borderTopRightRadius: 8,
detail: { backgroundColor: Colors.screenBase,
display: 'flex', paddingLeft: 8,
flexDirection: 'column',
alignItems: 'center',
color: Colors.text,
paddingLeft: 32,
paddingRight: 32,
marginTop: 16,
marginBottom: 16,
},
attribute: {
display: 'flex',
flexDirection: 'row',
paddingBottom: 8,
},
nonametext: {
fontSize: 18,
paddingRight: 8, paddingRight: 8,
fontWeight: 'bold',
color: Colors.grey,
},
nametext: {
fontSize: 18,
paddingRight: 8,
fontWeight: 'bold',
color: Colors.text,
},
locationtext: {
fontSize: 16,
paddingLeft: 8,
color: Colors.text,
},
nolocationtext: {
fontSize: 16,
paddingLeft: 8,
color: Colors.grey,
},
descriptiontext: {
fontSize: 16,
paddingLeft: 8,
color: Colors.text,
},
nodescriptiontext: {
fontSize: 16,
paddingLeft: 8,
color: Colors.grey,
},
save: {
padding: 8,
borderRadius: 4,
backgroundColor: Colors.primary,
width: 88,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
saveText: {
color: Colors.white,
},
blocked: {
alignSelf: 'center',
borderColor: Colors.lightgrey,
borderWidth: 1,
borderRadius: 4,
padding: 8,
marginBottom: 8,
display: 'flex',
flexDirection: 'row',
},
blockedLabel: {
marginTop: 32,
alignSelf: 'center',
color: Colors.grey,
},
group: {
marginTop: 16,
marginBottom: 16,
},
enable: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
marginBottom: 4,
},
enableText: {
color: Colors.primary,
fontSize: 16,
},
enableSwitch: {
transform: [{ scaleX: .6 }, { scaleY: .6 }],
},
link: {
marginLeft: 8,
marginRight: 8,
},
linkText: {
color: Colors.primary,
},
close: {
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 4,
padding: 8,
marginTop: 8,
width: 72,
display: 'flex',
alignItems: 'center',
},
sealable: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 16,
},
disabled: {
borderWidth: 1,
borderColor: Colors.lightgrey,
padding: 8,
borderRadius: 4,
width: 88,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
activity: {
paddingRight: 4,
},
disabledText: {
color: Colors.disabled,
},
sealUpdate: {
position: 'absolute',
top: 0,
height: 36,
left: 8,
width: '100%',
},
sealableText: {
color: Colors.text,
},
notice: {
color: Colors.grey,
fontStyle: 'italic',
textAlign: 'center',
paddingBottom: 8,
},
warn: {
paddingTop: 2, paddingTop: 2,
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
editLabel: {
color: Colors.text,
paddingLeft: 8,
paddingRight: 8, paddingRight: 8,
fontSize: 12,
fontFamily: 'roboto',
}, },
}); });

334
app/mobile/src/session/profile/useProfile.hook.js
View File

@ -1,349 +1,39 @@
import { useState, useEffect, useRef, useContext } from 'react'; import { useState, useEffect, useRef, useContext } from 'react';
import { useWindowDimensions } from 'react-native';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { ProfileContext } from 'context/ProfileContext'; import { ProfileContext } from 'context/ProfileContext';
import { AccountContext } from 'context/AccountContext'; import avatar from 'images/avatar.png';
import { AppContext } from 'context/AppContext';
import { generateSeal, updateSeal, unlockSeal } from 'context/sealUtil';
export function useProfile() { export function useProfile() {
const [state, setState] = useState({ const [state, setState] = useState({
name: null, imageSource: null,
handle: null,
editHandle: null,
location: null,
editLocation: null,
description: null,
editDescritpion: null,
node: null,
showDelete: false,
editDetails: false,
editLogin: false,
editSeal: false,
confirmDelete: null,
blockedChannels: false,
blockedCards: false,
blockedMessages: false,
logginOut: false,
disconnected: false,
pushEnabled: false,
searchable: false,
sealableFalse: false,
editPassword: null,
editConfirm: null,
showPassword: false,
showConfirm: false,
saving: false,
checked: true,
available: true,
seal: null,
sealKey: null,
sealEnabled: false,
sealUnlocked: false,
sealMode: null,
sealUnlock: null,
sealPassword: null,
sealConfirm: null,
sealDelete: null,
canSaveSeal: false,
showSealUnlock: false,
showSealConfirm: false,
showSealPassword: false,
}); });
const app = useContext(AppContext); const dimensions = useWindowDimensions();
const account = useContext(AccountContext);
const profile = useContext(ProfileContext); const profile = useContext(ProfileContext);
const navigate = useNavigate();
const debounce = useRef();
const updateState = (value) => { const updateState = (value) => {
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
} }
const unlock = async () => {
const sealKey = unlockSeal(state.seal, state.sealUnlock);
await account.actions.unlockAccountSeal(sealKey);
};
const forget = async () => {
await account.actions.unlockAccountSeal({});
}
const update = async () => {
const updated = updateSeal(state.seal, state.sealKey, state.sealPassword);
await account.actions.setAccountSeal(updated.seal, updated.sealKey);
}
const enable = async () => {
const created = await generateSeal(state.sealPassword);
await account.actions.setAccountSeal(created.seal, created.sealKey);
}
const disable = async () => {
await account.actions.setAccountSeal({}, {});
}
useEffect(() => { useEffect(() => {
if (state.sealMode === 'unlocked') { const { width, height } = dimensions;
return updateState({ canSaveSeal: true }); if (height > width) {
updateState({ width, height: width });
} }
if (state.sealMode === 'unlocking' && state.sealUnlock != null && state.sealUnlock !== '') { else {
return updateState({ canSaveSeal: true }); updateState({ width: height, height });
} }
if (state.sealMode === 'enabling' && state.sealPassword != null && state.sealPassword === state.sealConfirm) { }, [dimensions]);
return updateState({ canSaveSeal: true });
}
if (state.sealMode === 'disabling' && state.sealDelete === 'delete') {
return updateState({ canSaveSeal: true });
}
if (state.sealMode === 'updating' && state.sealPassword != null && state.sealPassword === state.sealConfirm) {
return updateState({ canSaveSeal: true });
}
updateState({ canSaveSeal: false });
}, [state.sealMode, state.sealable, state.sealUnlock, state.sealPassword, state.sealConfirm, state.sealDelete]);
useEffect(() => { useEffect(() => {
const { name, handle, node, location, description, image } = profile.state.identity; const { name, handle, node, location, description, image } = profile.state.identity;
const imageSource = image ? profile.state.imageUrl : 'avatar'; const imageSource = image ? { uri: profile.state.imageUrl } : avatar;
updateState({ name, handle, node, location, description, imageSource, editHandle: handle, updateState({ name, handle, node, location, description, imageSource });
editName: name, editLocation: location, editDescription: description });
}, [profile.state]); }, [profile.state]);
useEffect(() => {
const { searchable, pushEnabled, seal, sealable } = account.state.status;
const sealKey = account.state.sealKey;
const sealEnabled = seal?.publicKey != null;
const sealUnlocked = seal?.publicKey === sealKey?.public && sealKey?.private && sealKey?.public;
updateState({ searchable, sealable, pushEnabled, seal, sealKey, sealEnabled, sealUnlocked });
}, [account.state]);
useEffect(() => {
const { loggingOut, status } = app.state;
updateState({ loggingOut, disconnected: status === 'disconnected' });
}, [app.state]);
const actions = { const actions = {
logout: async () => {
await app.actions.logout();
},
remove: async () => {
await app.actions.remove();
updateState({ showDelete: false });
navigate('/');
},
showDelete: () => {
updateState({ showDelete: true, confirmDelete: null });
},
hideDelete: () => {
updateState({ showDelete: false });
},
setConfirmDelete: (confirmDelete) => {
updateState({ confirmDelete });
},
showEditDetails: () => {
updateState({ editDetails: true });
},
hideEditDetails: () => {
updateState({ editDetails: false });
},
showEditLogin: () => {
updateState({ editLogin: true, editPassword: null, editConfirm: null });
},
hideEditLogin: () => {
updateState({ editLogin: false });
},
showEditSeal: () => {
let sealMode = null;
const sealable = state.sealEnabled;
if (state.sealEnabled && !state.sealUnlocked) {
sealMode = 'unlocking';
}
else if (state.sealEnabled && state.sealUnlocked) {
sealMode = 'unlocked';
}
else {
sealMode = 'disabled';
}
updateState({ editSeal: true, sealMode, sealUnlock: null, sealPassword: null, sealConfirm: null, sealDelete: null });
},
hideEditSeal: () => {
updateState({ editSeal: false });
},
showBlockedChannels: () => {
updateState({ blockedChannels: true });
},
hideBlockedChannels: () => {
updateState({ blockedChannels: false });
},
showBlockedCards: () => {
updateState({ blockedCards: true });
},
hideBlockedCards: () => {
updateState({ blockedCards: false });
},
showBlockedMessages: () => {
updateState({ blockedMessages: true });
},
hideBlockedMessages: () => {
updateState({ blockedMessages: false });
},
setEditName: (editName) => {
updateState({ editName });
},
setEditLocation: (editLocation) => {
updateState({ editLocation });
},
setEditDescription: (editDescription) => {
updateState({ editDescription });
},
setSealUnlock: (sealUnlock) => {
updateState({ sealUnlock });
},
setSealPassword: (sealPassword) => {
updateState({ sealPassword });
},
setSealConfirm: (sealConfirm) => {
updateState({ sealConfirm });
},
setSealDelete: (sealDelete) => {
updateState({ sealDelete });
},
showSealUnlock: () => {
updateState({ showSealUnlock: true });
},
hideSealUnlock: () => {
updateState({ showSealUnlock: false });
},
showSealPassword: () => {
updateState({ showSealPassword: true });
},
hideSealPassword: () => {
updateState({ showSealPassword: false });
},
showSealConfirm: () => {
updateState({ showSealConfirm: true });
},
hideSealConfirm: () => {
updateState({ showSealConfirm: false });
},
updateSeal: () => {
updateState({ sealMode: 'updating' });
},
setSealEnable: (sealEnabled) => {
let sealMode = null;
if (sealEnabled !== state.sealEnabled) {
if (sealEnabled) {
sealMode = 'enabling';
}
else {
sealMode = 'disabling';
}
}
else {
if (state.sealEnabled && !state.sealUnlocked) {
sealMode = 'unlocking';
}
else if (state.sealEnabled && state.sealUnlocked) {
sealMode = 'unlocked';
}
else {
sealMode = 'disabled';
}
}
updateState({ sealEnabled, sealMode });
},
saveSeal: async () => {
if (!state.saving) {
try {
updateState({ saving: true });
if (state.sealMode === 'enabling') {
await enable();
}
else if (state.sealMode === 'disabling') {
await disable();
}
else if (state.sealMode === 'unlocking') {
await unlock();
}
else if (state.sealMode === 'unlocked') {
await forget();
}
else if (state.sealMode === 'updating') {
await update();
}
else {
console.log(state.sealMode);
}
updateState({ saving: false });
}
catch(err) {
console.log(err);
updateState({ saving: false });
throw new Error('seal operation failed');
}
}
},
setVisible: async (searchable) => {
updateState({ searchable });
await account.actions.setSearchable(searchable);
},
setNotifications: async (pushEnabled) => {
updateState({ pushEnabled });
await account.actions.setNotifications(pushEnabled);
},
setEditPassword: (editPassword) => {
updateState({ editPassword });
},
setEditConfirm: (editConfirm) => {
updateState({ editConfirm });
},
showPassword: () => {
updateState({ showPassword: true });
},
hidePassword: () => {
updateState({ showPassword: false });
},
showConfirm: () => {
updateState({ showConfirm: true });
},
hideConfirm: () => {
updateState({ showConfirm: false });
},
setEditHandle: (editHandle) => {
updateState({ editHandle, checked: false });
if (debounce.current != null) {
clearTimeout(debounce.current);
}
debounce.current = setTimeout(async () => {
try {
if (editHandle === state.handle) {
updateState({ available: true, checked: true });
}
else {
const available = await profile.actions.getHandleStatus(editHandle);
updateState({ available, checked: true });
}
}
catch (err) {
console.log(err);
}
}, 1000);
},
saveDetails: async () => {
await profile.actions.setProfileData(state.editName, state.editLocation, state.editDescription);
},
saveLogin: async () => {
await account.actions.setLogin(state.editHandle, state.editPassword);
},
setProfileImage: async (data) => {
await profile.actions.setProfileImage(data);
},
}; };
return { state, actions }; return { state, actions };

2
app/mobile/src/session/settings/Settings.styled.js
View File

@ -8,7 +8,7 @@ export const styles = StyleSheet.create({
display: 'flex', display: 'flex',
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16,
paddingTop: 16, paddingTop: 8,
backgroundColor: Colors.screenBase, backgroundColor: Colors.screenBase,
}, },
label: { label: {