Want to upgrade your password protection?

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

Shawn Holman

486 Posts
26 Reply Likes
happy

Posted 8 years ago

8 years ago

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

8 years ago

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. :)

8 years ago

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 :-)

8 years ago

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

8 years ago

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...

8 years ago

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

8 years ago

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.

8 years ago

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

8 years ago

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.

8 years ago

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.

View previous…

2011-07-24T00:58:33+00:00

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

2011-07-24T01:22:56+00:00

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...

2011-07-24T01:25:13+00:00

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.....

2011-07-24T01:38:11+00:00

Boomer, Champion