Hi guys please am stuck on this code, need assistance, so I have created the spread sheet table called register and created 2 tables email and username and then put in the javascript code in google sheet app script and deployed it as control authority myself and view access as anyone, then I created the index.html as the register page so that if a user register they will be redirect to the home page, but which worked but then the code is not working for user to be able to delete there account instead they will just be redirected and then there data isnt deleted from the google spread sheet table database, so please help me rectify this code I will list all the code so that you can really under and help me rectify/debug the issue, so this is how the url and keys for spreadsheet look like
spread shit id and url https://docs.google.com/spreadsheets/d/1OGlLMH9-Oe62654TGHJ7p-jNrjm765RFRv3j_q0Sc/edit#gid=0 sharable link https://docs.google.com/spreadsheets/d/1OG76545H9-Oe6YT67aK-MIxER97p-jN658TfRv3j_q0Sc/edit?usp=sharing
Deployment successfully updated for google sheet web script. Version 1 on Mar 29, 2024, 4:32?AM Deployment ID AKfycbwoq52h_V1HJNZZhV7765ERTYUY56yTOFXmK8shPJb1wve4UZ0V9Tw Web app URL https://script.google.com/macros/s/AKfy344352h_V1H456787654567HGTYaGSObIsSOl2yTOFXmK8shPJb1wve4UZ0V9Tw/exec Please note that this isnt my real details but exactly how it will look
So this is the index.html register page code that when they register they will be redirected to a home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<style>
body {
background-color: #f7f7f7;
}
.container {
margin-top: 50px;
}
#register-box {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
#error-message {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div id="register-box">
<h2 class="text-center mb-4">Register</h2>
<div id="error-message" class="alert alert-danger d-none" role="alert"></div>
<form id="registration-form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Register</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$('#registration-form').submit(function (event) {
event.preventDefault();
var email = $('#email').val();
var username = $('#username').val();
$.ajax({
url: 'https://script.google.com/macros/s/AKfycbwoq52h_V1HJNZ8765678HoT1vWZYaGSObIsSOl7654567HhPJb1wve4UZ0V9Tw/exec',
type: 'POST',
data: {
email: email,
username: username
},
success: function (response) {
if (response === 'Success') {
alert('Registration successful!');
window.location.href = 'home.html'; // Redirect to home page
} else {
$('#error-message').text('Registration failed. Please try again.').removeClass('d-none');
}
},
error: function () {
$('#error-message').text('Registration failed. Please try again.').removeClass('d-none');
}
});
});
});
</script>
</body>
</html>
so they are redirected but once they go to account.html page which contains that users email and username be displayed and a delete button below
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Account</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<style>
/* Add your custom CSS styles here */
body {
font-family: Arial, sans-serif;
}
.container {
margin-top: 50px;
}
.user-details {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>User Details</h2>
<div class="user-details">
<p>Email: <span id="user-email"></span></p>
<p>Username: <span id="user-username"></span></p>
</div>
<button id="delete-btn" class="btn btn-danger">Delete Account</button>
</div>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
// Function to fetch user details from the server
function fetchUserDetails() {
$.ajax({
url: 'https://script.google.com/macros/s/AKfycbwoq52h_V1HJNZZhV79876aGSObIsSOl2yTOFXmK8s876e4UZ0V9Tw/exec',
method: 'GET',
success: function (data) {
$('#user-email').text(data.email);
$('#user-username').text(data.username);
},
error: function () {
alert('Error fetching user details');
}
});
}
// Function to delete user account
function deleteUser() {
$.ajax({
url: 'https://script.google.com/macros/s/AKfycbwoq52h_V1H87654ERTUIU7652yTOFXmK8shPJb764UZ0V9Tw/exec',
method: 'POST',
data: {
deleteEmail: $('#user-email').text()
},
success: function () {
alert('Account deleted successfully');
window.location.href = 'index.html'; // Redirect to registration page
},
error: function () {
alert('Error deleting account');
}
});
}
// Fetch user details when the page loads
$(document).ready(function () {
fetchUserDetails();
});
// Attach click event to delete button
$('#delete-btn').click(function () {
deleteUser();
});
</script>
</body>
</html>
Now here is the app script code that runs in google spread sheet app script that allow registration and delete of the data i really dont know which one has the issue so please help me rectify this guys, its really giving me a hard time, here is the appsscript function
function doPost(e) {
var sheet = SpreadsheetApp.openById('1OGHGMH9-Oe8767K-MIxER97p-jNrj987fRv3j_q0Sc').getActiveSheet();
// Check if the request is for registration or deletion
if (e.parameter.hasOwnProperty('email')) {
// Registration request
var email = e.parameter.email;
var username = e.parameter.username;
// Check if the email or username already exists
var data = sheet.getDataRange().getValues();
for (var i = 0; i < data.length; i++) {
if (data[i][0] == email || data[i][1] == username) {
return ContentService.createTextOutput('User already exists');
}
}
// If the user doesn't exist, append the row
sheet.appendRow([email, username]);
return ContentService.createTextOutput('User registered successfully');
} else if (e.parameter.hasOwnProperty('deleteEmail')) {
// Deletion request
var emailToDelete = e.parameter.deleteEmail;
// Find the row with the email to delete
var data = sheet.getDataRange().getValues();
var rowIndexToDelete = -1;
for (var i = 0; i < data.length; i++) {
if (data[i][0] == emailToDelete) { // Assuming email is in the first column
rowIndexToDelete = i + 1; // Adding 1 because sheets are 1-indexed
break;
}
}
if (rowIndexToDelete !== -1) {
sheet.deleteRow(rowIndexToDelete); // Delete the row if found
return ContentService.createTextOutput('User details deleted successfully');
} else {
return ContentService.createTextOutput('User not found');
}
} else {
return ContentService.createTextOutput('Invalid request');
}
}
please who can help me rectify this, I am coding it with javascript for cordova app.