martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 18:15:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
balzack 2024-09-14 23:01:32 -07:00
parent dc5119fae7
commit 8af7ab1dc5
13 changed files with 224 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/client/mobile/src/access/Access.tsx
View File

@ -6,14 +6,21 @@ import {
View,
Image,
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {useAccess} from './useAccess.hook';
import {styles} from './Access.styled';
import left from '../images/login.png';
import {IconButton, Modal, Surface, Text, TextInput, Button} from 'react-native-paper';
import {
IconButton,
Modal,
Surface,
Text,
TextInput,
Button,
} from 'react-native-paper';
import {SafeAreaView} from 'react-native-safe-area-context';
import { BlurView } from "@react-native-community/blur";
import { InputCode } from '../utils/InputCode';
import {BlurView} from '@react-native-community/blur';
import {InputCode} from '../utils/InputCode';
export function Access() {
const [text, setText] = useState('');
@ -64,7 +71,9 @@ export function Access() {
{state.layout === 'large' && (
<Image style={styles.left} source={left} resizeMode="contain" />
)}
<KeyboardAwareScrollView style={styles.frame} contentContainerStyle={styles.scroll}>
<KeyboardAwareScrollView
style={styles.frame}
contentContainerStyle={styles.scroll}>
<SafeAreaView style={styles.right} edges={['top', 'bottom']}>
<View style={styles.header}>
<View style={styles.admin} />
@ -92,9 +101,7 @@ export function Access() {
</View>
{state.mode === 'account' && (
<View style={styles.body}>
<Text variant="headlineSmall">
{state.strings.accountLogin}
</Text>
<Text variant="headlineSmall">{state.strings.accountLogin}</Text>
<TextInput
style={styles.input}
mode="flat"
@ -160,9 +167,7 @@ export function Access() {
)}
{state.mode === 'reset' && (
<View style={styles.body}>
<Text variant="headlineSmall">
{state.strings.accessAccount}
</Text>
<Text variant="headlineSmall">{state.strings.accessAccount}</Text>
<TextInput
style={styles.input}
mode="flat"
@ -202,9 +207,7 @@ export function Access() {
)}
{state.mode === 'create' && (
<View style={styles.body}>
<Text variant="headlineSmall">
{state.strings.createAccount}
</Text>
<Text variant="headlineSmall">{state.strings.createAccount}</Text>
<View style={styles.spacer}>
{!state.available && (
<TextInput
@ -365,7 +368,12 @@ export function Access() {
</SafeAreaView>
</KeyboardAwareScrollView>
{(alert || otp) && (
<BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
<BlurView
style={styles.blur}
blurType="dark"
blurAmount={2}
reducedTransparencyFallbackColor="dark"
/>
)}
<Modal
visible={alert}
@ -395,7 +403,7 @@ export function Access() {
mode="outlined"
style={styles.submit}
onPress={() => setOtp(false)}>
{state.strings.cancel}
{state.strings.cancel}
</Button>
<Button
mode="contained"
@ -405,7 +413,7 @@ export function Access() {
disabled={state.code.length !== 6}>
{state.strings.login}
</Button>
</View>
</View>
</Surface>
</Modal>
</Surface>

8
app/client/mobile/src/access/useAccess.hook.ts
View File

@ -47,8 +47,7 @@ export function useAccess() {
if (node) {
const available = await app.actions.getAvailable(node, secure);
updateState({available});
}
else {
} else {
updateState({available: 0});
}
} catch (err) {
@ -76,9 +75,8 @@ export function useAccess() {
secure,
);
updateState({taken: !available});
}
else {
updateState({ taken: false });
} else {
updateState({taken: false});
}
} catch (err) {
console.log(err);

10
app/client/mobile/src/channels/Channels.tsx
View File

@ -1,9 +1,11 @@
import { useContext } from 'react';
import { Text, Button } from 'react-native-paper';
import { SafeAreaView } from 'react-native';
import {useContext} from 'react';
import {Text, Button} from 'react-native-paper';
import {SafeAreaView} from 'react-native';
export function Channels() {
return (
<SafeAreaView><Text>CHANNELS</Text></SafeAreaView>
<SafeAreaView>
<Text>CHANNELS</Text>
</SafeAreaView>
);
}

10
app/client/mobile/src/contacts/Contacts.tsx
View File

@ -1,9 +1,11 @@
import { useContext } from 'react';
import { Text, Button } from 'react-native-paper';
import { SafeAreaView } from 'react-native';
import {useContext} from 'react';
import {Text, Button} from 'react-native-paper';
import {SafeAreaView} from 'react-native';
export function Contacts() {
return (
<SafeAreaView><Text>Contacts</Text></SafeAreaView>
<SafeAreaView>
<Text>Contacts</Text>
</SafeAreaView>
);
}

2
app/client/mobile/src/context/useAppContext.hook.ts
View File

@ -47,7 +47,7 @@ export function useAppContext() {
appName: 'databag',
};
console.log("SDK LOGIN:", username, password, node, secure);
console.log('SDK LOGIN:', username, password, node, secure);
const login = await sdk.current.login(
username,

4
app/client/mobile/src/context/useDisplayContext.hook.ts
View File

@ -16,8 +16,8 @@ export function useDisplayContext() {
};
useEffect(() => {
const layout = dim.width < SMALL_LARGE ? 'small' : 'large'
updateState({ layout });
const layout = dim.width < SMALL_LARGE ? 'small' : 'large';
updateState({layout});
}, [dim.width]);
const actions = {};

2
app/client/mobile/src/details/Details.tsx
View File

@ -1,5 +1,5 @@
import {Text} from 'react-native-paper';
export function Details() {
return <Text>DETAILS</Text>
return <Text>DETAILS</Text>;
}

2
app/client/mobile/src/profile/Profile.tsx
View File

@ -1,3 +1,3 @@
export function Profile() {
return <></>
return <></>;
}

3
app/client/mobile/src/registry/Registry.tsx
View File

@ -1,4 +1,3 @@
export function Registry() {
return <></>
return <></>;
}

1
app/client/mobile/src/session/Session.styled.ts
View File

@ -21,4 +21,3 @@ export const styles = StyleSheet.create({
flexGrow: 1,
},
});

106
app/client/mobile/src/session/Session.tsx
View File

@ -1,17 +1,17 @@
import { useState, useContext } from 'react';
import { View, SafeAreaView } from 'react-native';
import {useState, useContext} from 'react';
import {View, SafeAreaView} from 'react-native';
import {styles} from './Session.styled';
import { BottomNavigation, Button, Text } from 'react-native-paper';
import { DisplayContext } from '../context/DisplayContext';
import { Settings } from '../settings/Settings';
import { Channels } from '../channels/Channels';
import { Contacts } from '../contacts/Contacts';
import { Registry } from '../registry/Registry';
import { Profile } from '../profile/Profile';
import { Details } from '../details/Details';
import {BottomNavigation, Button, Text} from 'react-native-paper';
import {DisplayContext} from '../context/DisplayContext';
import {Settings} from '../settings/Settings';
import {Channels} from '../channels/Channels';
import {Contacts} from '../contacts/Contacts';
import {Registry} from '../registry/Registry';
import {Profile} from '../profile/Profile';
import {Details} from '../details/Details';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
const ChannelsRoute = () => <Channels />;
const ContactsRoute = () => <Contacts />;
@ -27,11 +27,26 @@ export function Session() {
const display = useContext(DisplayContext);
const [index, setIndex] = useState(0);
const [routes] = useState([
{ key: 'channels', title: 'Channels', focusedIcon: 'comment-multiple', unfocusedIcon: 'comment-multiple-outline' },
{ key: 'contacts', title: 'Contacts', focusedIcon: 'contacts', unfocusedIcon: 'contacts-outline' },
{ key: 'settings', title: 'Settings', focusedIcon: 'cog', unfocusedIcon: 'cog-outline' },
{
key: 'channels',
title: 'Channels',
focusedIcon: 'comment-multiple',
unfocusedIcon: 'comment-multiple-outline',
},
{
key: 'contacts',
title: 'Contacts',
focusedIcon: 'contacts',
unfocusedIcon: 'contacts-outline',
},
{
key: 'settings',
title: 'Settings',
focusedIcon: 'cog',
unfocusedIcon: 'cog-outline',
},
]);
const sessionNav = { settings: null };
const sessionNav = {settings: null};
const renderScene = BottomNavigation.SceneMap({
channels: ChannelsRoute,
@ -44,7 +59,7 @@ export function Session() {
{display.state.layout !== 'large' && (
<BottomNavigation
labeled={false}
navigationState={{ index, routes }}
navigationState={{index, routes}}
onIndexChange={setIndex}
renderScene={renderScene}
/>
@ -56,9 +71,9 @@ export function Session() {
)}
</View>
);
};
}
function DetailsScreen({ nav }) {
function DetailsScreen({nav}) {
return (
<ProfileDrawer.Navigator
id="ProfileDrawer"
@ -67,16 +82,17 @@ function DetailsScreen({ nav }) {
drawerPosition: 'right',
drawerType: 'front',
headerShown: false,
}}
>
}}>
<ProfileDrawer.Screen name="profile">
{({ navigation }) => <ProfileScreen nav={{...nav, details: navigation}} />}
{({navigation}) => (
<ProfileScreen nav={{...nav, details: navigation}} />
)}
</ProfileDrawer.Screen>
</ProfileDrawer.Navigator>
)
);
}
function ProfileScreen({ nav }) {
function ProfileScreen({nav}) {
return (
<ProfileDrawer.Navigator
id="ProfileDrawer"
@ -85,16 +101,17 @@ function ProfileScreen({ nav }) {
drawerPosition: 'right',
drawerType: 'front',
headerShown: false,
}}
>
}}>
<ProfileDrawer.Screen name="registry">
{({ navigation }) => <RegistryScreen nav={{...nav, profile: navigation}} />}
{({navigation}) => (
<RegistryScreen nav={{...nav, profile: navigation}} />
)}
</ProfileDrawer.Screen>
</ProfileDrawer.Navigator>
)
);
}
function RegistryScreen({ nav }) {
function RegistryScreen({nav}) {
return (
<RegistryDrawer.Navigator
id="RegistryDrawer"
@ -103,16 +120,17 @@ function RegistryScreen({ nav }) {
drawerPosition: 'right',
drawerType: 'front',
headerShown: false,
}}
>
}}>
<RegistryDrawer.Screen name="contacts">
{({ navigation }) => <ContactsScreen nav={{...nav, registry: navigation}} />}
{({navigation}) => (
<ContactsScreen nav={{...nav, registry: navigation}} />
)}
</RegistryDrawer.Screen>
</RegistryDrawer.Navigator>
)
);
}
function ContactsScreen({ nav }) {
function ContactsScreen({nav}) {
return (
<ContactsDrawer.Navigator
id="ContactsDrawer"
@ -121,16 +139,17 @@ function ContactsScreen({ nav }) {
drawerPosition: 'right',
drawerType: 'front',
headerShown: false,
}}
>
}}>
<ContactsDrawer.Screen name="settings">
{({ navigation }) => <SettingsScreen nav={{...nav, contacts: navigation}} />}
{({navigation}) => (
<SettingsScreen nav={{...nav, contacts: navigation}} />
)}
</ContactsDrawer.Screen>
</ContactsDrawer.Navigator>
)
);
}
function SettingsScreen({ nav }) {
function SettingsScreen({nav}) {
return (
<SettingsDrawer.Navigator
id="SettingsDrawer"
@ -139,16 +158,15 @@ function SettingsScreen({ nav }) {
drawerPosition: 'right',
drawerType: 'front',
headerShown: false,
}}
>
}}>
<SettingsDrawer.Screen name="home">
{({ navigation }) => <HomeScreen nav={{...nav, settings: navigation}} />}
{({navigation}) => <HomeScreen nav={{...nav, settings: navigation}} />}
</SettingsDrawer.Screen>
</SettingsDrawer.Navigator>
)
);
}
function HomeScreen({ nav }) {
function HomeScreen({nav}) {
return (
<SafeAreaView style={styles.frame}>
<View style={styles.left}>

12
app/client/mobile/src/settings/Settings.tsx
View File

@ -1,14 +1,16 @@
import { useContext } from 'react';
import { AppContext } from '../context/AppContext';
import { Text, Button } from 'react-native-paper';
import { SafeAreaView } from 'react-native';
import {useContext} from 'react';
import {AppContext} from '../context/AppContext';
import {Text, Button} from 'react-native-paper';
import {SafeAreaView} from 'react-native';
export function Settings() {
const app = useContext(AppContext);
return (
<SafeAreaView>
<Button mode="contained" onPress={app.actions.accountLogout}>Logout</Button>
<Button mode="contained" onPress={app.actions.accountLogout}>
Logout
</Button>
</SafeAreaView>
);
}

133
app/client/mobile/src/utils/InputCode.tsx
View File

@ -1,50 +1,135 @@
import { TextInput, Text, View, TouchableOpacity } from 'react-native';
import { useState, useRef } from 'react';
export function InputCode({ onChangeText, style }) {
import {TextInput, Text, View, TouchableOpacity} from 'react-native';
import {useState, useRef} from 'react';
export function InputCode({onChangeText, style}) {
const [code, setCode] = useState('');
const ref = useRef();
const updateCode = (value) => {
const updateCode = value => {
if (value.length >= 6) {
onChangeText(value.slice(0, 6));
if (ref.current) {
ref.current.blur();
}
}
else {
} else {
onChangeText('');
}
setCode(value.slice(0, 6));
}
};
return (
<View style={style}>
<View style={{ width: '100%', height: 32 }}>
<View style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
<Text style={{ fontSize: 20 }}>{ code.charAt(0) }</Text>
<View style={{width: '100%', height: 32}}>
<View
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<View
style={{
width: 32,
height: '100%',
borderWidth: 1,
borderRadius: 4,
backgroundColor: '#dddddd',
borderColor: '#aaaaaa',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
}}>
<Text style={{fontSize: 20}}>{code.charAt(0)}</Text>
</View>
<View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
<Text style={{ fontSize: 20 }}>{ code.charAt(1) }</Text>
<View
style={{
width: 32,
height: '100%',
borderWidth: 1,
borderRadius: 4,
backgroundColor: '#dddddd',
borderColor: '#aaaaaa',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
}}>
<Text style={{fontSize: 20}}>{code.charAt(1)}</Text>
</View>
<View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
<Text style={{ fontSize: 20 }}>{ code.charAt(2) }</Text>
<View
style={{
width: 32,
height: '100%',
borderWidth: 1,
borderRadius: 4,
backgroundColor: '#dddddd',
borderColor: '#aaaaaa',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
}}>
<Text style={{fontSize: 20}}>{code.charAt(2)}</Text>
</View>
<View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
<Text style={{ fontSize: 20 }}>{ code.charAt(3) }</Text>
<View
style={{
width: 32,
height: '100%',
borderWidth: 1,
borderRadius: 4,
backgroundColor: '#dddddd',
borderColor: '#aaaaaa',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
}}>
<Text style={{fontSize: 20}}>{code.charAt(3)}</Text>
</View>
<View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
<Text style={{ fontSize: 20 }}>{ code.charAt(4) }</Text>
<View
style={{
width: 32,
height: '100%',
borderWidth: 1,
borderRadius: 4,
backgroundColor: '#dddddd',
borderColor: '#aaaaaa',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
}}>
<Text style={{fontSize: 20}}>{code.charAt(4)}</Text>
</View>
<View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
<Text style={{ fontSize: 20 }}>{ code.charAt(5) }</Text>
<View
style={{
width: 32,
height: '100%',
borderWidth: 1,
borderRadius: 4,
backgroundColor: '#dddddd',
borderColor: '#aaaaaa',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
}}>
<Text style={{fontSize: 20}}>{code.charAt(5)}</Text>
</View>
</View>
<TextInput style={{ width: '100%', height: '100%', opacity: 0, position: 'absolute', top: 0, left: 0 }} keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'} onChangeText={updateCode} autoCorrect={false} autoCapitalize="none" maxLength={6} ref={ref} />
<TextInput
style={{
width: '100%',
height: '100%',
opacity: 0,
position: 'absolute',
top: 0,
left: 0,
}}
keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'}
onChangeText={updateCode}
autoCorrect={false}
autoCapitalize="none"
maxLength={6}
ref={ref}
/>
</View>
</View>
);
}