Create Login Page Using react-native

Login page for MOBILE application.
REACT-NATIVE is used for creating mobile components.

containers  =>  LoginScreen.js

import React, { Component } from 'react'

import {View,Text} from 'react-native'

import {Required,MaxLength} from '../../myValidation'

import {styles} from '../../style/jsstyle'

import {

    Heading, Card, CardSection,InputTextBox,

    Button,LinkText,Spinner,ScrollPage,Container

} from '../../components/common'

class LoginForm extends React.Component {

    constructor(props){

        super(props);

        this.state = {

            username: '',

            password:'',

            errorusername: false,

            errorpassword:false,

            errorform:false

        };

        

        //validation

        this.handleOnBlurPassword=this.handleOnBlurPassword.bind(this);

        this.handleOnBlurUsername=this.handleOnBlurUsername.bind(this);

    }

    //validation

    handleOnBlurUsername(event){

        if(Required(event)|| MaxLength(event,20)){

            this.setState({errorusername: true});

        }

        else {

            this.setState({errorusername: false});

        }

    }

    handleOnBlurPassword(event){

        if(Required(event)|| MaxLength(event,20)){

            this.setState({errorpassword: true});

        }

        else {

            this.setState({errorpassword: false});

        }

    }

    render() {       

        return (

        <ScrollPage>

         <Container>

           <Card>

           <CardSection>

               <Heading title="Login"/>

            </CardSection>

            <CardSection>

                <InputTextBox

                    value={this.state.username}

                    placeholder="Email / Mobile / Username"

                    onBlur={()=>this.handleOnBlurUsername(this.state.username)}

                    onChangeText={(username) => this.setState({username})}

                    error={this.state.errorusername}

                    errorMsg="It is Required and Max. 20 chars allow !"

                />

            </CardSection>

            <CardSection>

                <InputTextBox

                    value={this.state.password}

                    placeholder="Password"

                    onBlur={()=>this.handleOnBlurPassword(this.state.password)}

                    onChangeText={(password) => this.setState({password})}

                    error={this.state.errorpassword}

                    errorMsg="password is Required!"

                    secureTextEntry={true}

                />

              </CardSection>

               <View style={styles.rightEle}>

                   <CardSection >

                       <LinkText

                           onPress={() => this.props.navigation.navigate('forgetPassword')}

                           text="Forgot Your Password?"

                       />

                   </CardSection>

               </View>

            <CardSection>

              <Button

                  text="Login"

                  onPress={this.onApiReadAccountLogin}

                  msg={this.props.accountRequest.result}

                  isLoading={this.props.accountRequest.loadingLogin}

              />

            </CardSection>

            <CardSection isBorder={true}>

            <LinkText

                onPress={() => this.props.navigation.navigate('accountRegistration')}

                    text="Create New Account"

            />

            </CardSection>

        </Card>

        </Container>

        </ScrollPage>

        );

    }

}

export default LoginForm;

components  =>  Heading

import React from 'react'
import { Text,StyleSheet } from 'react-native'

export const Heading =(props)=> (
        <Text style={styles.HeadingStyle}>
            {props.title}
        </Text>
)

const styles=StyleSheet.create({
    HeadingStyle:{
        flexWrap: 'wrap',
        textAlign: 'center',
        color: '#4CAF50',
        fontWeight:'bold',
        fontSize:18,
        borderBottomWidth:1,
        borderColor:'#F2F2F2',
        shadowColor:'#000',
        shadowOffset:{width:0,height:2},
        shadowOpacity:0.1,
        padding:5
    }
})

/* Heading is used to give heading-text or title of something... */

// title ====> Give the text of the heading

components  =>  Card

import React from 'react'
import { View,StyleSheet } from 'react-native'

export const Card =(props)=> (
    <View style={styles.CardStyle}>
        {props.children}
    </View>
)

const styles=StyleSheet.create({
    CardStyle:{
        borderWidth:1,
        borderRadius:10,
        borderColor:'#ddd',
        shadowColor:'#000',
        shadowOffset:{width:0,height:2},
        shadowOpacity:0.1,
        shadowRadius:2,
        backgroundColor: '#ffffff',
        elevation:1,
        marginLeft:5,
        marginRight:5,
        marginTop:10
    }
})

/* Card is the container, which hold all elements  */

// It has both START tag and END tag

components  =>  CardSection

import React from 'react'
import { View,StyleSheet } from 'react-native'

export const CardSection =(props)=> {
    let styl= props.isBorder===true?styles.CSBorderStyle:{};
    return(
    <View style={[styles.CardSectionStyle,styl]}>
        {props.children}
    </View>
)}

const styles=StyleSheet.create({
    CardSectionStyle:{
        padding:5,
        marginTop:2
    },
    CSBorderStyle:{
        borderBottomWidth:1,
        borderColor:'#FFFFFF'
    }
})

/* CardSection is used to divide a page into many segments. */

// isBorder ====>  True if you require Bottom-Border

components  =>  InputTextBox

import React from 'react'
import { View,Text,TextInput,StyleSheet } from 'react-native'

const InputTextBox =({value,placeholder,onBlur,onChangeText,secureTextEntry,
    label,error,errorMsg,keyboardType,autoFocus})=> (
    <View style={styles.Container}>
        <Text style={styles.label}>
            {label}
        </Text>
        <TextInput style={styles.InputText}
                   value={value}
                   placeholder={placeholder}
                   onBlur={onBlur}
                   onChangeText={onChangeText}
                   placeholderTextColor="#1b95e0"
                   autoCorrect={false}
                   secureTextEntry={secureTextEntry}
                   keyboardType={keyboardType}
                   autoFocus={autoFocus}
        />
        {error &&
        <Text style={styles.ErrorMsg}>
            {errorMsg}
        </Text>
        }
    </View>
)

  const styles=StyleSheet.create({
        label:{
        fontSize:14,
        color:'#1b95e0'
    },
        InputText:{
        height: 40,
        borderWidth: 2,
        borderColor: "#ddd",
        borderRadius: 10,
        marginTop: 2,
        padding:10
    },
      Container:{
          marginTop: 2,
      },
      ErrorMsg:{
          color: '#b30000'
      }
    });

export {InputTextBox}
/*InputTextBox is a complete text-input with label text, error text and many ,
that is used to collect user input data */

//  label ====> Give Label text of input
//  value ====> value of input
//  placeholder ====> placeholder of input
//  onBlur ====> function handle onBlur
//  onChangeText ====> function handle onChangeText
//  error ====> if true then show error message

//  errorMsg ====> Show error message if it gets error

components  =>  Button
import React  from 'react'
import {View, Text,TouchableOpacity,StyleSheet,ActivityIndicator } from 'react-native'
const Button=(props)=>
{
    if(props.isLoading)
    {
        return(
            <View style={styles.SpinnerStyle}>
                <ActivityIndicator size="large" />
            </View>
        )
    }
    return(
    <View>
        <TouchableOpacity
            onPress={props.onPress}
            style={styles.buttonStyle}
        >
            <Text style={styles.textStyle}>
                {props.text}
            </Text>
        </TouchableOpacity>
        <Text style={styles.MsgStyle}>{props.msg}</Text>
    </View>
);
};

const styles=StyleSheet.create({
    buttonStyle:{
        flex:1,
        alignSelf:'stretch',
        backgroundColor:'#F2F2F2',
        borderRadius:20,
        borderWidth:1,
        borderColor:'#007aff',
        marginLeft:5,
        marginRight:5
    },
    textStyle:{
        alignSelf:'center',
        color: '#3498DB',
        fontSize:18,
        fontWeight:'bold',
        paddingTop:10,
        paddingBottom:10
    },
    MsgStyle:{
        color: '#b30000',
        alignSelf:'center',
        marginTop:2
    },
    SpinnerStyle:{
        flex:1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});
export {Button};

/*  image and a text  */
// text ====> button text lebel
// onPress ====> onPress function handle
//  isLoading ===> True means Loading SMALL Spinner and False means hide.

// msg ====> result or respond message of button press