1
0
forked from fr/deguapp

Working on login screen

This commit is contained in:
Filip Rojek 2024-05-05 17:44:42 +02:00
parent 77e5082680
commit c2c3821ce2
5 changed files with 112 additions and 7 deletions

View File

@ -1,11 +1,12 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { LoginForm } from "./screens/Login";
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<StatusBar style="light" />
<LoginForm />
</View>
);
}
@ -13,8 +14,5 @@ export default function App() {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

View File

@ -0,0 +1,33 @@
import React from "react";
import { Text, StyleSheet, Pressable } from "react-native";
export default function Button(props) {
const { onPress, title = "Save", color = "black" } = props;
return (
<Pressable
style={[styles.button, { backgroundColor: color }]}
onPress={onPress}
>
<Text style={styles.text}>{title}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
alignItems: "center",
justifyContent: "center",
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: "black",
},
text: {
fontSize: 16,
lineHeight: 21,
fontWeight: "bold",
letterSpacing: 0.25,
color: "white",
},
});

View File

View File

@ -0,0 +1,8 @@
export const colors = {
gold: "#FFD700ff",
brown: "#8B4513ff",
green: "#228B22ff",
charcoal: "#2C3E50ff",
black: "#020405ff",
dark: "#010611",
};

66
frontend/screens/Login.js Normal file
View File

@ -0,0 +1,66 @@
import {
StyleSheet,
TouchableOpacity,
TextInput,
View,
Text,
} from "react-native";
import Button from "../components/Button";
import { colors } from "../components/style";
export function LoginForm() {
return (
<View style={styles.container}>
<Text style={styles.header}>Please Log In</Text>
<TextInput
style={styles.input}
placeholder="Enter your email"
autoCapitalize="none"
autoCompleteType="email"
textContentType="emailAddress"
keyboardType="email-address"
placeholderTextColor={"#aaaaaa"}
returnKeyType="next"
/>
<TextInput
style={styles.input}
secureTextEntry={true}
placeholder="Enter your password"
placeholderTextColor={"#aaaaaa"}
returnKeyType="done"
/>
<View style={styles.btnContainer}>
<Button style={styles.button} title="Sign Up" color={colors.charcoal} />
<Button style={styles.button} title="Log In" color={colors.green} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: colors.dark,
flex: 1,
gap: 15,
alignItems: "center",
justifyContent: "center",
width: "100%",
},
header: {
color: "#FFF",
fontSize: 22,
},
input: {
height: "auto",
width: "60%",
borderColor: "gray",
borderWidth: 1,
borderRadius: 5,
padding: 10,
},
button: {},
btnContainer: {
flexDirection: "row",
gap: 10,
},
});