pplanel/index1.htm

## index1.htm
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1">
    <title>Card</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/card.css">

    <style>
        .demo-container {
            width: 100%;
            max-width: 350px;
            margin: 50px auto;
        }
        form {
            margin: 30px;
        }
        input {
            width: 200px;
            margin: 10px auto;
            display: block;
        }
    </style>
</head>

<body>
    <div class="demo-container">
        <div class="card-wrapper"></div>

        <div class="form-container active">
            <form id="cardForm" action="/" method="post">
                <input placeholder="Card number" type="tel" name="number" >
                <input placeholder="Full name" type="text" name="name">
                <input placeholder="MM/YY" type="tel" name="expiry">
                <input placeholder="CVC" type="number" name="cvc">
                <input type="submit" value="Enviar">
            </form>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/card.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tweetnacl/1.0.0/nacl-fast.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tweetnacl-util@0.15.0/nacl-util.min.js"></script>
     <script>
         var card;
         document.addEventListener("DOMContentLoaded", e => {
            var public_key = nacl.util.decodeBase64("{{ public_key }}");
            var form = document.querySelector("form#cardForm");
            card = new Card({
                form: form,
                container: '.card-wrapper'
            });

            let create_form_object = () => {
                let cardObject = [];
                let inputs = Array.from(form.children);
                inputs.forEach(value => {
                    cardObject.push({
                        "name":value.name,
                        "value":value.value
                    });
                });
                return JSON.stringify(cardObject);
            };

            let encrypt_card = card_info => {
                let keys = nacl.box.keyPair();
                let nonce = nacl.randomBytes(nacl.box.nonceLength);
                let message = nacl.box(Uint8Array.from(card_info), nonce, public_key, keys.secretKey)
                return [message, keys.publicKey, nonce];
            };

            form.addEventListener("submit", e => {
                output = encrypt_card(create_form_object());

                let hiddenInput3 = document.createElement("input");
                hiddenInput3.name = "client_nonce";
                hiddenInput3.type = "hidden"
                hiddenInput3.value = output[2];

                form.appendChild(hiddenInput3);

                let hiddenInput2 = document.createElement("input");
                hiddenInput2.name = "client_public_key";
                hiddenInput2.type = "hidden"
                hiddenInput2.value = output[1];

                form.appendChild(hiddenInput2);

                let hiddenInput = document.createElement("input");
                hiddenInput.name = "box";
                hiddenInput.type = "hidden"
                hiddenInput.value = output[0];

                form.appendChild(hiddenInput);
                return true;
                e.preventDefault();
            })

         });
    </script>
</body>

</html>

## server1.py
from flask import (
    Flask,
    render_template,
    request,
    session
)
from nacl.encoding import HexEncoder
from nacl.exceptions import CryptoError
from nacl.public import (
    PrivateKey,
    PublicKey,
    Box
)
from nacl.encoding import Base64Encoder
from json import dumps

app = Flask(__name__)
app.secret_key = b'afhaoishfaoifhgap98evoaejgh'

@app.route('/')
def index():
    server_keys = PrivateKey.generate()
    session['private_key'] = server_keys.encode(HexEncoder)
    return render_template("index.htm", public_key=server_keys.public_key.encode(encoder=Base64Encoder).decode('utf-8'))

@app.route('/', methods=["POST"])
def view_unencrypted():
    private_key = PrivateKey(session['private_key'], HexEncoder)
    raw_public_key = bytes(list(map(int, request.form['client_public_key'].split(','))))
    client_public_key = PublicKey(raw_public_key)

    raw_client_nonce = request.form['client_nonce'].split(',')
    client_nonce = bytes(list(map(int, raw_client_nonce)))

    box = Box(private_key, client_public_key)
    content = bytes(list(map(int, request.form['box'].split(","))))

    try:
        decrypted = box.decrypt(content, client_nonce)
        message = dumps(decrypted.decode('utf-8'))
    except CryptoError as c:
        return str(c)

    return "Message was {}".format(message)
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1">
	<title>Card</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/card.css">

	<style>
	.demo-container {
	width: 100%;
	max-width: 350px;
	margin: 50px auto;
	}
	form {
	margin: 30px;
	}
	input {
	width: 200px;
	margin: 10px auto;
	display: block;
	}
	</style>
	</head>

	<body>
	<div class="demo-container">
	<div class="card-wrapper"></div>

	<div class="form-container active">
	<form id="cardForm" action="/" method="post">
	<input placeholder="Card number" type="tel" name="number" >
	<input placeholder="Full name" type="text" name="name">
	<input placeholder="MM/YY" type="tel" name="expiry">
	<input placeholder="CVC" type="number" name="cvc">
	<input type="submit" value="Enviar">
	</form>
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/card.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tweetnacl/1.0.0/nacl-fast.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/tweetnacl-util@0.15.0/nacl-util.min.js"></script>
	<script>
	var card;
	document.addEventListener("DOMContentLoaded", e => {
	var public_key = nacl.util.decodeBase64("{{ public_key }}");
	var form = document.querySelector("form#cardForm");
	card = new Card({
	form: form,
	container: '.card-wrapper'
	});

	let create_form_object = () => {
	let cardObject = [];
	let inputs = Array.from(form.children);
	inputs.forEach(value => {
	cardObject.push({
	"name":value.name,
	"value":value.value
	});
	});
	return JSON.stringify(cardObject);
	};

	let encrypt_card = card_info => {
	let keys = nacl.box.keyPair();
	let nonce = nacl.randomBytes(nacl.box.nonceLength);
	let message = nacl.box(Uint8Array.from(card_info), nonce, public_key, keys.secretKey)
	return [message, keys.publicKey, nonce];
	};

	form.addEventListener("submit", e => {
	output = encrypt_card(create_form_object());

	let hiddenInput3 = document.createElement("input");
	hiddenInput3.name = "client_nonce";
	hiddenInput3.type = "hidden"
	hiddenInput3.value = output[2];

	form.appendChild(hiddenInput3);

	let hiddenInput2 = document.createElement("input");
	hiddenInput2.name = "client_public_key";
	hiddenInput2.type = "hidden"
	hiddenInput2.value = output[1];

	form.appendChild(hiddenInput2);

	let hiddenInput = document.createElement("input");
	hiddenInput.name = "box";
	hiddenInput.type = "hidden"
	hiddenInput.value = output[0];

	form.appendChild(hiddenInput);
	return true;
	e.preventDefault();
	})

	});
	</script>
	</body>

	</html>
	from flask import (
	Flask,
	render_template,
	request,
	session
	)
	from nacl.encoding import HexEncoder
	from nacl.exceptions import CryptoError
	from nacl.public import (
	PrivateKey,
	PublicKey,
	Box
	)
	from nacl.encoding import Base64Encoder
	from json import dumps

	app = Flask(__name__)
	app.secret_key = b'afhaoishfaoifhgap98evoaejgh'

	@app.route('/')
	def index():
	server_keys = PrivateKey.generate()
	session['private_key'] = server_keys.encode(HexEncoder)
	return render_template("index.htm", public_key=server_keys.public_key.encode(encoder=Base64Encoder).decode('utf-8'))

	@app.route('/', methods=["POST"])
	def view_unencrypted():
	private_key = PrivateKey(session['private_key'], HexEncoder)
	raw_public_key = bytes(list(map(int, request.form['client_public_key'].split(','))))
	client_public_key = PublicKey(raw_public_key)

	raw_client_nonce = request.form['client_nonce'].split(',')
	client_nonce = bytes(list(map(int, raw_client_nonce)))

	box = Box(private_key, client_public_key)
	content = bytes(list(map(int, request.form['box'].split(","))))

	try:
	decrypted = box.decrypt(content, client_nonce)
	message = dumps(decrypted.decode('utf-8'))
	except CryptoError as c:
	return str(c)

	return "Message was {}".format(message)