Writing simple single field javascript login form - javascript

Hello I need help with a simple JavaScript log in form. I am building a small website for me and my classmates. I want it to be able to redirect each user to a specific page when a corresponding passcode is entered.
I know it is unsafe but we don't plan on keeping valuable information on the site. I don't know about MSQL and don't even wish to use it. The code works at this level but am unable to add users since I don't understand JavaScript. Thanks in advance.
/*here is the code i got so far*/
<title>
Enter Passcode to proceed
</title>
<h1 style="font-family:Comic Sans Ms; text-align="center"; font-size:20pt; color:#00FF00;>
</h1>
<form name="login">
Passcode: <input type="text" name="userid"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid */
{
/*the following code checkes whether the entered userid is correct*/
if(form.userid.value == "JohnDoe")
{
window.open("johndoe.php")/*opens the target page while Id */
}
else
{
alert("Invalid Passcode, please try again!")/*displays error message*/
}
}
</script>

Here is your current if condition that contains a search for a user. Your else condition tells the user the passcode was invalid. Between them add some else if's. Also, boo for comic sans and also there are quite a few more methods that would work. You could, for example, post the form to a server-side script with hardcoded users there, and the viewer wouldn't be able to view source to get the info.
if(form.userid.value == "JohnDoe")
{
window.open("johndoe.php")/*opens the target page while Id */
}

Related

Password is visible in inspect element

i made a script that is basicly just a form where you have to put in a password to go to the admin page. when i was doublechecking everything i noticed that can see the script including the password with inspect element. Im still learning php, javascript, html and css and i cant figure out how to put that password in a seperate .js file and link it back to my password code.
This is the code i wrote. i was hoping if someone could learn me how to store the password in a seperate file and link it back
<h3>admin<h3>
<form>
<label for="pswd">Enter your password: </label>
<input type="password" id="pswd">
<input type="button" value="Submit" onclick="checkPswd();" />
</form>
<!--Function to check password the already set password is Kra5313-->
<script type="text/javascript">
function checkPswd() {
var confirmPassword = "kra5313";
var password = document.getElementById("pswd").value;
if (password == confirmPassword) {
window.location="/admin/Stored Ips.php";
}
else{
window.location="/sub pages/you_tried.php";
}
}
</script>
Everything inside the script tags is client-side, and the user will see it. That is why there is a backend and a database. To hide things from the user.

Recaptcha and Firebase with Plain HTML / PHP and Kirby

I'm trying to implement firebase on a Kirby website (a CMS run on PHP) so visitors can mark subpages to show up as links on the landing page.
To do this, I've constructed a form where a user adds their name when on the subpage to highlight it. The form doesn't submit when the button is clicked, but instead uses JS to add a document to Firebase (where it can be approved or deleted).
I'd like to prevent abuse and am interested in adding Recaptcha as a step when the visitor "submits" the page.
A simplified version of my code looks like this.
HTML:
<form id="add-item" action="?" method="POST">
<label for="f-name">Submitted by:</label>
<input type="text" id="f-name" name="f-name" placeholder="your name">
<button type="submit">Submit</button>
</form>
JS:
document.querySelector("#add").addEventListener("click", function(e){
const fName = document.querySelector('#f-name').value;
tableRef.get().then(function(querySnapshot) {
var uid = Date.now().toString(36) + Math.random().toString(36).substr(2);
if(fName === true){
tableRef.doc('item-'+uid).set({
contributor: fName,
})
}
});
e.preventDefault();
return false;
})
I've found answers to enable Recaptcha with Firebase that use Firebase hosting, or as a method for sign in:
Using recaptcha with Firebase
How to use it with Angular or React:
Google/Firebase reCaptcha not working with angular
Firebase: Invisible reCaptcha does not work in React JS
I am wondering how this can be done using just HTML (no app framework), or with PHP, and without a login?
I am very amateur web developer, so really appreciate any insights on this! I apologize in advance if this is an obvious question. Thank you!
here’s the code how you can add recaptcha but I’ll suggest you to use Php in the backend to verify the status :
First add this in head tag
<script src='https://www.google.com/recaptcha/api.js'></script>
Then add the site key and block for error message
<div class="g-recaptcha" id="rcaptcha" data-sitekey="site key"></div>
<span id="captchaStatus" style="color:red" /></span>
Then add script tag :
<script>
function checkCaptcha(form)
{
var v = grecaptcha.getResponse();
if(v.length == 0)
{
document.getElementById('captchaStatus').innerHTML="Captcha code is empty";
return false;
}
else
{
document.getElementById('captchaStatus').innerHTML="Captcha completed";
return true;
}
}
</script>

Automate Login To Zimbra Server

I am making a webpage that has a login functionality in it say www.newpage.com.
Below is the code of the page for reference.
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)
{
if(form.userid.value == "user" && form.pswrd.value == "password")
{
window.open('file:///C:/Users/target.html', "_self")
window.open('https://webmail.sas.rutgers.edu/')
}
alert("Error Password or Username")
}
}
Now what I want is after i have logged in to this webpage it should automatically login to my local Zimbra server. The look and feel of zimbra server is like this : https://webmail.sas.rutgers.edu/
I am learning Javascript so not sure what is the way of doing it.
I read that it can be done by:
1) iframes (again don't know much about them)
2) cookies
Is there a way to do it more conveniently, preferring to do in Javascript. I am stuck with some important project please help.
The question is too broad and is not easy to be answered in short. But let's say you want to login into one particular existing mailbox/account, then one of the easiest ways to do it is to use the zimbra's preauth service and once you log's in your site you could redirect to that service url with specific request parameters which in turn creates and verifies a preauth key and redirects you to your mailbox. Of course you need to configure the preauth properly first. Here is the official guide for it https://wiki.zimbra.com/wiki/Preauth

check value in if statement (javascript) from another html file

I am trying to make a page that contains a login form. I got its coding from a website (someone had given that), well in the coding the username and password is given for compare (which can be seen by anyone, who opens the html codes), that's why i want that how the value of username and password can be compared in java-script from an external txt file or html file.
Kindly see the coding in order to better understand my problem. In coding "ABC" and "123" are username and password.
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onClick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value = "ABC" && form.pswrd.value == "123")
{
window.open('target.html')/*opens the target page while Id & password matches*/
}
else
{
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
Technicly, you can load by AJAX a txt/xml or json file and read the data from that.
However, I strongly recommend that you make the user/password check on the server side as if you do it in javascript, it won't be secure at all as anyone could read them in less than 5 seconds !!!

Javascript form submit

I'm not sure what I'm trying to do is possible without php or some other scripting language so I would be grateful for some advice.
We have a webserver which can only serve static HTML so we're a bit limited. We want to post e-mail sign up data from a form on this site using JavaScript off to a dataHandler.php script on another domain which will save it to a DB. When the customer clicks submit I don't want the page to navigate away to dataHandler.php though on the other domain I want it to refresh in some way (I don't know how) and say thanks for joining our e-mail list. An example of the code I am thinking about is below.
Any advice on how it might be achieved would be gratefully appreciated or any comments saying stop wasting your time would also be helpful.
<script type="text/javascript">
<!--
function validate() {
if (document.emailForm.email.value.length==0) {
alert("You forgot to enter your email address");
return false;
}
if (document.emailForm.email.value.length>0) {
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.emailForm.email.value;
if(reg.test(address) == false) {
alert('Invalid email address');
return false;
}
}
document.emailForm.submit()
return true;
}
//-->
</script>
<form id="emailForm" name="emailForm" action="http://www.otherdomain.com/dataHandler.php" method="post">
<input size="30" id="email" name="email" maxlength="200" />
<input onclick="validate();" type="button" value="Submit" />
</form>
You should have a look at the jQuery form plugin (http://jquery.malsup.com/form/) . it does exactly what your looking for and can be implemented with one line of code.

Categories

Resources