MrJazsohanisharma

GAS: Register & Login & Logout & Session Storage

bysemicon -
0





const MySheets = SpreadsheetApp.getActiveSpreadsheet();
const LoginSheet = MySheets.getSheetByName("data");
function doGet() {
let output = HtmlService.createTemplateFromFile('login');
const sess = getSession();
if (sess.loggedIn) {
output = HtmlService.createTemplateFromFile('main');
}
return output.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setFaviconUrl("https://semicon.github.io/img/logosm.png")
.setTitle("Member Ship")
}
function myURL() {
return ScriptApp.getService().getUrl();
}
function setSession(session) {
const sId = Session.getTemporaryActiveUserKey();
let uProp = PropertiesService.getUserProperties();
uProp.setProperty(sId, JSON.stringify(session));
}
function getSession() {
const sId = Session.getTemporaryActiveUserKey();
const uProp = PropertiesService.getUserProperties();
const sData = uProp.getProperty(sId);
return sData ? JSON.parse(sData) : { loggedIn: false };
}
function loginUser(pUID, pPassword) {
if (loginCheck(pUID, pPassword)) {
let sess = getSession();
sess.loggedIn = true;
setSession(sess);
return 'success';
} else {
return 'failure';
}
}
function logoutUser() {
let sess = getSession();
sess.loggedIn = false;
setSession(sess);
}
function loginCheck(pUID, pPassword) {
let LoginPass = false;
let ReturnData = LoginSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();
ReturnData.forEach(function (range) {
let StartRow = range.getRow();
let TmpPass = LoginSheet.getRange(StartRow, 2).getValue();
if (TmpPass == pPassword){
LoginPass = true;
}
});
return LoginPass;
}
function OpenPage(PageName){
return HtmlService.createHtmlOutputFromFile(PageName).getContent();
}
function UserRegister(e) {
let RetMsg = '';
let ReturnData = LoginSheet.getRange("A:A").createTextFinder(e.reg_uid).matchEntireCell(true).findAll();
let StartRow = 0;
ReturnData.forEach(function (range) {
StartRow = range.getRow();
});
if (StartRow > 0) {
RetMsg = 'danger, User Already Exists';
}else{
LoginSheet.appendRow([e.reg_uid, e.reg_pass, e.reg_uname]) ;
RetMsg = 'success, User Successfully Registered';
}
return RetMsg;
}
view raw code.gs hosted with ❤ by GitHub
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent() ?>
</head>
<body>
<div id="DivLogin" class="card shadow rounded-4 rounded ">
<h5 class="card-header bg-secondary- text-white p-3 mycolor">Apps Script Secure Login</h5>
<a style="display:none" id="myid" href="<?= myURL(); ?>" target="_top">Link</a>
<div class="card-body p-4">
<center>
<i class="bi bi-person-circle fs-1 color"></i>
</center>
<br>
<div class="input-group mb-3">
<span class="input-group-text" >User</span>
<input type="text" class="form-control" id="uid" required placeholder="User ID" onchange="ClearText()">
</div>
<div class="input-group mb-3">
<span class="input-group-text" >Password</span>
<input type="password" class="form-control" id="pass" required placeholder="Password" onchange="ClearText()" >
</div>
<br>
<div id="RetMsg" class="alert alert-danger " style="display:none" role="alert"> </div>
<button type="button" onclick="login()" class="btn btn-primary mycolor float-end px-5 text-white" >Login</button>
<button type="button" onclick="OpenRegisterPage()" class="btn btn-mycolor float-end px-2 text-primary me-3">Register New User</button>
</div>
<form >
</div>
<div id="DivRegister"></div>
</body>
</html>
view raw login.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent() ?>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent() ?>
</head>
<body>
<button class="btn float-end px-5 text-white" type="button" onclick="logout()">Log Out</button>
<a style="display:none" id="myid" href="<?= myURL(); ?>" target="_top">Link</a>
<h3 class="mycolor p-2 text-white">Imagination</h3>
<br><br><br><br><br><br>
<center>
<h1>Welcome to Home Page</h1>
</center>
</body>
</html>
view raw main.html hosted with ❤ by GitHub
<div class="card shadow rounded-4 rounded ">
<h5 class="card-header bg-secondary- text-white p-3 mycolor">User Registration</h5>
<div class="card-body p-4">
<form id="registerForm" onsubmit="Register(this)">
<div id="RegBody">
<div class="input-group mb-3">
<span class="input-group-text" >User Name</span>
<input type="text" class="form-control" id="reg_uname" name="reg_uname" placeholder="User Name" onchange="ClearText()">
</div>
<div class="input-group mb-3">
<span class="input-group-text" >User ID</span>
<input type="text" class="form-control" id="reg_uid" name="reg_uid" placeholder="User ID" onchange="ClearText()">
</div>
<div class="input-group mb-3">
<span class="input-group-text" >Password</span>
<input type="password" class="form-control" id="reg_pass" name="reg_pass" placeholder="Password" onchange="ClearText()" >
</div>
<div class="input-group mb-3">
<span class="input-group-text" >Re-enter</span>
<input type="password" class="form-control" id="reg_repass" name="reg_repass" placeholder="Re-enter Password" onchange="ClearText()" >
</div>
</div>
<div id="RetMsgReg" class="alert alert-danger " style="display:none" role="alert"> </div>
<button type="submit" class="btn btn-primary- mycolor float-end px-5 text-white">Register</button>
<button type="button" onclick="OpenLoginPage()" class="btn btn-mycolor float-end px-2 text-primary me-3">Login</button>
</div>
</div>
view raw register.html hosted with ❤ by GitHub
<script>
function login() {
const username = document.getElementById("uid").value;
const password = document.getElementById("pass").value;
google.script.run.withSuccessHandler(function(response) {
if (response === "success") {
document.getElementById("myid").click();
} else {
$("#RetMsg").removeClass("alert-danger").removeClass("alert-success").addClass("alert-danger");
$("#RetMsg").html("Invalid User ID or Password");
$("#RetMsg").show();
}
}).loginUser(username, password);
}
function ClearText()
{
$('#RetMsg').html("");
$('#RetMsg').hide();
$('#RetMsgReg').html("");
$('#RetMsgReg').hide();
}
function OpenRegisterPage(){
google.script.run.withSuccessHandler(ShowRegister).OpenPage("register");
}
function OpenLoginPage(){
google.script.run.withSuccessHandler(ShowLogin).OpenPage("login");
}
function ShowRegister(data){
$('#DivLogin').hide();
$('#DivRegister').html(data);
}
function ShowLogin(data){
$('#DivLogin').show();
$('#DivRegister').html('');
}
function Register(e){
event.preventDefault()
const pass = document.getElementById("reg_pass").value.trim();
const repass = document.getElementById("reg_repass").value.trim();
if (pass != repass){
RegReturnMsg("danger,Password Not Matched...");
}else{
google.script.run.withSuccessHandler(RegReturnMsg).UserRegister(e);
}
}
function RegReturnMsg(data){
const v = data.split(",");
const type=v[0];
$('#RetMsgReg').removeClass("alert-success").removeClass("alert-danger").addClass("alert-"+type);
$('#RetMsgReg').html(v[1]);
$('#RetMsgReg').show();
if (type == 'success'){
setTimeout(function(){
document.getElementById("myid").click();
}, 3000);
}
}
function logout(){
google.script.run.withSuccessHandler(AfterLogOut).logoutUser();
}
function AfterLogOut(){
document.getElementById("myid").click();
}
</script>
view raw script.js hosted with ❤ by GitHub
<style>
body {
background-color: rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%);
}
.card {
width: 400px;
margin: auto;
margin-top: 30px;
}
.input-group-text {
width: 100px;
display: inline-block;
}
.mycolor {
background-color: #3a67b1; //#6d3b89;
}
.btn-mycolor {
background-color: none;
border:none;
}
.color {
color: #3a67b1; //#6d3b89;
}
.img {
width: 60px;
margin: auto;
display: inline-block;
}
</style>
view raw style.css hosted with ❤ by GitHub





Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า