csrf.php

<?php
session_start();
$page_data = <<<EOT
<div class="page-header">
    <h1>Change Password</h1>
</div>
<div class="row">
    <div class="col-md-12">
        <p>
            <form class="form-inline">
		    Username:
		    <div class="form-group">
		        <input type="text" class="form-control" id="auth_user" name="auth_user" placeholder="Username">
		    </div>
		    Password:
		    <div class="form-group">
		        <input type="password" class="form-control" id="auth_pass" name="auth_pass" placeholder="Password">
		    </div>
            </form><br>
            <button type="submit" class="btn btn-success" id="send">Login</button> <a href='logout.php' class='btn btn-danger btn-md'>Logout</a>
        </p>
        <p id="authresult"></p>
	<hr>
        <p>
            <form class="form-inline">
		    New Password:
		    <div class="form-group">
		        <input type="password" class="form-control" id="npass" name="npass">
		    </div>
		    Confirm Password:
		    <div class="form-group">
		        <input type="password" class="form-control" id="cpass" name="cpass">
		    </div>
            </form><br>
            <button type="submit" class="btn btn-primary" id="change">Change Password</button>
        </p>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <p id="result">
        </p>
    </div>
</div>
EOT;

$page_script= <<<EOT
$(document).ready(function(){
//Open a WS server connection
var wsUri = "ws://dvws.local:8080/authenticate-user-prepared-session";
websocket = new WebSocket(wsUri);

//Connected to WS server
websocket.onopen = function(ev)
{
    console.log('Connected to server');
}

//Close WS server connection
websocket.onclose = function(ev)
{
    console.log('Disconnected from server');
};

//Message received from WS server
websocket.onmessage = function(ev)
{
    console.log('Message: '+ev.data);
    document.getElementById("authresult").innerHTML = ev.data;
};

//Error
websocket.onerror = function(ev)
{
    console.log('Error: '+ev.data);
};

//Send value to WS
$('#send').click(function()
{
    var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
    var username_field_value = Base64.encode(document.getElementById('auth_user').value);
    var password_field_value = Base64.encode(document.getElementById('auth_pass').value);
    var field_value = '{"auth_user":"'+username_field_value+'","auth_pass":"'+password_field_value+'"}';
    console.log(field_value);
    websocket.send(field_value);
});

//Open a WS server connection
var wsUri2 = "ws://dvws.local:8080/change-password";
websocket2 = new WebSocket(wsUri2);

//Connected to WS server
websocket2.onopen = function(ev)
{
    console.log('Connected to server');
}

//Close WS server connection
websocket2.onclose = function(ev)
{
    console.log('Disconnected from server');
};

//Message received from WS server
websocket2.onmessage = function(ev)
{
    console.log('Message: '+ev.data);
    document.getElementById("result").innerHTML = "<pre>" + ev.data + "</pre>";
};

//Error
websocket2.onerror = function(ev)
{
    console.log('Error: '+ev.data);
};

//Send value to WS
$('#change').click(function()
{
    var npass_field_value = document.getElementById('npass').value;
    var cpass_field_value = document.getElementById('cpass').value;
    var field_value = '{"npass":"'+npass_field_value+'","cpass":"'+cpass_field_value+'"}';
    console.log(field_value);
    websocket2.send(field_value);
});
});
EOT;
?>

<?php require_once('includes/template.php'); ?>