setup.html


<!DOCTYPE html>
<html lang="en">
<head>
	<title>Login V19</title>
	<script src="https://npmcdn.com/vue/dist/vue.js"></script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--===============================================================================================-->
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
	<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="css/util.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<!--===============================================================================================-->
	<style type="text/css">
		.idDisplay {
			display: block;
			font-size: 21px;
			color: #555555;
			line-height: 1.2;
			text-align: center;
		}
	</style>

</head>
<body style="background-color: #fff0;">

	<div id="appBase" class="limiter">
		<div class="container-login100" style="background-color: #ffffff00;">
			<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-50">
				<form class="login100-form validate-form">
					<span class="login100-form-title p-b-33">
						OpenPay Setup
					</span>

				<div id="newIDSetup" v-if="!payIDName">
					<div class="wrap-input100 validate-input" data-validate = "Valid OpenPay Name is Required - Minimum 6 characters">
						<input v-model="inputPayIDName" class="input100" type="text" name="openPayName" placeholder="Please choose an OpenPay Name">
						<span class="focus-input100-1"></span>
						<span class="focus-input100-2"></span>
					</div>

					<div class="wrap-input100 rs1 validate-input" data-validate="Minimum 6 characters">
						<input v-model="inputPayIDPass" class="input100" type="password" name="pass" placeholder="Password">
						<span class="focus-input100-1"></span>
						<span class="focus-input100-2"></span>
					</div>

					<div class="container-login100-form-btn m-t-20">
						<button type="button" v-on:click="createNewID" class="login100-form-btn">
							<img v-if="showButtonLoader" src="images/ajax-loader.gif" alt="" style="height:20px; padding-right:20px;">
							<span>Create New ID</span>
						</button>
					</div>
				</div>

				<div id="existingIDSetup"  class="idDisplay" v-if="payIDName">
					<span>Your ID is {{payIDName}}</span><br>
                    <span>Public Currencies:</span>
                    <ul id="availableCurrencyList">
                        <li v-for="cur in availableCurrencies">

							<input type="checkbox"  :value="cur" v-model="checkedCurrencies">
							<label>{{cur}}</label>

                        </li>

                    </ul>
					<div class="container-login100-form-btn m-t-20">
						<button type="button" v-on:click="backToWallet" class="login100-form-btn">
							<img v-if="showButtonLoader" src="images/ajax-loader.gif" alt="" style="height:20px; padding-right:20px;">
							<span>Save</span>
						</button>
					</div>

				</div>

			</form>
		</div>
	</div>
</div>


<script type="text/javascript">

	var currentInput = {
	    payIDName: 'abcdef',
        availableCurrencies: ['BTC', 'ETH', 'TRX', 'EOS'],
		publicAddressCurrencies: ['BTC', 'EOS']
    };

	window.addEventListener('message', function (event) {
            currentInput = data;
            initVue();
	}, false);

	let initVue = function(){
		new Vue({
			el: '#appBase',
			data: function(){
				return {
					...currentInput,
					checkedCurrencies: [],
					showButtonLoader: false
				}
			},
			mounted() {
				console.log("== Mounted setup page ==")
				console.log(currentInput);
				this.checkedCurrencies = [...this.publicAddressCurrencies];
			},
			methods: {
				createNewID: function () {
					this.showButtonLoader = true;
					let registerMessage = {
						type: 'createNew',
						data: {
							newPayIDName: this.inputPayIDName,
							newPayIDPass: this.inputPayIDPass
						}
					};

                    if (currentInput.experience == 'iframe') {
                        window.parent.postMessage(JSON.stringify(registerMessage), '*');
                    } else {
                        window.opener.postMessage(JSON.stringify(registerMessage), '*');
                    }

				},
				backToWallet: function() {
					console.log('===back to wallet==');
					this.showButtonLoader = true;
					console.log(this.checkedCurrencies);
					//if(this.checkedCurrencies === )
					let existingMessange = {
						type: 'editExisting',
						data: {
							checkedCurrencies: this.checkedCurrencies
						}
					};
					window.parent.postMessage(JSON.stringify(existingMessange), '*');
				}
			}
		})
	}
	initVue();
</script>


<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>

</body>
</html>