Skip to content

Instantly share code, notes, and snippets.

@krooluang

krooluang/Loginแยก User

Created May 4, 2023 05:42
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save krooluang/003b87713dc93215199c6678d894330a to your computer and use it in GitHub Desktop.
Save krooluang/003b87713dc93215199c6678d894330a to your computer and use it in GitHub Desktop.
Download ZIP
Loginแยก User
Raw
css
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans Thai', sans-serif;
}
#pageB, #pageC{
display:none;
}
</style>
Raw
index
<!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" id="pageB">
<?!= HtmlService.createHtmlOutputFromFile('pageB').getContent() ?>
</div>
<div class="container" id="pageC">
<?!= HtmlService.createHtmlOutputFromFile('pageC').getContent() ?>
</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>
Raw
js
<script>
$( document ).ready(function() {
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)
let status = dataArray[0][4]
Swal.fire({
position: 'top',
icon: 'success',
title: 'Success',
showConfirmButton: false,
timer: 1500
})
if(status == "Teacher"){
document.getElementById("pageA").style.display = "none";
document.getElementById("pageB").style.display = "block";
document.getElementById("admin").innerHTML = dataArray[0][2]
document.getElementById("pic").src = dataArray[0][3]
}
if(status == "Student"){
document.getElementById("pageA").style.display = "none";
document.getElementById("pageC").style.display = "block";
document.getElementById("admin2").innerHTML = dataArray[0][2]
document.getElementById("pic2").src = dataArray[0][3]
}
document.getElementById("myForm").reset();
}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("pageA").style.display = "block";
document.getElementById("pageB").style.display = "none";
document.getElementById("pageC").style.display = "none";
}
})
}
</script>
Raw
Loginแยก User
//https://www.facebook.com/groups/exambloggas
//Database: https://docs.google.com/spreadsheets/d/1SjcYR7CKMT7cZSkrNxiRH1ZTWJdfusQQ49kTb96qa6I/copy
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;
}
Raw
pageB
<div class="col-md-6 mx-auto welcome card bg-white shadow my-2 bg">
<div class="card-body bg-white">
<div class="h2 form_title text-center mt-3">Teacher</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>
Raw
pageC
<div class="col-md-6 mx-auto welcome card bg-white shadow my-2 bg">
<div class="card-body bg-white">
<div class="h2 form_title text-center mt-3">Student</div>
<div class="text-center col-md-6 mx-auto">
<img id="pic2" src="" width="70px">
</div>
<div class="h4 text-center my-3 text-primary fw-bold"><span id="admin2"></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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment