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

setting up create screen

Browse Source
This commit is contained in:
Roland Osborne 2022-09-09 15:23:44 -07:00
parent 7b66b30d24
commit 0f6963afd6
3 changed files with 115 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
app/mobile/src/access/create/Create.jsx
View File

@ -1,4 +1,4 @@
import { ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native'; import { ScrollView, ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
import { styles } from './Create.styled'; import { styles } from './Create.styled';
import Ionicons from '@expo/vector-icons/AntDesign'; import Ionicons from '@expo/vector-icons/AntDesign';
import { useCreate } from './useCreate.hook'; import { useCreate } from './useCreate.hook';
@ -14,7 +14,7 @@ export function Create() {
catch (err) { catch (err) {
Alert.alert( Alert.alert(
"Create Failed", "Create Failed",
"Please check your login and password.", "Please check your username and password.",
); );
} }
} }
@ -24,79 +24,99 @@ export function Create() {
<View style={styles.container}> <View style={styles.container}>
<View style={styles.control}> <View style={styles.control}>
<TouchableOpacity onPress={actions.config}> <TouchableOpacity onPress={actions.config}>
<Ionicons style={styles.config} name="setting" size={24} color="#aaaaaa" /> <Ionicons style={styles.config} name="setting" size={24} color="#888888" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={styles.title}>Databag</Text> <Text style={styles.title}>Databag</Text>
<View style={styles.spacemid}> <View style={styles.spacemid}>
<Text style={styles.header}>Create Account</Text> <Text style={styles.header}>Create Account</Text>
</View> </View>
<View style={styles.spacetop}> <ScrollView style={styles.spacetop}>
<View style={styles.inputwrapper}> <View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="user" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="database" size={18} color="#888888" />
<TextInput style={styles.inputfield} value={state.create} onChangeText={actions.setLogin} <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
autoCapitalize="none" placeholder="username@server" /> autoCapitalize="none" placeholder="server" />
<View style={styles.space} /> <View style={styles.space}>
<Text style={styles.required}>✻</Text>
</View>
</View>
{ state.tokenRequired && (
<View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="key" size={18} color="#888888" />
<TextInput style={styles.inputfield} value={state.token} onChangeText={actions.setToken}
autoCapitalize="none" placeholder="token" />
<View style={styles.space} />
</View>
)}
<View style={styles.inputwrapperpad}>
<Ionicons style={styles.icon} name="user" size={18} color="#888888" />
<TextInput style={styles.inputfield} value={state.username} onChangeText={actions.setUsername}
autoCapitalize="none" placeholder="username" />
<View style={styles.space}>
<Text style={styles.required}>✻</Text>
</View>
</View> </View>
{ state.showPassword && ( { state.showPassword && (
<View style={styles.inputwrapper}> <View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
<TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword} <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
autoCapitalize="none" placeholder="password" /> autoCapitalize="none" placeholder="password" />
<TouchableOpacity onPress={actions.hidePassword}> <TouchableOpacity onPress={actions.hidePassword}>
<Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
{ !state.showPassword && ( { !state.showPassword && (
<View style={styles.inputwrapper}> <View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
<TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword} <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
secureTextEntry={true} autoCapitalize="none" placeholder="password" /> secureTextEntry={true} autoCapitalize="none" placeholder="password" />
<TouchableOpacity onPress={actions.showPassword}> <TouchableOpacity onPress={actions.showPassword}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
{ state.showConfirm && ( { state.showConfirm && (
<View style={styles.inputwrapper}> <View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
<TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm} <TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm}
autoCapitalize="none" placeholder="confirm password" /> autoCapitalize="none" placeholder="confirm password" />
<TouchableOpacity onPress={actions.hideConfirm}> <TouchableOpacity onPress={actions.hideConfirm}>
<Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
{ !state.showConfirm && ( { !state.showConfirm && (
<View style={styles.inputwrapper}> <View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
<TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm} <TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm}
secureTextEntry={true} autoCapitalize="none" placeholder="confirm password" /> secureTextEntry={true} autoCapitalize="none" placeholder="confirm password" />
<TouchableOpacity onPress={actions.showConfirm}> <TouchableOpacity onPress={actions.showConfirm}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#aaaaaa" /> <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
{ state.enabled && ( <View style={styles.buttons}>
<TouchableOpacity style={styles.create} onPress={create}> { state.enabled && (
{ state.busy && ( <TouchableOpacity style={styles.create} onPress={create}>
<ActivityIndicator size="small" color="#ffffff" /> { state.busy && (
)} <ActivityIndicator size="small" color="#ffffff" />
{ !state.busy && ( )}
<Text style={styles.createtext}>Create Account</Text> { !state.busy && (
)} <Text style={styles.createtext}>Create Account</Text>
)}
</TouchableOpacity>
)}
{ !state.enabled && (
<View style={styles.nocreate}>
<Text style={styles.nocreatetext}>Create</Text>
</View>
)}
<TouchableOpacity style={styles.login} onPress={actions.create}>
<Text style={styles.createtext}>Account Login</Text>
</TouchableOpacity> </TouchableOpacity>
)} </View>
{ !state.enabled && ( </ScrollView>
<View style={styles.nocreate}>
<Text style={styles.nocreatetext}>Create</Text>
</View>
)}
<TouchableOpacity style={styles.create} onPress={actions.login}>
<Text style={styles.createtext}>Account Login</Text>
</TouchableOpacity>
</View>
</View> </View>
</View> </View>
); );

40
app/mobile/src/access/create/Create.styled.js
View File

@ -14,6 +14,14 @@ export const styles = StyleSheet.create({
}, },
space: { space: {
width: 32, width: 32,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
required: {
fontSize: 12,
color: Colors.alert,
textAlignVertical: 'center',
}, },
container: { container: {
flexDirection: 'column', flexDirection: 'column',
@ -22,14 +30,13 @@ export const styles = StyleSheet.create({
width: '100%', width: '100%',
height: '100%', height: '100%',
display: 'flex', display: 'flex',
paddingLeft: 16, },
paddingRight: 16,
},
control: { control: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-end', justifyContent: 'flex-end',
color: Colors.grey, color: Colors.grey,
marginRight: 16,
}, },
title: { title: {
width: '100%', width: '100%',
@ -46,12 +53,16 @@ export const styles = StyleSheet.create({
width: '100%', width: '100%',
}, },
spacetop: { spacetop: {
flexGrow: 1,
flexDirection: 'column',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'flex-start',
width: '100%', width: '100%',
paddingLeft: 16,
paddingRight: 16,
},
buttons: {
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}, },
header: { header: {
fontSize: 32, fontSize: 32,
@ -67,6 +78,17 @@ export const styles = StyleSheet.create({
marginBottom: 16, marginBottom: 16,
alignItems: 'center', alignItems: 'center',
}, },
inputwrapperpad: {
display: 'flex',
flexDirection: 'row',
width: '100%',
borderRadius: 4,
borderColor: Colors.divider,
borderWidth: 1,
marginTop: 16,
marginBottom: 16,
alignItems: 'center',
},
inputfield: { inputfield: {
flex: 1, flex: 1,
textAlign: 'center', textAlign: 'center',
@ -95,12 +117,14 @@ export const styles = StyleSheet.create({
borderRadius: 4, borderRadius: 4,
borderColor: Colors.divider, borderColor: Colors.divider,
borderWidth: 1, borderWidth: 1,
marginBottom: 16,
}, },
nocreatetext: { nocreatetext: {
color: Colors.disabled, color: Colors.disabled,
}, },
create: { create: {
marginTop: 16, marginTop: 16,
marginBottom: 16,
}, },
createtext: { createtext: {
fontColor: 'yellow', fontColor: 'yellow',

37
app/mobile/src/access/create/useCreate.hook.js
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useContext } from 'react'; import { useState, useEffect, useContext, useRef } from 'react';
import { useWindowDimensions } from 'react-native'; import { useWindowDimensions } from 'react-native';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { AppContext } from 'context/AppContext'; import { AppContext } from 'context/AppContext';
@ -11,23 +11,38 @@ export function useCreate() {
const [state, setState] = useState({ const [state, setState] = useState({
busy: false, busy: false,
enabled: false, enabled: false,
login: null, server: null,
token: null,
username: null,
password: null, password: null,
confirm: null, confirm: null,
showPassword: false, showPassword: false,
showConfirm: false, showConfirm: false,
serverCheck: true,
serverValid: false,
tokenRequired: false,
usernameCheck: true,
usernameValid: false,
}); });
const debounceUsername = useRef(null);
const debounceServer = useRef(null);
const updateState = (value) => { const updateState = (value) => {
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
} }
useEffect(() => { useEffect(() => {
if (state.password && state.login && !state.enabled) { if (state.password && state.username && state.server && state.confirm && state.password === state.confirm) {
updateState({ enabled: true }); if (!state.enabled) {
updateState({ enabled: true });
}
} }
if ((!state.password || !state.login) && state.enabled) { else {
updateState({ enabled: false }); if (state.enabled) {
updateState({ enabled: false });
}
} }
}, [state.login, state.password]); }, [state.login, state.password]);
@ -35,8 +50,14 @@ export function useCreate() {
config: () => { config: () => {
navigate('/admin'); navigate('/admin');
}, },
setLogin: (login) => { setServer: (server) => {
updateState({ login }); updateState({ server });
},
setToken: (token) => {
updateState({ token });
},
setUsername: (username) => {
updateState({ username });
}, },
setPassword: (password) => { setPassword: (password) => {
updateState({ password }); updateState({ password });