Skip to content

Commit

Permalink
Validation Code Updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@utsavshukla
utsavshukla committed Jan 2, 2021
1 parent f5e95ec commit b7ae52f
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 178 deletions.
4 changes: 2 additions & 2 deletions controller/user/signUp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ class SignUp{
.then((user) => {
if (user)
{
return res.status(400).json({"msg" : "The entered Email already exist!"})}
return res.status(200).json({"msg" : "The entered Email already exist!","status" : false})}
else {
//for initialise NodeMailer
const transporter = initNodeMailer();
generateOTP(req,res,transporter);
return res.status(200).json({"user" : req.body,"msg" : "OTP has been sent to your Gmail"});
return res.status(200).json({"user" : req.body,"msg" : "OTP has been sent to your Gmail","status" : true});
}
});
}
Expand Down
107 changes: 66 additions & 41 deletions frontend/src/pages/Login/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import React from "react";
import Joi from "@hapi/joi";



import "../assets/css/bootstrap.css";
import "../assets/css/bootstrap.min.css";
import "../assets/css/mdb.css";
import "../assets/css/mdb.lite.css";
import "../assets/css/mdb.lite.min.css";
import "../assets/css/mdb.min.css";
import "../assets/css/style.min.css";
import _ from "lodash";
import { connect } from "react-redux";
import { signIn } from "../../actions/authAction";
// import Button from "../../components/common/Button";
import "./style.css";
// import {Helmet} from 'react-helmet';

class Login extends React.Component {
state = {
Expand Down Expand Up @@ -73,51 +80,60 @@ class Login extends React.Component {
const { email, password } = data;
const { authMessage, loggedIn,userData} = this.props;
if (loggedIn) this.props.history.push("/dashboard");
console.log("logged",loggedIn);
// console.log("logged",loggedIn);
console.log("error",errors);
return (

<div className="bg-image-login ">
<div className=" d-flex h-100 justify-content-center align-items-center">
<div className="container">
<div className="row">
<div className="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">
<div class="login-page">
<div class="mask rgba-stylish-strong h-100 d-flex justify-content-center align-items-center">
<div class="container">
<div class="row">
<div class="col-xl-5 col-lg-6 col-md-10 col-sm-12 mx-auto mt-5">

<div className="card wow fadeIn" data-wow-delay="0.3s">
<div className="card-body">
<div class="card wow fadeIn" data-wow-delay="0.3s">
<div class="card-body">

<div className="form-header purple-gradient">
<h3 className="font-weight-500 my-2 py-1"><i className="fas fa-user"></i> Log in</h3>
<div class="form-header purple-gradient">
<h3 class="font-weight-500 my-2 py-1"><i class="fas fa-user"></i> Log in:</h3>
</div>


{/* <div class="md-form">
<i class="fas fa-user prefix white-text"></i>
<input
type="text"
id="orangeForm-name"
class="form-control"
/>
<label for="orangeForm-name">Your name</label>
</div> */}
<form onSubmit={this.handleSubmit} onClick={this.saveUserDetais(userData,loggedIn)}>
<div className="md-form">
<i className="fas fa-envelope prefix " ></i>
<div class="md-form">
<i class="fas fa-envelope prefix white-text" style={{color:"black"}}></i>
<input
type="email"
name="email"
error={errors["email"]}
id="orangeForm-email"
className="form-control"
class="form-control"
onChange={this.handleChange}
value={email}
autoFocus
/>
<label htmlFor="orangeForm-email">Your email</label>
<label for="orangeForm-email">Your email</label>
{ errors["email"] && <div className="alert alert-danger"> {errors["email"]} </div> }
</div>

<div className="md-form">
<i className="fas fa-lock prefix "></i>
<div class="md-form">
<i class="fas fa-lock prefix white-text"></i>
<input
name="password"
type="password"
error={errors["password"]}
onChange={this.handleChange}
value={password}
id="orangeForm-pass"
className="form-control"
class="form-control"
/>
<label htmlFor="orangeForm-pass">Your password</label>
<label for="orangeForm-pass">Your password</label>
{ errors["password"] && <div className="alert alert-danger"> {errors["password"]} </div> }
</div>

{authMessage ? (
Expand All @@ -130,20 +146,23 @@ class Login extends React.Component {
)}



<div className="text-center">
<button className="btn purple-gradient btn-lg"
onClick={this.handleSubmit}>Login</button>
<div className="inline-ul text-center d-flex justify-content-center">


<div className="d-flex flex-row mt-5">
<span className=" text-right mt-2 text-info">No Account?</span>
<a href="http://localhost:3000/register"
> <button type="button" className="btn btn-info btn-rounded btn-sm"> Register </button></a>
</div>


<div class="text-center">
<button class="btn purple-gradient btn-lg"
onClick={this.handleSubmit}>Log In</button>
<div class="inline-ul text-center d-flex justify-content-center">
{/* <a class="p-2 m-2 fa-lg tw-ic"><i class="fab fa-twitter white-text"></i></a>
<a class="p-2 m-2 fa-lg li-ic"><i class="fab fa-linkedin-in white-text"> </i></a>
<a class="p-2 m-2 fa-lg ins-ic"><i class="fab fa-instagram white-text"> </i></a> */}
<div style = {{
display : "flex",
flexDirection : "column"
}}>
<a href="http://localhost:3000/register" style={{
color:"blue"}}>New User</a>
<div style = {{backgroundColor: "blue",
width: "70px",
height: "1px"}}/>
</div>
</div>
</div>
</form>
Expand All @@ -153,10 +172,16 @@ class Login extends React.Component {
</div>
</div>
</div>

</div>

</div>
{/* <Helmet>
<meta charSet="utf-8" />
<script type="text/javascript" src={"./js/jquery-3.4.1.min.js"} />
<script type="text/javascript" src={"./js/popper.min.js"} />
<script type="text/javascript" src={"./js/bootstrap.min.js"} />
<script type="text/javascript" src={"./js/mdb.min.js"} />
</Helmet> */}

</div>
);
}
}
Expand Down
61 changes: 28 additions & 33 deletions frontend/src/pages/Register/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ class RegisterForm extends React.Component {
username:"",
email: "",
password: "",
otp : "",
otp :""
},
isVerify : false,
errors: {},
passwordError: "",
authError: "",
};

validateProperty = (input) => {
Expand Down Expand Up @@ -62,23 +62,19 @@ class RegisterForm extends React.Component {
};
handleSubmit = (e) => {
e.preventDefault();
if((this.state.data.username !== "") &&
(this.state.data.email !== "") &&
(this.state.data.username !== "")){
this.setState({isVerify : true});
}
// console.log(this.props.status);
this.props.getOTP(this.state.data.email);
};

handleVerify = (e) =>{
e.preventDefault();
// console.log(this.state.data,"verfiy");

if((this.state.data.username !== "") &&
(this.state.data.email !== "") &&
(this.state.data.username !== "") &&
(this.state.data.otp !== "")){
const {username, password, email ,otp} = this.state.data;
const {username, password, email} = this.state.data;
const {otp} = this.state.data;
this.props.signUpandVerify({username, email, password ,otp});
}
}
Expand All @@ -92,30 +88,36 @@ class RegisterForm extends React.Component {
schema = {
username: Joi.string().alphanum().min(3).max(30),
email: Joi.string().email().required().label("Email"),
password: Joi.string().min(8).required().label("Password"),
otp: Joi.string().min(6).max(6),
password: Joi.string().min(5).required().label("Password"),
otp: (this.state.isVerify === false) ? "" : Joi.string().min(6).max(6),
};


saveUserDetais(user,loggedIn){
// console.log(user);
saveUserDetais(user,loggedIn,authMessage){
console.log("hi",authMessage,user);
console.log("hi",loggedIn);

if(authMessage !== '' && authMessage !== undefined){return;}
console.log("hiiii",user.userData);
if(user.userData === undefined){return;}



if(loggedIn){
localStorage.setItem('loggedIn', true);
console.log(user);
if(localStorage.getItem('loggedIn') === 'true'){
localStorage.setItem('name',user.userData._id);
}
}
}

render() {

if(this.props.status === true && this.state.isVerify === false){
this.setState({isVerify : true});
}
const { authMessage,userData ,loggedIn } = this.props;
// console.log(loggedIn);
const { errors, passwordError } = this.state;
const { username, email, password, otp} = this.state.data;
const { errors, authError } = this.state;
const { username, email, password,otp} = this.state.data;
if (loggedIn) this.props.history.push("/dashboard");

return (
Expand Down Expand Up @@ -199,7 +201,7 @@ class RegisterForm extends React.Component {
</h4>

</div>
<form onSubmit={this.handleSubmit} onClick={this.saveUserDetais(userData,loggedIn)}>
<form onSubmit={this.handleSubmit} onClick={this.saveUserDetais(userData,loggedIn,authMessage)}>


<div class="md-form">
Expand All @@ -209,11 +211,11 @@ class RegisterForm extends React.Component {
name="username"
id="orangeForm-name"
class="form-control"
error={errors["username"]}
onChange={this.handleChange}
value = {username}
/>
<label for="orangeForm-name">Your name</label>
{ errors["username"] && <div className="alert alert-danger"> {errors["username"]} </div> }
</div>
<div class="md-form">
<i class="fas fa-envelope prefix"></i>
Expand All @@ -222,11 +224,11 @@ class RegisterForm extends React.Component {
id="orangeForm-email"
class="form-control"
type="email"
error={errors["email"]}
onChange={this.handleChange}
value = {email}
/>
<label for="orangeForm-email">Your email</label>
{ errors["email"] && <div className="alert alert-danger"> {errors["email"]} </div> }
</div>

<div class="md-form">
Expand All @@ -236,12 +238,12 @@ class RegisterForm extends React.Component {
id="orangeForm-pass"
class="form-control"
type="password"
error={errors["password"]}
onChange={this.handleChange}
// label="password"
value = {password}
/>
<label for="orangeForm-pass">Your password</label>
{ errors["password"] && <div className="alert alert-danger"> {errors["password"]} </div> }
</div>

{
Expand All @@ -253,7 +255,6 @@ class RegisterForm extends React.Component {
name="otp"
id="orangeForm-otp"
class="form-control"
error={errors["otp"]}
onChange={this.handleChange}
value = {otp}
/>
Expand All @@ -264,10 +265,10 @@ class RegisterForm extends React.Component {
}


{authMessage || passwordError ? (
{authMessage? (
<p className="bg-info text-white">
{" "}
{authMessage} {passwordError}
{authMessage}
</p>
) : (
<> </>
Expand All @@ -294,6 +295,7 @@ class RegisterForm extends React.Component {
<div class="text-center">
<button class="btn btn-indigo btn-rounded mt-5"
type="button"
disabled = {this.validate()}
onClick={this.handleSubmit}
>Sign up</button>
</div>
Expand Down Expand Up @@ -325,14 +327,6 @@ class RegisterForm extends React.Component {
</div>
</div>
</div>
{/* <Helmet>
<meta charSet="utf-8" />
<script type="text/javascript" src={"./js/jquery-3.4.1.min.js"} />
<script type="text/javascript" src={"./js/popper.min.js"} />
<script type="text/javascript" src={"./js/bootstrap.min.js"} />
<script type="text/javascript" src={"./js/mdb.min.js"} />
</Helmet> */}

</div>

);
Expand All @@ -343,6 +337,7 @@ const mapStateToProps = (state) => {
userData: state.auth.userData,
loggedIn: state.auth.loggedIn,
authMessage: state.auth.authMessage,
status: state.auth.status
};
};
const mapDispatchToProps = (dispatch) => {
Expand Down
Loading

0 comments on commit b7ae52f

Please sign in to comment.