mirror of
https://github.com/balzack/databag.git
synced 2025-02-11 19:19:16 +00:00
refactoring profile tab
This commit is contained in:
Roland Osborne
parent
bc7f919ca3
commit
d0e8ef8be7
@ -78,7 +78,7 @@ const DarkColors = {
|
||||
disabledButtonText: '#aaaaaa',
|
||||
dangerButton: '#ff5555',
|
||||
dangerButtonText: '#ffffff',
|
||||
closeButton: '#111111',
|
||||
closeButton: '#777777',
|
||||
closeButtonText: '#ffffff',
|
||||
inputBase: '#333333',
|
||||
inputPlaceholder: '#aaaaaa',
|
||||
|
||||
@ -10,7 +10,7 @@ import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import { useSession } from './useSession.hook';
|
||||
import { styles } from './Session.styled';
|
||||
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 { RegistryHeader, RegistryBody, Registry } from './registry/Registry';
|
||||
import { ContactHeader, ContactBody, Contact } from './contact/Contact';
|
||||
@ -113,13 +113,13 @@ function SettingsStackScreen() {
|
||||
|
||||
function ProfileStackScreen() {
|
||||
const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
|
||||
const screenParams = { headerShown: true, headerTintColor: Colors.primary };
|
||||
const screenParams = { headerShown: false, headerTintColor: Colors.primary };
|
||||
|
||||
return (
|
||||
<SafeAreaView edges={['left', 'right']} style={styles.body}>
|
||||
<ProfileStack.Navigator screenOptions={({ route }) => (screenParams)}>
|
||||
<ProfileStack.Screen name="profile" options={{ ...stackParams, headerTitle: () => <ProfileHeader /> }}>
|
||||
{(props) => <ScrollView><ProfileBody /></ScrollView>}
|
||||
<ProfileStack.Screen name="profile" options={stackParams}>
|
||||
{(props) => <Profile />}
|
||||
</ProfileStack.Screen>
|
||||
</ProfileStack.Navigator>
|
||||
</SafeAreaView>
|
||||
|
||||
@ -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 MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import ImagePicker from 'react-native-image-crop-picker'
|
||||
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Colors } from 'constants/Colors';
|
||||
import { useProfile } from './useProfile.hook';
|
||||
import { Logo } from 'utils/Logo';
|
||||
import { styles } from './Profile.styled';
|
||||
import { BlockedTopics } from './blockedTopics/BlockedTopics';
|
||||
import { BlockedContacts } from './blockedContacts/BlockedContacts';
|
||||
import { BlockedMessages } from './blockedMessages/BlockedMessages';
|
||||
import avatar from 'images/avatar.png';
|
||||
|
||||
export function Profile() {
|
||||
|
||||
export function ProfileHeader() {
|
||||
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 () => {
|
||||
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) => {
|
||||
try {
|
||||
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 () => {
|
||||
try {
|
||||
await actions.saveDetails();
|
||||
@ -115,497 +50,24 @@ export function ProfileBody() {
|
||||
}
|
||||
}
|
||||
|
||||
const saveLogin = async () => {
|
||||
try {
|
||||
await actions.saveLogin();
|
||||
actions.hideEditLogin();
|
||||
}
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
Alert.alert(
|
||||
'Failed to Change Login',
|
||||
'Please try again.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.body}>
|
||||
|
||||
<View style={styles.logo}>
|
||||
<View>
|
||||
<Logo src={state.imageSource} width={128} height={128} radius={8} />
|
||||
<TouchableOpacity style={styles.gallery} onPress={onGallery}>
|
||||
<Ionicons name="picture" size={14} color={Colors.white} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.alert}>
|
||||
{ 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>
|
||||
console.log(state.imageSource);
|
||||
|
||||
<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>
|
||||
<ScrollView style={styles.content}>
|
||||
|
||||
<Image source={state.imageSource} style={{ width: state.width, height: state.height }} resizeMode={'contain'} />
|
||||
|
||||
<View style={styles.details}>
|
||||
<View style={styles.control}>
|
||||
<TouchableOpacity style={styles.edit}>
|
||||
<Text style={styles.editLabel}>Edit</Text>
|
||||
<MatIcons name="square-edit-outline" size={14} color={Colors.text} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,309 +1,48 @@
|
||||
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Colors } from 'constants/Colors';
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
body: {
|
||||
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',
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(52, 52, 52, 0.8)'
|
||||
display: 'flex',
|
||||
backgroundColor: Colors.screenBase,
|
||||
},
|
||||
modalContainer: {
|
||||
backgroundColor: Colors.formBackground,
|
||||
padding: 16,
|
||||
width: '80%',
|
||||
maxWidth: 400,
|
||||
},
|
||||
modalHeader: {
|
||||
fontSize: 18,
|
||||
paddingBottom: 16,
|
||||
color: Colors.text,
|
||||
},
|
||||
canceltext: {
|
||||
color: Colors.text,
|
||||
},
|
||||
modalList: {
|
||||
details: {
|
||||
width: '100%',
|
||||
borderWidth: 1,
|
||||
borderColor: Colors.lightgrey,
|
||||
borderRadius: 2,
|
||||
position: 'relative',
|
||||
top: -16,
|
||||
minHeight: 32,
|
||||
backgroundColor: 'yellow',
|
||||
borderTopRightRadius: 32,
|
||||
borderTopLeftRadius: 32,
|
||||
backgroundColor: Colors.screenBase,
|
||||
},
|
||||
modalControls: {
|
||||
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: {
|
||||
control: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
padding: 8,
|
||||
backgroundColor: Colors.lightgrey,
|
||||
borderBottomRightRadius: 8,
|
||||
width: '100%',
|
||||
top: -16,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
edit: {
|
||||
borderTopLeftRadius: 8,
|
||||
},
|
||||
detail: {
|
||||
display: 'flex',
|
||||
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,
|
||||
borderTopRightRadius: 8,
|
||||
backgroundColor: Colors.screenBase,
|
||||
paddingLeft: 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,
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
editLabel: {
|
||||
color: Colors.text,
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
fontSize: 12,
|
||||
fontFamily: 'roboto',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -1,349 +1,39 @@
|
||||
import { useState, useEffect, useRef, useContext } from 'react';
|
||||
import { useWindowDimensions } from 'react-native';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ProfileContext } from 'context/ProfileContext';
|
||||
import { AccountContext } from 'context/AccountContext';
|
||||
import { AppContext } from 'context/AppContext';
|
||||
import { generateSeal, updateSeal, unlockSeal } from 'context/sealUtil';
|
||||
import avatar from 'images/avatar.png';
|
||||
|
||||
export function useProfile() {
|
||||
|
||||
const [state, setState] = useState({
|
||||
name: 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,
|
||||
imageSource: null,
|
||||
});
|
||||
|
||||
const app = useContext(AppContext);
|
||||
const account = useContext(AccountContext);
|
||||
const dimensions = useWindowDimensions();
|
||||
const profile = useContext(ProfileContext);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const debounce = useRef();
|
||||
|
||||
const updateState = (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(() => {
|
||||
if (state.sealMode === 'unlocked') {
|
||||
return updateState({ canSaveSeal: true });
|
||||
const { width, height } = dimensions;
|
||||
if (height > width) {
|
||||
updateState({ width, height: width });
|
||||
}
|
||||
if (state.sealMode === 'unlocking' && state.sealUnlock != null && state.sealUnlock !== '') {
|
||||
return updateState({ canSaveSeal: true });
|
||||
else {
|
||||
updateState({ width: height, height });
|
||||
}
|
||||
if (state.sealMode === 'enabling' && state.sealPassword != null && state.sealPassword === state.sealConfirm) {
|
||||
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]);
|
||||
|
||||
}, [dimensions]);
|
||||
|
||||
useEffect(() => {
|
||||
const { name, handle, node, location, description, image } = profile.state.identity;
|
||||
const imageSource = image ? profile.state.imageUrl : 'avatar';
|
||||
updateState({ name, handle, node, location, description, imageSource, editHandle: handle,
|
||||
editName: name, editLocation: location, editDescription: description });
|
||||
const imageSource = image ? { uri: profile.state.imageUrl } : avatar;
|
||||
updateState({ name, handle, node, location, description, imageSource });
|
||||
}, [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 = {
|
||||
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 };
|
||||
|
||||
@ -8,7 +8,7 @@ export const styles = StyleSheet.create({
|
||||
display: 'flex',
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
paddingTop: 16,
|
||||
paddingTop: 8,
|
||||
backgroundColor: Colors.screenBase,
|
||||
},
|
||||
label: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user