Want to upgrade your password protection?

  • 1
  • Praise
  • Updated 7 years ago
I have create a script using HTML, CSS, and JS to make a password protection that looks like Yola's but has better animation and you can make the password different for every page!

This is an example

This is it. Im not giving away the code quiet yet. But I will soon.

This is the login details:
Username: shawn3333
Password: shawn2222

THE STYLE IS MADE BY ME....JUST GOT THE COLORS FROM YOLA
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
  • happy

Posted 7 years ago

  • 1
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Shawn

Thank you for sharing this information! Hope we'll be seeing more about your code soon :)

Nazlie
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Yes you will.

Because the code to actually make the password and username includes 6 variables so i'm making a little generator so people don't have to figure it out there self

You should be hearing more from this tomorrow once the style is done. :)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Sorry to be the bearer of bad news Shawn, but the password and login can be figured out by viewing the page source. The best kind of log in scripts are still the ones done with PHP (server side), and as we know, these are not allowed by Yola.

I just wanted to mention this before you spend to much time on it. You wouldn't want people to use this code and later find out that their password protected pages have been compromised.

It looks very nice though. I love the animations :-)
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
I can fix that actually.

I know you can at the moment but that's why i'm going add more security to this.
I just made it a little more simpler but it doesn't have to be simple. I can make it unreadable by encoding it.

Also, you have to be good with JS to figure it out. Because you gotta know variables and how they fit together.

Ill give an update when I've finished the security so it is 100% usable
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
You could encode it yes, I did think of that. You could also prevent right clicking as an added security measure, but that could also be circumnavigated.

Don't get me wrong, I like it and it looks very nice :-)
It's just a caution! Lets see what you come up with...
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Yes, I wonder if I can disable the whole DIV from a right click. I will talk to one of my friends about that
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Here's a simple one I've done with PHP.
http://www.helderberg.cc/login/login.php

P.S. I'm now hosting the site elsewhere 'cause I needed the PHP.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
I see your a big scripter huh.

Well,I'm going to fully learn JavaScript before starting on PHP.

I really have no idea how to do it and yola doesnt allow PHP so......

Also I couldnt encode the vars because it just made an error
but what im doing is making my generator with the more security. So it generates the more secure code. I will not change this on the example but I will change it for others. And i cant find a code for no right click on that div but i think i got an idea so im still working on the security
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
On a scale of 1 to 10 (10 being the hardest).
Javascript = 11
PHP = 0,5
... my opinion anyway ;-)

Let me think about the encryption. I'll get back to you.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Haha, good one

On a scale of 1-10(10 being the hardest),
HTML = 1
CSS = 1
Javascript = 4
PHP = 15!

Also its OK, I wont need the encryption.
The right click for just that div is disabled, you can see it on the example.

Now it should not be able to get into the source unless you know the shortcut which I'm not going to say.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Yea, your right
But you know that just because that's the test password and is easy to figure out.
It didn't work at first and I thought it was the JS, but it wasn't that so i tested it with 1111.

Also could you go here,
and tell me what you think of it.

Best,
Shawn
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Shawn,

I can see you have spent a lot of time on this and it looks pretty cool... here comes the but. Even me, with my limited knowledge, was able to see a pattern.
It looks like the username and password is made up as follows:

Username characters:
userst= "1st"
usermidd= "2nd"
userend= "3rd"
userend2= "4th"

Password characters:
passst= "1st"
passmidd= "2nd"
passend= "3rd"
passend2= "4th"

Try it yourself...
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Yes your right,
but your missing
2 Variables that will make it work.
And if you don't know the password then trust me your going to have problems figure it out
and I'm still making it harder to read.....
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Cool... I wish you luck!
I look forward to seeing it (or not seeing it :-)).
Off to bed for me now, It's approaching 4am here.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Really?
Wow, its only 10 PM here!