Making a Username and Password with Javascript

Question

I've seen other questions similar to this, but I've tried answers and it doesn't appear to do what I want (if it does and I just can't see that it does, please just let me know in the comments. I'm pretty new to this).

I want to password protect a website (this is a personal family website, so I'm not worried about encryption or anything, unless it's super easy to do with javascript) so that only my family can get on. I want the passwords to be personalized.

HTML CODE

<form id="usr-psswd">
  Name: <input type="text" name="name" id="name">
  Username: <input type="text" name="usr" id="usr">
  Password: <input type="text" name="psswd" id="psswd">
  <input type="button" onclick="submission()" value="Submit">
</form>

Script Code

function submission(){
  var name = document.getElementByID = "name";
  var psswd = document.getElementByID = "psswd";
  var usr = document.getElementByID = "usr";

  var name = new Array();
  var usr = new Array();
  var psswd = new Array();
}

My Question: how do I get javascript to put the input into an array that stays on the page so that when you try to get to index.html (which is where the password protection is) so that they don't have to set this up every time?

Also, if it's simple enough, how can I run multiple passwords through encryption and keep it on the webpage so that if someone happens to get on here the passwords are safe?

Yes, I realize that the var name var psswd and var usr are repeated twice. That's because I'm too lazy to name them different things right now. I just need to know how to put var name = document... into var name = new... . Thanks!

Answer 1

I know you said that you wanted to do a simple authentication for the site, but doing it in JavaScript is unsafe and the usernames/passwords are easily retrieved.

If you want something very simple and fast to do.. I suggest you do this by using .htaccess for authentication:

To do this, The system requires two files -- the .htaccess file and .htpasswd file:

The .htaccess Code:

AuthType Basic
AuthName "restricted area"
AuthUserFile /home/user/html/protect-me-dir/.htpasswd
require valid-user

The above code protects a directory called protect-me-dir at root level. The AuthUserFile value is always specific to your hosting configuration. If you don't know what the value should be, do a phpinfo() and find the DOCUMENT_ROOT value.

---

The .htpasswd Code:

your_username:your_password
another_user:another_password
you_get:the_idea

The .htpasswd file contains the usernames and passwords of allowed users. One per line.

---

Otherwise, I'd probably do something fancier by maybe having a proper login using a combination of PHP and a database for example.

I hope this helps.