Created
September 1, 2018 14:13
-
-
Save amarg26/f727ed9ea6a5aa37b0e757425b206e9b to your computer and use it in GitHub Desktop.
Revisions
-
amarg26 created this gist
Sep 1, 2018 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,223 @@ 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;