IB - LOGIN

A Login component built with and for React.

Installation

$ npm install iblogin

Usage

import {SignIn} from 'iblogin'

    

The custom component could be

// Custom Component
class myComponent extends Component {
myfunc = () => {
let req = [
{
ref: "username",
value: this.refs.username.value,
type: "username",
regex: "",
required: true
},
{
ref: "password",
value: this.refs.password.value,
type: "username",
regex: "",
required: true
}
]
this.props.onSubmit(req)
}
myfunc2 = () => {
this.props.getAccessToken()
}
myfunc3 = () => {
this.props.getLoginState()
}
myfunc4 = () => {
this.props.onLogout()
}
render() {
return (
<div>
<input placeholder="Username" type="text">
<br>
<br>
<input placeholder="Password" type="text">
<br>
<br>
<div>{this.props.error}</div>
<br>
<br>
<div style="{{marginLeft:"><button> this.myfunc()}&gt;SIGN IN</button></div>
<div style="{{marginLeft:"><button> this.myfunc2()}&gt;Get Token</button></div>
<div style="{{marginLeft:"><button> this.myfunc3()}&gt;Get LoginState</button></div>
<div style="{{marginLeft:"><button> this.myfunc4()}&gt;Log out</button></div>
</div>
)
}
}

Description

PROPS :

• **child **_is the custom component that has to be sent as _props

• _**requestObject **_is the object we need to make the Network (API) Call in the background

• let requestObject = {
       field1: "",
       field2: ""
      }
  

• _**type **_is the format type of the input ( for example **email or username or mobile ) **we need for validating the input

• let type = "email" |"mobile" | "username"
  

• _**baseURL **_is the URL we need to make the Network (API) call

• const baseURL = "https://exampleURL"
  

• _**requestObjectKeys **_is an important props we need to change a few specific keys of the **requestObject **in later stages before making the API call. It must be in the form of an array.

• keys: [
          'username',
          'password'
        ]
  

CALLBACKS :

• _**errorMessage() **_is the callback we send for the developer to know what kind of error has occured if at all one occurs

• let error = this.props.errorMessage()
  

• _**getAccessToken() **_is the callback we send for the developer to access the **accesstoken **that has been received after the network call has been made

• let accessToken = this.props.getAccessToken()
  

• _**getLoginState() **_is the callback we send for the developer to know the **loginstate **of the current application or session

• let getLogin = this.props.getLoginState()
  

• _**onSubmit() **_is the callback we use to retrieve values from the form in the component you send as a prop. This will be used to retrieve the user data, store it and then use it whenever needed. The parameter for this function is a simple array consisting of how many ever fields. The format of the array is shown below with all the keys.

• let req = [
        {
          ref: "username",
          value: this.refs.username.value,
          type: "username",
          regex: "",
          required: true
        },
        {
          ref: "password",
          value: this.refs.password.value,
          type: "username",
          regex: "",
          required: true
        }
      ]
  
  

This array of objects should be sent to the component as parameters to the function **onSubmit() **as shown below

this.props.onSubmit(req)

EXAMPLE :

import React, { Component } from "react";
import {SignIn} from 'iblogin'
export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      baseURL: 'https://ib-relevance-backend-alpha.apigateway.in/api/ib_users/user/login/v2/',
      type: 'username',
      keys: [
        'username',
        'password'
      ]
    };
  }

  render() {
    let requestObject = {
      auth_type: "username",
      username: "admin",
      country_code: "",
      client_id: "web",
      client_secret: "web_secret",
      password: "admin123",
      phone_number: "",
      email: ""
    }
    return (
      <div>
        
          <div>Congratulations!</div>
        
      </div>
    );
  }
}

class myComponent extends Component {
  myfunc = () =&gt; {
    let req = [
      {
        ref: "username",
        value: this.refs.username.value,
        type: "username",
        regex: "",
        required: true
      },
      {
        ref: "password",
        value: this.refs.password.value,
        type: "username",
        regex: "",
        required: true
      }
    ]
    this.props.onSubmit(req)
  }
  myfunc2 = () =&gt; {
    this.props.getAccessToken()
  }
  myfunc3 = () =&gt; {
    this.props.getLoginState()
  }
  myfunc4 = () =&gt; {
    this.props.onLogout()
  }
  render() {
    return (
      <div>
        <input placeholder="Username" type="text">
        <br>
        <br>
        <input placeholder="Password" type="text">
        <br>
        <br>
        <div>{this.props.errorMessage()}</div>
        <br>
        <br>
        <div style="{{marginLeft:"><button> this.myfunc()}&gt;SIGN IN</button></div>
        <div style="{{marginLeft:"><button> this.myfunc2()}&gt;Get Token</button></div>
        <div style="{{marginLeft:"><button> this.myfunc3()}&gt;Get LoginState</button></div>
        <div style="{{marginLeft:"><button> this.myfunc4()}&gt;Log out</button></div>
      </div>
    )
  }
}