I want to create a simple login and sign up page. I have created them separately using atom, and they were saved inside the same folder inside my computer. I added a css file and was able to link it to both fine.
Now comes the problem.
Note: This is just a fun little project which is why I only used localStorage.
I created a .js file inside my website folder.
//SIGN UP PAGE
function create(){
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
localStorage.setItem(username, un);
localStorage.setItem(password, pw);
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}
//LOGIN PAGE
function login(){
if(document.getElementById("usernamel") === localStorage.getItem(username)){
if(document.getElementById("passwordl") === localStorage.getItem(password)){
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}else{
document.getElementById("errormsg").innerHTML = "Incorrect Password or username";
}
}else{
document.getElementById("errormsg").innerHTML = "Sorry, this account does not exist";
}
}
And made it to add values to the localStorage when create account button is pressed.
<script src="ssjavascript.js"></script>
This is the exact same code I used for both the html files to connect to the js files, and yet, only one works. No matter what, only one of the html files can connect to the js file. I've copied and pasted multiple times. I've tried different tags. I've tried everything I can think of and this is where I beg the internet myself for answers.
To test If it is working, I created an onclick() function to a button and told it to bring me to a separate page. None of it worked, I checked my spelling about 10 times now as well.
Also, Whenever I test the files I open them in browser, so I don't get any error messages. And I can't test them in atom because it just shows the code in a scroll box on view.
Edit:
ssjavascript.js:11 Uncaught ReferenceError: Invalid left-hand side in assignment
at login (ssjavascript.js:11)
at HTMLInputElement.onclick (sslogin.html:22)
This is what I got when clicking the button on the non-working page.
login is referring to the button clicked
ssjavascript.js is referring to the file I used to hold the javascript
sslogin.html is the page file
I don't know if this helps, I've lost track quite a bit.
Full Code:
Sign Up page
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="username">
<div id="passwordtxt">
Password:
</div><input id="password"><br><br>
<div id="security">
For the sake of security,<br>we suggest creating a unique<BR>password specific for this site.<br>
You are also limited to 1<br>account, creating a new one<br>will erase previous data.
</div><br><br>
<input type="button" id="submit" onclick="create()" value="Create Account"><br><br>
Already Have One? Log In
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
Log in page
<!DOCTYPE html>
<html>
<head>
<title>
Log In
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="usernamel">
<div id="passwordtxt">
Password:
</div><input id="passwordl"><br><br><br><br>
<input type="button" id="submitl" onclick="login()" value="Login"><br><br>
Don't Have an Account? Create One
<br><br>
<div id="errormsg">
</div>
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
the javascript file is already up above, and the profile page is just a blank until I actually figure out how to get someone there.
Also, I changed the Javascript to compare the value to localStorage instead of assigning but it seems to still not work as intended.
EDIT:
Thanks for the suggestions. Even if none of them singularly worked, I still wouldn't have fixed my problem if you guys haven't pushed me to do some more searching.
I found out, that using "" saved my variables as strings, so I used '' and it worked exactly how I wanted.
Again, thanks a lot for your help. :)
Related
Hello i am creating a form in which user have to find password to access the other page.As I am hard codding correct password in my if condition.Some users will inspect it and know the password.So I am struggling to hide my if statement or even all JavaScript code from being inspected.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./login/style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="login">
<h1>Login</h1>
<form method="post">
<input type="password" id="password" name="p" placeholder="Password" required="required" />
<button type="button" value="Login" onclick="checkPassword()" class="btn btn-primary btn-block btn-large">login</button>
</form>
</div>
<!-- partial -->
<script src="./login/script.js"></script>
</body>
</html> <script>
function checkPassword(){
if(document.getElementById('password').value == 'layriix'){
location.href = "https://gunsellerlayr.000webhostapp.com/gunseller.html";
} else {
alert('Wrong Password!');
return false;
}
}
</script>
Since, I can't comment. I will try to list out everything in an elucidated manner.
Firstly, answering your main question, there is no way to hide client-side code, that is the JavaScript that you are serving to the browser. You can maybe try obfuscating it, but if it is being served to a client, you cannot really hide it.
Now, what you are attempting to do, is frankly not a thing you should be doing. Passwords on the client side are in no way a method to validate somebody. What you would want to look into is sending this password as a body of https post request, and then doing the validation of the password server side.
Secondly, there also happens to be absolutely no method of preventing a user going to the page, that you are trying to prevent them from going to. Instead of trying to even write the password. They can simply copy and paste it in the url window, or run the location.href in the console.
To put it better, if you want to authenticate somebody, you HAVE to do it server side and secondly you have to prevent access to the page, from users that are not logged in.
You can obfuscate it, but there's no way of protecting it completely.
Tool Link : obfuscator.io
I have a website and I would like every visitor (or at least every session) to help the site survive. By this, I mean integrating a CoinHive based script so when run once, it will mine (with the user's consent and knowledge) and the popup will automatically close with a popup after this.
For the CoinHive based script, I have the following:
<!DOCTYPE HTML>
<html>
<head>
<title> Sample </title>
</head>
<body>
<form action="?" method="post">
<script src="https://authedmine.com/lib/captcha.min.js" async></script>
<div class="coinhive-captcha" data-hashes="1024" data-key="my_key_here">
<em>Loading Captcha...<br>
If it doesn't load, please disable Adblock!</em>
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>
For the popup displayed, I have:
function myFunction() {
alert("Thank you for helping. You may now proceed.");
}
Finally, my text on the popup will be:
Dear Visitors. In order to keep this site running, you are required to complete a one-time captcha. This will require you to just click it and wait, however, it will increase CPU and power usage, so using a PC is recommended. This should be the only time you see this. Thank you and sorry for inconvenience.
Could someone help make this into a popup where this is required, users won't be able to scroll or exit and this is one-time?
You can use localStorage :
<script type="text/javascript">
var alerted = localStorage.getItem('alerted') || '';
if (alerted != 'yes') {
alert("Thank you for helping. You may now proceed.");
localStorage.setItem('alerted','yes');
}
</script>
More complete answer : Here
I hope to help you.
I am fairly new to CSS and javascript. I have been trying to implement the Tagging system as provided in Taggle.js (http://sean.is/poppin/tags).
Using this script :
<html>
<body>
Hello!! <br>
<form id="form1" action="http://127.0.0.1:5000/post">
<fieldset>
Tags:
<div id ="freeTags" ></div>
<p id='tag'></p><br><br>
</fieldset>
</form>
<script src="./node_modules/taggle/assets/js/taggle.js"></script>
<script>
var text = document.getElementById('tag');
new Taggle('freeTags', {
onTagAdd: function(event, tag) {
text.innerHTML = "You just added " + tag;
},
onTagRemove: function(event, tag) {
text.innerHTML = "You just removed "+ tag;
},
duplicateTagClass : "bounce"
});
</script>
</body>
</html>
I am unable to get the same effect as on the website (fancy text box) instead what I have been getting is this:
And it is also not implementing the 'bounce' function although I installed bounce.js using bower.
I think it must be the issue of CSS linkage to HTML. Can any one help in untangling this issue?
The documentation for taggle says the bounce effect is handled by the taggle.css file ... which your code example above doesn't include. Suggest this file also deals with styling of the elements youve said are missing. So just link this file in your document and re - test.
Find the CSS file in the repo you link to above the folder assets/css/ (find here), and save either taggle.css or taggle.min.css (for production) to your server and add the following to your page immediately after the <html> opening tag...
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
</head>
<body>
<!-- your content... -->
</body>
</html>
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
Learning to use Bottle.py and made a page with a button:
<!DOCTYPE html>
<html>
<head><title>button</title></head>
<body>
<script>function test(){
console.log("a");
document.getElementById("b").innerHTML = "abcd";
return false;}</script>
<form onsubmit="return test()">
<button type="submit">Button</button>
</form>
<div id="b"></div>
</body>
</html>
When I press the button, nothing prints out on the javascript console the div element does not get populated with text.
from bottle import route, template, run
#route('/button')
def b():
return template('button')
This is (obviously) a minified version of what is actually happening in my app.
Your javascript and html code are perfectly valid as #Blender said, have you checked if you have a valid code, by viewing the actual source that is delivered by the http response?