client/views/new-account.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Banka | New Account</title>
<link rel="icon" type="image/x-icon" href="../assets/img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/css/main.css">
<link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
<style>
select#account-type {
font-size: 16px;
height: 52px;
width: 100%;
}
</style>
</head>
<body>
<div class="nav no-hero">
<nav>
<div id="logo">
<a href="../../index.html">
<img src="../assets/img/logo.png" alt="logo">
</a>
</div>
<div class="nav-links" style="display: none">
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="contact-us.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
<a href="login.html"><li>Login</li></a>
</ul>
</div>
</nav>
</div> <!-- end no-hero -->
<div class="main">
<section>
<div class="toast success">
<img src="../assets/img/check-mark.gif" alt="check-mark">
</div>
<div class="toast error">
<img src="../assets/img/cross-mark.jpg" alt="cross-mark">
</div>
<header>
<h2 class="center">Open Account</h2>
</header>
<div class="main-content account">
<div class="account-form">
<form onsubmit="event.preventDefault(); window.scroll(0,0); handleCreateBankAccount(event); this.reset();">
<div class="form-row">
<div class="form-input">
<label for="firstname">Enter your first name:</label>
<input type="text" name="firstname" placeholder="First name...">
</div>
</div>
<div class="form-row">
<div class="form-input">
<label for="lastname">Enter your last name:</label>
<input type="text" name="lastname" placeholder="Last name...">
</div>
</div>
<div class="form-row">
<div class="form-input">
<label for="email">Enter your email:</label>
<input id ="email" type="email" name="email" readonly>
</div>
</div>
<div class="form-row">
<div class="form-input">
<label for="type">Select type:</label>
<select name="type" required id="account-type">
<option disabled="true" selected="true">Please select</option>
<option>Savings</option>
<option>Current</option>
</select>
</div>
</div>
<br>
<div class="form-row">
<div class="form-input">
<input class="button button-green" type="submit" value="Continue">
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</div> <!-- end main-->
<div class="footer">
<footer class="container">
<p>© 2019 All rights reserved.</p>
</footer>
</div>
<script src="../assets/js/middleware.js"></script>
<script>
document.readyState = withAuth();
</script>
<script>
const email = getUser();
document.querySelector('#email').placeholder = email;
const token = getAuthToken();
// const handleSelectedBankAccountType = (e) => {
// userData.type = e.selectedOptions[0].innerHTML;
// }
const handleCreateBankAccount = (e) => {
const { firstname, lastname, type } = e.target;
const config = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-access-token': token
},
body: JSON.stringify({
firstName: firstname.value,
lastName: lastname.value,
email,
type: type.value
})
}
const url = new URL(env.url());
const bankAccount = fetch(`${url.href}/accounts/`, config)
.then(response => response.json())
.then(json => {
if (json.status < 300) {
showToast(true, 'Account created successfully');
if (json.data.accountNumber) {
renderCongratulatoryMessage(json.data);
return handleLoadingComplete(false, 2)
}
} else {
showToast(false, errorResponse(json.error));
return handleLoadingComplete(true, 1)
}
}).
catch(error => {
showToast(false, 'Try again');
return handleLoadingComplete(true, 2)
});
}
const renderCongratulatoryMessage = (data) => {
document.body.innerHTML = `
<div class="container center" style="margin: 12% auto">
<h2>Congratulations! Your account has been set up. 🎉</h2>
<p>Your account number is: <strong class="red">${data.accountNumber}</strong></p>
<small>Please write it down and keep it safe.</small>
<hr />
<a href="#" onclick="event.preventDefault();return redirect.home();"">Continue to home</a>
<p>Or</p>
<div>
<a href="#">
<button class="button-green" style="padding:12px 20px; cursor:pointer; font-family: inherit">Go to your profile</button>
</a>
</div>
</div>
`;
}
</script>
<script src="../assets/js/utils.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>