I want to make a simple password protected link that enables users (with the correct password) to download a zip file. The link, as in the code below, is "folder/history.zip". The link is a simple text ("Open"), not a button. I don't have any experience with javascript. The problem is that the password protection does not work when I tried. I just want to know how can I edit the code below to make it work?.. I don't have any experience with javascript so I appreciate any help!
html:
open
Javascript:
<SCRIPT type="text/javascript">
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "teacher") {
alert('You Got it Right!');
window.open('folder/history.zip');
break;
}
testV+=1;
var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="text" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>
try the below code,
JS:
function passwd(){
var password = prompt('Enter the password to download the file:');
if(password.toLowerCase() == "teacher"){
window.open("folder/history.zip")
}else{
alert("incorrect password!! please try again");
}
}
HTML
<input type="button" value="download zip file" onClick="passwd()"/>
Related
I am working on some basic JavaScript.
I have a muse website and I'm using this script so users can enter a specific password and be redirected to a page, I need to be able to change this so I can do this multiple times, so: multiple passwords going multiple places.
For example, when users click a button they are asked for a password, when they enter CUSTOMPASSWORD1 they will be redirected to mywebsite.com/custompassword1.html how would I edit this script so that they could also type in CUSTOMPASSWORD2 and be redirected to mywebsite.com/custompassword2.html?
Script below:
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Enter Store Code Here',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "CUSTOMPASSWORD1234") {
alert('You are being redirected!');
window.open('CUSTOMPASSWORD1234.html');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Store Code Not Recognised, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Store Code" onClick="passWord()">
</FORM>
</CENTER>
I believe what you are trying to do is simply redirect the user to whichever url they enter in the prompt.
To achieve that, we can use a similar approach:
function redirect() {
var pass1 = prompt('Enter Store Code Here', ' ');
if (!pass1) {
history.go(-1);
} else {
alert('You are being redirected!');
window.open(pass1 + '.html');
}
}
<center>
<form>
<input type="button" value="Enter Store Code" onClick="redirect()">
</form>
</center>
I'm not sure I entirely understand the question, I think you could just do this:
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Enter Store Code Here',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toUpperCase() == "CUSTOMPASSWORD1234") {
alert('You are being redirected!');
window.open('CUSTOMPASSWORD1234.html');
break;
}
else if (pass1.toUpperCase() == "CUSTOMPASSWORD2"){
window.open('CUSTOMPASSWORD2.html');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Store Code Not Recognised, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Store Code" onClick="passWord()">
</FORM>
</CENTER>
You also have what I assume is an error with
(pass1.toLowerCase() == "CUSTOMPASSWORD1234")
since this will never evaluate to true since CUSTOMPASSWORD1234 is upper case. Also you don't have an evaluation for CUSTOMPASSWORD1.
It seems like you're lacking in basic JS and programming knowledge so I'd recommend reading some basic tutorial in programming concepts before you start building stuff. Just hacking together tutorials will make spaghetti code and you won't learn.
Trent's answer is better design which you should use, this answer is just how to specifically implement what you are asking for.
I was renovating my website while I came across this error.
It is a simple username-password Javascript calling function.
Here is the code (because of confidentiality I would not like to give out any usernames, passwords, links, or function names):
<head>
<script>
function ----() {
var username = prompt("Please enter your username.");
if (username.toLowerCase() == "-----"){
var password = prompt("Please enter your password.");
if (password.toLowerCase() == "-----"){
window.open('http://example.com',"_self")
}
else{
alert('Incorrect password. Please try again.')
}
}
else{
alert('Incorrect username. Please try again.')
}
}
</script>
</head>
<body>
<p><a onclick="----()" href="javascript:void(0);">------</a></p>
</body>
Please don't criticize my code; I've only been coding for 1~2 years. I would love to learn more from this renovating experience!
Thanks!
Jefferson Yu
You have redundant else statements. I have added a sample function called foo to explain. Try to adapt indentation in your code, that will save you from creating syntactical errors.
<html>
<head>
<script>
function foo() {
var username = prompt("Please enter your username.");
if (username.toLowerCase() == "user"){
var password = prompt("Please enter your password.");
if (password.toLowerCase() == "pass"){
window.open('http://example.com',"_self");
}
}
else{
alert('Incorrect password. Please try again.');
}
}
</script>
</head>
<body>
<p><a onclick="foo()" href="javascript:void(0);">click me</a></p>
</body>enter code here
</html>
I need to put a password protect in one my page. But I want it in a way that when the user click on a menu in my navigation, example is "Gallery", I want an alert box, saying "Enter password to view content" I have used the code below, but it still need to have a button and I don't want that.
P.S. And I prefer to use javascript and html only.
function passWord() {
var testV = 1;
var pass1 = prompt('Enter password to view content',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "123456789") {
alert('You Got it Right!');
window.open('/gallery');
break;
}
testV += 1;
var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV == 3){
history.go(-1);
return " ";
}
}
Passwords in javascript are trivial to circumvent, and in this case, they could find the password by looking at the source.
Having said that, you could trigger your code by using onclick - <div class="mymenu" onclick="password();">
EDIT:
Also, (!pass1) is invalid syntax, did you mean (pass==null)?
I am new to JavaScript and this site, and I am trying to make a mock up username and password log in and creator. For now, the username and password creator is limited to pre-made username and passwords. The idea is to be able, in the end, to create a username and password on one page then to send that array of usernames and passwords to the log in page. I know the security is bad and I won't use this in a real website, but aside from that, I can't get the code to run. The code outputs username and password text boxes to put in values, but when you click the button to posses them nothing happens. What did I do wrong? Thanks for helping!
The page where the pre-made usernames and passwords are declared:
<!DOCTYPE html>
<html>
<head>
<title>
create account
</title>
<script>
sessionStorage.setItem( "username1", ["bob", "sam"]);
sessionStorage.setItem( "password1", ["lol", "jk"]);
</script>
</head>
<body>
</body>
</html>
The place where the username and password arrays are sent and processed in the log in:
<!DOCTYPE html>
<html>
<head>
<title>
log on page
</title>
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.getElementById("username").value
var pw = document.getElementById("pword").value
var valid = false;
var unArray = sessionStorage.getItem("username1");
var pwArray = sessionStorage.getItem("password1");
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. " +
"You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<!--this-->
<style>
p.log_on{
position: fixed;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<!--here-->
<form name = "myform">
<p class="log_on">
ENTER USER NAME <input type="text" id="username"><br><br><br><br><br>
ENTER PASSWORD <input type="password" id="pword">
<input type="button" value="Check In" name="Submit" onclick="validate()">
</p>
</form>
<!--to here-->
</body>
</html>
sessionStorage can only store strings. You are storing the stringified versions of the arrays, and then looping over the characters in them when you pull them back out.
Serialise the data to JSON before storing it, and parse it with a JSON parser when you read it back.
i saw this guy who had unanswered question on this site and i have been trying for the past hour to make his code work. as an amateur myself i cant seem to make the code work. the idea of the code is for you to be able to make a username and password on one page of the site. then it will send it as an array over to another page where it is processed as a log in. as i said i am an amateur and deep simple detail would be grate. thank you!
here is the page where the username and passwords are made:
<!DOCTYPE html>
<html>
<head>
<title>
create account
</title>
<script>
function createLogIn() {
var usernameArray = document.getElementById("usernameMake").value;
var paswordArray = document.getElementById("pwordMake").value;
var unArray = []
var pwArray = []
localStorage.setItem("unArray", JSON.stringify([]));
localStorage.setItem("pwArray", JSON.stringify([]));
unArray.push("usernameArray");
pwArray.push("paswordArray");
}
</script>
</head>
<body>
<form name = "makeLogIn">
<p class="log_on">
ENTER YOUR NEW USERNAME <input type="text" id="usernameMake"><br><br><br><br><br>
ENTER YOUR NEW PASSWORD <input type="text" id="pwordMake">
<input type="button" value="create it" id="Submit" onclick="createLogIn">
</p>
</form>
</body>
</html>
here is where the username and password that were just created are used to log in:
<!DOCTYPE html>
<html>
<head>
<title>
log on page
</title>
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.getElementById("username").value;
var pw = document.getElementById("pword").value;
var valid = false;
var unArray = JSON.parse(localStorage.getItem("unArray"));
var pwArray = JSON.parse(localStorage.getItem("pwArray"));
for (var i = 0; i < unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. " +
"You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<style>
p.log_on{
position: fixed;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<form name = "myform">
<p class="log_on">
ENTER USER NAME <input type="text" id="username"><br><br><br><br><br>
ENTER PASSWORD <input type="password" id="pword">
<input type="button" value="Check In" id="Submit" onclick="validate()">
</p>
</form>
</body>
</html>
So you need a few things to make this happen - and there are a million ways to skin this cat.
The most simple example I can provide is using basic POST request from a form - sending that data to a form processor. The steps work as follows:
Provide a form where we can get the username and passwords input
Send that data to a processor for validation
Redirect back to the original form if the logins are invalid or on to a another page if the validation passes.
And for your validate.php file:
<?php
$password = $_POST['password']; // gets password field passed from previous page
$username = $_POST['username']; // gets username passed from previous page
if($username == 'bob' && $password == 'bobs password') {
// do whatever you want to here in the case they got it right
echo 'Username & Password are CORRECT';
} else {
// do whatever you want to do if it's wrong
header('Location:http://mywebsite.com/login.html');
}
?>