112 lines
3.1 KiB
React
112 lines
3.1 KiB
React
import { Stack, useNavigation } from 'expo-router';
|
|
import { ImageBackground, StyleSheet, Button, TextInput, SafeAreaView, Text, View ,Image,Alert } from 'react-native';
|
|
import { useEffect,useState } from 'react';
|
|
// import {
|
|
// GoogleSignin,
|
|
// GoogleSigninButton,
|
|
// } from "@react-native-google-signin/google-signin";
|
|
|
|
const Home =()=> {
|
|
const [username, onChangeUsername] = useState('');
|
|
const [password, onChangePassword] = useState('');
|
|
|
|
const image = {uri: 'https://rader.app/assets/images/app/home.jpg'};
|
|
|
|
// useEffect(() => {
|
|
// GoogleSignin.configure({
|
|
// webClientId:
|
|
// "828012052860-rq3m5ppckbmtc7vfjp3mau0s6p8h9mgm.apps.googleusercontent.com",
|
|
// });
|
|
// }, []);
|
|
|
|
//https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1/userlogin
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
|
|
<View style={styles.login_box}>
|
|
<Image
|
|
style={styles.tinyLogo}
|
|
source={{
|
|
uri: 'https://reactnative.dev/img/tiny_logo.png',
|
|
}} />
|
|
<Text style={styles.lbl}>Connect you care</Text>
|
|
<TextInput
|
|
editable
|
|
maxLength={40}
|
|
value={username}
|
|
onChangeText={onChangeUsername}
|
|
style={styles.textInp}
|
|
/>
|
|
|
|
<TextInput
|
|
editable
|
|
maxLength={40}
|
|
value={password}
|
|
secureTextEntry={true}
|
|
onChangeText={onChangePassword}
|
|
style={styles.textInp}
|
|
/>
|
|
|
|
<Button
|
|
title="Log in"
|
|
style={styles.loginButton}
|
|
onPress={() => Alert.alert('Button with adjusted color pressed')}
|
|
/>
|
|
</View>
|
|
|
|
</ImageBackground>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'aliceblue'
|
|
},
|
|
lbl:{
|
|
fontWeight: 800,
|
|
color:'darkblue',
|
|
textAlign: 'center'
|
|
},
|
|
login_box: {
|
|
backgroundColor: 'white',
|
|
maxWidth: 480,
|
|
minWidth: 350,
|
|
margin: 'auto',
|
|
borderRadius: 10,
|
|
padding: 15,
|
|
gap:'10px'
|
|
},
|
|
loginButton:{
|
|
borderRadius: 5,
|
|
color:'red',
|
|
backgroundColor: '#f194ff'
|
|
},
|
|
tinyLogo: {
|
|
width: 50,
|
|
height: 50,
|
|
margin:'auto'
|
|
},
|
|
textInp:{
|
|
padding: '10px',
|
|
backgroundColor: 'whitesmoke',
|
|
borderRadius: 5,
|
|
height: 40,
|
|
margin: 12,
|
|
borderWidth: 1,
|
|
},
|
|
image: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
text: {
|
|
color: 'white',
|
|
lineHeight: '84px',
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
backgroundColor: '#000000c0',
|
|
},
|
|
});
|
|
export default Home; |