s1
This commit is contained in:
Suvodip
7
src/pages/login.astro
Normal file
7
src/pages/login.astro
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import LoginPage from "../components/Login";
|
||||
---
|
||||
<Layout title="">
|
||||
<LoginPage client:load />
|
||||
</Layout>
|
||||
265
src/pages/login_old.astro
Normal file
265
src/pages/login_old.astro
Normal file
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PocketBase Sign-In</title>
|
||||
</head>
|
||||
<style>
|
||||
.login-main-conatiner{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.login-container{
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
background: #222;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 100px 0;
|
||||
}
|
||||
#loginForm{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.auth-title {
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.auth-input {
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
.auth-input:focus {
|
||||
border-color: #00bcd4;
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
background: linear-gradient(135deg, #00bcd4, #0288d1);
|
||||
color: white;
|
||||
padding: 14px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
.auth-btn:hover {
|
||||
background: linear-gradient(135deg, #0288d1, #00bcd4);
|
||||
}
|
||||
|
||||
.auth-social {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.auth-social-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
transition: opacity 0.3s;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.auth-social-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.auth-google {
|
||||
background: #db4437;
|
||||
}
|
||||
.auth-facebook {
|
||||
background: #1877f2;
|
||||
}
|
||||
.auth-github {
|
||||
background: #333;
|
||||
}
|
||||
.auth-divider {
|
||||
margin: 20px 0;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.auth-divider::before,
|
||||
.auth-divider::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 37%;
|
||||
height: 1px;
|
||||
background: #444;
|
||||
top: 50%;
|
||||
}
|
||||
.auth-divider::before {
|
||||
left: 0;
|
||||
}
|
||||
.auth-divider::after {
|
||||
right: 0;
|
||||
}
|
||||
.auth-error {
|
||||
color: #ff4c4c;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.auth-footer {
|
||||
margin-top: 15px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
.auth-footer a {
|
||||
color: #00bcd4;
|
||||
text-decoration: none;
|
||||
}
|
||||
.auth-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.pass-view-button{
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div class="login-main-conatiner">
|
||||
<div class="login-container">
|
||||
<h2 class="auth-title">Login to Your Account</h2>
|
||||
<form id="loginForm">
|
||||
<input class="auth-input" id="email" type="email" name="email" placeholder="Email Address" required value="suvodip@siliconpin.com">
|
||||
<div class="auth-input" style="display: flex; position: relative;">
|
||||
<input class="auth-input" id="password" type="text" name="password" placeholder="Password" required style="width: 100%;" value="Simple2pass" />
|
||||
<button onclick="toggleInputType();" type="button" class="pass-view-button" style="position: absolute; right: 0; margin-top: 3px;">
|
||||
<img src="/assets/eye.svg" id="eyeToggle" alt="">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="auth-btn" type="submit">Sign In</button>
|
||||
</form>
|
||||
<p class="auth-divider">Or continue with</p>
|
||||
<div class="">
|
||||
<button id="loginGoogleBtn" onclick="loginWithOAuth2('google')" class="auth-social-btn auth-google">Login with Google</button>
|
||||
<button id="loginFacebookBtn" onclick="loginWithOAuth2('facebook')" class="auth-social-btn auth-facebook">Login with Facebook</button>
|
||||
<button id="loginGitHubBtn" onclick="loginWithOAuth2('github')" class="auth-social-btn auth-github">Login with GitHub</button>
|
||||
</div>
|
||||
|
||||
<p id="status" style="display: none;"></p>
|
||||
<p class="auth-footer">Don't have an account? <a href="/sign-up">Sign up</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline type="module">
|
||||
import PocketBase from 'https://cdn.jsdelivr.net/npm/pocketbase@0.19.0/+esm';
|
||||
|
||||
const pb = new PocketBase("https://tst-pb.s38.siliconpin.com");
|
||||
let isAuthenticated = false;
|
||||
|
||||
document.getElementById("loginForm").addEventListener("submit", async function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const email = document.getElementById("email").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const status = document.getElementById("status");
|
||||
|
||||
try {
|
||||
const authData = await pb.collection("users").authWithPassword(email, password);
|
||||
console.log("User signed in:", authData);
|
||||
status.style.display = 'block';
|
||||
status.textContent = "Login successful!";
|
||||
status.style.color = "green";
|
||||
isAuthenticated = true;
|
||||
updateUI(authData.record, authData.token);
|
||||
window.location.href = '/profile';
|
||||
} catch (error) {
|
||||
console.error("Login failed:", error);
|
||||
status.style.display = 'block';
|
||||
status.textContent = "Login failed. Please check your credentials.";
|
||||
status.style.color = "red";
|
||||
}
|
||||
});
|
||||
|
||||
async function loginWithOAuth2(provider) {
|
||||
try {
|
||||
const authData = await pb.collection('users').authWithOAuth2({ provider: provider });
|
||||
|
||||
if (!authData || !authData.record) {
|
||||
console.error("Login failed: No user record found.");
|
||||
return;
|
||||
}
|
||||
let accessToken = authData.token;
|
||||
isAuthenticated = true;
|
||||
console.log("Google Auth Response:", authData);
|
||||
updateUI(authData.record, authData.token);
|
||||
window.location.href = '/profile';
|
||||
} catch (error) {
|
||||
console.error("Google Login failed:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateUI(user, token) {
|
||||
if (!user || !user.email) {
|
||||
console.error("User data is missing:", user);
|
||||
return;
|
||||
}
|
||||
|
||||
// Send user data to PHP session
|
||||
fetch('http://localhost:2058/host-api/v1/users/session/', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
accessToken: token,
|
||||
email: user.email,
|
||||
name: user.name,
|
||||
avatar: user.avatar ? pb.files.getUrl(user, user.avatar) : '',
|
||||
isAuthenticated : true,
|
||||
id: user.id
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => console.log('Session updated:', data))
|
||||
.catch(error => console.error('Error saving session:', error));
|
||||
}
|
||||
|
||||
window.loginWithOAuth2 = loginWithOAuth2;
|
||||
|
||||
if (pb.authStore.isValid) {
|
||||
updateUI(pb.authStore.model);
|
||||
}
|
||||
|
||||
const inputType = document.getElementById('password');
|
||||
const eyeToggle = document.getElementById('eyeToggle');
|
||||
function toggleInputType(){
|
||||
if(inputType.type === 'password'){
|
||||
inputType.type = 'text';
|
||||
eyeToggle.src = '/assets/eye-close.svg';
|
||||
}else{
|
||||
inputType.type = 'password';
|
||||
eyeToggle.src = '/assets/eye.svg';
|
||||
}
|
||||
}
|
||||
window.toggleInputType = toggleInputType;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,10 +1,12 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
const phpHello = `$_SESSION['userName']`;
|
||||
// const phpHello = `$_SESSION['userName']`;
|
||||
import UserProfile from "../components/UserProfile";
|
||||
---
|
||||
|
||||
<Layout title="Profile Page">
|
||||
<div class="flex items-center justify-center min-h-screen bg-gray-700">
|
||||
<UserProfile client:load />
|
||||
<!-- <div class="flex items-center justify-center min-h-screen bg-gray-700">
|
||||
<div class="w-96 p-6 shadow-lg rounded-lg bg-white text-center">
|
||||
<img class="w-24 h-24 rounded-full border-4 border-blue-500 mx-auto" src="/profile.jpg" alt="Profile Picture" />
|
||||
<h2 class="text-2xl font-semibold mt-4" set:html={phpHello ? phpHello : 'User Name'}></h2>
|
||||
@@ -15,5 +17,5 @@ const phpHello = `$_SESSION['userName']`;
|
||||
<button class="bg-gray-200 text-black px-4 py-2 rounded-lg">Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user