R flexdashboard and log-in form

Question

I have a flexdashboard, which is not hosted on a server and I use it as a local html file.

However, I need the content of the HTML to be password protected. I know i can use win-zip, but I was wondering if it would be possible to integrate a simple log-in form with a global username & password.

My attempt:

    ---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    logo: logo.jpg
shiny: include
---

```{r}
branch <- "test"
num_entries <- 3
```

<style>                     
.navbar {
  background-color:red;
  border-color:black;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
color: black;
background-color: #feb0b0;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #feb0b0
}

</style>           


<script type = "text/javascript">

// Note: Like all Javascript password scripts, this is hopelessly insecure as the user can see 
//the valid usernames/passwords and the redirect url simply with View Source.  
// And the user can obtain another three tries simply by refreshing the page.  
//So do not use for anything serious!

var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;

var unArray = ["Philip", "George", "Sarah", "Michael"];  // as many as you like - no comma after final entry
var pwArray = ["Password1", "Password2", "Password3", "Password4"];  // the corresponding passwords;

for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}

if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}

var t = " tries";
if (count == 1) {t = " try"}

if (count >= 1) {
alert ("Invalid username and/or password.  You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}

else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}

}

</script>

<form name = "myform">
<p>ENTER USER NAME <input type="text" name="username"> ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick= "validate()">
</p>

</form>





```{r setup, include=FALSE}
library(flexdashboard)
```

Overview {data-orientation=columns}
=====================================  

This however, doesn't work, as the username and password appear togather with the dashboard content and not hide it by acting as a landing page.

Any ideas how I can fix this?