signup,welcome page

srivastava9 · Jan 11, 2020 · ec81908 · ec81908
1 parent 12fe164
commit ec81908
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 55 deletions.
diff --git a/Curus Health MVP Designs - Part 1.pdf b/Curus Health MVP Designs - Part 1.pdf
diff --git a/pages/Patient Data/datalist.js b/pages/Patient Data/datalist.js
@@ -294,7 +294,6 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 22,
-    fontFamily: "Roboto",
 
     marginBottom: 40
   },
@@ -315,7 +314,7 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 22,
-    fontFamily: "Roboto",
+
     marginTop: 40,
     marginBottom: 40
   },

diff --git a/pages/consult/consultform.js b/pages/consult/consultform.js
@@ -143,7 +143,6 @@ const styles = StyleSheet.create({
   },
   text: {
     fontSize: 22,
-    fontFamily: "Roboto",
     marginTop: 30,
     marginBottom: 40
   },

diff --git a/pages/consult/recorder.js b/pages/consult/recorder.js
@@ -169,7 +169,7 @@ const styles = StyleSheet.create({
   },
   text: {
     fontSize: 22,
-    fontFamily: "Roboto",
+
     marginTop: 30,
     marginBottom: 40
   },

diff --git a/pages/consult/reviewconsult.js b/pages/consult/reviewconsult.js
@@ -219,7 +219,7 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 22,
-    fontFamily: "Roboto",
+
     marginTop: 40,
     marginBottom: 40
   },

diff --git a/pages/signup.js b/pages/signup.js
@@ -6,16 +6,25 @@ import {
   Image,
   Button,
   TextInput,
-  TouchableOpacity
+  TouchableOpacity,
+  ScrollView,
+  KeyboardAvoidingView
 } from "react-native";
+import { Header } from "react-navigation-stack";
 class signUp extends Component {
   constructor(props) {
     super(props);
     this.state = {
       phone: "",
-      phoneError: " "
+      phoneError: " ",
+      signUp: true,
+      otp: "",
+      otpError: " "
     };
   }
+  changeSignup = () => {
+    this.setState({ signUp: !this.state.signUp });
+  };
   goBack = () => {
     this.props.navigation.goBack();
   };
@@ -24,36 +33,138 @@ class signUp extends Component {
       phone: text
     });
   };
-  onSubmit = () => {
+  onChangeOtp = text => {
+    this.setState({ otp: text });
+  };
+  onSignup = () => {
+    if (this.state.phone.length > 10 || this.state.phone.length < 10) {
+      this.setState({ phoneError: "*Invalid Mobile Number" });
+    } else {
+      this.setState({ phoneError: "", otpError: "" });
+
+      this.props.navigation.navigate("Welcome");
+    }
+  };
+  onLogin = () => {
     if (this.state.phone.length > 10 || this.state.phone.length < 10) {
       this.setState({ phoneError: "*Invalid Mobile Number" });
+    } else if (this.state.otp.length < 6) {
+      this.setState({ otpError: "*Enter OTP" });
     } else {
-      this.setState({ phoneError: "" });
+      this.setState({ phoneError: "", otpError: "" });
 
       this.props.navigation.navigate("Welcome");
     }
   };
   render() {
     return (
-      <View style={styles.container}>
-        <Text style={styles.text}>SIGN UP</Text>
-        <TextInput
-          placeholder="Enter your Mobile Number"
-          placeholderTextColor="#9FC131"
-          style={styles.input}
-          multiline={true}
-          keyboardType="number-pad"
-          value={this.state.phone}
-          onChange={event => this.onChange(event.nativeEvent.text)}
-        />
-        <Text style={styles.errortext}>{this.state.phoneError}</Text>
-        <TouchableOpacity style={styles.button1}>
-          <Button title="Back" onPress={this.goBack} color="#9FC131" />
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.button2}>
-          <Button title="Submit" onPress={this.onSubmit} color="#87CEFA" />
-        </TouchableOpacity>
-      </View>
+      <KeyboardAvoidingView
+        style={styles.container}
+        behavior="padding"
+        enabled
+        keyboardVerticalOffset={Header.HEIGHT + 50}
+      >
+        <ScrollView>
+          {this.state.signUp ? (
+            <KeyboardAvoidingView
+              style={styles.container}
+              behavior="padding"
+              enabled
+              keyboardVerticalOffset={Header.HEIGHT + 50}
+            >
+              <ScrollView>
+                <View style={styles.signupContainer}>
+                  <View style={styles.toggleContainer}>
+                    <TouchableOpacity onPress={this.changeSignup}>
+                      <View style={styles.signupButton}>
+                        <Text>Sign Up</Text>
+                      </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={this.changeSignup}>
+                      <View style={styles.loginButton}>
+                        <Text>Login</Text>
+                      </View>
+                    </TouchableOpacity>
+                  </View>
+
+                  <TextInput
+                    placeholder="Enter your Mobile Number"
+                    placeholderTextColor="#9FC131"
+                    style={styles.input}
+                    multiline={true}
+                    keyboardType="number-pad"
+                    value={this.state.phone}
+                    onChange={event => this.onChange(event.nativeEvent.text)}
+                  />
+                  <Text style={styles.errortext}>{this.state.phoneError}</Text>
+                  <View style={{ alignItems: "center" }}>
+                    <TouchableOpacity style={styles.button2}>
+                      <Button
+                        title="Sign Up"
+                        onPress={this.onSignup}
+                        color="#12BA03"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </ScrollView>
+            </KeyboardAvoidingView>
+          ) : (
+            <KeyboardAvoidingView
+              style={styles.container}
+              behavior="padding"
+              enabled
+              keyboardVerticalOffset={Header.HEIGHT + 50}
+            >
+              <ScrollView>
+                <View style={styles.signupContainer}>
+                  <View style={styles.toggleContainer}>
+                    <TouchableOpacity onPress={this.changeSignup}>
+                      <View style={styles.signupButton1}>
+                        <Text>Sign Up</Text>
+                      </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={this.changeSignup}>
+                      <View style={styles.loginButton1}>
+                        <Text>Login</Text>
+                      </View>
+                    </TouchableOpacity>
+                  </View>
+                  <TextInput
+                    placeholder="Registered Mobile Number"
+                    placeholderTextColor="#9FC131"
+                    style={styles.input}
+                    multiline={true}
+                    keyboardType="number-pad"
+                    value={this.state.phone}
+                    onChange={event => this.onChange(event.nativeEvent.text)}
+                  />
+                  <Text style={styles.errortext}>{this.state.phoneError}</Text>
+                  <TextInput
+                    placeholder="One Time Password"
+                    placeholderTextColor="#9FC131"
+                    style={styles.input}
+                    multiline={true}
+                    keyboardType="number-pad"
+                    value={this.state.otp}
+                    onChange={event => this.onChangeOtp(event.nativeEvent.text)}
+                  />
+                  <Text style={styles.errortext}>{this.state.otpError}</Text>
+                  <View style={{ alignItems: "center" }}>
+                    <TouchableOpacity style={styles.button2}>
+                      <Button
+                        title="Login"
+                        onPress={this.onLogin}
+                        color="#12BA03"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </ScrollView>
+            </KeyboardAvoidingView>
+          )}
+        </ScrollView>
+      </KeyboardAvoidingView>
     );
   }
 }
@@ -64,22 +175,72 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#F0F8FF",
     alignItems: "center"
+
     // justifyContent: "center"
   },
+  signupContainer: {
+    marginTop: 90,
+    alignItems: "center"
+  },
   errortext: {
     color: "red",
     marginTop: 10,
     marginLeft: -100
   },
   input: {
-    borderWidth: 1,
+    borderBottomWidth: 1,
     borderColor: "black",
-    backgroundColor: "#d1d1d1",
+    marginTop: 20,
     color: "black",
     height: 40,
     width: 300,
     paddingLeft: 15
   },
+  toggleContainer: {
+    justifyContent: "center",
+    flexDirection: "row",
+    flex: 1,
+
+    width: 190,
+    height: 40,
+    marginBottom: 50,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: "#84B2FE"
+  },
+  signupButton: {
+    flex: 1,
+    width: 95,
+    marginLeft: -37,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#84B2FE",
+    borderRadius: 20,
+    fontWeight: 500
+  },
+  loginButton: {
+    flex: 1,
+    marginLeft: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  loginButton1: {
+    flex: 1,
+    width: 95,
+    marginLeft: 14,
+    marginRight: -30,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#84B2FE",
+    borderRadius: 20,
+    fontWeight: 500
+  },
+  signupButton1: {
+    flex: 1,
+
+    justifyContent: "center",
+    alignItems: "center"
+  },
   text: {
     fontSize: 32,
 
@@ -88,16 +249,12 @@ const styles = StyleSheet.create({
     marginBottom: 80,
     fontWeight: "200"
   },
-  button1: {
-    width: 100,
-    height: 50,
-    marginLeft: -130,
-    marginTop: 80
-  },
+
   button2: {
-    width: 100,
+    width: 120,
     height: 50,
-    marginLeft: 110,
-    marginTop: -50
+    color: "black",
+    fontWeight: 200,
+    marginTop: 20
   }
 });