759 lines
21 KiB
React
759 lines
21 KiB
React
|
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
||
|
|
import { useNavigation } from "@react-navigation/native";
|
||
|
|
import React, { useEffect, useRef, useState } from "react";
|
||
|
|
import {
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TextInput,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from "react-native";
|
||
|
|
import {
|
||
|
|
change_password,
|
||
|
|
forgot_password,
|
||
|
|
} from "../../services/api/controllers/auth";
|
||
|
|
import { search_customer } from "../../services/api/controllers/customers";
|
||
|
|
import { send_email_api } from "../../services/obananapayApi/user_api";
|
||
|
|
|
||
|
|
const ForgotPassword = () => {
|
||
|
|
const [emailDupe, setemailDupe] = useState(false);
|
||
|
|
const [email, setemail] = useState("");
|
||
|
|
const [password, setPassword] = useState("");
|
||
|
|
const [passwordRepeat, setPasswordRepeat] = useState(null);
|
||
|
|
const [samepass, setsamepass] = useState("none");
|
||
|
|
const [seePassword, setSeePassword] = useState(false);
|
||
|
|
|
||
|
|
const [currPage, setcurrPage] = useState("Email");
|
||
|
|
const et1 = useRef();
|
||
|
|
const et2 = useRef();
|
||
|
|
const et3 = useRef();
|
||
|
|
const et4 = useRef();
|
||
|
|
const et5 = useRef();
|
||
|
|
const et6 = useRef();
|
||
|
|
const [f1, setF1] = useState("");
|
||
|
|
const [f2, setF2] = useState("");
|
||
|
|
const [f3, setF3] = useState("");
|
||
|
|
const [f4, setF4] = useState("");
|
||
|
|
const [f5, setF5] = useState("");
|
||
|
|
const [f6, setF6] = useState("");
|
||
|
|
const [errorOTP, seterrorOTP] = useState(false);
|
||
|
|
const [count, setCount] = useState(20);
|
||
|
|
const [error, seterror] = useState("");
|
||
|
|
const [tokenHere, settokenHere] = useState("");
|
||
|
|
const [otpSent, setotpSent] = useState("");
|
||
|
|
const [otpError, setotpError] = useState("");
|
||
|
|
|
||
|
|
const navigation = useNavigation();
|
||
|
|
useEffect(() => {
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
if (count == 0) {
|
||
|
|
clearInterval(interval);
|
||
|
|
} else {
|
||
|
|
setCount(count - 1);
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
return () => {
|
||
|
|
clearInterval(interval);
|
||
|
|
};
|
||
|
|
}, [count]);
|
||
|
|
/* ---------------check if the sent otp and the entered otp is the same--------------- */
|
||
|
|
|
||
|
|
const otpValidate = () => {
|
||
|
|
let enteredOtp = f1 + f2 + f3 + f4 + f5 + f6;
|
||
|
|
// if (enteredOtp == otpSent) {
|
||
|
|
// console.log(otp);
|
||
|
|
// setotpCheck(true);
|
||
|
|
change_password({
|
||
|
|
body: {
|
||
|
|
username: email,
|
||
|
|
otp: enteredOtp,
|
||
|
|
newPassword: password,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.status === 200) {
|
||
|
|
setcurrPage("Success");
|
||
|
|
} else if (result.status === 400) {
|
||
|
|
setotpError(true);
|
||
|
|
console.log('error otp');
|
||
|
|
} else {
|
||
|
|
seterror(result.error+"....");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
seterrorOTP(true);
|
||
|
|
|
||
|
|
console.log(error.message+'....');
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
|
||
|
|
// } else {
|
||
|
|
// setotpError(true);
|
||
|
|
// }
|
||
|
|
};
|
||
|
|
const handleChange = (e) => {
|
||
|
|
search_customer({
|
||
|
|
searchData: e,
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
if (result.data?.results.length < 1) {
|
||
|
|
setemailDupe(false);
|
||
|
|
} else {
|
||
|
|
setemail(e);
|
||
|
|
setemailDupe(true);
|
||
|
|
console.log(result.data?.results.length + " " + emailDupe);
|
||
|
|
}
|
||
|
|
// console.log("length on search " + result.data?.results.length);
|
||
|
|
|
||
|
|
// setloading(false);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const send_email = () => {
|
||
|
|
if (email) {
|
||
|
|
const min = 100000; // Minimum 6-digit number
|
||
|
|
const max = 999999; // Maximum 6-digit number
|
||
|
|
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
|
||
|
|
// const email2 = "kramblooda@gmail.com";
|
||
|
|
// send_email_api({
|
||
|
|
// email: email.replace(/\s/g, "").toLowerCase(),
|
||
|
|
// html: `<p>your OTP code to continue changing your password is ${randomNumber} </p>`,
|
||
|
|
// })
|
||
|
|
// .then((result) => {
|
||
|
|
// setotpSent( );
|
||
|
|
// if (result.status == 200) {
|
||
|
|
// setcurrPage("OTP");
|
||
|
|
// } else {
|
||
|
|
// seterror(result.message);
|
||
|
|
// }
|
||
|
|
// console.log(result);
|
||
|
|
// })
|
||
|
|
// .catch((err) => {
|
||
|
|
// seterror(err);
|
||
|
|
// console.error(err);
|
||
|
|
// console.log(err + "failed to send email");
|
||
|
|
// });
|
||
|
|
|
||
|
|
forgot_password({
|
||
|
|
body: {
|
||
|
|
username: email,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.status === 200) {
|
||
|
|
setcurrPage("OTP");
|
||
|
|
} else {
|
||
|
|
seterror(result.error);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// setotpError(true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
{currPage === "Email" ? (
|
||
|
|
<View style={styles.wrap}>
|
||
|
|
<View style={styles.wrapTop}>
|
||
|
|
<Text style={styles.wrapTopHeader}>Forgot Password</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddle}>
|
||
|
|
<View style={styles.wrapMiddleForm}>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>
|
||
|
|
Email Address{" "}
|
||
|
|
{!emailDupe && email !== "" ? (
|
||
|
|
<Text style={{ color: "red" }}>Email does not exist</Text>
|
||
|
|
) : (
|
||
|
|
""
|
||
|
|
)}
|
||
|
|
</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
handleChange(e);
|
||
|
|
}}
|
||
|
|
// value={email}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
{/* {error ? <Text>{error}</Text> : null} */}
|
||
|
|
|
||
|
|
<View style={styles.wrapBottom}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.btn}
|
||
|
|
disabled={emailDupe ? false : true}
|
||
|
|
onPress={() => {
|
||
|
|
send_email();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={styles.btnText}>Continue</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
) : currPage === "OTP" ? (
|
||
|
|
<View style={styles.wrap}>
|
||
|
|
<Text style={styles.title1}>OTP Verification</Text>
|
||
|
|
<Text style={styles.title}>
|
||
|
|
Please enter the verification code we just sent on your email{" "}
|
||
|
|
{email} together with your new password.
|
||
|
|
</Text>
|
||
|
|
<View style={styles.otpView}>
|
||
|
|
<TextInput
|
||
|
|
ref={et1}
|
||
|
|
style={[
|
||
|
|
styles.inputView,
|
||
|
|
{ borderColor: f1.length >= 1 ? "green" : "#f57f17" },
|
||
|
|
]}
|
||
|
|
keyboardType="number-pad"
|
||
|
|
maxLength={1}
|
||
|
|
value={f1}
|
||
|
|
onChangeText={(txt) => {
|
||
|
|
setF1(txt);
|
||
|
|
if (txt.length >= 1) {
|
||
|
|
et2.current.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<TextInput
|
||
|
|
ref={et2}
|
||
|
|
style={[
|
||
|
|
styles.inputView,
|
||
|
|
{ borderColor: f2.length >= 1 ? "green" : "#f57f17" },
|
||
|
|
]}
|
||
|
|
keyboardType="number-pad"
|
||
|
|
maxLength={1}
|
||
|
|
value={f2}
|
||
|
|
onChangeText={(txt) => {
|
||
|
|
setF2(txt);
|
||
|
|
if (txt.length >= 1) {
|
||
|
|
et3.current.focus();
|
||
|
|
} else if (txt.length < 1) {
|
||
|
|
et1.current.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
ref={et3}
|
||
|
|
style={[
|
||
|
|
styles.inputView,
|
||
|
|
{ borderColor: f3.length >= 1 ? "green" : "#f57f17" },
|
||
|
|
]}
|
||
|
|
keyboardType="number-pad"
|
||
|
|
maxLength={1}
|
||
|
|
value={f3}
|
||
|
|
onChangeText={(txt) => {
|
||
|
|
setF3(txt);
|
||
|
|
if (txt.length >= 1) {
|
||
|
|
et4.current.focus();
|
||
|
|
} else if (txt.length < 1) {
|
||
|
|
et2.current.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
ref={et4}
|
||
|
|
style={[
|
||
|
|
styles.inputView,
|
||
|
|
{ borderColor: f4.length >= 1 ? "green" : "#f57f17" },
|
||
|
|
]}
|
||
|
|
keyboardType="number-pad"
|
||
|
|
maxLength={1}
|
||
|
|
value={f4}
|
||
|
|
onChangeText={(txt) => {
|
||
|
|
setF4(txt);
|
||
|
|
if (txt.length >= 1) {
|
||
|
|
et5.current.focus();
|
||
|
|
} else if (txt.length < 1) {
|
||
|
|
et3.current.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
ref={et5}
|
||
|
|
style={[
|
||
|
|
styles.inputView,
|
||
|
|
{ borderColor: f5.length >= 1 ? "green" : "#f57f17" },
|
||
|
|
]}
|
||
|
|
keyboardType="number-pad"
|
||
|
|
maxLength={1}
|
||
|
|
value={f5}
|
||
|
|
onChangeText={(txt) => {
|
||
|
|
setF5(txt);
|
||
|
|
if (txt.length >= 1) {
|
||
|
|
et6.current.focus();
|
||
|
|
} else if (txt.length < 1) {
|
||
|
|
et4.current.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextInput
|
||
|
|
ref={et6}
|
||
|
|
style={[
|
||
|
|
styles.inputView,
|
||
|
|
{ borderColor: f6.length >= 1 ? "green" : "#f57f17" },
|
||
|
|
]}
|
||
|
|
keyboardType="number-pad"
|
||
|
|
maxLength={1}
|
||
|
|
value={f6}
|
||
|
|
onChangeText={(txt) => {
|
||
|
|
setF6(txt);
|
||
|
|
if (txt.length >= 1) {
|
||
|
|
et6.current.focus();
|
||
|
|
} else if (txt.length < 1) {
|
||
|
|
et5.current.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddle}>
|
||
|
|
<View style={styles.wrapMiddleForm}>
|
||
|
|
<Text style={styles.inputText}>New Password:</Text>
|
||
|
|
|
||
|
|
<View style={styles.input2}>
|
||
|
|
<TextInput
|
||
|
|
style={styles.inputPass}
|
||
|
|
placeholderTextColor="#003f5c"
|
||
|
|
secureTextEntry={!seePassword}
|
||
|
|
autoCapitalize="none"
|
||
|
|
value={password}
|
||
|
|
onChangeText={(text) => setPassword(text)}
|
||
|
|
/>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={{ color: "green", right: 10 }}
|
||
|
|
onPress={() => setSeePassword(!seePassword)}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={seePassword ? faEye : faEyeSlash}
|
||
|
|
size={18}
|
||
|
|
color="#003f5c"
|
||
|
|
/>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleForm}>
|
||
|
|
<Text style={styles.inputText}>Confirm New Password:</Text>
|
||
|
|
|
||
|
|
<View style={styles.input2}>
|
||
|
|
<TextInput
|
||
|
|
style={styles.inputPass}
|
||
|
|
placeholderTextColor="#003f5c"
|
||
|
|
secureTextEntry={!seePassword}
|
||
|
|
autoCapitalize="none"
|
||
|
|
value={passwordRepeat}
|
||
|
|
onChangeText={(text) => setPasswordRepeat(text)}
|
||
|
|
/>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={{ color: "green", right: 10 }}
|
||
|
|
onPress={() => setSeePassword(!seePassword)}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={seePassword ? faEye : faEyeSlash}
|
||
|
|
size={18}
|
||
|
|
color="#003f5c"
|
||
|
|
/>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
{errorOTP ? (
|
||
|
|
<View style={{ width: "100%", marginBottom: 10 }}>
|
||
|
|
<Text
|
||
|
|
style={{
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: "500",
|
||
|
|
color: "#ed0000",
|
||
|
|
alignSelf: "center",
|
||
|
|
textAlign: "center",
|
||
|
|
paddingTop: 10,
|
||
|
|
paddingLeft: 10,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Wrong OTP!!
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
) : null}
|
||
|
|
<TouchableOpacity
|
||
|
|
disabled={
|
||
|
|
f1 !== "" &&
|
||
|
|
f2 !== "" &&
|
||
|
|
f3 !== "" &&
|
||
|
|
f4 !== "" &&
|
||
|
|
f5 !== "" &&
|
||
|
|
f6 !== ""
|
||
|
|
? false
|
||
|
|
: true
|
||
|
|
}
|
||
|
|
style={[
|
||
|
|
styles.verifyOtpBtn,
|
||
|
|
{
|
||
|
|
backgroundColor:
|
||
|
|
f1 !== "" &&
|
||
|
|
f2 !== "" &&
|
||
|
|
f3 !== "" &&
|
||
|
|
f4 !== "" &&
|
||
|
|
f5 !== "" &&
|
||
|
|
f6 !== ""
|
||
|
|
? "#4caf50"
|
||
|
|
: "orange",
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
onPress={() => otpValidate()}
|
||
|
|
>
|
||
|
|
<Text style={styles.btntxt}>Confirm</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<View style={styles.resendView}>
|
||
|
|
<Text
|
||
|
|
style={{
|
||
|
|
fontSize: 18,
|
||
|
|
alignSelf: "flex-start",
|
||
|
|
fontWeight: "700",
|
||
|
|
color: count == 0 ? "orange" : "#7b7b7b",
|
||
|
|
}}
|
||
|
|
onPress={() => {
|
||
|
|
send_email();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Resend Code
|
||
|
|
</Text>
|
||
|
|
{count !== 0 && (
|
||
|
|
<Text style={{ marginLeft: 20, fontSize: 18 }}>
|
||
|
|
{count + " seconds"}
|
||
|
|
</Text>
|
||
|
|
)}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
) : // ) : currPage === "ChangePassword" ? (
|
||
|
|
// <View style={styles.wrap}>
|
||
|
|
// <View style={styles.wrapTop}>
|
||
|
|
// <Text style={styles.wrapTopHeader}>Change Password</Text>
|
||
|
|
// </View>
|
||
|
|
// <View style={styles.wrapMiddle}>
|
||
|
|
// <View style={styles.wrapMiddleForm}>
|
||
|
|
// <Text style={styles.inputText}>Password:</Text>
|
||
|
|
|
||
|
|
// <View style={styles.input2}>
|
||
|
|
// <TextInput
|
||
|
|
// style={styles.inputPass}
|
||
|
|
// placeholderTextColor="#003f5c"
|
||
|
|
// secureTextEntry={!seePassword}
|
||
|
|
// autoCapitalize="none"
|
||
|
|
// value={password}
|
||
|
|
// onChangeText={(text) => setPassword(text)}
|
||
|
|
// />
|
||
|
|
// <TouchableOpacity
|
||
|
|
// style={{ color: "green", right: 10 }}
|
||
|
|
// onPress={() => setSeePassword(!seePassword)}
|
||
|
|
// >
|
||
|
|
// <FontAwesomeIcon
|
||
|
|
// icon={seePassword ? faEye : faEyeSlash}
|
||
|
|
// size={18}
|
||
|
|
// color="#003f5c"
|
||
|
|
// />
|
||
|
|
// </TouchableOpacity>
|
||
|
|
// </View>
|
||
|
|
// </View>
|
||
|
|
// <View style={styles.wrapMiddleForm}>
|
||
|
|
// <Text style={styles.inputText}>Confirm Password:</Text>
|
||
|
|
|
||
|
|
// <View style={styles.input2}>
|
||
|
|
// <TextInput
|
||
|
|
// style={styles.inputPass}
|
||
|
|
// placeholderTextColor="#003f5c"
|
||
|
|
// secureTextEntry={!seePassword}
|
||
|
|
// autoCapitalize="none"
|
||
|
|
// value={passwordRepeat}
|
||
|
|
// onChangeText={(text) => setPasswordRepeat(text)}
|
||
|
|
// />
|
||
|
|
// <TouchableOpacity
|
||
|
|
// style={{ color: "green", right: 10 }}
|
||
|
|
// onPress={() => setSeePassword(!seePassword)}
|
||
|
|
// >
|
||
|
|
// <FontAwesomeIcon
|
||
|
|
// icon={seePassword ? faEye : faEyeSlash}
|
||
|
|
// size={18}
|
||
|
|
// color="#003f5c"
|
||
|
|
// />
|
||
|
|
// </TouchableOpacity>
|
||
|
|
// </View>
|
||
|
|
// </View>
|
||
|
|
// </View>
|
||
|
|
// {/* {error ? <Text>{error}</Text> : null} */}
|
||
|
|
|
||
|
|
// <View style={styles.wrapBottom}>
|
||
|
|
// <TouchableOpacity
|
||
|
|
// style={styles.btn}
|
||
|
|
// // disabled={emailDupe ? false : true}
|
||
|
|
// onPress={() => {
|
||
|
|
// handleLogin();
|
||
|
|
// }}
|
||
|
|
// >
|
||
|
|
// <Text style={styles.btnText}>Continue</Text>
|
||
|
|
// </TouchableOpacity>
|
||
|
|
// </View>
|
||
|
|
// </View>
|
||
|
|
// )
|
||
|
|
|
||
|
|
currPage === "Success" ? (
|
||
|
|
<View style={styles.wrap}>
|
||
|
|
<Text style={styles.title1}>Change Password Successful</Text>
|
||
|
|
<Text style={styles.title}>
|
||
|
|
you may now login with your new password!
|
||
|
|
</Text>
|
||
|
|
<View style={styles.wrapBottom}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.btn}
|
||
|
|
// disabled={emailDupe ? false : true}
|
||
|
|
onPress={() => {
|
||
|
|
// handleLogin();
|
||
|
|
navigation.navigate("Login");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={styles.btnText}>Continue to Login</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
) : null}
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
backgroundColor: "#ffff",
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
},
|
||
|
|
wrapper: {
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
alignItems: "center",
|
||
|
|
width: "100%",
|
||
|
|
top: 0,
|
||
|
|
paddingLeft: 15,
|
||
|
|
flexDirection: "row",
|
||
|
|
borderColor: "#ddd",
|
||
|
|
paddingBottom: 15,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
},
|
||
|
|
headerText: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: "600",
|
||
|
|
marginLeft: 25,
|
||
|
|
},
|
||
|
|
wrap: {
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
bottom: 0,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 25,
|
||
|
|
// justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingTop: 100,
|
||
|
|
},
|
||
|
|
|
||
|
|
wrapTop: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
height: 130,
|
||
|
|
// backgroundColor:'#ffaa00',
|
||
|
|
marginVertical: 15,
|
||
|
|
},
|
||
|
|
wrapTopHeader: {
|
||
|
|
fontSize: 25,
|
||
|
|
fontWeight: "600",
|
||
|
|
color: "#ffaa00",
|
||
|
|
},
|
||
|
|
wrapMiddle: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
width: "100%",
|
||
|
|
marginTop: 20,
|
||
|
|
},
|
||
|
|
wrapBottom: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
wrapMiddleForm: {
|
||
|
|
marginTop: 20,
|
||
|
|
},
|
||
|
|
wrapMiddleFormInput: {
|
||
|
|
marginVertical: 10,
|
||
|
|
},
|
||
|
|
input: {
|
||
|
|
height: 50,
|
||
|
|
width: 300,
|
||
|
|
margin: 12,
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 10,
|
||
|
|
},
|
||
|
|
input2: {
|
||
|
|
height: 50,
|
||
|
|
width: 300,
|
||
|
|
margin: 12,
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 10,
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
inputPass: {
|
||
|
|
height: 50,
|
||
|
|
width: 250,
|
||
|
|
// margin: 12,
|
||
|
|
// borderWidth: 1,
|
||
|
|
// padding: 10,
|
||
|
|
// borderColor: "#bebebe",
|
||
|
|
// borderRadius: 10,
|
||
|
|
},
|
||
|
|
inputreg: {
|
||
|
|
width: "100%",
|
||
|
|
// backgroundColor: "#FEF8C5",
|
||
|
|
shadowRadius: 0,
|
||
|
|
shadowColor: "orange",
|
||
|
|
borderRadius: 10,
|
||
|
|
height: "6%",
|
||
|
|
marginBottom: 5,
|
||
|
|
marginTop: 5,
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
padding: 5,
|
||
|
|
borderWidth: 0,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
flexDirection: "row",
|
||
|
|
},
|
||
|
|
inputText: {
|
||
|
|
marginLeft: 15,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
btn: {
|
||
|
|
backgroundColor: "#ffaa00",
|
||
|
|
paddingVertical: 15,
|
||
|
|
paddingHorizontal: 55,
|
||
|
|
marginTop: 30,
|
||
|
|
},
|
||
|
|
btnText: {
|
||
|
|
color: "#fff",
|
||
|
|
fontWeight: "600",
|
||
|
|
letterSpacing: 1,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
btnReg: {
|
||
|
|
// backgroundColor: "#333",
|
||
|
|
width: "100%",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignContent: "center",
|
||
|
|
paddingVertical: 15,
|
||
|
|
paddingHorizontal: 55,
|
||
|
|
marginTop: 30,
|
||
|
|
},
|
||
|
|
btnTextReg: {
|
||
|
|
color: "#ffaa00",
|
||
|
|
textAlign: "center",
|
||
|
|
fontWeight: "600",
|
||
|
|
letterSpacing: 1,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: "500",
|
||
|
|
marginTop: 5,
|
||
|
|
marginLeft: 35,
|
||
|
|
alignSelf: "flex-start",
|
||
|
|
textAlign: "center",
|
||
|
|
width: "83%",
|
||
|
|
color: "#969696",
|
||
|
|
},
|
||
|
|
title1: {
|
||
|
|
fontSize: 25,
|
||
|
|
fontWeight: "700",
|
||
|
|
marginTop: 10,
|
||
|
|
marginLeft: 25,
|
||
|
|
alignSelf: "center",
|
||
|
|
textAlign: "center",
|
||
|
|
width: "83%",
|
||
|
|
color: "#525252",
|
||
|
|
},
|
||
|
|
otpView: {
|
||
|
|
width: "100%",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
flexDirection: "row",
|
||
|
|
marginTop: 50,
|
||
|
|
},
|
||
|
|
inputView: {
|
||
|
|
width: 50,
|
||
|
|
height: 50,
|
||
|
|
borderWidth: 0.5,
|
||
|
|
borderRadius: 15,
|
||
|
|
marginLeft: 10,
|
||
|
|
textAlign: "center",
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: "700",
|
||
|
|
},
|
||
|
|
verifyOtpBtn: {
|
||
|
|
width: "40%",
|
||
|
|
height: 45,
|
||
|
|
backgroundColor: "orange",
|
||
|
|
borderRadius: 15,
|
||
|
|
alignSelf: "center",
|
||
|
|
marginTop: 20,
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
btntxt: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: "700",
|
||
|
|
},
|
||
|
|
resendView: {
|
||
|
|
flexDirection: "row",
|
||
|
|
alignSelf: "center",
|
||
|
|
marginTop: 10,
|
||
|
|
marginBottom: 30,
|
||
|
|
fontWeight: "200",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
export default ForgotPassword;
|