mirror of
https://github.com/balzack/databag.git
synced 2025-04-23 18:15:19 +00:00
added safe view areas to login
This commit is contained in:
balzack
parent
9448ac7849
commit
bc6385bf3c
@ -1,6 +1,10 @@
|
||||
import {StyleSheet} from 'react-native';
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
avoid: {
|
||||
flex: 1,
|
||||
backgroundColor: '#90bea7',
|
||||
},
|
||||
mfa: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -44,6 +48,7 @@ export const styles = StyleSheet.create({
|
||||
right: {
|
||||
flex: 1,
|
||||
height: '100%',
|
||||
backgroundColor: '#90bea7',
|
||||
},
|
||||
left: {
|
||||
flex: 1,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, {useState} from 'react';
|
||||
import {ScrollView, View, Image} from 'react-native';
|
||||
import {Platform, KeyboardAvoidingView, ScrollView, View, Image} from 'react-native';
|
||||
import {useAccess} from './useAccess.hook';
|
||||
import {styles} from './Access.styled';
|
||||
import left from '../images/login.png';
|
||||
@ -49,304 +49,308 @@ export function Access() {
|
||||
}
|
||||
};
|
||||
|
||||
console.log(Platform.OS);
|
||||
|
||||
return (
|
||||
<View style={styles.split}>
|
||||
{state.wide && (
|
||||
<Image style={styles.left} source={left} resizeMode="contain" />
|
||||
)}
|
||||
<SafeAreaView style={styles.right} edges={['top', 'bottom']}>
|
||||
<ScrollView style={styles.frame} contentContainerStyle={styles.scroll}>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.admin} />
|
||||
<Text style={styles.label} variant="headlineLarge">
|
||||
Databag
|
||||
</Text>
|
||||
<View style={styles.admin}>
|
||||
{state.mode !== 'admin' && (
|
||||
<IconButton
|
||||
style={styles.admin}
|
||||
icon="cog-outline"
|
||||
size={28}
|
||||
onPress={() => actions.setMode('admin')}
|
||||
/>
|
||||
)}
|
||||
{state.mode === 'admin' && (
|
||||
<IconButton
|
||||
style={styles.admin}
|
||||
icon="account-outline"
|
||||
size={28}
|
||||
onPress={() => actions.setMode('account')}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
{state.mode === 'account' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.accountLogin}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.username}
|
||||
value={state.username}
|
||||
left={<TextInput.Icon icon="account" />}
|
||||
onChangeText={value => actions.setUsername(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
value={state.password}
|
||||
label={state.strings.password}
|
||||
secureTextEntry={!showPassword}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowPassword(false)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowPassword(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setPassword(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.username || !state.password || !state.node}>
|
||||
{state.strings.login}
|
||||
</Button>
|
||||
|
||||
<Button mode="text" onPress={() => actions.setMode('create')}>
|
||||
{state.strings.createAccount}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('reset')}>
|
||||
{state.strings.forgotPassword}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
{state.mode === 'reset' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.accessAccount}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.token}
|
||||
left={<TextInput.Icon icon="key" />}
|
||||
onChangeText={value => actions.setToken(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.username || !state.password || !state.node}>
|
||||
{state.strings.access}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('create')}>
|
||||
{state.strings.createAccount}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('account')}>
|
||||
{state.strings.accountLogin}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
{state.mode === 'create' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.createAccount}</Text>
|
||||
<View style={styles.spacer}>
|
||||
{!state.available && (
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.token}
|
||||
left={<TextInput.Icon icon="key" />}
|
||||
onChangeText={value => actions.setToken(value)}
|
||||
<KeyboardAvoidingView style={styles.avoid} behavior="padding" enabled={Platform.OS === 'ios' ? true : false}>
|
||||
<ScrollView style={styles.frame} contentContainerStyle={styles.scroll}>
|
||||
<SafeAreaView style={styles.right} edges={['top', 'bottom']}>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.admin} />
|
||||
<Text style={styles.label} variant="headlineLarge">
|
||||
Databag
|
||||
</Text>
|
||||
<View style={styles.admin}>
|
||||
{state.mode !== 'admin' && (
|
||||
<IconButton
|
||||
style={styles.admin}
|
||||
icon="cog-outline"
|
||||
size={28}
|
||||
onPress={() => actions.setMode('admin')}
|
||||
/>
|
||||
)}
|
||||
{state.mode === 'admin' && (
|
||||
<IconButton
|
||||
style={styles.admin}
|
||||
icon="account-outline"
|
||||
size={28}
|
||||
onPress={() => actions.setMode('account')}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
error={state.taken}
|
||||
label={state.strings.username}
|
||||
value={state.username}
|
||||
left={<TextInput.Icon icon="account" />}
|
||||
onChangeText={value => actions.setUsername(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
value={state.password}
|
||||
label={state.strings.password}
|
||||
secureTextEntry={!showPassword}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowPassword(false)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowPassword(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setPassword(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
value={state.confirm}
|
||||
label={state.strings.confirmPassword}
|
||||
secureTextEntry={!showConfirm}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowConfirm(false)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowConfirm(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setConfirm(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.username || !state.password || state.password !== state.confirm || !state.node}>
|
||||
{state.strings.create}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('account')}>
|
||||
{state.strings.accountLogin}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('reset')}>
|
||||
{state.strings.forgotPassword}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
{state.mode === 'admin' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.adminAccess}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="outlined"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label="Password"
|
||||
value={state.password}
|
||||
secureTextEntry={!showPassword}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowPassword(false)}
|
||||
{state.mode === 'account' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.accountLogin}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.username}
|
||||
value={state.username}
|
||||
left={<TextInput.Icon icon="account" />}
|
||||
onChangeText={value => actions.setUsername(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
value={state.password}
|
||||
label={state.strings.password}
|
||||
secureTextEntry={!showPassword}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowPassword(false)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowPassword(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setPassword(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.username || !state.password || !state.node}>
|
||||
{state.strings.login}
|
||||
</Button>
|
||||
|
||||
<Button mode="text" onPress={() => actions.setMode('create')}>
|
||||
{state.strings.createAccount}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('reset')}>
|
||||
{state.strings.forgotPassword}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
{state.mode === 'reset' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.accessAccount}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.token}
|
||||
left={<TextInput.Icon icon="ticket-account" />}
|
||||
onChangeText={value => actions.setToken(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.username || !state.password || !state.node}>
|
||||
{state.strings.access}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('create')}>
|
||||
{state.strings.createAccount}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('account')}>
|
||||
{state.strings.accountLogin}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
{state.mode === 'create' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.createAccount}</Text>
|
||||
<View style={styles.spacer}>
|
||||
{!state.available && (
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.token}
|
||||
left={<TextInput.Icon icon="ticket-account" />}
|
||||
onChangeText={value => actions.setToken(value)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowPassword(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setPassword(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.password || !state.node}>
|
||||
{state.strings.login}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)}
|
||||
</View>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
error={state.taken}
|
||||
label={state.strings.username}
|
||||
value={state.username}
|
||||
left={<TextInput.Icon icon="account" />}
|
||||
onChangeText={value => actions.setUsername(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
value={state.password}
|
||||
label={state.strings.password}
|
||||
secureTextEntry={!showPassword}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowPassword(false)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowPassword(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setPassword(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
value={state.confirm}
|
||||
label={state.strings.confirmPassword}
|
||||
secureTextEntry={!showConfirm}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowConfirm(false)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowConfirm(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setConfirm(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.username || !state.password || state.password !== state.confirm || !state.node}>
|
||||
{state.strings.create}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('account')}>
|
||||
{state.strings.accountLogin}
|
||||
</Button>
|
||||
<Button mode="text" onPress={() => actions.setMode('reset')}>
|
||||
{state.strings.forgotPassword}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
{state.mode === 'admin' && (
|
||||
<View style={styles.body}>
|
||||
<Text variant="headlineSmall">{state.strings.adminAccess}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label={state.strings.server}
|
||||
value={state.node}
|
||||
left={<TextInput.Icon icon="server" />}
|
||||
onChangeText={value => actions.setNode(value)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
mode="flat"
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
label="Password"
|
||||
value={state.password}
|
||||
secureTextEntry={!showPassword}
|
||||
left={<TextInput.Icon icon="lock" />}
|
||||
right={
|
||||
showPassword ? (
|
||||
<TextInput.Icon
|
||||
icon="eye-off"
|
||||
onPress={() => setShowPassword(false)}
|
||||
/>
|
||||
) : (
|
||||
<TextInput.Icon
|
||||
icon="eye"
|
||||
onPress={() => setShowPassword(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onChangeText={value => actions.setPassword(value)}
|
||||
/>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.submit}
|
||||
onPress={login}
|
||||
loading={state.loading}
|
||||
disabled={!state.password || !state.node}>
|
||||
{state.strings.login}
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
<Modal visible={alert} onDismiss={() => setAlert(false)} contentContainerStyle={styles.modal}>
|
||||
<View style={styles.content}>
|
||||
<Text variant="headlineSmall">{state.strings.error}</Text>
|
||||
<Text variant="titleLarge">{state.strings.error}</Text>
|
||||
<Text variant="titleSmall">{state.strings.tryAgain}</Text>
|
||||
<Button
|
||||
mode="text"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user