Skip to content

Instantly share code, notes, and snippets.

@bulbul84

bulbul84/index.html

Created July 25, 2022 13:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bulbul84/b6dbe76e97ffaab76b18ee739e2d0ad6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bulbul84/b6dbe76e97ffaab76b18ee739e2d0ad6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bulbul84 created this gist Jul 25, 2022.
    28 changes: 28 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <div class="row" id="idpassword">
    <div class="col-sm-6">
    <div class="form-group input_fields">
    <input class="form-control" type="password" name="password" id="password" required>
    <p class="show_hide" id="pass1">Show</p>
    <label for="password">Password </label>
    </div>
    </div>
    <div class="col-sm-6">
    <div class="form-group input_fields">
    <input class="form-control" type="password" name="confirmpass" id="confirmpass" required>
    <p class="show_hide" id="pass2">Show</p>
    <label for="confirmpass">Password Confirmation </label>
    </div>
    </div>
    </div>

    <!--- Password requires --->
    <div class="pass_suggession">
    <p><strong>Your password requires the following:</strong></p>
    <ul>
    <!--- add class "done" with each li when the requirement if fulfill --->
    <li id="pwd-restriction-upperlower" name="pwd-restriction-upperlower">One uppercase and lowercase letter</li>
    <li id="pwd-restriction-number" name="pwd-restriction-number">One number</li>
    <li id="pwd-restriction-special" name="pwd-restriction-special">One symbol</li>
    <li id="pwd-restriction-length" name="pwd-restriction-length">At least 8 characters</li>
    </ul>
    </div>
    45 changes: 45 additions & 0 deletions scripts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    $(document).ready(function () {

    $("#password").on("keyup", function (evt) {

    var pwdLength = /(?=.{8,})/;
    var pwdUpper = /[A-Z]+/;
    var pwdLower = /[a-z]+/;
    var pwdNumber = /[0-9]+/;
    var pwdSpecial = /(?=.*[!@#$%^&*])/;

    var s = $('#password').val(); // get the current password value

    if (pwdLength.test(s)) {
    $('#pwd-restriction-length').removeClass("notdone");
    $('#pwd-restriction-length').addClass("done");
    } else {
    $('#pwd-restriction-length').removeClass("done");
    $('#pwd-restriction-length').addClass("notdone");
    }
    if (pwdUpper.test(s) && pwdLower.test(s)) {
    $('#pwd-restriction-upperlower').removeClass("notdone");
    $('#pwd-restriction-upperlower').addClass("done");
    } else {
    $('#pwd-restriction-upperlower').removeClass("done");
    $('#pwd-restriction-upperlower').addClass("notdone");
    }
    if (pwdNumber.test(s)) {
    $('#pwd-restriction-number').removeClass("notdone");
    $('#pwd-restriction-number').addClass("done");
    } else {
    $('#pwd-restriction-number').removeClass("done");
    $('#pwd-restriction-number').addClass("notdone");
    }
    if (pwdSpecial.test(s)) {
    $('#pwd-restriction-special').removeClass("notdone");
    $('#pwd-restriction-special').addClass("done");
    } else {
    $('#pwd-restriction-special').removeClass("done");
    $('#pwd-restriction-special').addClass("notdone");
    }


    });

    });
    51 changes: 51 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@

    /* Password suggession */
    .pass_suggession {
    background-color: #EFF2F5;
    padding: 15px 20px;
    }
    .pass_suggession ul li {
    position: relative;
    padding-left: 30px;
    margin: 0 0 10px;
    }
    .pass_suggession li::before {
    position: absolute;
    left: 0;
    content: "";
    background-color: #C3CCD4;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    }
    .pass_suggession li.done::before {
    background-color: #123456;
    }
    .pass_suggession li::after {
    position: absolute;
    left: 7px;
    top: 3px;
    content: "";
    width: 6px;
    height: 12px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    }
    .pass_suggession li.notdone::before {
    background-color: #FC5569;
    }
    .pass_suggession li.notdone::after {
    position: absolute;
    left: 5px;
    top: 0px;
    content: "\00d7";
    width: 6px;
    height: 12px;
    border-bottom: none;
    border-right: none;
    transform: none;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    }