neno-tech/code.gs

## code.gs
function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function checkLogin(username, password) {
  var url = 'xxx';
  var ss= SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("xxx");
  var getLastRow =  webAppSheet.getLastRow();
  var found_record = '';
  for(var i = 1; i <= getLastRow; i++)
  {
   if(webAppSheet.getRange(i, 1).getDisplayValue().toUpperCase() == username.toUpperCase() &&
     webAppSheet.getRange(i, 2).getDisplayValue().toUpperCase() == password.toUpperCase())
   {
     found_record = 'TRUE';
   }
  }
  if(found_record == '')
  {
    found_record = 'FALSE';
  }
  return found_record;
}

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
	<base target="_top">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: "Open Sans";
			color: #000;
		}

		section {
      background: url("https://oldschoolgrappling.com/wp-content/uploads/2018/08/Background-opera-speeddials-community-web-simple-backgrounds.jpg");
			height: 100vh;
			width: 100%;
			background-size: cover;
			background-position: center center;
		}

		.form-container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 380px;
			padding: 50px 30px;
			border-radius: 10px;
			box-shadow: 7px 7px 60px #000;
		}

		h1 {
			color: #000;
			font-size: 2em;
			text-transform: uppercase;
			text-align: center;
			margin-bottom: 2rem;
		}

		.control input {
			font-size: 16px;
			display: block;
			width: 100%;
			color: #000;
			background: #ddd;
			outline: none;
			border: none;
			margin: 1em 0;
			border-radius: 30px;
			padding: 15px;

		}

		.control .btn {
			color: #fff;
			text-transform: uppercase;
			background: crimson;
			opacity: .7;
			transition: opacity .3s ease;
		}

		.btn:focus {
			opacity: 1;
		}

		p {
			text-align: center;
		}

		a {
			text-decoration: none;
			color: #000;
			opacity: .7;
		}

		a:hover {
			opacity: 1;
		}
	</style>
</head>

<body>
	<section>
		<div class="form-container">
			<div class="page1_class1" id="page1_id1">
				<h1>Login</h1>

				<div class="control">
					<label for="username">Username</label>
					<input type="text" id="username" >
            </div>
					<div class="control">
						<label for="psw">Password</label>
						<input type="password" id="password" >
            </div>
						<br>
						<div class="control">
							<input type="submit" class="btn" value="Login"onclick="LoginUser()">
							<span id="errorMessage" style="color: red" ></span>
						</div>

					</div>
	</section>
  	<script>
		function LoginUser()
    {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    google.script.run.withSuccessHandler(function(output)
    {
      if(output == 'TRUE')
      {
         window.open('https://www.google.com');
      }
      else if(output == 'FALSE')
      {
        document.getElementById("errorMessage").innerHTML = "คุณกรอกข้อมูลไม่ถูกต้อง!";
      }
    }).checkLogin(username, password);
    }
	</script>
</body>

</html>
	function doGet(e) {
	return HtmlService.createTemplateFromFile("index").evaluate()
	.addMetaTag('viewport', 'width=device-width, initial-scale=1')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
	}

	function checkLogin(username, password) {
	var url = 'xxx';
	var ss= SpreadsheetApp.openByUrl(url);
	var webAppSheet = ss.getSheetByName("xxx");
	var getLastRow = webAppSheet.getLastRow();
	var found_record = '';
	for(var i = 1; i <= getLastRow; i++)
	{
	if(webAppSheet.getRange(i, 1).getDisplayValue().toUpperCase() == username.toUpperCase() &&
	webAppSheet.getRange(i, 2).getDisplayValue().toUpperCase() == password.toUpperCase())
	{
	found_record = 'TRUE';
	}
	}
	if(found_record == '')
	{
	found_record = 'FALSE';
	}
	return found_record;
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<base target="_top">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: "Open Sans";
	color: #000;
	}

	section {
	background: url("https://oldschoolgrappling.com/wp-content/uploads/2018/08/Background-opera-speeddials-community-web-simple-backgrounds.jpg");
	height: 100vh;
	width: 100%;
	background-size: cover;
	background-position: center center;
	}

	.form-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 380px;
	padding: 50px 30px;
	border-radius: 10px;
	box-shadow: 7px 7px 60px #000;
	}

	h1 {
	color: #000;
	font-size: 2em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 2rem;
	}

	.control input {
	font-size: 16px;
	display: block;
	width: 100%;
	color: #000;
	background: #ddd;
	outline: none;
	border: none;
	margin: 1em 0;
	border-radius: 30px;
	padding: 15px;

	}

	.control .btn {
	color: #fff;
	text-transform: uppercase;
	background: crimson;
	opacity: .7;
	transition: opacity .3s ease;
	}

	.btn:focus {
	opacity: 1;
	}

	p {
	text-align: center;
	}

	a {
	text-decoration: none;
	color: #000;
	opacity: .7;
	}

	a:hover {
	opacity: 1;
	}
	</style>
	</head>

	<body>
	<section>
	<div class="form-container">
	<div class="page1_class1" id="page1_id1">
	<h1>Login</h1>

	<div class="control">
	<label for="username">Username</label>
	<input type="text" id="username" >
	</div>
	<div class="control">
	<label for="psw">Password</label>
	<input type="password" id="password" >
	</div>
	<br>
	<div class="control">
	<input type="submit" class="btn" value="Login"onclick="LoginUser()">
	<span id="errorMessage" style="color: red" ></span>
	</div>

	</div>
	</section>
	<script>
	function LoginUser()
	{
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	google.script.run.withSuccessHandler(function(output)
	{
	if(output == 'TRUE')
	{
	window.open('https://www.google.com');
	}
	else if(output == 'FALSE')
	{
	document.getElementById("errorMessage").innerHTML = "คุณกรอกข้อมูลไม่ถูกต้อง!";
	}
	}).checkLogin(username, password);
	}
	</script>
	</body>

	</html>