login.js
unknown
plain_text
5 months ago
4.6 kB
1
Indexable
Never
import React, {useState} from 'react'; import { ImageBackground, Text,StyleSheet,TouchableOpacity, View, Dimensions} from 'react-native'; import { globalStyles } from '../styles/global'; import BottomBar from '../components/bottomBar'; import TextBar from '../components/textBar.js'; export default function Profile({navigation}) { const [user, setUser] = useState([ { id: '1', username: 'Domingo', // string user_id: 'NOT911', // string user_photo: 1, // integer, used when accessing database // We use integers to access photos in case of multiple photos with same name. events: ['809BBF'], // array of string, storing event_code of 'event' friends: ['520KEI'], // array of string, storing user_id of 'user' email: "test1234@gmail.com", // string, unchangeable phone_number: "0911451419", // string, unchangeable language: "English", // string notifs: [0, 1], // array of integer, storing notif_id of "notifs" notif_on: true // bool }, { id: '2', username: 'Peggy', // string user_id: '520KEI', // string user_photo: 2, // integer, used when accessing database // We use integers to access photos in case of multiple photos with same name. events: ['809BBF'], // array of string, storing event_code of 'event' friends: ['520KEI'], // array of string, storing user_id of 'user' email: "test1234@gmail.com", // string, unchangeable phone_number: "0911451419", // string, unchangeable language: "English", // string notifs: [0, 1], // array of integer, storing notif_id of "notifs" notif_on: true // bool }, ]); const account_submitEventNameHandler = (text) => { // console.log(todos); } const password_submitEventNameHandler = (text) => { // console.log(todos); } //responsible design const screenWidth = Dimensions.get('window').width; const inputWidth = screenWidth ; return ( <ImageBackground source={require('../assets/LogIn.png')} style={styles.backgroundImage}> <View style={styles.container} > <View style={[styles.topSections ,{ width: screenWidth }]}> <Text style={[globalStyles.titleText,{ textAlign: 'center' , marginTop: 150 ,padding: 20, color: 'white'}]}>Welcome Back!</Text> {/* input bar */} <View> <View> <Text style={styles.hint}>Account: </Text> <TextBar style={[styles.inputContainer,{ width: screenWidth }]} placeholder="account : " submitHandler={account_submitEventNameHandler}/> </View> <View> <Text style={styles.hint}>password: </Text> <TextBar style={[styles.inputContainer,{ width: screenWidth }]} placeholder="password : " submitHandler={password_submitEventNameHandler}/> </View> </View> {/* login button */} <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('MyEvent')}> <Text style={styles.buttonText}>Login</Text> </TouchableOpacity> </View> <BottomBar navigation={navigation}/> </View> </ImageBackground> ); } const styles = StyleSheet.create({ backgroundImage: { flex: 1, resizeMode: 'contain' }, container: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 100, }, topSections: { padding: 20, }, //font hint: { textAlign: 'left', fontFamily: 'SpaceGrotesk_400Regular', fontSize: 18, marginLeft: 40, marginBottom: 8, color: 'white', }, button: { backgroundColor: '#809BBF', alignItems: 'center', borderRadius: 16, height: 45, width: 145, marginHorizontal: 5, marginVertical: 10, alignSelf: 'center', }, buttonText: { fontFamily: 'SpaceGrotesk_400Regular', color: '#FFF', alignSelf: 'center', justifyContent: 'center', marginTop: 9, fontSize: 19, }, inputContainer: { borderColor: '#809BBF', borderWidth: 1, borderRadius: 16, height: 50, width: 300, padding: 10, marginVertical: 5, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', }, })