How to Password Protect Index.html Only? [duplicate] - html

Question

This question already has answers here:
password protect a single file using .htaccess
(2 answers)
Closed 2 years ago.
So, I have a website that has so many forms/surveys pages , not at the main index.html , but can be accessed by buttons that are inside my "index.html"
What I m looking for is, users can access forms/surveys pages but not the main home page by simply typing ( ex: example.com )
I know a website which when I visit requires me to enter a key to acces the page , I don't know if it's login function since it doesn't require any kind of registration, anyone with that key can visit that website.
For instance let's assume this is inside my main index.html and by clicking button I can visit forms to get shareable url to share forms with someone
<form method="get" action="/form1.html">
<button type="submit">this takes me to form1 page</button>
</form>
<form method="get" action="/form2">
<button type="submit">this takes me to form 2 page</button>
</form>
I don't want users to go to any forms/surveys pages which can be accessed by buttons in main index.html
That's why I want to Password Protect my index.html only but not it pages
Please help me out

Answer 1

As mentioned, This is not possible with HTML alone.
is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
CSS will give it some looks,
Javascript will give it some logic.
You can prompt the user for a password on page load and verify it and act accordingly. Only problem is as mentioned by #LosManos is that you'd be exposing your password in your HTML which will be visable by anyone. This is a big NO NO
That been said, Below is a proof of concept (unsecured). You could use the same logic by sending password() function to backend (your server code). - Just keep poping prompt untill it resovles.
Prompt will block all handlers in page untill resolved, thus page will be protected until password handled.
window.onload = () => {
password();
}
function password() {
let p = prompt('password:');
(p === 'password') ? true : password();
}
<form method="get" action="/form1.html">
<button class='btn' type="submit">this takes me to form1 page</button>
</form>
<form method="get" action="/form2">
<button class='btn' type="submit">this takes me to form 2 page</button>
</form>
But again as mentioned, you'd have to build a backend logic to handle prompt and respond even if not using a user authentication sys. FWIW it should look somehow, (although the next code block isn't tested and is for conceptualizing, of course), like:
function password() {
let p = prompt('password:');
fetch('/path/to/check/password', {body: {pass: p}}).then(res => {
if (res) {
return;
} else {
password();
}
});
}
When '/path/to/check/password' verifies the password and returns true/false from server, or something alike.