krooluang/LoginFree

## css.html
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai&display=swap');
*{
  font-family: 'Noto Sans Thai', sans-serif;
}
</style>

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Login Examblog</title>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
</head>

<body>
  <div id="pageA">
    <div class="container my-3">
      <div class="col-md-6 mx-auto card shadow">
        <div class="card-body p-4">
          <h1 class="text-center"><i class="fa-solid fa-user-lock me-2"></i>Login</h1>
          <form id="myForm" onsubmit="login(this)">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" name="username" placeholder="name@example.com" required>
              <label for="floatingInput"><i class="fa-solid fa-circle-user"></i> Username</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
              <label for="floatingPassword"><i class="fa-solid fa-lock"></i> Password</label>
            </div>
            <button type="submit" class="btn btn-primary btn-lg w-100"><i class="fa-solid fa-right-to-bracket me-2"></i>Login</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="col-md-6 mx-auto welcome card bg-white shadow my-2 bg" id="pageB" style="display:none">
      <div class="card-body bg-white">
        <div class="h2 form_title text-center mt-3"> Welcome</div>
        <div class="text-center col-md-6 mx-auto">
          <img id="pic" src="" width="70px">
        </div>
        <div class="h4 text-center my-3 text-primary fw-bold"><span id="admin"></span>
        </div>
        <div class="text-center">
          <button class="btn btn-primary" onclick="logout()"><i class="fa-solid fa-house"></i> Logout</button>
        </div>
      </div>
    </div>
  </div>
 <div class="copyright mb-3"></div>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://cdn.jsdelivr.net/gh/examblog/web/js/FtExamblog.js"></script>
  <?!= HtmlService.createHtmlOutputFromFile('js').getContent() ?>
</body>

</html>

## js.html
<script>
  setFooter()
  	function login(obj){
      event.preventDefault()
         Swal.fire({
            position: 'top',
            icon: 'info',
            title: 'Loading...',
            showConfirmButton: false,
          })
          Swal.showLoading()
            google.script.run.withSuccessHandler((dataArray)=>{
          if(dataArray && dataArray !== undefined && dataArray.length != 0){
                console.log(dataArray)
           Swal.fire({
              position: 'top',
              icon: 'success',
              title: 'Success',
              showConfirmButton: false,
              timer: 1500
            })
            document.getElementById("pageA").style.display = "none";
            document.getElementById("pageB").style.display = "block";
            document.getElementById("myForm").reset();
            document.getElementById("admin").innerHTML = dataArray[0][2]
            document.getElementById("pic").src = dataArray[0][3]
              }else{
                Swal.fire({
                position: 'top',
                icon: 'error',
                title: 'ไม่พบข้อมูล!!',
                showConfirmButton: false,
                timer: 1500
              })
              }
          }).loginData(obj);
          }

        function logout(){
          Swal.fire({
          position: 'top',
          title: 'Are you sure?',
          text: "Logout!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#116bfd',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes!'
        }).then((result) => {
          if (result.isConfirmed) {
            document.getElementById("pageB").style.display = "none";
            document.getElementById("pageA").style.display = "block";
          }
        })
        }
	</script>


## LoginFree
//code.gs
//https://www.facebook.com/groups/exambloggas

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


function loginData(obj){
  var ss = SpreadsheetApp.getActive().getSheetByName('Admin')
  var data = ss.getDataRange().getDisplayValues()
  var id = obj.username+obj.password
  var ar = [];

  data.forEach(function(f) {
    if (~[f[0]+f[1]].indexOf(id)) {
      ar.push(f);
    }
  });
  return ar;
}
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai&display=swap');
	*{
	font-family: 'Noto Sans Thai', sans-serif;
	}
	</style>
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Examblog</title>
	<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
	<?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
	</head>

	<body>
	<div id="pageA">
	<div class="container my-3">
	<div class="col-md-6 mx-auto card shadow">
	<div class="card-body p-4">
	<h1 class="text-center"><i class="fa-solid fa-user-lock me-2"></i>Login</h1>
	<form id="myForm" onsubmit="login(this)">
	<div class="form-floating mb-3">
	<input type="text" class="form-control" name="username" placeholder="name@example.com" required>
	<label for="floatingInput"><i class="fa-solid fa-circle-user"></i> Username</label>
	</div>
	<div class="form-floating mb-3">
	<input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
	<label for="floatingPassword"><i class="fa-solid fa-lock"></i> Password</label>
	</div>
	<button type="submit" class="btn btn-primary btn-lg w-100"><i class="fa-solid fa-right-to-bracket me-2"></i>Login</button>
	</form>
	</div>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="col-md-6 mx-auto welcome card bg-white shadow my-2 bg" id="pageB" style="display:none">
	<div class="card-body bg-white">
	<div class="h2 form_title text-center mt-3"> Welcome</div>
	<div class="text-center col-md-6 mx-auto">
	<img id="pic" src="" width="70px">
	</div>
	<div class="h4 text-center my-3 text-primary fw-bold"><span id="admin"></span>
	</div>
	<div class="text-center">
	<button class="btn btn-primary" onclick="logout()"><i class="fa-solid fa-house"></i> Logout</button>
	</div>
	</div>
	</div>
	</div>
	<div class="copyright mb-3"></div>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	<script src="https://cdn.jsdelivr.net/gh/examblog/web/js/FtExamblog.js"></script>
	<?!= HtmlService.createHtmlOutputFromFile('js').getContent() ?>
	</body>

	</html>
	<script>
	setFooter()
	function login(obj){
	event.preventDefault()
	Swal.fire({
	position: 'top',
	icon: 'info',
	title: 'Loading...',
	showConfirmButton: false,
	})
	Swal.showLoading()
	google.script.run.withSuccessHandler((dataArray)=>{
	if(dataArray && dataArray !== undefined && dataArray.length != 0){
	console.log(dataArray)
	Swal.fire({
	position: 'top',
	icon: 'success',
	title: 'Success',
	showConfirmButton: false,
	timer: 1500
	})
	document.getElementById("pageA").style.display = "none";
	document.getElementById("pageB").style.display = "block";
	document.getElementById("myForm").reset();
	document.getElementById("admin").innerHTML = dataArray[0][2]
	document.getElementById("pic").src = dataArray[0][3]
	}else{
	Swal.fire({
	position: 'top',
	icon: 'error',
	title: 'ไม่พบข้อมูล!!',
	showConfirmButton: false,
	timer: 1500
	})
	}
	}).loginData(obj);
	}

	function logout(){
	Swal.fire({
	position: 'top',
	title: 'Are you sure?',
	text: "Logout!",
	icon: 'warning',
	showCancelButton: true,
	confirmButtonColor: '#116bfd',
	cancelButtonColor: '#d33',
	confirmButtonText: 'Yes!'
	}).then((result) => {
	if (result.isConfirmed) {
	document.getElementById("pageB").style.display = "none";
	document.getElementById("pageA").style.display = "block";
	}
	})
	}
	</script>
	//code.gs
	//https://www.facebook.com/groups/exambloggas

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


	function loginData(obj){
	var ss = SpreadsheetApp.getActive().getSheetByName('Admin')
	var data = ss.getDataRange().getDisplayValues()
	var id = obj.username+obj.password
	var ar = [];

	data.forEach(function(f) {
	if (~[f[0]+f[1]].indexOf(id)) {
	ar.push(f);
	}
	});
	return ar;
	}