Client side script

Cymatic client side script

Load

<script src="https://sdk.cymatic.i0/<company_id>/<site_id>/sdk"></script>

Configuration

Options

• rtp : Object representing real time settings
• • timeout : timeout to dispatch init callback default 3500 milliseconds.
• • buffer : in case service is not reachable this is the limit of events script will hold in memory before giving up default 1500 events.

CymaticXid.config([Config Object]);

Example

let config = {
  rtp : { timeout : 2000 } // Give up after 2 seconds.
};

CymaticXid.config(config);

Initialization

The script supports shadow DOM selection with /, the #shadow-root needs to be open.

Given HTML as

<div class="content-holder">
 #shadow-root (open)
    <div class="form-holder">
      #shadow-root (open)
        <form id="login>
          <div class="username-holder">
            #shadow-root (open)
              <input type="email"></input>
          </div>
          
          <div class="password-holder">
            #shadow-root (open)
              <input type="password"></input>
          </div>
        </form>
    </div>
</div>

Selectors would look like

let formSelector = ".content-holder/.form-holder/#login";
let usernameSelector = ".content-holder/.form-holder/.username-holder/input[type=email]";
let passwordSelector = ".content-holder/.form-holder/.password-holder/input[type=password]";

V2

Options

• LoginForm : Object Representing Login Form
• • label : Login Form key label
• • • selector : Form DOM Element Selector
• • • username : Username DOM Element selector
• • • password : Password DOM Element selector
• • • submit : Submit button DOM Element selector
• Callback : callback function

CymaticXid.v2.init([LoginForm Object], [callback Function]);

Example Given a login form

 <form id="login" >
   <input class="username" />
   <input type="password"/>
   <button type="submit">Login</button>
 </form>

CymaticXid.v2.init({
    login : {
        selector : '#login',
        username : '#login .username',
        password : '#login [type=password]',
        submit   : '#login button[type=submit]'
    }
}, function(error, sdk){
 // code here
});

V1

Options

• LoginForm : Object Representing Login Form
• • label : Login Form key label
• • • ID : Form ID
• Callback : callback function

CymaticXid.init([LoginForm Object], [callback Function]);

Example Given a login form , make sure to set the correct DOM attributes

• Id on form
• cy-user
• type=password
• cy-submit
• cy-token

 <form id="My-Login-ID">
   <input cy-user />
   <input type="password"/>
   <button cy-submit type="submit">Login</button>
   <input type="hidden" cy-token></input>
 </form>

CymaticXid.init({ login : 'My-Login-ID'}, function(error, sdk){
 // code here
});

sdk.PasswordField

Provide security details on a password field

Options

• src : Password DOM Element selector
• validate [optional] : function to calculate isValid , by default will be true if password has no security threats.
• debounce [optional] : Number used to wait for user to stop typing, default is 500 milliseconds

Example

<input type="password" />

 let element = document.querySelector('input[type=password]');
 
 CymaticXid.init(function(error, sdk){
     let password = new sdk.PasswordField({ src : element });
 });

Result

requirements

• "repeated" : password contains repeated strign as "111" , "aaa"
• "sequential" : password continas sequential string as "123", "abc"
• "minLength" : password contains required min length
• "minUppercase" : password conatins required upper case length
• "minLowercase" : password conatins required lower case length
• "minNumbers" : password conatins required number length
• "minSymbols" : password conatins required sybmbol length

Strength Codes

• 0 : veryStrong
• 1 : Strong
• 2 : Acceptable
• 3 : weak
• 4 : veryWeak

Details

{ 
    strength : 0 ,  // strength code 0 - 4
    specs : {}   ,  // map of requirements as <requirement> : Boolean 
    failed : []  ,  // list of failed requirements 
    performance : {
        darkweb    : 0 // milliseconds tooked to bring this data from realtime engine
        dictionary : 0 // milliseconds tooked to bring this data from realtime engine
    }
}

current

Promise that will return current password field details

 let element = document.querySelector('input[type=password]');
  
 CymaticXid.init(function(error, sdk){
     let password = new sdk.PasswordField({ src : element });
     
     password.current().then( details =>{
       // your code
     } , error =>{
       // your code 
     });
 });

.on('data')

Gets trigger while the user is typing

 let element = document.querySelector('input[type=password]');
  
 CymaticXid.init(function(error, sdk){
     let password = new sdk.PasswordField({ src : element });
     
     password.on('data', event => {
         // your code : event.detail
     });
 });

.on('validate')

Gets trigger while user is typing , will provide a boolean indicating if password meets all security requirements, you can provide a custom function for this event ( see options )

 let element = document.querySelector('input[type=password]');
  
 CymaticXid.init(function(error, sdk){
     let password = new sdk.PasswordField({ src : element });
     
     password.on('validate', event => {
         // your code : event.detail.isValid
     });
 });

.on('empty')

Gets triger when input field is empty

 let element = document.querySelector('input[type=password]');
  
 CymaticXid.init(function(error, sdk){
     let password = new sdk.PasswordField({ src : element });
     
     password.on('empty', event => {
         // your code
     });
 });

.on('error')

Gets trigger if something goes wrong

 let element = document.querySelector('input[type=password]');
  
 CymaticXid.init(function(error, sdk){
     let password = new sdk.PasswordField({ src : element });
     
     password.on('error', event => {
         // your code
     });
 });