├── screen ├── components │ ├── Footer.js │ ├── RoundedButton.js │ └── Loader.js ├── assets │ └── img │ │ └── google.png ├── Onboarding.js ├── SplashScreen.js ├── pages │ ├── LoginPage.js │ └── RegisterPage.js └── auth │ ├── LoginForm.js │ └── RegisterForm.js ├── assets ├── icon.png ├── splash.png ├── favicon.png ├── fonts │ └── Ravie.otf └── adaptive-icon.png ├── babel.config.js ├── react-native.config.js ├── .gitignore ├── App.js ├── app.json └── package.json /screen/components/Footer.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /screen/components/RoundedButton.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/top-comengineer/Staking/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/top-comengineer/Staking/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/top-comengineer/Staking/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/fonts/Ravie.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/top-comengineer/Staking/HEAD/assets/fonts/Ravie.otf -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/top-comengineer/Staking/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /screen/assets/img/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/top-comengineer/Staking/HEAD/screen/assets/img/google.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /react-native.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | project: { 3 | ios: {}, 4 | android: {}, 5 | }, 6 | assets: ["./assets/fonts/"], 7 | }; 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | 16 | # Temporary files created by Metro to check the health of the file watcher 17 | .metro-health-check* 18 | -------------------------------------------------------------------------------- /screen/Onboarding.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View } from "react-native"; 3 | import ViewPager from "@react-native-community/viewpager"; 4 | 5 | // import Page from "./components/Page"; 6 | 7 | const Onboarding = () => { 8 | return ( 9 | 10 | 11 | {/* */} 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default Onboarding; 18 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import "react-native-gesture-handler"; 2 | 3 | import { NavigationContainer } from "@react-navigation/native"; 4 | import { createStackNavigator } from "@react-navigation/stack"; 5 | 6 | import LoginPage from "./screen/pages/LoginPage"; 7 | import RegisterPage from "./screen/pages/RegisterPage"; 8 | 9 | const Stack = createStackNavigator(); 10 | export default function App() { 11 | return ( 12 | 13 | {/* */} 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "test", 4 | "slug": "test", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /screen/SplashScreen.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ActivityIndicator, View, StyleSheet, Image } from "react-native-web"; 3 | 4 | const SplashScreen = () => { 5 | // state of activityIndicator animation 6 | const [animating, setAnimating] = React.useState(true); 7 | return ( 8 | 9 | {/* */} 13 | 19 | 20 | ); 21 | }; 22 | 23 | export default SplashScreen; 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1, 28 | alignItems: "center", 29 | justifyContent: "center", 30 | backgroundColor: "rgba(3, 41, 85, 0.5)", 31 | }, 32 | activityIndicator: { 33 | alignItems: "center", 34 | height: "80px", 35 | }, 36 | }); 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@expo/webpack-config": "^18.0.1", 13 | "@react-native-community/async-storage": "^1.12.1", 14 | "@react-native-community/checkbox": "^0.5.15", 15 | "@react-native-community/viewpager": "^5.0.11", 16 | "@react-navigation/native": "^6.1.6", 17 | "@react-navigation/stack": "^6.3.16", 18 | "@rneui/base": "^4.0.0-rc.7", 19 | "@rneui/themed": "^4.0.0-rc.7", 20 | "expo": "~48.0.6", 21 | "expo-status-bar": "~1.4.4", 22 | "query-string": "^8.1.0", 23 | "react": "18.2.0", 24 | "react-dom": "18.2.0", 25 | "react-native": "0.71.3", 26 | "react-native-gesture-handler": "~2.9.0", 27 | "react-native-safe-area-context": "4.5.0", 28 | "react-native-web": "^0.18.12", 29 | "strict-uri-encode": "^2.0.0" 30 | }, 31 | "devDependencies": { 32 | "@babel/core": "^7.20.0" 33 | }, 34 | "private": true 35 | } 36 | -------------------------------------------------------------------------------- /screen/components/Loader.js: -------------------------------------------------------------------------------- 1 | // Import React and Component 2 | import React from "react"; 3 | import { StyleSheet, View, Modal, ActivityIndicator } from "react-native"; 4 | 5 | const Loader = (props) => { 6 | const { loading, ...attributes } = props; 7 | 8 | return ( 9 | { 14 | console.log("close modal"); 15 | }} 16 | > 17 | 18 | 19 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default Loader; 32 | 33 | const styles = StyleSheet.create({ 34 | modalBackground: { 35 | flex: 1, 36 | alignItems: "center", 37 | flexDirection: "column", 38 | justifyContent: "space-around", 39 | backgroundColor: "#00000040", 40 | }, 41 | activityIndicatorWrapper: { 42 | backgroundColor: "#FFFFFF", 43 | height: 100, 44 | width: 100, 45 | borderRadius: 10, 46 | display: "flex", 47 | alignItems: "center", 48 | justifyContent: "space-around", 49 | }, 50 | activityIndicator: { 51 | alignItems: "center", 52 | height: 80, 53 | }, 54 | }); 55 | -------------------------------------------------------------------------------- /screen/pages/LoginPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import LoginForm from "../auth/LoginForm"; 4 | 5 | const LoginPage = () => { 6 | return ( 7 | 16 | 27 | 39 | C 40 | 41 | 42 | 53 | Welcome Back 54 | 55 | 65 | Login to your account to continue..... 66 | 67 | 68 | 69 | ); 70 | }; 71 | 72 | export default LoginPage; 73 | -------------------------------------------------------------------------------- /screen/pages/RegisterPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import RegisterForm from "../auth/RegisterForm"; 4 | 5 | const RegisterPage = () => { 6 | return ( 7 | 16 | 27 | 39 | C 40 | 41 | 42 | 53 | Create an Account 54 | 55 | 65 | Start your journey by creating an account 66 | 67 | 68 | 69 | ); 70 | }; 71 | 72 | export default RegisterPage; 73 | -------------------------------------------------------------------------------- /screen/auth/LoginForm.js: -------------------------------------------------------------------------------- 1 | // Import React and Component 2 | import React, { useState, createRef } from "react"; 3 | import { 4 | StyleSheet, 5 | TextInput, 6 | View, 7 | Text, 8 | Keyboard, 9 | Image, 10 | TouchableOpacity, 11 | KeyboardAvoidingView, 12 | } from "react-native"; 13 | 14 | import AsyncStorage from "@react-native-community/async-storage"; 15 | import { CheckBox } from "@rneui/themed"; 16 | 17 | // const googleIcon = require("../../assets/imgs/google.png"); 18 | 19 | import GoogleIcon from "../assets/img/google.png"; 20 | 21 | const LoginForm = ({ navigation }) => { 22 | const [userEmail, setUserEmail] = useState(""); 23 | const [userPassword, setUserPassword] = useState(""); 24 | const [errortext, setErrortext] = useState(""); 25 | const [remember, setRemember] = useState(false); 26 | 27 | const passwordInputRef = createRef(); 28 | 29 | const toggleCheckbox = () => setRemember(!remember); 30 | const handleSubmitPress = () => { 31 | setErrortext(""); 32 | if (!userEmail) { 33 | alert("Please fill Email"); 34 | return; 35 | } 36 | if (!userPassword) { 37 | alert("Please fill Password"); 38 | return; 39 | } 40 | setLoading(true); 41 | let dataToSend = { email: userEmail, password: userPassword }; 42 | let formBody = []; 43 | for (let key in dataToSend) { 44 | let encodedKey = encodeURIComponent(key); 45 | let encodedValue = encodeURIComponent(dataToSend[key]); 46 | formBody.push(encodedKey + "=" + encodedValue); 47 | } 48 | formBody = formBody.join("&"); 49 | 50 | fetch("http://localhost:3000/api/user/login", { 51 | method: "POST", 52 | body: formBody, 53 | headers: { 54 | //Header Defination 55 | "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", 56 | }, 57 | }) 58 | .then((response) => response.json()) 59 | .then((responseJson) => { 60 | //Hide Loader 61 | setLoading(false); 62 | console.log(responseJson); 63 | // If server response message same as Data Matched 64 | if (responseJson.status === "success") { 65 | AsyncStorage.setItem("user_id", responseJson.data.email); 66 | console.log(responseJson.data.email); 67 | navigation.replace("DrawerNavigationRoutes"); 68 | } else { 69 | setErrortext(responseJson.msg); 70 | console.log("Please check your email id or password"); 71 | } 72 | }) 73 | .catch((error) => { 74 | //Hide Loader 75 | setLoading(false); 76 | console.error(error); 77 | }); 78 | }; 79 | 80 | return ( 81 | 82 | 83 | 84 | 85 | Email 86 | setUserEmail(UserEmail)} 89 | autoCapitalize="none" 90 | keyboardType="email-address" 91 | returnKeyType="next" 92 | onSubmitEditing={() => 93 | passwordInputRef.current && passwordInputRef.current.focus() 94 | } 95 | underlineColorAndroid="#f000" 96 | blurOnSubmit={false} 97 | /> 98 | 99 | 100 | Password 101 | setUserPassword(UserPassword)} 104 | keyboardType="default" 105 | ref={passwordInputRef} 106 | onSubmitEditing={Keyboard.dismiss} 107 | blurOnSubmit={false} 108 | secureTextEntry={true} 109 | underlineColorAndroid="#f000" 110 | returnKeyType="next" 111 | /> 112 | 122 | Forgot your password? 123 | 124 | 129 | 138 | 139 | 148 | Remember Me 149 | 150 | 151 | 152 | {errortext != "" ? ( 153 | {errortext} 154 | ) : null} 155 | 160 | Login 161 | 162 | 170 | or 171 | 172 | 173 | 177 | Login with Google 178 | 179 | navigation.navigate("RegisterScreen")} 182 | > 183 | Don't have an account?   184 | Register 185 | 186 | 187 | 188 | ); 189 | }; 190 | export default LoginForm; 191 | 192 | const styles = StyleSheet.create({ 193 | mainBody: { 194 | width: "100%", 195 | color: "white", 196 | }, 197 | SectionStyle: { 198 | flexDirection: "column", 199 | marginLeft: 35, 200 | marginRight: 35, 201 | margin: 7, 202 | position: "relative", 203 | }, 204 | buttonStyle: { 205 | backgroundColor: "#032955", 206 | color: "#FFFFFF", 207 | alignItems: "center", 208 | borderRadius: 5, 209 | marginLeft: 35, 210 | marginRight: 35, 211 | marginTop: 10, 212 | }, 213 | buttonStyle1: { 214 | color: "#032955", 215 | borderColor: "#032955", 216 | borderWidth: 2, 217 | alignItems: "center", 218 | borderRadius: 5, 219 | marginLeft: 35, 220 | marginRight: 35, 221 | display: "flex", 222 | flexDirection: "row", 223 | justifyContent: "center", 224 | }, 225 | buttonTextStyle: { 226 | paddingVertical: 10, 227 | fontSize: 16, 228 | color: "white", 229 | fontWeight: "bold", 230 | }, 231 | buttonTextStyle1: { 232 | paddingVertical: 10, 233 | fontSize: 16, 234 | color: "#032955", 235 | fontWeight: "bold", 236 | }, 237 | inputStyle: { 238 | color: "white", 239 | height: 40, 240 | paddingLeft: 15, 241 | paddingRight: 15, 242 | borderRadius: 5, 243 | backgroundColor: "#a3b0bf", 244 | borderColor: "#4d4c4c", 245 | borderWidth: 1, 246 | }, 247 | registerTextStyle: { 248 | color: "#032955", 249 | textAlign: "center", 250 | fontWeight: "bold", 251 | fontSize: 10, 252 | alignSelf: "center", 253 | padding: 10, 254 | }, 255 | errorTextStyle: { 256 | color: "red", 257 | textAlign: "center", 258 | fontSize: 14, 259 | }, 260 | noteTitle: { 261 | color: "white", 262 | marginBottom: 10, 263 | }, 264 | }); 265 | -------------------------------------------------------------------------------- /screen/auth/RegisterForm.js: -------------------------------------------------------------------------------- 1 | // Import React and Component 2 | import React, { useState, createRef } from "react"; 3 | import { 4 | StyleSheet, 5 | TextInput, 6 | View, 7 | Text, 8 | Keyboard, 9 | Image, 10 | TouchableOpacity, 11 | KeyboardAvoidingView, 12 | } from "react-native"; 13 | 14 | import AsyncStorage from "@react-native-community/async-storage"; 15 | 16 | import GoogleIcon from "../assets/img/google.png"; 17 | 18 | const RegisterForm = ({ navigation }) => { 19 | const [userEmail, setUserEmail] = useState(""); 20 | const [userPhoneNum, setUserPhoneNum] = useState(); 21 | const [userPassword, setUserPassword] = useState(""); 22 | const [errortext, setErrortext] = useState(""); 23 | 24 | const passwordInputRef = createRef(); 25 | 26 | const handleSubmitPress = () => { 27 | setErrortext(""); 28 | if (!userEmail) { 29 | alert("Please fill Email"); 30 | return; 31 | } 32 | if (!userPhoneNum) { 33 | alert("Please fill Phone Number"); 34 | return; 35 | } 36 | if (!userPassword) { 37 | alert("Please fill Password"); 38 | return; 39 | } 40 | setLoading(true); 41 | let dataToSend = { 42 | email: userEmail, 43 | password: userPassword, 44 | phone: userPhoneNum, 45 | }; 46 | let formBody = []; 47 | for (let key in dataToSend) { 48 | let encodedKey = encodeURIComponent(key); 49 | let encodedValue = encodeURIComponent(dataToSend[key]); 50 | formBody.push(encodedKey + "=" + encodedValue); 51 | } 52 | formBody = formBody.join("&"); 53 | 54 | fetch("http://localhost:3000/api/user/login", { 55 | method: "POST", 56 | body: formBody, 57 | headers: { 58 | //Header Defination 59 | "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", 60 | }, 61 | }) 62 | .then((response) => response.json()) 63 | .then((responseJson) => { 64 | //Hide Loader 65 | setLoading(false); 66 | console.log(responseJson); 67 | // If server response message same as Data Matched 68 | if (responseJson.status === "success") { 69 | AsyncStorage.setItem("user_id", responseJson.data.email); 70 | console.log(responseJson.data.email); 71 | navigation.replace("DrawerNavigationRoutes"); 72 | } else { 73 | setErrortext(responseJson.msg); 74 | console.log("Please check your email id or password"); 75 | } 76 | }) 77 | .catch((error) => { 78 | //Hide Loader 79 | setLoading(false); 80 | console.error(error); 81 | }); 82 | }; 83 | 84 | return ( 85 | 86 | 87 | 88 | 89 | Email 90 | setUserEmail(UserEmail)} 93 | autoCapitalize="none" 94 | keyboardType="email-address" 95 | returnKeyType="next" 96 | onSubmitEditing={() => 97 | passwordInputRef.current && passwordInputRef.current.focus() 98 | } 99 | underlineColorAndroid="#f000" 100 | blurOnSubmit={false} 101 | /> 102 | 103 | 104 | Phone Number 105 | setUserPhoneNum(UserPhoneNum)} 108 | autoCapitalize="none" 109 | keyboardType="phone-pad" 110 | returnKeyType="next" 111 | onSubmitEditing={() => 112 | passwordInputRef.current && passwordInputRef.current.focus() 113 | } 114 | underlineColorAndroid="#f000" 115 | blurOnSubmit={false} 116 | /> 117 | 118 | 119 | Password 120 | setUserPassword(UserPassword)} 123 | keyboardType="default" 124 | ref={passwordInputRef} 125 | onSubmitEditing={Keyboard.dismiss} 126 | blurOnSubmit={false} 127 | secureTextEntry={true} 128 | underlineColorAndroid="#f000" 129 | returnKeyType="next" 130 | /> 131 | 132 | 133 | Confirm Password 134 | setUserPassword(UserPassword)} 137 | keyboardType="default" 138 | ref={passwordInputRef} 139 | onSubmitEditing={Keyboard.dismiss} 140 | blurOnSubmit={false} 141 | secureTextEntry={true} 142 | underlineColorAndroid="#f000" 143 | returnKeyType="next" 144 | /> 145 | 146 | 147 | 148 | By contrinuing you agree with our 149 | 150 | Terms of Service and Privacy Policy 151 | 152 | 153 | 154 | {errortext != "" ? ( 155 | {errortext} 156 | ) : null} 157 | 162 | Create Account 163 | 164 | 172 | or 173 | 174 | 175 | 179 | Create with Google 180 | 181 | navigation.navigate("RegisterScreen")} 184 | > 185 | 186 | Already have an account?   187 | 188 | Login 189 | 190 | 191 | 192 | ); 193 | }; 194 | export default RegisterForm; 195 | 196 | const styles = StyleSheet.create({ 197 | mainBody: { 198 | width: "100%", 199 | color: "white", 200 | marginTop: 180, 201 | }, 202 | SectionStyle: { 203 | flexDirection: "column", 204 | marginLeft: 35, 205 | marginRight: 35, 206 | margin: 7, 207 | position: "relative", 208 | }, 209 | buttonStyle: { 210 | backgroundColor: "#032955", 211 | color: "#FFFFFF", 212 | alignItems: "center", 213 | borderRadius: 5, 214 | marginLeft: 35, 215 | marginRight: 35, 216 | marginTop: 10, 217 | }, 218 | buttonStyle1: { 219 | color: "#032955", 220 | borderColor: "#032955", 221 | borderWidth: 2, 222 | alignItems: "center", 223 | borderRadius: 5, 224 | marginLeft: 35, 225 | marginRight: 35, 226 | display: "flex", 227 | flexDirection: "row", 228 | justifyContent: "center", 229 | }, 230 | buttonTextStyle: { 231 | paddingVertical: 10, 232 | fontSize: 16, 233 | color: "white", 234 | fontWeight: "bold", 235 | }, 236 | buttonTextStyle1: { 237 | paddingVertical: 10, 238 | fontSize: 16, 239 | color: "#032955", 240 | fontWeight: "bold", 241 | }, 242 | inputStyle: { 243 | color: "white", 244 | height: 40, 245 | paddingLeft: 15, 246 | paddingRight: 15, 247 | borderRadius: 5, 248 | backgroundColor: "#a3b0bf", 249 | borderColor: "#4d4c4c", 250 | borderWidth: 1, 251 | }, 252 | registerTextStyle: { 253 | color: "#032955", 254 | textAlign: "center", 255 | fontWeight: "bold", 256 | fontSize: 10, 257 | alignSelf: "center", 258 | padding: 10, 259 | }, 260 | errorTextStyle: { 261 | color: "red", 262 | textAlign: "center", 263 | fontSize: 14, 264 | }, 265 | noteTitle: { 266 | color: "white", 267 | marginBottom: 10, 268 | }, 269 | }); 270 | --------------------------------------------------------------------------------