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