From 3428093f0c4e22ed0294e71ce821ee7d883fc5b7 Mon Sep 17 00:00:00 2001 From: AngelV3rgs Date: Mon, 6 Mar 2023 23:51:41 +0800 Subject: [PATCH 1/2] initial log in page --- package.json | 4 ++-- src/Routes/Login/Login.tsx | 48 ++++++++++++++++++++++++++++++++++---- src/styles.tsx | 48 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b7cf8f0..0f97232 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,10 @@ "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-native": "0.71.3", - "react-native-safe-area-context": "4.5.0", - "react-native-screens": "~3.20.0", "react-native-gesture-handler": "~2.9.0", "react-native-reanimated": "~2.14.4", + "react-native-safe-area-context": "4.5.0", + "react-native-screens": "~3.20.0", "react-native-svg": "13.4.0" }, "devDependencies": { diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index f51e7ef..4908879 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -1,12 +1,52 @@ 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 {Button,TouchableOpacity,} from "react-native"; + + export default function Login() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + return ( - Login - - ); + LOG IN + + + + + setEmail(email)} + /> + + + + setPassword(password)} + /> + + + + Forgot Password? + + + LOGIN + + + + +); } + diff --git a/src/styles.tsx b/src/styles.tsx index 4b2caff..92c38b3 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -1,4 +1,6 @@ import {StyleSheet} from 'react-native'; + + const styles = StyleSheet.create({ background: { backgroundColor: '#002d4c', @@ -30,6 +32,52 @@ const styles = StyleSheet.create({ flexDirection: 'column', alignItems: 'center', }, + input: { + height: 40, + margin: 12, + borderWidth: 1, + }, + + inputView: { + backgroundColor: "skyblue", + borderRadius: 30, + width: "70%", + height: 45, + marginBottom: 20, + + }, + TextInput: { + height: 50, + flex: 1, + padding: 10, + marginLeft: 5, + }, + forgot_button: { + fontWeight: 'bold', + color: 'white', + height: 30, + marginBottom: 30, + }, + loginBtn: { + width: "50%", + borderRadius: 25, + height: 50, + alignItems: "center", + justifyContent: "center", + marginTop: 30, + backgroundColor: "skyblue", + }, + loginText:{ + color: '#003f5c', + fontWeight: 'bold', + fontSize: 20, + }, + container: { + marginTop: 200, + flex: 1, + alignItems: "center", + justifyContent: "center", + }, }); export default styles; From 0318f4eb53ba7ef0a043d0abe2b6211f58143af6 Mon Sep 17 00:00:00 2001 From: AngelV3rgs Date: Tue, 7 Mar 2023 22:53:19 +0800 Subject: [PATCH 2/2] Login page and Register Page --- src/Routes/Login/Login.tsx | 28 +++++++++++-------- src/Routes/Register/Register.tsx | 48 ++++++++++++++++++++++++++++++-- src/styles.tsx | 39 +++++++++++++++++++++----- 3 files changed, 95 insertions(+), 20 deletions(-) diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index 4908879..a70ad64 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -5,36 +5,39 @@ import Background from '../../Components/Background/Background'; import { SafeAreaView} from "react-native"; import { StatusBar } from "expo-status-bar"; import { useState } from "react"; -import {Button,TouchableOpacity,} from "react-native"; +import {TouchableOpacity,} from "react-native"; export default function Login() { - const [email, setEmail] = useState(""); + const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); - + return ( - LOG IN + + Login to Clip Notes setEmail(email)} + placeholder="Username" + placeholderTextColor="white" + onChangeText={setUsername} + value={username} /> setPassword(password)} + onChangeText={setPassword} + value={password} /> @@ -44,9 +47,12 @@ export default function Login() { LOGIN + + REGISTER + ); -} +}; diff --git a/src/Routes/Register/Register.tsx b/src/Routes/Register/Register.tsx index 198b2a6..e2a3297 100644 --- a/src/Routes/Register/Register.tsx +++ b/src/Routes/Register/Register.tsx @@ -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 ( - Register + + + + Create an Account + + + + + + + + + + + REGISTER + + + + ); } diff --git a/src/styles.tsx b/src/styles.tsx index 92c38b3..4b059d6 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -39,7 +39,7 @@ const styles = StyleSheet.create({ }, inputView: { - backgroundColor: "skyblue", + backgroundColor: "black", borderRadius: 30, width: "70%", height: 45, @@ -47,6 +47,7 @@ const styles = StyleSheet.create({ }, TextInput: { + color: 'white', height: 50, flex: 1, padding: 10, @@ -56,7 +57,7 @@ const styles = StyleSheet.create({ fontWeight: 'bold', color: 'white', height: 30, - marginBottom: 30, + marginBottom: 10, }, loginBtn: { width: "50%", @@ -64,20 +65,44 @@ const styles = StyleSheet.create({ height: 50, alignItems: "center", justifyContent: "center", - marginTop: 30, - backgroundColor: "skyblue", + backgroundColor: "lightgreen", + }, + registerbtn: { + width: "80%", + borderRadius: 25, + height: 50, + alignItems: "center", + justifyContent: "center", + marginTop: 40, + backgroundColor: "orange", }, loginText:{ - color: '#003f5c', + color: 'white', fontWeight: 'bold', fontSize: 20, }, + registertext:{ + color: 'white', + fontWeight: 'bold', + fontSize: 20, + + }, container: { - marginTop: 200, - flex: 1, + 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;