Padloq

Getting started with Padloq is easy. Head over to https://ui.padloq.io to create an account and start managing your applications, providers, and much more. Below will provide more information on how to get started integrating Padloq with your applications.

Padloq is currently available in two javascript versions today:

• React
• Standard Javascript

Please note, all versions require the Padloq CSS library <link href="https://assets.padloq.io/padloq.min.css" rel="stylesheet" type="text/css"> — more css notes are listed at the bottom of this README.

To use Padloq, there are currently two implementations available:

React

To get started with the React Javascript integration for Padloq, use the following steps:

1. Install the Padloq React library npm package in your application.

   npm install padloq --save

2. Import Padloq to your application code:

   import { Auth } from "padloq"

3. Include the following in your application code/view:

           var auth = new Auth({
               clientId : 'YOUR_CLIENT_ID_HERE',
               config : {
                 'logo' : '/path_to_image/image_filename',
                 'title' : 'Your Application Title',
                 'redirect' : '/path_to_landing_page',
                 'disable_close': false,
                 'disable_overlay': false
               }
             })
   

4. Update configuration variables specific to your application.

   logo — replace this path and image with file extension to display your application logo. The Padloq logo will be used if no logo is specified.

   title — replace this text with your desired application or title text.

   redirect — if you want users to be redirected to a specific path on successful login, specify that here.

   disable_close — set to true, to enable users to close login window.

   disable_overlay — set to true, to disable the background overlay.

   YOUR_CLIENT_ID_HERE — you are required to provide your client ID to enable Padloq with your application.

For more information, visit the Padloq npm page

Javascript

To get started with the standard Javascript integration for Padloq, use the following steps:

1. Include the Padloq javascript library in of your document.

   <script src="https://assets.padloq.io/padloq.min.js"></script>

2. Include the following javascript on your page you want the login form to appear.

       <script>
               var config_ = {
                   'logo' : '/path_to_image/image_filename',
                   'title' : 'Your Application Title',
                   'redirect' : '/path_to_landing_page',
                   'disable_close': false,
                   'disable_overlay': false
               }
   
               new padloq.Auth({ clientId : 'YOUR_CLIENT_ID_HERE', config: config_  }).login().then(function(data){})
       </script>
   

3. Update configuration variables specific to your application.

   logo — replace this path and image with file extension to display your application logo. The Padloq logo will be used if no logo is specified.

   title — replace this text with your desired application or title text.

   redirect — if you want users to be redirected to a specific path on successful login, specify that here.

   disable_close — set to true, to enable users to close login window.

   disable_overlay — set to true, to disable the background overlay.

   YOUR_CLIENT_ID_HERE — you are required to provide your client ID to enable Padloq with your application.

Padloq CSS

Whether using the React version of Padloq, standard Javascript, or any future versions — all integrations require the Padloq CSS library.

Include the Padloq CSS library in of your document.

<link href="https://assets.padloq.io/padloq.min.css" rel="stylesheet" type="text/css">

Overwriting Padloq CSS

Padloq occupies the reserved namespace .padloq-login.

The following are primary class names for those who want to overwrite them for your application purposes:

.padloq-login { } // Global namespace

.padloq-login .login {} // login window
.padloq-login .submit-btn {} // submit styles
.padloq-login .padloq-header {  } // login window header
.padloq-login .padloq-footer {  } // login window footer
.padloq-close-login {  } // close login button (if applicable)

Having issues? Let us know at [e-mail]