Meraké Lab CDN services list

Stepper

Simple multistep handling library

@author Matteo Di Federico

@stack CSS, JavaScript

@category Front-end, Multistep


Dependency

Usage

Import from Meraké Lab CDN:

<!-- Import Stepper from CDN -->
<link href="https://cdn.merake.net/frontend/stepper/css/stepper.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.merake.net/frontend/stepper/js/stepper.js" crossorigin="anonymous"></script>

Insert the header tag in the place on the page where you want it to appear (optional)

<!-- Use stepper Header (facultative) -->
<stepperHeader></stepperHeader>

Set the structure of the steps by inserting your content in the proposed structure, remember to use the stepper-step and stepper-step-n classes

<div class="col-12">
    <!-- Write steps use class stepper-step and stepper-step-n -->
    <div class="card stepper-step stepper-step-1">
        <!-- create your custom html content and use Stepper.BakFrom(n) and Stepper.NextFrom(n) onclick from jump to another step -->
        ... step 1 your content ...
        <button class="btn btn-warning" onclick="Stepper.BackFrom(1)">Previous</button> <button class="btn btn-success" onclick="Stepper.NextFrom(1)">Next</button>
    </div>
    <div class="card stepper-step stepper-step-2">
        ... step 2 your content ...
        <button class="btn btn-warning" onclick="Stepper.BackFrom(2)">Previous</button> <button class="btn btn-success" onclick="Stepper.NextFrom(2)">Next</button>
    </div>
    <div class="card stepper-step stepper-step-3">
        ... step 3 your content ...
        s<button class="btn btn-warning" onclick="Stepper.BackFrom(3)">Previous</button> <button class="btn btn-success" onclick="Stepper.NextFrom(3)">Next</button>
    </div>
</div>

Initialize the multistep with this script in the page footer

<!-- Initialize stepper from this script -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        Stepper.Initialize();
    });
</script>

Live Demo

Virgilius

Asinc authentication system with browser fingerprinting

@author Matteo Di Federico

@stack JavaScript

@category Front-end, Authentication


Dependency

Usage

Import from Meraké Lab CDN:

<!-- Import Stepper from CDN -->
<script src="https://cdn.merake.net/frontend/virgilius/js/virgilius.js" crossorigin="anonymous"></script>

Initialize the login method on the click of the form

<!-- Login form -->
<form action="#" method="post">
    <input type="email" name="email" value="test@test.com">
    <input type="password" name="password" value="test">
    <input type="text" style="display: none;" name="hp" value="">
    <input type="button" onclick="Virgilius.Login(false, 'localhost/kerberos-identity/controller.php', 'login', 'email', 'password', 'hp', 'message')" value="Login">
    <div class="message"></div>
</form>
<!-- Login method parameters -->
/**
     * Login
     * @param {bool} hasEncryption http request make by encrypted protocol (https) or not
     * @param {string} actionUrl URL to send request
     * @param {string} actionName request name
     * @param {string} emailName user email (input name)
     * @param {string} passwordName user password (input name)
     * @param {string} hpName honeypot field (input name)
     * @param {string} messageBoxClassName message box class
     * @returns {void}
    */

From the controller return a response with this form

<!-- Controller response object (REST) -->
{
    "response": "success", (or "failed")
    "message": "Login success", (set the message you want show in login message box)
    "redirectUrl": "https://merake.net" (URL where you want to direct the user after login)
}

Live Demo