import React from 'react';
import './App.css';
import MainRoute from './Login/MainRoute';
function App() {
return (
<div className="container-fluid" style={{background:'url(https://images.pexels.com/photos/1335115/pexels-photo-1335115.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=450&w=740)', backgroundPosition:'center', backgroundSize:'cover', backgroundRepeat:'no-repeat'}}>
<div className="row vh-100 align-items-center justify-content-center">
<div className="col-md-10 col-lg-6 bg-white pl-5 pr-5 pt-3 pb-3">
<div className="innerContent">
<MainRoute />
</div>
</div>
</div>
</div>
);
}
export default App;
import 'bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter} from 'react-router-dom';
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import SignIn from '../Login/SignIn';
import Register from '../Login/Register';
const MainRoute = () => (
<Switch>
<Route exact path={["/", "/signIn/"]} component={SignIn} />
<Route exact path='/register/' component={Register} />
</Switch>
)
export default MainRoute;import React, { useState } from "react";
import "./SignIn.css";
import { Form, Button } from "react-bootstrap";
import { Link } from "react-router-dom";
import { useForm } from "react-hook-form";
const SignIn = () => {
const { register, handleSubmit, errors } = useForm();
const [user, setUser] = useState({
email: "",
password: "",
agree: ""
});
const { email, password, agree } = user;
const inputHandle = e => {
setUser({
...user,
[e.target.name]: e.target.value
});
console.log(e.target.value);
};
const logInUser = e => {
alert(`Email-ID: ${email}, Password: ${password}`);
console.log(user);
};
return (
<>
<h2>Log In</h2>
<small>Log in to continue in our website</small>
<Form className="mt-5" onSubmit={handleSubmit(logInUser)}>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="text"
name="email"
placeholder="Email Address"
value={email}
onChange={e => {
inputHandle(e);
}}
ref={register({
required: true,
pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
})}
/>
{errors.email && (
<small className="text-danger form-text">
Please enter a valid Email-ID
</small>
)}
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control
type="password"
name="password"
placeholder="Password"
value={password}
onChange={e => {
inputHandle(e);
}}
ref={register({ required: true })}
/>
{errors.email && (
<small className="text-danger form-text">
Please enter password
</small>
)}
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check
type="checkbox"
name="agree"
label="Keep me logged in"
className="remeber"
ref={register({ required: true })}
value={agree}
/>
</Form.Group>
<Button variant="danger" className="btn-block d-block" type="submit">
Sign In
</Button>
</Form>
<div className="row mt-5 mb-3 ">
<div className="col-5">
<ul className="social-link">
<li>
<Link
className="facebook"
to="//www.facebook.com/tolmatol/"
target="_blank"
>
<i className="fa fa-facebook" />
</Link>
</li>
<li>
<Link
className="twitter"
to="//twitter.com/tolmatol"
target="_blank"
>
<i className="fa fa-twitter" />
</Link>
</li>
</ul>
</div>
<div className="col-7 text-right">
<span className="text-muted">
<small>Don't have an account?</small>
</span>
<Link to="/register/" className="active">
Register
</Link>
</div>
</div>
</>
);
};
export default SignIn;
import React from 'react';
import './SignIn.css';
import { Form, Button } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import {Link} from 'react-router-dom';
const Register = () => {
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => {
alert(JSON.stringify(data));
}
return (
<>
<h2>Register</h2>
<small>Create an account free and enjoy it</small>
<Form className="mt-5" onSubmit={handleSubmit(onSubmit)}>
<Form.Group controlId="fname">
<Form.Control type="text" name="fname" placeholder="First Name" ref={register({ required: true })} />
{errors.fname && <small className="text-danger form-text">Please enter first name</small>}
</Form.Group>
<Form.Group controlId="lname">
<Form.Control type="text" name="lname" placeholder="Last Name" ref={register({ required: false })} />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control type="text" name="email" placeholder="Email Address" ref={register({ required: true, pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/ })} />
{errors.email && <small className="text-danger form-text">Please enter a valid Email-ID</small>}
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" name="password" placeholder="Password" ref={register({ required: true })} />
{errors.password && <small className="text-danger form-text">Please enter password</small>}
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" name="acceptTandC" label="I agree to the terms of service" className="remeber" ref={register({ required: true })} />
{errors.acceptTandC && <small className="text-danger form-text">Please accept T&C</small>}
</Form.Group>
<Button variant="danger" className="btn-block d-block" type="submit">
Registera
</Button>
</Form>
<div className="row mt-5 mb-3 ">
<div className="col-5">
<ul className="social-link ">
<li><Link className='facebook' to='//www.facebook.com/tolmatol/' target="_blank"><i className="fa fa-facebook"></i></Link></li>
<li><Link className='twitter' to='//twitter.com/tolmatol' target="_blank"><i className="fa fa-twitter"></i></Link></li>
</ul>
</div>
<div className="col-7 text-right">
<span className="text-muted"><small>Already have an account?</small></span><Link to='/signin/' className="active">Sign In</Link>
</div>
</div>
</>
)
}
export default Register@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {font-family: 'Poppins', sans-serif; color:#333}
.innerContent { max-width: 500px; margin:40px auto 0px auto;}
form { width: 100%; max-width: 500px;}
input.form-control { border: solid 1px #f1f1f1; min-height: 45px; padding: 10px 15px; background: #f1f1f1; border-radius: 0px; box-shadow: none; }
a { color: #333; margin-left: 5px;}
a.active, a:hover { color: #f8422d; }
a:hover { text-decoration: none;}
.remeber { font-size: 14px; color: #666;}
.form-control:focus { box-shadow: none;}
@media(max-width:636px) {
.innerContent { max-width: 80%; margin:80px auto 0px auto;}
}
/* Social Icon */
ul.social-link{list-style-type:none; padding: 0; margin:0;}
ul.social-link li{display:inline-block}
ul.social-link li a{border:1px solid #7c7c7c;color:#0f0f0f;display:block;font-size:16px;height:38px;line-height:38px;text-align:center;width:38px;border-radius:4px;position:relative;margin-right:2px;z-index:1;padding:0}
ul.social-link li a.facebook:after{background:#3b5998}
ul.social-link li a.twitter:after{background:#00aced}
ul.social-link li a:after{position:absolute;content:'';width:100%;height:100%;left:0;top:0;background:#f7c51e;transition:.4s;border-radius:4px;opacity:0;-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);-webkit-transform:scale(1.3);transform:scale(1.3);z-index:-1}
ul.social-link li a:hover:after{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);opacity:1}
ul.social-link li a:hover{border-color:transparent;color:#fff}ul.top_social{margin:0 15px 0 20px}
