ui_passwordDialog.html

<div class="modal fade" id="passwordModal" role="dialog">
  <div class="modal-dialog">
  
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <h4 class="modal-title">Setup Your Password</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <p>This password will be used to encrypt your markdown data. It is app-wide (all markdowns use the same password).</p>
            <p>Please keep password in mind. If you forget it, there is no other way to decrypt existing markdowns</p>
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwdInput">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
        </div>
      </form>
    </div>
    
  </div>
</div>
<script type="text/javascript">
function showPasswordDialog() {
  return new Promise(function(resolve, reject) {
    $("#passwordModal").on('shown.bs.modal', function () {
      $("#pwdInput").focus();
    });
    $("#passwordModal").on('hide.bs.modal', function () {
      var pwd = $("#pwdInput").val();
      if(pwd.length == 0)
        return false;

      resolve(pwd);
    });

    // get password from user
    $('#passwordModal').modal({
        backdrop: 'static',
        keyboard: false
    })
  });
}

</script>