I'm trying to make a login system, connecting to a database in a spreadsheet.
I've tried all the ways, but in all I haven't been successful.
The system is simple, it takes the data from the form and searches the spreadsheet if the email exists, if it exists it logs in.
Can someone help me?
Follows Html code:
const GoogleSpreadsheet = require('google-spreadsheet')
{ promisify } = require('util');
const credentials = require('../credentials.json')
async function loginBase(){
const doc = new GoogleSpreadsheet('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
await promisify(doc.useServiceAccountAuth)(credentials);
const info = await promisify(doc.getInfo)();
const sheet = info.worksheets[7];
const rows = await promisify(sheet.getRows)();
var controle = false;
var email = document.getElementById("email");
for(i = 0; i < rows.length; i++){
if(rows[i].email == mail){
alert("Login realizado com sucesso");
//console.log("Usuário válidado com sucesso")
//location: "./dashboard.html"
//controle = true;
window.location.href = "http://www.devmedia.com.br";
//return true;
}
}
if(controle == false){
//alert('Usuário não encontrado');
//console.log("Usuário não encontrado");
alert("Usuário inválido");
//return false;
}
}
Follows JS code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugins/fontawesome/css/all.min.css">
<title>Holding Grupo Five</title>
</head>
<body>
<div class="login">
<div class="login-form">
<div class="login-form-wrapper">
<form id="formLogin">
<div class="mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Digite seu e-mail.">
</div>
<div class="mb-3">
<label for="senha" class="form-label">Senha</label>
<input type="password" class="form-control" id="senha" placeholder="Digite sua senha.">
</div>
<script src="js/login.js"></script>
<button onclick="loginBase()" type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
<div class="banner-login">
<img src="imagens/LogoGrupoPreto.png" alt="Grupo Five">
</div>
</div>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/fontawesome/js/all.min.js"></script>
</body>
</html>
Could someone help me solve this problem?
Related
Heyy,
i'm a beginner in writing with java script and i'm trying to copy Instagram, soo I need help in form and validation stuff and I also want to save it with local Storage.
I can't find the Problem in my Code and I don't know how to write the local Storage Code.
scripts.js
const VornameInput = document.getElementById("Vorname-input");
const NachnameInput = document.getElementById("Nachname-input");
const GeburtstagInput = document.getElementById("Geburtstag-input");
const ueberMichInput = document.getElementById("ueber-mich");
const SpeicherButton = document.getElementById("enter-button");
const EmailInput =document.getElementById("email-input");
const EingabeInput = document.getElementById("Eingabe");
SpeicherButton.addEventListener("click", enterEvent);
const Vorname = VornameInput.value;
const Nachname = NachnameInput.value;
const Geburtstag = GeburtstagInput.value;
const ueberMich = ueberMichInput.value;
const Email = EmailInput.value;
function felderInKonsoleAusgeben () {
console.log("Vorname:", Vorname);
console.log("Nachname:", Nachname);
console.log("Geburtstag:", Geburtstag);
console.log("UeberMich:", ueberMich);
console.log("Email:", EmailInput);
}
function validierung(Vorname,Nachname,Geburtstag) {
if (VornameInput.value == "" || NachnameInput.value == "" || isNaN(Number(GeburtstagInput.valueAsNumber))){
alert ("Bitte fülle alle Felder aus! ");
return false;
}
else
alert ("Eingaben wurden gespeichert");
return true; }
function validierungEmail (EmailInput){
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if (input.value.match(validRegex)) {
alert("Gültige Email Adresse!");
return true;
} else {
alert("Ungültige Email Adresse!");
return false; }
function enterEvent(evt) {
evt.preventDefault();
felderInKonsoleAusgeben();
validierung(Vorname, Nachname, Geburtstag);
validierungEmail(EmailInput);
}
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Das wird einmal ein Instagram Clone" />
<meta name="keywords" content="Instagram, Instagram 2.0, Clone" />
<meta name="author" content="Emily Schlachter" />
<link rel="stylesheet" href="css/style.css" />
<script src="scripts.js" defer></script>
<title>Instagram 2.0</title>
</head>
<body>
<header>
<div > <a href="instagram-clone_schlachter.html"> <h1>Gramml</h1> </a ></div>
</header>
<ul id="navibereich">
<li id="navi01"> <h2>Mein Profil </h2> </li>
<li id="navi02"> <h2>Entdecken</h2> </li>
<li id="navi01"> <h2>Upload Picture</h2> </li>
</ul>
<div class="label">
<label>Suche:</label>
<input type="text"/>
</div>
<main>
<!-- Eingabefeld -->
<div class="Eingabe" id="Eingabe">
<div class="field">
<input id="Vorname-input" type="text" name="vorname-input" placeholder="Vorname" />
</div>
<div class="field">
<input id="Nachname-input" type="text" name="Nachname-input " placeholder="Nachname" />
</div>
<div class="field">
<input id="email-input" type="text" name="email-input" placeholder="Email-Adresse" />
</div>
<div class="field">
<input id="Geburtstag-input" type="date" name="Geburtstag-input" placeholder="Geburtsdatum" />
</div>
<label>Über mich: <br> </label>
<textarea name="ueber-mich" id="ueber-mich" cols="40" rows="5" maxcols="35" placeholder="Über mich:" > </textarea>
</div>
<div class="Formelles">
<p> <input type="checkbox" name="AGB" value="News"> Datenschutzerklärung und AGB akzeptieren. </p>
</div>
<button id="enter-button" class=" button" type="submit">
Speichern
</button>
</main>
</body>
</html>
I just want to get a validation formand to save the Input in local Storage.
Thanks for your help!
You can add all needed information into an obejct like
const personInfo = {
"vorname": VornameInput.value,
"nachname": ...,
"geburtstag": ...,
"uebermich": ...,
"email": ...
}
Then you can store this object with a key in the local storage with
localStorage.setItem('personInfo',JSON.stringify(personInfo));
To get it back use
const pInfo = localStorage.getItem('personInfo');
Have a look here https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage to learn more about localstorage
I have created a login page that allows you to log in using username and password. However, it is currently so that you are always redirected to the "profile" page and there is then checked by PHP whether the login data are correct, because the data are on the DB.
Therefore I have the idea with a validate function directly on the loginpage to check if the data is correct and then I just create a session.
Does anyone have an idea how I can do this?
Here is the code:
<?php session_start();?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<link href="bootstrap_style.css" rel="stylesheet" id="bootstrap-css"> <!-- maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js or bootstrap.js-->
<script src="jquery.js"></script> <!-- //cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<img src="default_logo2.png" id="icon" alt="User Icon" onclick="window.open('url', '_blank');"/>
</div>
<!-- Login Form -->
<form action="searchpage.php" method="post" onsubmit="validateForm(event);">
<input type="text" id="login" class="fadeIn second" name="username" placeholder="username">
<input type="password" id="password" class="fadeIn third" name="password" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" style="color:red" id="warning"></a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function validateForm(event) {
var input_username = document.getElementById("login");
var input_password = document.getElementById("password");
if (input_username.value == '' || input_username.value.charAt(0) == ' ' || input_password.value == '') {
event.preventDefault();
document.getElementById("warning").innerHTML = "Fill empty fields!";
}
else {
return true;
}
}
</script>
with this I reach the DB:
$pdo = new PDO('mysql:host=localhost;dbname=ausleihe', 'root', '');
and that is the SELECT:
$login_session = "SELECT * FROM login WHERE username = '".$hereshouldbetheusernamefromform."' AND password = '".herethepasswordfromform."'";
If you need more code or have questions, ask me!
Thx
Client-side JavaScript cannot directly access a Host-side PHP program except through AJAX calls. Only the Host-side software has access to Host-side databases.
I am totally new to this stuff and get quite nothing of it.
I used some tutorials to write this, but I don't know how to get the link to the uploaded document in the google sheet.
This is the Apps Script code:
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
// App Script function to save data to sheet
function saveData(data) {
var sheet = SpreadsheetApp.getActiveSheet();
sheet.appendRow(data);
}
function uploadFiles(data)
{
var file = data.myFile;
var folder = DriveApp.getFolderById('1NWq9CoBxzYumYQzTlCjLMS95Y6G2NY6X');
var createFile = folder.createFile(file);
return createFile.getUrl();
var uploadURL = file.getUrl();
}
And here the HTML code in: index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<br>
<h1>Custom HTML Forms to Google Sheet</h1>
<br>
<div id="form">
<form>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control form-data" id="Name">
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="text" class="form-control form-data" id="Email">
</div>
<div class="form-group">
<label for="Age">Age</label>
<input type="text" class="form-control form-data" id="Age">
</div>
<div class="form-group">
<label for="Company">Company</label>
<input type="text" class="form-control form-data" id="Company">
</div>
<div class="form-group">
<label for="Mob">Mob</label>
<input type="text" class="form-control form-data" id="Mob">
</div>
<div>
<input type="file" name="myFile">
</div>
<button type="button" class="btn btn-primary" onclick="send_data()" id="submitBtn" value="Upload Files">Submit</button>
</form>
</div>
<!-- Optional if you want to give a completion feedback! -->
<div id="completion-msg" style="display: none;">
Thank you for completing this form!
<label id="resp"></label>
</div>
</div>
<script>
document.getElementById('submitBtn').addEventListener('click',
function send_data(){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
var form_data = document.getElementsByClassName("form-data"); //retrieve filled form data
var i;
var data = [];
for(i=0; i<form_data.length; i++){
data.push(form_data[i].value);
}
google.script.run.saveData(data); // send to google app script
document.getElementById("form").style.display = "none"; // make form invisible
document.getElementById("completion-msg").style.display = "block"; // Optional if you want to give a completion feedback!
})
function onSuccess(data){
document.getElementById('resp').innerHTML = "File Uploaded to the path " +data;
}
</script>
</body>
</html>
It is totally ok, if you say that there is no way to change this code into something that works, but please say how I could solve it elsewise.
I would really appreciate it, if you help me. Thanks!
When you click the login button after you enter the correct username and password, it is supposed to redirect you. I posted the same question yesterday, but now I have slightly changed the code like some of the answers said, but it still hasn't worked. Please help.
<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="submit" value="Login" id="submit" onclick="validate()"/>
</form>
<b><i>Submit</i></b>
</div>
</div>
<script type="text/javascript">
window.addEventListener('load', (event) => {
var attempt = 3;
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "Joshua" && password == "Joshua#123"){
alert ("Login successfully");
window.location.replace("https://www.youtube.com"); // Redirecting to other page.
}
else{
attempt -= 1;// Decrementing by one.
alert("Incorrect username or password")
alert("You have "+attempt+" attempt(s) left;");
// Disabling fields after 3 attempts.
if( attempt == 0){
alert("Incorrect username or password")
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
});
</script>
<script src="js/login.js"></script>
</body>
</html>
you have to prevent the default behavior of Submitting, and once you do that- you can redirect.
$("form").submit(function(event){ //edited
event.preventDefault()
..your code here
});
I am trying to use data retrieved from session storage to validate a newly registered user. It just needs to be in session storage for this project. Basically, the new user registers on a Signup Page; the email and password are saved in session storage; then they should be able to log in through the regular login page as long as the tab is opened. Even though the user input is set in the session storage, I am unable to validate the user in the regular login screen afterwards. I keep receiving the error "username/password do not match". What am I missing that is causing it not to validate? Any help is much appreciated.
JavaScript
// TISSUE Login Script
//Function called when form is submitted
//Validates form and allows login
function validate() {
'use strict';
var UserName = document.getElementById('UserName').value;
var email = "adrian#tissue.com";
var email1 = "admin#tissue.com";
var Password = document.getElementById('Password').value;
var pass = "welcome1";
var pass1 = "admin123";
// stored data from the register-form
var storedName = sessionStorage.getItem('email');
var storedPw = sessionStorage.getItem('password');
// entered data from the login-form
var userName = document.getElementById('UserName');
var userPw = document.getElementById('Password');
if ((UserName == email) && (Password == pass)) {
window.location.href = "Issues.html";
return false;
} else if ((UserName == email1) && (Password == pass1)) {
window.location.href = "subscription_dashboard.html";
return false;
} else if ((userName == storedName) && (password == storedPw)) {
window.location.href = "Issues.html";
return false;
} else {
alert("username and/or password do not match");
return false;
}
}
// End of Validation
function init() {
'use strict';
if (document && document.getElementById) {
var loginform = document.getElementById('loginform');
loginform.onsubmit = validate;
}
}
window.onload = init;
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<meta name="author" content="Stephen Morris">
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
Home
SignUp
</div>
<div id="loginwrap">
<h1>Login</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return validate()">
<div class="labels">
<label for="UserName">UserName:</label>
</div>
<div class="rightTab">
<input type="email" name="UserName" id="UserName" class="input-field" placeholder="E-mail Address" required>
</div>
<div class="labels">
<label for="Password">Password:</label>
</div>
<div class="rightTab">
<input type="password" name="Password" id="Password" class="input-field" placeholder="Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
New User JavaScript
// UserStore Module
// Store Username and Password in sessionStorage
function newUser () {
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
sessionStorage.setItem("userName", userName);
sessionStorage.setItem("password", password);
}
New User Registration HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<meta name="author" content="Stephen Morris">
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
Home
Login
</div>
<div id="loginwrap">
<h1>Create New Account</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return newUser()">
<div class="labels">
<label for="email">* E-mail:</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
</div>
<div class="labels">
<label for="Password">* Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
</div>
<div class="labels">
<label for="password">* Confirm Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
I think the problem is you're setting storage with a name and trying to get item with another key name e.g:
sessionStorage.setItem("userName", userName);
var storedName = sessionStorage.getItem('email');
it should be instead:
sessionStorage.setItem("userName", userName);
var storedName = sessionStorage.getItem("userName");
or
sessionStorage.setItem("email", userName);
var storedName = sessionStorage.getItem("email");
Hope it helps.