Files
ExpenseCount/app/View/Users/login.ctp
2026-06-25 13:03:45 +06:00

242 lines
6.4 KiB
PHP

<style>
* {
box-sizing: border-box
}
/* Full-width input fields */
input[type=text],
input[type=email],
input[type=password] {
width: 100%;
padding: 10px 15px;
margin: 0px 0 8px 0;
display: inline-block;
border: 1px solid #ADB4C2;
background: none;
border-radius: 4px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for all buttons */
button {
border-radius: 4px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
/* Extra styles for the cancel button */
.googlebtn {
padding: 14px 10px;
background-color: #ffffff;
color: #ADB4C2;
box-shadow: 0px 0px 10px;
}
/* Float cancel and signup buttons and add an equal width */
.googlebtn {
float: left;
width: 100%;
}
.signinbtn {
float: left;
width: 100%;
}
.orspan {
float: left;
text-align: center;
width: 100%;
font-weight: bold;
line-height: 40px;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
.g-signin2 {
display: inline-block;
width: 100%;
border-radius: 5px;
border: 1px solid #eeefff;
}
.g-signin2>div {
width: 100% !important;
height: 40px !important;
}
.g-signin2>div .abcRioButtonIcon {
padding: 12px !important;
}
.g-signin2>div .abcRioButtonContents {
font-size: 16px !important;
margin-right: 48px;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.googlebtn,
.signinbtn,
.orspan {
width: 100%;
}
}
</style>
<div class="col-md-6" style="margin:0px auto;">
<?php
if($verification){
?>
<div class="alert alert-info" role="alert">
<strong> Your account is verified successfully! Please login to access!</strong>
</div>
<?php
}
?>
<form action="<?php echo HTTP_SITE_URL; ?>/users/login" style="border:1px solid #ccc;background:#FFFFFF;" method="POST">
<div style="padding:15px;">
<h5>Sign in to your Account</h5>
<span class="inner"></span>
<?php echo $this->Session->read('system.message'); ?>
<br>
<label for="email" class="label"><b>Email Address* </b></label>
<input type="email" placeholder="Enter your Email Address" name="email" required>
<label for="psw" class="label"><b>Password*</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<label for="remme" class="label"><input type="checkbox" id="remme" name="remme" value="on"> <strong>Remember Me</strong></label>
<div class="clearfix">
<button type="submit" class="signinbtn btn-primary" name="singinbtn">Sign In</button>
<div>
<span class="orspan"> OR </span>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="<?php echo GOOGLE_CLIENT_ID; ?>.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<!-- data-onfailure="onSignInFailure"-->
<!-- <a href="#" onclick="signOut();">Sign out</a>-->
<!--button type="button" class="googlebtn"><img style="display:inline-block;height:25px;" src="<?= HTTP_SITE_URL . '/images/g.png' ?>" /><span style="mt-1"> Sign in with Google</span></button-->
</div>
</div>
<br>
<p>
<a style="font-weight:bold;color:dodgerblue" href="<?php echo HTTP_SITE_URL; ?>/users/forgotpass">Forgot Password?</a>
<a style="font-weight:bold;color:dodgerblue;float: right;" href="<?php echo HTTP_SITE_URL; ?>/users/register">Are not Registered?</a>
</p>
</div>
</form>
</div>
<script>
function onSignIn(googleUser) {
if (document.referrer && document.referrer != "") {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {});
auth2.disconnect();
}
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
var email = profile.getEmail();
var name = profile.getName();
var profileId = profile.getId();
// console.log("ID: " + profile.getId()); // Don't send this directly to your server!
// console.log('Full Name: ' + profile.getName());
// console.log('Given Name: ' + profile.getGivenName());
// console.log('Family Name: ' + profile.getFamilyName());
// console.log("Image URL: " + profile.getImageUrl());
// console.log("Email: " + profile.getEmail());
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
// console.log("ID Token: " + id_token);
$.ajax({
type: 'POST',
crossDomain: true,
dataType: "json",
url: "https://"+window.location.host+"/users/login",
//url: "<?= HTTP_SITE_URL ?>/users/googlesignin",
// Always include an `X-Requested-With` header in every AJAX request,
// to protect against CSRF attacks.
// headers: {
// 'X-Requested-With': 'XMLHttpRequest'
// },
// contentType: 'application/octet-stream; charset=utf-8',
//
success: function(result) {
// Handle or verify the server response.
if (result == true)
window.location.href = "<?= HTTP_SITE_URL ?>/pages/myExpenses";
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// $( ".inner" ).append("");
$(".inner").html(XMLHttpRequest.responseText);
//alert(XMLHttpRequest.responseText);
},
// processData: false,
data: {
profileId: profileId,
name: name,
email: email,
id_token: id_token
}
});
}
function onSignInFailure() {
//window.location.href = "<? //=HTTP_SITE_URL ?>///users/login";
//window.location.href = "<? //=HTTP_SITE_URL ?>///pages/products";
}
/*function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
console.log('User signed out.');
});
}*/
</script>