Login page for web application.
HTML : It is used to create components of web page.
CSS is used for styling the components.
REACT is the javascript library used for componets' action
HTML : It is used to create components of web page.
CSS is used for styling the components.
REACT is the javascript library used for componets' action
containers >> LoginForm.js
import React, { Component } from 'react';
import {Form,H1,ButtonFullSize,InputText,ErrorMsg} from '../style/jsstyle';
import { Link } from "react-router-dom";
import {Required,MaxLength} from '../myValidation';
class LoginForm extends Component {
constructor(props){
super(props);
this.state = {
username: '',
password:'',
errorusername: false,
errorpassword:false,
errorform:false
};
this.handleChangeUsername=this.handleChangeUsername.bind(this);
this.handleChangePassword=this.handleChangePassword.bind(this);
//validation
this.handleOnBlurPassword=this.handleOnBlurPassword.bind(this);
this.handleOnBlurUsername=this.handleOnBlurUsername.bind(this);
}
handleChangePassword(event){
this.setState({password: event.target.value});
}
handleChangeUsername(event){
this.setState({username: event.target.value});
}
}
//validation
handleOnBlurUsername(event){
if(Required(event.target.value)|| MaxLength(event.target.value,20)){
this.setState({errorusername: true});
}
else {
this.setState({errorusername: false});
}
}
handleOnBlurPassword(event){
if(Required(event.target.value)|| MaxLength(event.target.value,20)){
this.setState({errorpassword: true});
}
else {
this.setState({errorpassword: false});
}
}
render() {
return (
<Form>
<H1>Login</H1>
<div>
<label>
Email / Mobile
</label>
<InputText type="text" value={this.state.username} onBlur={this.handleOnBlurUsername} onChange={this.handleChangeUsername} />
<div>
{this.state.errorusername &&
<ErrorMsg>Name is Required and Max. 20 chars allow !!</ErrorMsg>
}
</div>
<div>
<label>
Password
</label>
<InputText type="password" value={this.state.password} onBlur={this.handleOnBlurPassword} onChange={this.handleChangePassword} />
{this.state.errorpassword &&
<ErrorMsg>Password is Required and Max. 20 chars allow !!</ErrorMsg>
}
</div>
<ButtonFullSize onClick={...}>Login</ButtonFullSize>
<ErrorMsg>{this.props.accountRequest.result}</ErrorMsg>
<div>
<div>
<br/>
<Link to="/account_registration">Forget Password</Link>
</div>
<div>
<br/>
<Link to="/account_registration">Account Registration</Link>
</div>
</div>
</div>
</Form>
);
}
}
export default LoginForm;
style >> jsstyle
import styled from 'styled-components';
export const H1 = styled.h2`
text-align: center;
color: #4CAF50;
font-weight:bold;
`;
export const ButtonFullSize=styled.button`
background-color: #4CAF50;
color: white;
padding: 10px 10px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
font-weight:bold;
font-size: 1.3em;
border-radius: 25px;
`;
export const SearchText =styled.input` width: 60%;
padding: 12px 0px;
margin: 4px 1px;
display: inline-block;
float: middle;
border: 1px solid #ccc;
border-radius: 15px;
box-sizing: border-box;
position: relative;
left: 100px;
`;
export const Button = styled.button`
background: ${props => props.primary ? 'green' : 'white'};
color: ${props => props.primary ? 'white' : 'green'};
font-size: 1.5em;
padding: 0.25em 1em;
border: 2px solid green;
border-radius: 5px;
margin: 10px 10px 10px 10px;
&:hover { background: ${props => props.primary ? 'white' : 'green'};
color: ${props => props.primary ? 'green' : 'white'};}
`;
export const InputText=styled.input` width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 15px;
box-sizing: border-box;`;
export const Form=styled.div`
background: #f2f2f2;
border: 3px solid #f1f1f1;
border-radius: 20px;
height: auto;
margin: 20px auto 0;
width: 350px;
padding:15px;
`;
export const FormBig=styled.div`
background: #f2f2f2;
border: 3px solid #f1f1f1;
float: middle;
width: 100%;
margin-top: auto;
border-radius: 20px;
height: auto;
margin: 20px auto 0;
padding:15px;
`;
export const Table=styled.table`
border-collapse: collapse;
width: 100%;
`;
export const Td=styled.td`
border: 1px solid #ddd;
padding: 8px;
text-align: ${props => props.isNumber ? 'right' : 'left'};
`;
export const Th=styled.th`
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
margin:10px;
`;
export const Tr=styled.tr`
&:hover {background-color: #ddd;}
&:nth-child(even){background-color: #f2f2f2;}
`;
export const Hr=styled.hr`
height:2px; border:none; color:gray; background-color:#D3D3D3;
margin: 15px 0px 15px 0px;
`;
export const MsgBox=styled.div`
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 10px;
color: #00000;
font-size:1.2em;
line-height: 1.5;
border-radius: 15px;
`;
export const ErrorMsg=styled.p`
color: #b30000;
margin-top:0px;
`;
myValidation
export const Required = (value) => {
if (!value.toString().trim().length) {
// We can return string or jsx as the 'error' prop for the validated Component
return true;
}
};
export const Repassword = (pw,repw) => {
if (pw===repw) {
// We can return string or jsx as the 'error' prop for the validated Component
return false;
}
else {
return true;
}
};
export const Email = (value) => {
return true;
};
export const MaxLength = (value, maxLength) => {
// get the maxLength from component's props
if (value.toString().trim().length > maxLength) {
// Return jsx
return true;
}
};
No comments:
Post a Comment