Power password using HTML CSS Javascript

Khái quát

Khi chúng ta tạo tài khoản ở những trang web như google hay một vài trang web khác chúng ta sẽ dể dàng nhận thấy rằng nó có một chức năng đó là kiểm tra độ bảo mật của mật khẩu, đôi lúc có những trang chỉ đơn giản là cho chúng ta biết độ bảo mật vậy thôi nhưng củng sẽ có rất nhiều trang yêu cầu buộc chúng ta phải đổi mật khẩu và chọn một mật khẩu khó hơn, bảo mật cao hơn.

Vậy trong bài viết này cùng mình xem thử cách tạo ra chức năng power password với HTML CSS và Javascript có khó không nhé.

Quy tắc đánh giá Power password

Để có thể đánh giá được độ bảo mật của power password thường gồm rất nhiều yếu tố, có thể kể đến như sau:

Độ dài tối thiểu của password.
Password có số.
Password có chử cái viết thường.
Password có chử cái viết hoa.
Password có chử cái viết thường.

Và theo từng yếu tố thì sẽ được cộng thêm một điểm bảo mật vào Power password từ đó đánh giá độ bảo mật của Power password theo thang điểm.

Logic Power password using HTML CSS Javascript

Việc đầu tiên và tiên quyết cần làm trong Power password using HTML CSS Javascript đó là chúng ta cần phải bắt được sự kiện người dùng đang nhập password, sau đó mới tiến hành kiểm tra và đánh giá số điểm bảo mật cho power password.

Tuy nhiên nếu kiểm tra thấy rằng password hiện tại không hề đủ số kí tự tối thiểu mà một password cần có ( ví dụ tối thiểu sáu kí tự) thì chúng ta đánh giá Power password bằng không luôn.

Còn nếu đủ số kí tự tối thiểu ta tiếp tục đi kiểm tra dựa theo các yếu tố được liệt kê ở Quy tắc đánh giá Power password và tương ứng với mỗi yếu tố được đáp ứng sẽ cộng thêm một điểm vào power password.

Tiến hành code Power password using HTML CSS Javascript

Trước tiên hảy cùng nhau tạo ra một design với HTML và CSS để phục vụ cho chức năng này nhé.

 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="group">
            <label for="">Password</label>
            <input type="text" id="password">
            <label for="">Power password</label>
            <div class="power-container">
                <div id="power-point"></div>
            </div>
        </div>

        <script src="script.js"></script>
    </body>
    </html>

 
    body{
        margin: 0;
        font-family: monospace;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(
            to top right,
            #27546A, #57585A
        );
        color:#72D2CB;
        font-size: 20px;
    }
    .group{
        width:300px;
    }
    .group label{
        display: block;
        padding:20px 0;
    }
    .group input{
        border:none;
        outline: none;
        padding:20px;
        width:calc(100% - 40px);
        border-radius: 10px;
        background-color: #2E424D;
        color:#72D2CB;
        font-size: 20px;
    }
    .group .power-container{
        background-color: #2E424D;
        width:100%;
        height:15px;
        border-radius: 5px;
    }
    .group .power-container #power-point{
        background-color: #D73F40;
        width:1%;
        height: 100%;
        border-radius: 5px;
        transition: 0.5s;
    }

Giờ thì bắt tay vào tiến hành sử lí logic cho chức nawng Power password using HTML CSS Javascript nào. Đầu tiên gọi lại các phần tử mà chúng ta sẽ làm việc với javascript.

 
    let password = document.getElementById('password');
    let power = document.getElementById('power-point');

Để bắt sự kiện người dùng đang nhập password ta sẽ sử dụng oninput trong javascript, đồng thời khởi tạo một biến point dùng để đại diện cho số điểm bảo mật của power password.

 
    password.oninput = function(){
        let power = 0;
        //    
        }

Chúng ta sẽ chỉ tiếp túc kiểm tra nếu chiều dài tối thiểu của password bằng sáu.

 
    let value = password.value;
    if(value.length >= 6){
       
    }

Nếu chiều dài hiện tại nhỏ hơn sáu ta dùng luôn với số điểm hiện tại tuy nhiên nếu đủ điều kiện ta tiếp tục tiếng hành kiểm tra các điều kiện sau và nếu điều kiện nào đủ thì số điểm bảo mật cho power password được thêm một điểm.

 
    // kiểm tra phải số không 
    if(/[0-9]/.test(value)){
        point += 1;
    }
    // kiểm tra phải chử cái viết thường không
    if(/[a-z]/.test(value)){
        point += 1;
    }
    // kiểm tra phải chử cái viết hoa không
    if(/[A-Z]/.test(value)){
        point += 1;
    }
    // kiểm tra có chứa kí tự đặt biệt không
    // kiểm tra phải chử cái viết thường không
    if(/[^0-9a-zA-Z]/.test(value)){
        point += 1;
    }

Nếu để í các câu điều kiện để kiểm tra Power password using HTML CSS Javascript trên đều có rất nhiều điểm chung: đều dùng để kiểm tra value của password, đều sẽ tăng thêm một điểm cho point nếu đạt điều kiện. Vậy thay vì viết như trên ta tạo ra một mảng để gom lại hết các yêu cầu như sau:

 
    let arrayTest = [
    /[0-9]/,
    /[a-z]/,
    /[A-Z]/,
    /[^0-9a-zA-Z]/
];
arrayTest.forEach(item => {
    if(item.test(value)){
        point += 1;
    }
});

Kết quả mang lại giửa hai cách viết trên là hoàn toàn như nhau tuy nhiên với cách hai đã ngắn gọn hơn rất nhiều và trông code rất đẹp. Sau cùng ta sử dụng số điểm của power password để đối chiếu vào thanh power-point bên HTML CSS để có thể biểu diển được số điểm tương ứng.

 
    let widthPower = ['1%', '25%', '50%', '75%', '100%'];
    let colorPower = ['#D73F40', '#DC6551', '#F2B84F', '#BDE952', '#30CEC7'];
    power.style.width = widthPower[point];
    power.style.backgroundColor = colorPower[point];