iblogin v1.0.0

IB - LOGIN

A Login component built with and for React.

Installation

$ npm install iblogin

Usage

import {SignIn} from 'iblogin'

    <SignIn
          child={myComponent}
          requestObject={requestObject}
          type={this.state.type}
          baseURL={this.state.baseURL}
          requestObjectKeys={this.state.keys}
        >

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 ref="username" type="text" name="name" placeholder="Username"/>
<br />
<br />
<input ref="password" type="text" name="name" placeholder="Password"/>
<br />
<br />
<div>{this.props.error}</div>
<br />
<br />
<div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 130, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc()}>SIGN IN</button></div>
<div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 130, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc2()}>Get Token</button></div>
<div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 180, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc3()}>Get LoginState</button></div>
<div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 180, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc4()}>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>
        <SignIn
          child={myComponent}
          requestObject={requestObject}
          type={this.state.type}
          baseURL={this.state.baseURL}
          requestObjectKeys={this.state.keys}
        >
          <div>Congratulations!</div>
        </SignIn>
      </div>
    );
  }
}

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 ref="username" type="text" name="name" placeholder="Username"/>
        <br />
        <br />
        <input ref="password" type="text" name="name" placeholder="Password"/>
        <br />
        <br />
        <div>{this.props.errorMessage()}</div>
        <br />
        <br />
        <div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 130, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc()}>SIGN IN</button></div>
        <div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 130, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc2()}>Get Token</button></div>
        <div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 180, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc3()}>Get LoginState</button></div>
        <div style={{marginLeft: 10, backgroundColor: 'red', color: 'black', height: 20, width: 180, paddingLeft: 40, paddingRight: 0, borderRadius: 20}}><button onClick={() => this.myfunc4()}>Log out</button></div>
      </div>
    )
  }
}