Modify a cell in Google Sheet using Google App Script

Question

I am a beginner in google app script. I am creating a resident payment system where the user can change their password upon logging in. So now, I have done the html part for changing the password but I dont know how to do the coding in order to change the password. I have attached some pictures and my code to explain myself better. Thank you so much guys.

https://docs.google.com/spreadsheets/d/1bM8l6JefFsPrlJnTWf56wOhnuSjdIwg3hMbY1tN1Zp8/edit#gid=1775459006 - Link to google sheet

https://script.google.com/macros/s/AKfycbw_A-XRlXtR9qGNvMKVrorMIg71hwHt0DrHRiNGVYZdURbadYgUtOIkJPsvuYsBK7Fe/exec - Link to Web App

https://script.google.com/d/1DdRKqUX__-ZITUgTZanQ_A7hUL1kcc0TZOeFmn58wYsX_o_7cqNExnYo/edit?usp=sharing - Link to app script

Code for Code.gs

var url = "https://docs.google.com/spreadsheets/d/1bM8l6JefFsPrlJnTWf56wOhnuSjdIwg3hMbY1tN1Zp8/edit#gid=1775459006";
var streetSheetName = "JALAN SANGGUL 4";

function doGet(e) {
  var streetSheetName = "JALAN SANGGUL 4"; // Added
  PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
  return HtmlService.createHtmlOutputFromFile('WebAppLogin');
}

function checkLogin(username, password) {
  var found_record = '';
  var name = '';
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("USERNAMES");
  var getLastRow =  webAppSheet.getLastRow();
  
  for(var i = 2; i <= getLastRow; i++) {
   if(webAppSheet.getRange(i, 1).getValue().toUpperCase() == username.toUpperCase() && webAppSheet.getRange(i, 7).getValue() == password) {
     found_record = 'TRUE';
     name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
     streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
   } else if (username.toUpperCase() == 'ADMIN' && password == 'ADMINPASSWORD') {
     found_record = 'TRUE';
     name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
     streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
   }    
  }

PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
if(found_record == '') {
  found_record = 'FALSE'; 
}

  return [found_record, username,name];
}

function GetRecords(username,filter) {
  var filteredDataRangeValues = GetUsernameAssociatedProperties(username);
  var resultArray = GetPaymentRecords(filteredDataRangeValues,filter);
  return resultArray;
}

function GetUsernameAssociatedProperties(username) {
  var filteredDataRangeValues = '';
  var ss = SpreadsheetApp.openByUrl(url);
  var displaySheet = ss.getSheetByName("USERNAMES");
  var dataRangeValues = displaySheet.getDataRange().getValues();
  if (username.toUpperCase() == 'ADMIN') {
    dataRangeValues.shift();
    filteredDataRangeValues = dataRangeValues;
  } else {
    filteredDataRangeValues = dataRangeValues.filter(row => row[0].toUpperCase() == username.toUpperCase());
  }
  return filteredDataRangeValues;  
}

function GetPaymentRecords(userProperties,filter) {
  var streetSheetName = PropertiesService.getScriptProperties().getProperty("streetSheetName"); // Added
  var transpose = m => m[0].map((_, i) => m.map(x => x[i]));
  var resultArray = [];
  var ss = SpreadsheetApp.openByUrl(url);
  var displaySheet = ss.getSheetByName(streetSheetName);
  var addressValues = displaySheet.getRange("B:C").getValues();
  var paidMonthValues = displaySheet.getRange(1, 7, displaySheet.getLastRow(), displaySheet.getLastColumn() - 6).getValues();
  //Logger.log(addressValues);
  //Logger.log(transpose(paidMonthValues));
  userProperties.forEach((v, i) => {
    var userHouseNumber = v[1];
    var userStreet = v[2];
    var column = addressValues.reduce(function callbackFn(accumulator, currentValue, index, array) {
      if (currentValue[0] == userHouseNumber && currentValue[1] == userStreet) {
        return index
      } else {
        return accumulator
      }
    }, '');
    //Logger.log(column);
    Logger.log(filter)
    Logger.log(paidMonthValues);
    
    if(filter=="None"){
      var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
        return [element[0], userHouseNumber, userStreet, element[column] || '']
      });
    }else{
      var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
        if(element[0].includes(filter))return [element[0], userHouseNumber, userStreet, element[column] || '']
      });
    }
    
    resultArray = resultArray.concat(result);
    //Logger.log(resultArray);  
  })

  //Remove null elements
  resultArray = resultArray.filter(element=>{
    Logger.log(element!=null)
    return element != null;
  });
  return resultArray;
}

Code for WebAppLogin.html

    function changePassword(){
      var result = confirm("Want to Change Password?");
      if (result) {
        google.script.run
          .withSuccessHandler(updateButton)
          .getEmail()
        alert('Password changed');
      }

Answer 1

I believe your goal as follows.

• When the button of "Change Password" is clicked and input the value and click "Save changes", you want to change the password in the Spreadsheet.

Modification points:

• In your script, when "Save changes" button is clicked, it seems that google.script.run.withSuccessHandler(updateButton).getEmail() is run. But, unfortunately, in your script, there are no functions of updateButton and getEmail . By this, an error occurs.
• When I saw your shared sample Spreadsheet, it seems that your sample Spreadsheet is different from the sample Spreadsheet of your image. For example, the column "A" of the sheet "USERNAMES" is different. In your shared Spreadsheet, the column "A" is 4 .
  • From this situation, from your replying of it just the same you can notice it now yesterday I mistaken changed it in to 4 sorry about that. , I understood that the column "A" of the sheet "USERNAMES" is "USERNAME".
• About updateButton , in this answer, alert('Password changed') is run as the sample.
• In order to update the password of Spreadsheet, it is required to use the username and the inputted password. And, it is also required to prepare the function at Google Apps Script side.

When above points are reflected to your script, it becomes as follows.

Javascript side:

From:

function GetRecords() {
  var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
  spin += " Loading...";
  document.getElementById("LoginButton").innerHTML = spin;

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

To:

var username = ""; // Added
function GetRecords() {
  var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
  spin += " Loading...";
  document.getElementById("LoginButton").innerHTML = spin;

  username = document.getElementById("username").value; // Modified
  var password = document.getElementById("password").value;

And, please modify changePassword() as follows.

function changePassword(){
  var result = confirm("Want to Change Password?");
  if (result) {
    var newPassword = document.getElementById("newPassword").value;
    google.script.run.withSuccessHandler(() => alert('Password changed')).changePassword(username, newPassword);
  }
}

Google Apps Script side:

Please add the following function to Google Apps Script side.

function changePassword(username, newPassword) {
  var sheet = SpreadsheetApp.openByUrl(url).getSheetByName("USERNAMES");
  var range = sheet.getRange("A2:A").createTextFinder(username).matchEntireCell(true).findNext();
  if (range) {
    range.offset(0, 6).setValue(newPassword);
  }
}

Note:

• In this case, when the password is changed, the alert of "Password changed" can be seen. And, the column "G" of Sheet "USERNAMES" is changed.