Need a simple way to password protect a webpage

unknown user
2019-06-21T13:05:20Z

Hey Tildes!

I've got a static, basic website, HTML and CSS. It's one page only. But I'd like to create a second page with some more private content that is password protected.

I know that I can accomplish this via .htaccess but what I don't like about this method is that when the user navigates to the page, they get a pop up asking for a username and password. What I would like is having the user navigate to the page, and then they are met with a simple form asking for just a password (no username). After they enter the password, the "veil" lifts or the page forwards and they get the private content.

Here's the thing... the content really only needs to seem private. It's not super secret, personal information. I don't want it indexed by search engines (nofollow), and I want it basically hidden, but the password is only there to make the user feel exclusive. If some tech-minded person encountered this page and jumped through a bunch of hoops to get in without the password, it's not a big deal to me. In reality, 99.9% of people accessing this page will not be able to bypass the password.

I'm guessing this can be accomplished easily in Javascript, but I don't really know much Javascript apart from finding code snippets and plunking them in. I also want to be able to fully design the password entry page so that it looks branded, so a code snippet plunked down into my HTML doc would be great for this.

If there is an easy way to actually protect the content behind the password, that would be excellent. In this case, I imagine it would be much like a news site with an ad-blocker-blocker. Just some kind of pop-up that blocks all the content. Enter the password, and you're in.

Anyhow, I hope I've described what I'm looking for accurately enough. Anybody have any easy and quick ways to accomplish this?

Comments URL: https://tildes.net/~comp/er5/need_a_simple_way_to_password_protect_a_webpage

Votes: 14

Comments: 35