How to make a working password page

Code Help HTML/CSS/JS
1

I want to add a password page to my replit but it just refreshes the page can anyone give some suggestions? Here is the repl: https://replit.com/@FdFioushemasterdsfdvfsd/Password-template

2 Likes
2

Use <form> tag. In the form tag create tag <input /> with attribute “type=‘password’”. It will replace all letters what you will write here to the “*”, but in JS your password will be showed. Create a db and save user’s password

2 Likes
3

You can use Replit DB. Check it in the extensions or in in the new tab.
Then, just follow steps in the tutorial of Replit DB.

1 Like
4

Yeah but I want it to check if the password is right when i submit and if it is I want it to bring me to a dif page

1 Like
5

You must use JS frameworks like Socket or other to send user’s data to a server.

6

I can’t help you, sorry
But you can find info in the StackOverFlow

7

In short, you cannot really make a password system without a backend. (HTML/JS/CSS is only a front end)
If you had a backend you could make working forms and store user data in a DB.

1 Like
8

I’m not going for like a full password system, all I want is a page where you type in the passcode just to get into the page because all I want is a password protected page not a full make a password and stuff

9

I think he wants to make a “secret” page that is only accessible when you have the right code.

<body>
    <input type="password" id="passwordInput" />
    <button onclick="checkPassword()">Enter</button>

    <div id="protectedContent" style="display: none;">
        <!-- All the details about the "secret" page goes here -->
    </div>

    <script>
        var secretCode = "yourSecretCode";  // replace with your code

        function checkPassword() {
            var input = document.getElementById("passwordInput").value;

            if (input === secretCode) {
                document.getElementById("protectedContent").style.display = "block";
            } else {
                alert("Wrong code");
            }
        }
    </script>
</body>

But again, any person with basic knowledge can access the source code and see the password to access the page.
If you want to guard any sensitive data I would highly suggest that you definitely use server-side authentication, and consider using a standard like OAuth.

2 Likes
10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.