How to create a Login area for password protected pages?

Hi,
Does anyone know how to create a Login Area for the Password Protected Pages?

For example:

I’m trying to create client area, mysite.com/client-area
so when my clients fo to this page they enter there password and by succefull login to go tho their unique password protected page mysite.com/client-area/client1

I’ve imputed this login code:

[please remeber to mark any posted code – https://codex.www.ads-software.com/Forum_Welcome#Posting_Code ]

<form id="client-login" action="" method="post">
<fieldset><legend>
<h3><strong><span style="font-size: 20px;">Login to client area</span></strong></h3>
</legend>
<label>Password</label>
<input type="password" name="password" required="required" value="" />

<input type="submit" value="Login" /></fieldset>
</form><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// < ![CDATA[
// < ![CDATA[
$(function() {
    $('#client-login').bind('submit',function(event){
        // you need to change this domain to your domain
        $.post('https://ursite.com/wp-login.php?action=postpass',
        $(this).serialize(),
        function(json) {
            if(json.error) {
                alert(json.error.message);
            } else {
                // also you need to redirect your client to your after
                // successfull login
                window.location = 'https://ur-domain.com/';
            }
        }, 'json');
        return false;
    });
});
// ]]></script>

something like this!

But instead of an email address they put their site ID or name etc and the their unique password for the specific password protected page!

Thank you