reactjs-volkeno-authify

Volkeno authentication gives you the possibility of integrating the classic authentication system in a few clicks, while making it easier for you to adapt the forms provided, to each of your React JS projects.

Install

npm install --save reactjs-volkeno-authify

Below you will find the documentation to handle the login form so as to modify the style, the text as well as the icon.

What should be remembered is that everything is easily customizable in this library. You will find all the necessary props to adapt this form to your design.

Login Usage

First step: Import the component with css file:

import { AuthLogin } from 'reactjs-volkeno-authify';
import 'reactjs-volkeno-authify/dist/index.css';

Second step: Use the connection component to have the login form

const App = () => {
  return (
    <AuthLogin
      emailName={ 'email' }
      passwordName={ 'password' }
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'login/'}
      keyToken={ 'tokenName' }
      onSuccessLogin={ onSuccessLogin }
      onFailLogin={ onFailLogin }
    />
  )
}

export default App

Registration Usage

First step: Import the component:

import { AuthRegister } from 'reactjs-volkeno-authify';

Second step: Use the registration component to have the register form

const App = () => {
  return (
    <AuthRegister 
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'register/'}
      onSuccessRegister={ onSuccessRegister }
      onFailRegister={ onFailRegister }
      useLogo
      usePhone
      useAddress
    />
  )
}

export default App

Using password recovery

First step: Import the component:

import { AuthRequestResetPassword } from 'reactjs-volkeno-authify';

Second step: Use The password recovery component to get the affected form.

const App = () => {
  return (
    <AuthRequestResetPassword
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'requestResetPassword/'}
      onSuccessRequestPassword={ onSuccessRequestPassword }
      onFailRequestPassword={ onFailRequestPassword }
      emailName={ 'email' }
    />
  )
}

export default App

Using Reset Password

First step: Import the component:

import { AuthResetPassword } from 'reactjs-volkeno-authify'

Second step: Use The reset password component to get the affected form.

const App = () => {
  return (
    <AuthResetPassword
      setApiBase={'http://127.0.0.1/api/'}
      setEndpoint={'changePassword/'}
      onSuccessResetPassword={ onSuccessResetPassword }
      onFailResetPassword={ onFailResetPassword }
      passwordName={ 'password' }
      confirmPasswordName={ 'password_confirm' }
    />
  )
}

export default App

Configuration - Props

Props require

| Property | Type | Default | Description | | ------------------------ | :------: | :-----: | ---------------------------------------------------------------------------------------- | | useLogo | boolean | true | Activate the logo on the form. | | useFullName | boolean | true | Use the fullname field instead of the first name and last name fields | | usePhone | boolean | true | Use the phone field (only in the registration form) | | useAddress | boolean | true | Use the address field (only in the registration form) | | useResetCode | boolean | true | Use a code field instead of using password validation (only in the password reset form) | | logoFormSrc | string | - | Use this parameter to enter the url of the logo to display. | | firstnameName | string | - | Use this parameter to enter the name of the firstnameName input | | lastnameName | string | - | Use this parameter to enter the name of the lastnameName input | | fullnameName | string | - | Use this parameter to enter the name of the fullnameName input | | phoneName | string | - | Use this parameter to enter the name of the phoneName input | | addressName | string | - | Use this parameter to enter the name of the addressName input | | emailName | string | - | Use this parameter to enter the name of the email input. | | passwordName | string | - | Use this parameter to enter the name of the password input. | | confirmPasswordName | string | - | Use this parameter to enter the name of the confirmPasswordName input. | | resetCodeName | string | - | Use this parameter to enter the name of the resetCodeName input. | | setApiBase | url | - | Use this parameter to enter the basic API of the application. | | setEndpoint | url | - | Use this parameter to enter the endpoint of the relevant request. | | onSuccessRegister | function | void | Use this method to do the actions if the register is successful. | | onFailRegister | function | void | Use this method to do the actions if the register failed. | | onSuccessLogin | function | void | Use this method to do the actions if the connection is successful. | | onFailLogin | function | void | Use this method to do the actions if the connection failed. | | onSuccessRequestPassword | function | void | Use this method to do the actions if the request password is successful. | | onFailRequestPassword | function | void | Use this method to do the actions if the request password failed. | | onSuccessResetPassword | function | void | Use this method to do the actions if the reset password is successful. | | onFailResetPassword | function | void | Use this method to do the actions if the reset password failed. | | toastSuccessText | string | - | Enter here the message of the connection success alert. | | toastErrorText | string | - | Enter here the message of the connection failure alert. | | keyToken | string | - | enter the name of the token that will be stored in the sessionStorage. the default name is (userToken). |

To change texts and icons

Find Feather Icons here https://feathericons.com/

| Property | Type | Default | Description | | -------------------------------- | :------: | :-----: | ------------------------------------------------------------------------------- | | titleTextLabel | string | - | Change the title of the form. | | resetPwdTextLabel | string | - | Change the forgotten password label. | | resetPwdUrl | string | - | The css class of the forgotten password label. | | btnPrimaryTextLabel | string | - | Change the text of the submit button. | | btnPrimaryProgressTextLabel | string | - | Change the text of the submit button in progress. | | footerTextLabel | string | - | Change the text of the footer of the form. | | footerLinkTextLabel | string | - | Change the text of the form footer link. | | footerLinkUrl | url | / | To fill in the redirection url of the link at the bottom of the form. | | fullNamePlaceholder | string | - | Change the text of the fullname placeholder. | | iconfullNamePlaceholder | string | - | Change the icon of the fullname input. | | firstNamePlaceholder | string | - | Change the text of the first name placeholder. | | iconFirstNamePlaceholder | string | - | Change the icon of the first name input. | | lastNamePlaceholder | string | - | Change the text of the last name placeholder. | | iconLastNamePlaceholder | string | - | Change the icon of the last name input. | | addressPlaceholder | string | - | Change the text of the address placeholder. | | iconAddressPlaceholder | string | - | Change the icon of the address input. | | phonePlaceholder | string | - | Change the text of the phone placeholder. | | iconPhonePlaceholder | string | - | Change the icon of the phone input. | | mailPlaceholder | string | - | Change the text of the email placeholder. | | iconMailPlaceholder | string | - | Change the icon of the email input. | | passwordPlaceholder | string | - | Change the text of the password placeholder. | | iconPasswordPlaceholder | string | - | Change the icon of the password input. | | confirmPasswordPlaceholder | string | - | Change the text of the confirm password placeholder. | | iconConfirmPasswordPlaceholder | string | - | Change the icon of the confirm password input. | | resetCodePlaceholder | string | - | Change the text of the reset code placeholder. | | iconResetCodePlaceholder | string | - | Change the icon of the reset code input. | | emailRequiredTextError | string | - | Change the error message to the required email. | | emailValidTextError | string | - | Change the error message to the validation email | | passwordRequiredTextError | string | - | Change the error message to the required password. | | confirmPasswordRequiredTextError | string | - | Change the error message to the required confirm password | | confirmPasswordSameTextError | string | - | Change the password validation error message | | fullnameRequiredTextError | string | - | Change the error message to the required fullname | | fullnameValidTextError | string | - | Change the error message to the validation fullname | | firstnameRequiredTextError | string | - | Change the error message to the required first name | | firstnameValidTextError | string | - | Change the error message to the validation first name | | lastnameRequiredTextError | string | - | Change the error message to the required last name | | lastnameValidTextError | string | - | Change the error message to the validation last name | | phoneRequiredTextError | string | - | Change the error message to the required phone | | addressRequiredTextError | string | - | Change the error message to the required address | | resetCodeRequiredTextError | string | - | Change the error message to the required reset code |

Customize the style of the form and its components

| Property | Type | Default | Description | | ------------------------- | :------: | :-----: | ------------------------------------------------------------------------------- | | formContainerClassName | string | - | Customize the form container. | | formClassName | string | - | Customize the form. | | logoFormClassName | string | - | Change logo properties. | | titleFormClassName | string | - | Change title properties. | | inputFormClassName | string | - | Customize email and password inputs. | | iconInputFormClassName | string | - | Customize email and password icons. | | btnPrimaryFormClassName | string | - | Change login button properties. | | footerTextFormClassName | string | - | Change the properties of the text at the bottom of the form. | | footerLinkFormClassName | string | - | Change the properties of the link at the bottom of the form. | | toastTextClassName | string | - | Stylize the text of the toast. |

License

MIT © volkeno-dev