Please help me with a solution. I have developed a registration form which effectively saves users' information in a Google Sheet. However, now I am yearning to create a login form that verifies the stored data and redirects the user to a different page upon successful validation. Can you guide me on accomplishing this?
Create a backend API using technologies such as Express NodeJS. This backend will utilize the Google Sheets API to extract and process data from a spreadsheet.
Upon signing in, the front end should send a request to the backend including the username and password. Upon receiving this request, the backend will cross-reference the parsed Google Sheets data to verify the correctness of the provided credentials. If the validation is successful, the backend can proceed to redirect or perform any desired action.
The purpose of implementing a separate, hosted server as the backend is to conceal the spreadsheet that contains sensitive information from the front end user. Only the server has access to the information within the spreadsheet and can determine if the user's credentials are accurate.
custom script:
function authenticateUser(obj) {
const spreadsheet = SpreadsheetApp.getActive();
const sheet = spreadsheet.getSheetByName('Login');
const values = sheet.getRange(2,1,sheet.getLastRow() - 1, 2).getValues();
let responseObject = {loggedin:false};
for(let i = 0;i<values.length; i++) {
if(values[i][0] == obj.userid && values[i][1] == obj.password) {
responseObject.loggedin = true;
break;
}
}
return responseObject;
}
function displayLoginForm() {
const ui = SpreadsheetApp.getUi();
ui.showModelessDialog(HtmlService.createHtmlOutputFromFile("ah1"),"Login Form");
}
html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content"></div>
<form>
<input type="text" placeholder="UserId" name="userid" />
<br /><input type="text" placeholder="password" name="password" />
<br /><input type="button" value="Login" onClick="authenticateUser(this.parentNode);" />
</form>
<div id="msg"></div>
<script>
function authenticateUser(obj) {
google.script.run
.withSuccessHandler((obj) => {
(obj.loggedin == true) ? document.getElementById('msg').innerHTML = "Your are logged in" : document.getElementById('msg').innerHTML = "Go away";
}).authenticateUser(obj);
}
console.log("My Custom Code");
</script>
</body>
</html>
Login Form Dialog:
https://i.stack.imgur.com/WhONu.jpg
Login Sheet:
| userid | password |
|---|---|
| boo | hoo |
| me | you |
I don't have much experience with JavaScript, so I believe there may be a misconfiguration or something that I'm overlooking. My current setup involves using Datatables v1.10.7. I have a table with the required parts - a thead, tfoot, and a tbod ...
I am currently facing an issue with updating my table view when changing a variable that filters an array. The filter is applied in the controller based on the values of a specific variable called columnFilter. However, the filter does not reapply to updat ...
Looking to dynamically create a date string in JavaScript with the following format: dd-MMM-yyyy Need the dd part to change between 1 and 29 each time I generate the variable within a loop Month (MMM) should be set as Jan ...
Is there a way to show a loading indicator while a PDF is being generated in PHP? I redirect to a separate page for the PDF generation process, but the original page stays open and simply downloads the file once it's ready. How can I make a loading in ...
Each time I click the delete button, it seems to only remove the last element instead of the specific one based on index. Is there a better way to achieve this without changing from <input defaultValue={name} /> to <input value={name} /> in t ...
After facing the need to print a given page using AngularJS, I came up with a simple solution as shown below: <div class="modal fade" id="extrait" aria-hidden="true" data-backdrop="false"> <table class="table table-hover table-bordered" i ...
Is it possible to dynamically repeat a form in Angular2 when clicking on a link? I am looking for a way to add the same form below the previous one when a specific link is clicked. Any suggestions or immediate replies would be greatly appreciated. For ins ...
Encountering some issues with Express routes that are behaving inconsistently despite having identical code execution. The goal is to have a client application make API calls like this: async search(){ const query = this.$refs.searchInput.value; ...
I am currently developing an innovative Image hosting platform, and I am faced with a crucial challenge – how can I effectively prevent users from continuously refreshing the form, causing the image to be repeatedly uploaded until my disk space allocat ...
In my approach, I am avoiding direct HTML editing and instead utilizing JavaScript/jQuery to accomplish the desired outcome. Initially, one input (specifically 'Express Shipping') is pre-selected by default. The goal is to clone/copy the HTML co ...
I recently developed a new WordPress theme and encountered an issue while trying to load specific stylesheets for my child sites using the is_page(array('')) function in my function.php file. Surprisingly, only the files that were added to all of ...
Currently, I am working on a project where I need to convert JSON data to an Excel file using JavaScript in combination with AngularJS. So far, I have successfully converted the JSON data to CSV format. However, I faced issues with maintaining the font s ...
After setting up a NodeJS server and connecting it to a MySQL database with around 5000 users, I needed to read the data from MySQL and update a MongoDB database. I managed to write code for this process. https://gist.github.com/chanakaDe/aa9d6a511070c3c78 ...
I'm trying to achieve something similar using swig-template. var remId = $(this).attr('remId'); if (remId) { var end = remId.search('_'); var underscore = remId.slice(end, end + 1); var Id = remId.slice(end + 1, remId ...
Currently, I am in the process of working on a Laravel project and looking to utilize Elixir to handle my front-end tasks. After running 'npm install', I encountered a warning stating "npm WARN unmet dependency". What steps should I take in order ...
I am relatively new to conducting Jasmine tests. I have a basic understanding of how to install it and use simple commands like toEqual, toBe, etc. However, I am unsure of how to write test code for this particular jQuery function using Jasmine. if ($(&ap ...
I'm finding it difficult with this task. Below is a list that needs the name and address inserted into the dropdown menu from the JSON file. <div class="dropdown-list"> <div class="list-container"> <ul class="list" ...
I needed to create 3 horizontal paragraphs side by side, and the only solution I found was using the position property, but it didn't turn out as expected. Despite my efforts to make it look clean, it always ends up like this. Below is the code I use ...
Currently, I am working with Angular version 11. In my project, I am utilizing a function from a service to fetch data from an API and display it in a table that I created using the ng generate @angular/material:table command. Client Model export interfac ...
I'm facing an issue with a checkbox in my Angular project. The checkbox has a false value of undefined, and even though it's not marked as required, the form doesn't validate when I check and uncheck it. This is because the class ng-invalid ...