app/static/masterpassprompt.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/masterpassprompt.css" charset="utf-8">
<script src="js/common.js" type="text/javascript"></script>
<script src="js/masterpassprompt.js" type="text/javascript"></script>
</head>
<body>
<section id="masterpassprompt">
<img class="header" src="images/icons/masterpass.svg"/>
<div class="panel-container">
<div id="panel-default" class="current">
<header>
<h1>Verify the MasterPass</h1>
<p>Please enter your Master Password
</p>
<img class="info" src="images/icons/info.svg" alt=""/>
<p class="info">A MasterPassKey will be derived from the MasterPass. This will then be used to derive the keys used to encrypt your data.</p>
</header>
<form onsubmit="return false;">
<div class="masterpass">
<input type="password" name="masterpass" id="checkMasterPassInput" placeholder="********"/>
<label for="checkMasterPassInput" id="checkMasterPassLabel"></label>
<a href="#" id="resetMasterPassInput" class="navigationLink" data-panel="reset">Forgot it?</a>
</div>
<button id="checkMasterPass">Verify</button>
</form>
</div>
<div id="panel-reset">
<header>
<h1>Reset the MasterPass</h1>
<p>Please enter a new secure MasterPass
</p>
<img class="info" src="images/icons/info.svg"/>
<p class="info">The MasterPass is used to derive the data encryption keys. So any encrypted data using former MasterPass would not be decryptable.</p>
</header>
<form onsubmit="return false;">
<div class="masterpass">
<input type="password" name="name" id="setMasterPassInput" placeholder="********" required/>
<label for="setMasterPassInput" id="setMasterPassLabel"></label>
</div>
<button id="setMasterPass">Reset</button>
</form>
<footer>
<a class="back navigationLink" data-panel="default">
<img src="images/icons/back.svg"/>
</a>
</footer>
</div>
</div>
</section>
</body>
</html>