hansenms/signup.html

## signup.html
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">

    <script language="JavaScript">
        function processForm(e) {

            if (e.preventDefault) e.preventDefault();

            var alertDiv = document.getElementById("feedback");

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://prod-28.eastus.logic.azure.com:443/workflows/XXXXXXX/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=XXXXXXXXX", true);
            xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            xhr.timeout = 10000;
            xhr.onload = function (e) {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alertDiv.innerHTML = 'Please check your email for an invitation.';
                        alertDiv.className  = 'alert alert-success';
                        alertDiv.style.visibility = 'visible';
                    } else {
                        alertDiv.innerHTML = 'An Error occurred (' + xhr.status.toString() + '). Please check that your token is valid.';
                        alertDiv.className  = 'alert alert-danger';
                        alertDiv.style.visibility = 'visible';
                    }
                }
            };

            xhr.ontimeout = function (e) {
                alertDiv.innerHTML = 'The request to server timed out. Please try again later.';
                alertDiv.className  = 'alert alert-danger';
                alertDiv.style.visibility = 'visible';
            };

            xhr.onerror = function (e) {
                alertDiv.innerHTML = 'An error occurred while contacting server.';
                alertDiv.className  = 'alert alert-danger';
                alertDiv.style.visibility = 'visible';
            };

            var item = {
                    firstName: document.getElementById("firstName").value,
                    lastName: document.getElementById("lastName").value,
                    emailAddress: document.getElementById("emailAddress").value,
                    signupToken: document.getElementById("signupToken").value,
                    emailUpdate: document.getElementById("emailUpdateCheck").value == "on" ? true : false
            };

            alertDiv.innerHTML = 'Processing request....';
            alertDiv.className  = 'alert alert-light';
            alertDiv.style.visibility = 'visible';

            xhr.send(JSON.stringify(item));

            return false;
        }

        function attachEvents() {
            var form = document.getElementById('signup-form');

            if (form.attachEvent) {
                form.attachEvent("submit", processForm);
            } else {
                form.addEventListener("submit", processForm);
            }
        }
    </script>

    <title>Contoso - Sign Up</title>
</head>

<body onLoad="attachEvents();">
    <main role="main" class="container">

        <div class="starter-template">
            <h1>Contoso Organization Sign Up</h1>
            <p class="lead">Request a user account for the Contoso Organization.</p>

            <form id="signup-form">
                <div class="form-group">
                    <label for="firstName">First name</label>
                    <input type="text" class="form-control" id="firstName" placeholder="Enter first name">
                </div>
                <div class="form-group">
                        <label for="lastName">Last name</label>
                        <input type="text" class="form-control" id="lastName" placeholder="Enter last name">
                </div>
                <div class="form-group">
                        <label for="emailAddress">Email address</label>
                        <input type="email" class="form-control" id="emailAddress" aria-describedby="emailHelp" placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                        <label for="signupToken">Sign Up Token</label>
                        <input type="text" class="form-control" id="signupToken" aria-describedby="tokenHelp" placeholder="Enter token">
                        <small id="tokenHelp" class="form-text text-muted">If you need a token, contact askfortoken@perspecta.com.</small>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="emailUpdateCheck">
                    <label class="form-check-label" for="emailUpdateCheck">Receive email updates</label>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" id="submit">Submit</button>
                </div>
            </form>
                <div class="alert alert-success" role="alert" id="feedback" style="visibility: hidden;">
                    This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
                </div>
            </div>

    </main>
    <!-- /.container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>

</html>
	<!doctype html>
	<html lang="en">

	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
	crossorigin="anonymous">

	<script language="JavaScript">
	function processForm(e) {

	if (e.preventDefault) e.preventDefault();

	var alertDiv = document.getElementById("feedback");

	var xhr = new XMLHttpRequest();
	xhr.open("POST", "https://prod-28.eastus.logic.azure.com:443/workflows/XXXXXXX/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=XXXXXXXXX", true);
	xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
	xhr.timeout = 10000;
	xhr.onload = function (e) {
	if (xhr.readyState === 4) {
	if (xhr.status === 200) {
	alertDiv.innerHTML = 'Please check your email for an invitation.';
	alertDiv.className = 'alert alert-success';
	alertDiv.style.visibility = 'visible';
	} else {
	alertDiv.innerHTML = 'An Error occurred (' + xhr.status.toString() + '). Please check that your token is valid.';
	alertDiv.className = 'alert alert-danger';
	alertDiv.style.visibility = 'visible';
	}
	}
	};

	xhr.ontimeout = function (e) {
	alertDiv.innerHTML = 'The request to server timed out. Please try again later.';
	alertDiv.className = 'alert alert-danger';
	alertDiv.style.visibility = 'visible';
	};

	xhr.onerror = function (e) {
	alertDiv.innerHTML = 'An error occurred while contacting server.';
	alertDiv.className = 'alert alert-danger';
	alertDiv.style.visibility = 'visible';
	};

	var item = {
	firstName: document.getElementById("firstName").value,
	lastName: document.getElementById("lastName").value,
	emailAddress: document.getElementById("emailAddress").value,
	signupToken: document.getElementById("signupToken").value,
	emailUpdate: document.getElementById("emailUpdateCheck").value == "on" ? true : false
	};

	alertDiv.innerHTML = 'Processing request....';
	alertDiv.className = 'alert alert-light';
	alertDiv.style.visibility = 'visible';

	xhr.send(JSON.stringify(item));

	return false;
	}

	function attachEvents() {
	var form = document.getElementById('signup-form');

	if (form.attachEvent) {
	form.attachEvent("submit", processForm);
	} else {
	form.addEventListener("submit", processForm);
	}
	}
	</script>

	<title>Contoso - Sign Up</title>
	</head>

	<body onLoad="attachEvents();">
	<main role="main" class="container">

	<div class="starter-template">
	<h1>Contoso Organization Sign Up</h1>
	<p class="lead">Request a user account for the Contoso Organization.</p>

	<form id="signup-form">
	<div class="form-group">
	<label for="firstName">First name</label>
	<input type="text" class="form-control" id="firstName" placeholder="Enter first name">
	</div>
	<div class="form-group">
	<label for="lastName">Last name</label>
	<input type="text" class="form-control" id="lastName" placeholder="Enter last name">
	</div>
	<div class="form-group">
	<label for="emailAddress">Email address</label>
	<input type="email" class="form-control" id="emailAddress" aria-describedby="emailHelp" placeholder="Enter email">
	<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
	</div>
	<div class="form-group">
	<label for="signupToken">Sign Up Token</label>
	<input type="text" class="form-control" id="signupToken" aria-describedby="tokenHelp" placeholder="Enter token">
	<small id="tokenHelp" class="form-text text-muted">If you need a token, contact askfortoken@perspecta.com.</small>
	</div>
	<div class="form-group form-check">
	<input type="checkbox" class="form-check-input" id="emailUpdateCheck">
	<label class="form-check-label" for="emailUpdateCheck">Receive email updates</label>
	</div>
	<div class="form-group">
	<button type="submit" class="btn btn-primary" id="submit">Submit</button>
	</div>
	</form>
	<div class="alert alert-success" role="alert" id="feedback" style="visibility: hidden;">
	This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
	</div>
	</div>

	</main>
	<!-- /.container -->

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
	crossorigin="anonymous"></script>
	</body>

	</html>