react-icons/fi#FiEyeOff JavaScript Examples
The following examples show how to use
react-icons/fi#FiEyeOff.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: components.js From idena-web with MIT License | 5 votes |
|
export function PasswordInput({width, ...props}) {
const [show, setShow] = useState(false)
return (
<div
style={{
position: 'relative',
width,
}}
>
<Input
type={show ? 'text' : 'password'}
pr={[8, 3]}
opacity={[0.8, 1]}
{...props}
/>
<Box
mt={['5px', '-3px']}
opacity={[0.16, 1]}
style={{
...borderRadius('right', rem(6)),
cursor: 'pointer',
fontSize: rem(20),
position: 'absolute',
top: rem(0),
height: '100%',
right: rem(10),
zIndex: 5,
}}
onClick={() => setShow(!show)}
>
{show ? (
<FiEyeOff style={{transform: 'translate(0, 50%)'}} />
) : (
<FiEye style={{transform: 'translate(0, 50%)'}} />
)}
</Box>
</div>
)
}
Example #2
| Source File: SignIn.js From Athavani with MIT License | 4 votes |
|
function SignIn(props) {
useEffect(() => {
props.setLogout(false);
return () => {
props.setLogout(true);
};
}, [props]);
const history = useHistory();
const [passwordHide, setPasswordHide] = useState(false);
const [isLoading, setIsLoading] = useState(false);
function tooglePassword() {
setPasswordHide(password => !password);
}
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [signing_error, setSigning_error] = useState("");
async function submitHandle(e) {
e.preventDefault();
if (validator.empty(email)) {
return setSigning_error("Email Field is Empty!");
}
if (validator.empty(password)) {
return setSigning_error("Password Field is Empty!");
}
if (!validator.email(email)) {
return setSigning_error("Invalid Email!");
}
setIsLoading(true);
try {
const { data } = await api.signIn({ email, password });
console.log(data);
setSigning_error(data.message);
// console.log(data);
localStorage.setItem("token", data.token);
localStorage.setItem("user", JSON.stringify(data.user));
setIsLoading(false);
history.push("/");
} catch (error) {
if (error.response) {
setSigning_error(error.response.data.message);
} else if (error.request) {
setSigning_error("Server is not Responding!");
// console.log(error.request);
} else {
setSigning_error(error.message);
// console.log(error.message);
}
setIsLoading(false);
}
}
if (localStorage.getItem("token")) {
return <Redirect to="/" />;
}
return (
<>
<div className={styles.parent}>
<div className={styles.leftChildSection}>
<div>
{/* <p id={styles.desc}>
Athavani/Memories is a place to save all
<br /> your memories in a single place
<br /> and rejoice them through the years.
</p> */}
<div>
<img
src={image}
alt="Memories Image"
style={{ width: "100%", height: "auto" }}
></img>
</div>
</div>
</div>
<div className={styles.rightChildSection}>
<div className={styles.SignIn} style={{ marginTop: "5%" }}>
<div className={styles.SignImage}>
<img
className={styles.Sign_image}
src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_129714169_970647970450099_67857.jpg"
alt="Memories Image"
></img>
<div className={styles.bg_color}></div>
</div>
<div className={styles.title}>SIGN IN</div>
<div className={styles.body}>
<form className={styles.form} onSubmit={submitHandle}>
<input
type="text"
className={styles.email}
name="email"
placeholder="Email Address"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<div className={styles.password_container}>
<input
type={`${passwordHide ? "text" : "password"}`}
className={styles.password}
name="password"
placeholder="Enter Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
<div className={styles.eye} onClick={tooglePassword}>
{passwordHide ? <FiEyeOff /> : <FiEye />}
</div>
</div>
<div className={styles.forgot}>
<Link to="/forgot">Forgot your password?</Link>
</div>
<div style={{ display: "flex", justifyContent: "center" }}>
<button
className={styles.login}
onClick={submitHandle}
disabled={isLoading}
type="submit"
style={{
cursor: `${isLoading ? "not-allowed" : "pointer"}`,
}}
>
Log In
{isLoading && <LinearProgress color="secondary" />}
</button>
</div>
<div
id="signerror"
style={{ textAlign: "center", color: "coral", fontSize: 19 }}
>
{signing_error}
</div>
</form>
<GoogleSignin />
<div className={styles.already}>
{!isLoading && (
<>
<div className={styles.text}>New to Athavani?</div>
<div className={styles.link} disabled>
<Link to="/signup">Sign Up</Link>
</div>
</>
)}
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #3
| Source File: SignUp.js From Athavani with MIT License | 4 votes |
|
function SignUp(props) {
useEffect(() => {
props.setLogout(false);
return () => {
props.setLogout(true);
};
}, [props]);
const history = useHistory();
const [showPassword, setShowPassword] = useState(false);
const [showPassword2, setShowPassword2] = useState(false);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [password2, setPassword2] = useState("");
const [otp, setOtp] = useState("");
const [isOtpSent, setIsOtpSent] = useState(false);
const [isOtpVerified, setIsOtpVerified] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error_signup, setError_signup] = useState("");
async function sendOtpHandle(e) {
e.preventDefault();
if (validator.empty(email)) {
return setError_signup("Email Field is Empty!");
}
if (!validator.email(email)) {
return setError_signup("Invalid Email!");
}
setIsLoading(true);
try {
const { data } = await api.sendOtp({ email });
console.log(data);
setError_signup(data.message);
setIsOtpSent(true);
setIsLoading(false);
} catch (error) {
if (error.response) {
setError_signup(error.response.data.message);
} else if (error.request) {
setError_signup("Server is not Responding!");
// console.log(error.request);
} else {
setError_signup(error.message);
// console.log(error.message);
}
setIsLoading(false);
}
}
async function verifyOtpHandle(e) {
e.preventDefault();
if (validator.empty(otp)) {
return setError_signup("OTP Field is Empty!");
}
setIsLoading(true);
try {
const { data } = await api.verifyOtp({ email, otp });
// console.log(data);
setError_signup(data.message);
setIsOtpVerified(true);
setIsLoading(false);
} catch (error) {
if (error.response) {
setError_signup(error.response.data.message);
} else if (error.request) {
setError_signup("Server is not Responding!");
// console.log(error.request);
} else {
setError_signup(error.message);
// console.log(error.message);
}
setIsLoading(false);
}
}
async function submitHandle(e) {
e.preventDefault();
if (validator.empty(name)) {
return setError_signup("Name Field is Empty!");
}
if (validator.empty(password)) {
return setError_signup("Password Field is Empty!");
}
if (validator.empty(password2)) {
return setError_signup("Confirm Password Field is Empty!");
}
if (!validator.password(password)) {
return setError_signup("Password length must be more than 6.");
}
if (!validator.match(password, password2)) {
return setError_signup("Password and Confirm Password are not matching!");
}
setIsLoading(true);
try {
const { data } = await api.signUp({ name, email, password });
// console.log(data);
setError_signup(data.message);
setIsLoading(false);
history.push("/signin");
} catch (error) {
if (error.response) {
setError_signup(error.response.data.message);
} else if (error.request) {
setError_signup("Server is not Responding!");
// console.log(error.request);
} else {
setError_signup(error.message);
// console.log(error.message);
}
setIsLoading(false);
}
}
function resetHandle() {
setIsOtpSent(false);
setIsOtpVerified(false);
setOtp("");
}
if (localStorage.getItem("token")) {
return <Redirect to="/" />;
}
return (
<div className={styles.parent}>
<div className={styles.leftChildSection}>
<div>
{/* <p id={styles.desc}>
Athavani/Memories is a place to save all
<br /> your memories in a single place
<br /> and rejoice them through the years.
</p> */}
<div>
<img
src={image}
alt="Memories Image"
style={{ width: "100%", height: "auto" }}
></img>
</div>
</div>
</div>
<div className={styles.rightChildSection}>
<div className={styles.SignUp} style={{ marginTop: "5%" }}>
<div className={styles.SignImage}>
<img
className={styles.Sign_image}
src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_129714169_970647970450099_67857.jpg"
alt="Memories Image"
></img>
<div className={styles.bg_color}></div>
</div>
<div className={styles.title}>SIGN UP</div>
<div className={styles.body}>
<form
className={styles.form}
onSubmit={isOtpSent ? resetHandle : sendOtpHandle}
>
<input
type="text"
name="email"
placeholder="Email Address"
value={email}
onChange={e => setEmail(e.target.value)}
disabled={isOtpSent}
/>
{isOtpSent ? (
<div style={{ display: "flex", justifyContent: "center" }}>
<button className={styles.send_otp} onClick={resetHandle}>
Change Email
</button>
</div>
) : (
<div
style={{
display: "flex",
justifyContent: "center",
width: "80%",
margin: "auto",
}}
>
<button
type="submit"
className={styles.send_otp}
onClick={sendOtpHandle}
disabled={isLoading}
style={{
cursor: `${isLoading ? "not-allowed" : "pointer"}`,
}}
>
Send OTP
{isLoading && (
<LinearProgress display="none" color="secondary" />
)}
</button>
</div>
)}
<div
style={{
textAlign: "center",
fontSize: 19,
color: "coral",
marginTop: 15,
}}
>
{error_signup}
</div>
</form>
{isOtpSent && !isOtpVerified && (
<form onSubmit={verifyOtpHandle}>
<input
type="text"
name="otp"
placeholder="Enter OTP"
value={otp}
onChange={e => setOtp(e.target.value)}
/>
<div style={{ display: "flex", justifyContent: "center" }}>
<button
type="submit"
className={styles.send_otp}
onClick={verifyOtpHandle}
disabled={isLoading}
style={{
cursor: `${isLoading ? "not-allowed" : "pointer"}`,
}}
>
Verifiy OTP
{isLoading && <LinearProgress color="secondary" />}
</button>
</div>
</form>
)}
{isOtpVerified && (
<form onSubmit={submitHandle}>
<input
type="text"
name="name"
placeholder="Your Name"
value={name}
onChange={e => setName(e.target.value)}
/>
<div className={styles.password_container}>
<input
type={showPassword ? "text" : "password"}
name="password"
placeholder="Enter Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
<div
className={styles.eye}
onClick={() => setShowPassword(prevState => !prevState)}
>
{showPassword ? <FiEyeOff /> : <FiEye />}
</div>
</div>
<div className={styles.password_container}>
<input
type={showPassword2 ? "text" : "password"}
name="password2"
placeholder="Confirm Password"
value={password2}
onChange={e => setPassword2(e.target.value)}
/>
<div
className={styles.eye}
onClick={() => setShowPassword2(prevState => !prevState)}
>
{showPassword2 ? <FiEyeOff /> : <FiEye />}
</div>
</div>
<div style={{ display: "flex", justifyContent: "center" }}>
<button
type="submit"
className={styles.signup}
onClick={submitHandle}
disabled={isLoading}
style={{
cursor: `${isLoading ? "not-allowed" : "pointer"}`,
}}
>
Sign Up
{isLoading && <LinearProgress color="secondary" />}
</button>
</div>
</form>
)}
<div className={styles.already}>
<div className={styles.text}>Already have an account?</div>
<div className={styles.link}>
<Link to="/signin">Sign In</Link>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
