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

added safe view areas to login

Browse Source
This commit is contained in:
balzack 2024-08-16 09:55:12 -07:00
parent 9448ac7849
commit bc6385bf3c
2 changed files with 296 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/mobile/src/access/Access.styled.ts
View File

@ -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,

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

@ -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,13 +49,16 @@ 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}>
<SafeAreaView style={styles.right} edges={['top', 'bottom']}>
<View style={styles.header}> <View style={styles.header}>
<View style={styles.admin} /> <View style={styles.admin} />
<Text style={styles.label} variant="headlineLarge"> <Text style={styles.label} variant="headlineLarge">
@ -85,7 +88,7 @@ export function Access() {
<Text variant="headlineSmall">{state.strings.accountLogin}</Text> <Text variant="headlineSmall">{state.strings.accountLogin}</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -96,7 +99,7 @@ export function Access() {
/> />
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -107,7 +110,7 @@ export function Access() {
/> />
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -152,17 +155,17 @@ export function Access() {
<Text variant="headlineSmall">{state.strings.accessAccount}</Text> <Text variant="headlineSmall">{state.strings.accessAccount}</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
label={state.strings.token} label={state.strings.token}
left={<TextInput.Icon icon="key" />} left={<TextInput.Icon icon="ticket-account" />}
onChangeText={value => actions.setToken(value)} onChangeText={value => actions.setToken(value)}
/> />
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -194,19 +197,19 @@ export function Access() {
{!state.available && ( {!state.available && (
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
label={state.strings.token} label={state.strings.token}
left={<TextInput.Icon icon="key" />} left={<TextInput.Icon icon="ticket-account" />}
onChangeText={value => actions.setToken(value)} onChangeText={value => actions.setToken(value)}
/> />
)} )}
</View> </View>
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -217,7 +220,7 @@ export function Access() {
/> />
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -229,7 +232,7 @@ export function Access() {
/> />
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -254,7 +257,7 @@ export function Access() {
/> />
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -298,7 +301,7 @@ export function Access() {
<Text variant="headlineSmall">{state.strings.adminAccess}</Text> <Text variant="headlineSmall">{state.strings.adminAccess}</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -309,7 +312,7 @@ export function Access() {
/> />
<TextInput <TextInput
style={styles.input} style={styles.input}
mode="outlined" mode="flat"
autoCapitalize="none" autoCapitalize="none"
autoComplete="off" autoComplete="off"
autoCorrect={false} autoCorrect={false}
@ -342,11 +345,12 @@ export function Access() {
</Button> </Button>
</View> </View>
)} )}
</ScrollView>
</SafeAreaView> </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"