Props
Function | Required | Params | Description |
---|---|---|---|
onClick | Yes | data: Object | Response will be passed to this function after login. |
title | No | Display the custom text on button. |
import React , {Component} from 'react';
import ConnectDexBtn from '@mobylogix/login-with-connectdex';
class ConnectDex extends Component {
constructor(props) {
super(props);
this.state = {};
}
loginWithConnectDex(data) {
console.log(data);
// data object format
{success, status, message, user}
}
render(){
return <ConnectDexBtn onClick={this.loginWithConnectDex.bind(this)} />
}
}
Add this stylesheet in your app after installation
.main { width: 100%; display: flex; flex: 1; background-color: #dc0c0c; }
.main-package { width: 100%; height: 100%; background-color: green; }
.btnMain { width: 50%; height: 100px; display: flex; flex-direction: row; justify-content: center; align-self: center; }
.modal-body { width: 100%; height: 100%; }
.modal-header { display: flex; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; margin-bottom: 30px; width: 100%; }
.component-rendering-main { display: flex; justify-content: space-around; width: 100%; }
.login-main { display: flex; width: 100%; flex-direction: column; align-items: center; }
.register-main { display: flex; width: 100%; flex-direction: column; align-items: center; }
.text-field { margin-bottom: 28px; width: 100%; height: 20px; padding-left: 5px; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom-color: #4bd015; border-bottom-width: 0.5px; outline: none; }
.form-btn { width: 100%; height: 30px; cursor: pointer; background-color: #4bd015; }
.login-Btn { cursor: pointer; width: 50%; display: flex; flex-direction: row; justify-content: center; }
.register-Btn { cursor: pointer; width: 50%; display: flex; flex-direction: row; justify-content: center; }
.login-Btn:hover { border-bottom: 1px solid #4bd015; }
.register-Btn:hover { border-bottom: 1px solid #4bd015; }
.forgot-Pass { align-self: flex-start; color: #4bd015; font-size: 14px; cursor: pointer; }
.passwords { display: flex; flex-direction: row; width: 100%; }
.logo { width: 280px; }
.header-logo { display: flex; flex-direction: row; justify-content: center; align-items: center; }
.alert { color: red; }
.login-with-connectdex-btn {
}