Skip to content

Instantly share code, notes, and snippets.

@amarg26

amarg26/LoginForm.js

Created September 1, 2018 14:13
Show Gist options
  • Save amarg26/f727ed9ea6a5aa37b0e757425b206e9b to your computer and use it in GitHub Desktop.
Save amarg26/f727ed9ea6a5aa37b0e757425b206e9b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
LoginForm.js
import React from "react";
import ForgotPassword from "../Login/ForgotPassword";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
class LoginForm extends React.Component {
state = {
fields: {},
errors: {}
};
handleChange = e => {
let fields = this.state.fields;
fields[e.target.name] = e.target.value;
this.setState({
fields
});
};
submituserRegistrationForm = e => {
e.preventDefault();
if (this.validateForm()) {
let fields = {};
fields["emailid"] = "";
fields["password"] = "";
this.setState({ fields: fields });
alert("Form submitted");
}
};
validateForm() {
let fields = this.state.fields;
let errors = {};
let formIsValid = true;
if (!fields["emailid"]) {
formIsValid = false;
errors["emailid"] = "*Please enter your email-ID.";
}
if (typeof fields["emailid"] !== "undefined") {
//regular expression for email validation
var pattern = new RegExp(
/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i
);
if (!pattern.test(fields["emailid"])) {
formIsValid = false;
errors["emailid"] = "*Please enter valid email-ID.";
}
}
if (!fields["password"]) {
formIsValid = false;
errors["password"] = "*Please enter your password.";
}
if (typeof fields["password"] !== "undefined") {
if (!fields["password"].match(/^.*(?=.{8,})/)) {
formIsValid = false;
errors["password"] = "*Please enter secure and strong password.";
}
}
this.setState({
errors: errors
});
return formIsValid;
}
render() {
return (
<React.Fragment>
<header className="header">
<h1 className="site-title text-center">
<img
alt="myhobnob"
src={require(`./../../assets/images/hobnoblogo.png`)}
/>
</h1>
</header>
<div className="container">
{/* <div className="row">
<div className="col col-12 u-text-center u-marginbottom-10">
<a href="/pt"><img className="logo-login" src={require(`./../../assets/images/hobnoblogo.png`)} alt="Logo icon catharsis" /></a>
</div>
</div>*/}
<div className="row" id="login">
<div className="col col-md-6 box-login col-push-3">
<div className="fontweight-semibold u-text-center fontsize-large u-marginbottom-30 text-center">
Login
</div>
<div className="login-fb">
<a className="btn btn-medium btn-fb" href="#">
<font style={{ "verticalAlign ": " inherit " }}>
<font style={{ "verticalAlign ": " inherit " }}>
Sign in with Facebook
</font>
</font>
</a>
</div>
<div className="separator">
<div className="text or">
<font style={{ "verticalAlign ": " inherit " }}>
<font style={{ "verticalAlign ": " inherit " }}>or</font>
</font>
</div>
</div>
<div className="form">
<form
method="post"
name="userRegistrationForm"
onSubmit={this.submituserRegistrationForm}
className="simple_form new_user"
id="new_user"
>
<input name="utf8" type="hidden" value="✓" />
<input type="hidden" name="authenticity_token" value="" />
<div className="input email optional user_email">
<label className="field-label">
<span
className="translation_missing"
title="translation missing: pt.devise.sessions.new.email"
>
Email
</span>
</label>
<input
type="text"
name="emailid"
value={this.state.fields.emailid}
onChange={this.handleChange}
/>
<div className="errorMsg">{this.state.errors.emailid}</div>
</div>
<BrowserRouter>
<Switch>
<Route
path="/forgotpassword"
component={ForgotPassword}
exact
/> I forgot my password
<Link
to="/forgotpassword"
className="fontsize-smallest link-hidden fontcolor-secondary u-right"
id="forgot_password"
>
I forgot my password
</Link>
</Switch>
</BrowserRouter>
<div className="input password optional user_password">
<label className="field-label">
<font style={{ "verticalAlign ": " inherit " }}>
<font style={{ "verticalAlign ": " inherit " }}>
password
</font>
</font>
</label>
<input
className="password optional input text-field input text-field"
type="password"
name="password"
id="user_password"
value={this.state.fields.password}
onChange={this.handleChange}
/>
<div className="errorMsg">{this.state.errors.password}</div>
</div>
{/* <div className="u-marginbottom-20">
<input name="user[remember_me]" type="hidden" value="0" />
<input className="boolean optional input text-field checkbox-fix" type="checkbox" value="1" checked="checked" name="user[remember_me]" id="user_remember_me" />
<label className="form-label fontsize-smallest">
<font style={{ "verticalAlign ": " inherit " }}>
<font style={{ "verticalAlign ": " inherit " }}>Stay connected</font>
</font>
</label>
</div> */}
<div className="row">
<div className=" col-md-6 ">
<input
type="submit"
name="commit"
value="Login"
className="btn btn btn-larger"
/>
</div>
<div className=" col-md-6 ">
<div className="devise-opt">
<div className="lineheight-tight fontsize-small">
<div className="fontcolor-secondary">
<font style={{ "verticalAlign ": " inherit " }}>
<font style={{ "verticalAlign ": " inherit " }}>
No account yet?
</font>
</font>
</div>
<a
className="alt-link fontweight-semibold"
id="signup"
href="/pt/sign_up"
>
<font style={{ "verticalAlign ": " inherit " }}>
<font style={{ "verticalAlign ": " inherit " }}>
Register
</font>
</font>
</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
}
export default LoginForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment