keannu125/Reactnative-notesapp
1
0
Fork 0
mirror of https://github.com/lemeow125/Reactnative-notesapp.git synced 2025-04-19 00:11:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/initial_frontend' of https://github.com/lemeow125/Reactnative-notesapp into feature/connect_backend

Browse source
This commit is contained in:
toledo 2023-03-10 20:29:32 +08:00
commit 7e865a04ee
3 changed files with 170 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/Routes/Login/Login.tsx
View file

@ -1,12 +1,58 @@
import * as React from 'react';
import {View, Text} from 'react-native';
import {View, Text, TextInput} from 'react-native';
import styles from '../../styles';
import Background from '../../Components/Background/Background';
import { SafeAreaView} from "react-native";
import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import {TouchableOpacity,} from "react-native";
export default function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 32}}}>Login</Text>
</Background>
);
}
<Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
<SafeAreaView>
<View style={styles.container}>
<Text style ={styles.loginlabel}>Login to Clip Notes</Text>
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Username"
placeholderTextColor="white"
onChangeText={setUsername}
value={username}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry={true}
onChangeText={setPassword}
value={password}
/>
</View>
<TouchableOpacity>
<Text style={styles.forgot_button}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.registerbtn}>
<Text style={styles.registertext}>REGISTER</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Background>
);
};

48
src/Routes/Register/Register.tsx
View file

@ -1,12 +1,56 @@
import * as React from 'react';
import {View, Text} from 'react-native';
import {View, Text, TextInput} from 'react-native';
import styles from '../../styles';
import Background from '../../Components/Background/Background';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useState } from "react";
import {TouchableOpacity} from "react-native";
export default function Register() {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 32}}}>Register</Text>
<Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
<SafeAreaView>
<View style={styles.container}>
<Text style ={styles.loginlabel}>Create an Account</Text>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Email"
placeholderTextColor="white"
onChangeText={setEmail}
value={email}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Username"
placeholderTextColor="white"
onChangeText={setUsername}
value={username}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry={true}
onChangeText={setPassword}
value={password}
/>
</View>
<TouchableOpacity style={styles.registerbtn}>
<Text style={styles.registertext}>REGISTER</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Background>
);
}

73
src/styles.tsx
View file

@ -1,4 +1,6 @@
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
background: {
backgroundColor: '#002d4c',
@ -30,6 +32,77 @@ const styles = StyleSheet.create({
flexDirection: 'column',
alignItems: 'center',
},
input: {
height: 40,
margin: 12,
borderWidth: 1,
},
inputView: {
backgroundColor: "black",
borderRadius: 30,
width: "70%",
height: 45,
marginBottom: 20,
},
TextInput: {
color: 'white',
height: 50,
flex: 1,
padding: 10,
marginLeft: 5,
},
forgot_button: {
fontWeight: 'bold',
color: 'white',
height: 30,
marginBottom: 10,
},
loginBtn: {
width: "50%",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
backgroundColor: "lightgreen",
},
registerbtn: {
width: "80%",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 40,
backgroundColor: "orange",
},
loginText:{
color: 'white',
fontWeight: 'bold',
fontSize: 20,
},
registertext:{
color: 'white',
fontWeight: 'bold',
fontSize: 20,
},
container: {
marginTop: 30,
marginLeft: 22,
height: 500,
width: 350,
borderRadius: 25,
backgroundColor: 'blue',
alignItems: "center",
justifyContent: "center",
},
loginlabel:{
fontWeight: 'bold',
fontSize: 25,
marginBottom: 30,
color: 'white',
},
});
export default styles;