<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Password meter</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Password meter</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight" ng-controller="passwordMeterCtrl">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Password meter</h5>
                </div>

                <div class="ibox-content">

                    <p class="font-bold">
                        Password Strength Meter for Twitter Bootstrap
                    </p>

                    <p>The jQuery Password Strength Meter is a plugin for Twitter Bootstrap that provides rulesets for visualy displaying the quality of a users typed in password.</p>


                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Basic example </h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container1">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password1">Password</label>
                                    <input type="password" class="form-control" password-meter pw-options="option1" id="password1" placeholder="Password" value="Passwo">
                                </div>
                                <div class="form-group">
                                    <div class="pwstrength_viewport_progress"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                            <pre>
var options1 = {};
options1.ui = {
    container: "#pwd-container",
    showVerdictsInsideProgressBar: true,
    viewports: {
        progress: ".pwstrength_viewport_progress"
    }
};
options1.common = {
    debug: false
};
                            </pre>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Show the password strength as a status in the field </h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container2">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password2">Password</label>
                                    <input type="password" class="form-control" password-meter pw-options="option2" id="password2" placeholder="Password" value="Pass">
                                </div>
                                <div class="form-group">
                                    <div class="pwstrength_viewport_verdict"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                            <pre>
var options2 = {};
options1.ui = {
    container: "#pwd-container2",
    showStatus: true,
    showProgressBar: false,
    viewports: {
        verdict: ".pwstrength_viewport_verdict"
    }
};
                            </pre>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Interact with other inputs  </h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container3">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="username">Username</label>
                                    <input type="text" class="form-control" id="username" placeholder="Username">
                                </div>
                                <div class="form-group">
                                    <label for="password3">Password</label>
                                    <input type="password" class="form-control" password-meter pw-options="option3" id="password3" placeholder="Password">
                                </div>
                                <div class="form-group">
                                    <div class="pwstrength_viewport_progress2"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                            <pre>
var options3 = {};
options3.ui = {
    container: "#pwd-container3",
    showVerdictsInsideProgressBar: true,
    viewports: {
        progress: ".pwstrength_viewport_progress2"
    }
};
options3.common = {
    debug: true,
    usernameField: "#username"
};
                            </pre>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Use zxcvbn to calculate the password strength</h5>
                </div>
                <div class="ibox-content">
                    <form role="form">
                        <div class="row" id="pwd-container4">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="year">Year of birth</label>
                                    <input type="text" class="form-control" id="year" value="2016">
                                </div>
                                <div class="form-group">
                                    <label for="familyname">Family Name</label>
                                    <input type="text" class="form-control" id="familyname" placeholder="Name" value="Tokugawa">
                                </div>
                                <div class="form-group">
                                    <label for="password4">Password</label>
                                    <input type="password" class="form-control" password-meter pw-options="option4" id="password4" placeholder="Password">
                                </div>
                                <div class="form-group">
                                    <span class="font-bold pwstrength_viewport_verdict4"></span>
                                    <span class="pwstrength_viewport_progress4"></span>

                                    <p>The content of the form inputs and the words <em>samurai, shogun, bushido, daisho</em> and <em>seppuku</em> are disrecommended in the password, and the score will adjust properly.</p>
                                </div>
                            </div>
                        </div>
                    </form>
                            <pre>
var options4 = {};
options4.ui = {
    container: "#pwd-container4",
    viewports: {
        progress: ".pwstrength_viewport_progress4",
        verdict: ".pwstrength_viewport_verdict4"
    }
};
options4.common = {
    zxcvbn: true,
    zxcvbnTerms: ['samurai', 'shogun', 'bushido', 'daisho', 'seppuku'],
    userInputs: ['#year', '#familyname']
};
                            </pre>
                </div>
            </div>
        </div>
    </div>
</div>