Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implemented google oauth #91

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

implemented google oauth #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
376 changes: 171 additions & 205 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,210 +1,176 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/72fc4d72f1.js"
crossorigin="anonymous"
></script>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css" />
<link rel="stylesheet" href="styles/styles.css" />
<script src="scripts/scripts.js" defer></script>
<title>Giphy Search | @lcrojano</title>
</head>

<body class="flex-col align-items-center">
<div id="github-link">
<a href="https://github.com/lcrojano/Giphy_Explorer" target="_blank">
<img src="assets/images/github-mark-white.png" alt="GitHub" />
<h1>Fork Me</h1>
</a>
</div>
<section class="modal" id="modal-overlay">
<div class="share-modal">
<div class="share-head">
<h2>Share GIF</h2>
<i class="fa-solid fa-x" id="close"></i>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
/* CSS for styling the login page */
body {
font-family: 'Arial', sans-serif;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.login-container {
background-color: #fff;
padding: 40px;
border: 5px solid #c253b7;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}

h2 {
font-family: 'Georgia', serif;
font-size: 28px;
margin-bottom: 20px;
}

label {
display: block;
text-align: left;
font-family: 'Verdana', sans-serif;
font-size: 14px;
margin-bottom: 8px;
}

input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: 'Courier New', monospace;
}

button {
width: 100%;
padding: 10px;
background-color: #6F4FFF;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
font-family: 'Arial', sans-serif;
cursor: pointer;
}

button:hover {
background-color: #434190;
}

.signup-link {
margin-top: 20px;
font-size: 14px;
font-family: 'Helvetica', sans-serif;
}

.signup-link a {
color: #5A67D8;
text-decoration: none;
font-weight: bold;
}

.signup-link a:hover {
text-decoration: underline;
}

.google-login {
margin-top: 20px;
width: 100%;
display: flex;
justify-content: center;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/jwt-decode/build/jwt-decode.min.js"></script>

<script src="https://accounts.google.com/gsi/client" async defer></script>

</head>

<body>
<script>
// Redirect to main page if already logged in
if (localStorage.getItem('isAuthenticated') === 'true') {
window.location.href = 'home.html';
}
</script>

<div style="display: flex; flex-direction: column; align-items: center; margin: 20px;">
<h1 style="color: white; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';"><span
style="color: #c253b7; font-weight: bolder; font-size: xx-large; margin-top: 10px;">Giphy</span></h1>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit" style="margin-left: 10px; background: #c253b7">Login</button>
</form>

<p> OR </p>


<div class="google-login">
<div id="g_id_onload" data-client_id="GOOGLE_CLIENT_ID" data-context="signin" data-ux_mode="popup"
data-callback="handleCredentialResponse" data-auto_prompt="false">
</div>
<ul class="social-links">
<li><i id="share-fb" class="fa-brands fa-square-facebook"></i></li>
<li>
<i id="share-twitter" class="fa-brands fa-square-twitter"></i>
</li>
<!-- <li><i id="share-insta" class="fa-brands fa-square-instagram"></i></li> -->
<!-- not possible due to instagram api restrictions -->
<li>
<i id="share-pinterest" class="fa-brands fa-square-pinterest"></i>
</li>
</ul>
<button id="copy" class="secondary-btn copy-btn">Copy Link</button>
<div class="g_id_signin" data-type="standard"></div>
</div>
</section>
<section class="container flex-col justify-content-center">
<button onclick="topFunction()" id="myBtn" title="Go to top">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-arrow-up"
>
<line x1="12" y1="19" x2="12" y2="5"></line>
<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</button>
<header
class="flex-row justify-content-btw align-items-center headerdata"
>
<div>
<a href="https://lcrojano.github.io/Giphy_Explorer/" class="logo-link">
<h1 class="grow-2" id="logo">Giphy Search</h1>
</a>
<caption style="font-family: 'Patrick Hand', cursive; font-weight: bolder;">
By Luis Rojano
</caption>
</div>
<div style="display: flex">
<button class="secondary-btn">
<a href="login.html" style="text-decoration: none; color: inherit;">Log In</a>
</button>
<!-- Add this button to trigger the modal for uploading GIFs -->
<button
id="upload-button"
class="secondary-btn upload-btn"
style="margin-left: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bolder;"
>
Upload GIF
</button>

<!-- Add a hidden input element for file selection -->
<input
type="file"
id="file-upload"
accept=".gif"
style="display: none"
/>
</div>
</header>
<section
class="flex-col justify-content-center stickysearchbar"
id="searchbar"
>
<div class="flex-row justify-content-btw align-items-center">
<input
class="grow-2 sticky"
type="search"
name="search"
id="search"
placeholder="Search GIF here"
/>
<button id="search-btn" class="primary-btn">
<img
src="https://giphy.com/static/img/search-icon.svg"
width="30"
/>
</button>
<button id="toggle" class="primary-btn" onClick="toggleLightDark()">
<img
id="toggle-image"
src="./assets/images/lightLamp.svg"
alt="https://www.flaticon.com/free-icons/electronics"
width="30"
/>
</button>
<button id="fav-btn" class="primary-btn">
<a href="./favs.html">
<img src="./assets/images/heart.png" alt="favorites" width="30" />
</a>
</button>
</div>
</section>

<!-- Update the modal for sharing GIFs -->
<section class="modal" id="modal-overlay">
<div class="share-modal">
<div class="share-head">
<h2>Share GIF</h2>
<i class="fa-solid fa-x" id="close"></i>
</div>
<ul class="social-links">
<li><i class="fa-brands fa-square-facebook"></i></li>
<li><i class="fa-brands fa-square-twitter"></i></li>
<li><i class="fa-brands fa-square-instagram"></i></li>
<li><i class="fa-brands fa-square-pinterest"></i></li>
</ul>
<button id="copy" class="secondary-btn copy-btn" style="margin-bottom: 10px;">Copy Link</button>
</div>
</section>

<section
class="flex-row justify-content-btw align-items-center searchtermdata"
>
<div class="flex-col">
<strong id="search-term">GATOS</strong>
<span id="">2000</span>
</div>
<nav>
<menu id="history" class="flex-row tag-menu" ></menu>
</nav>
</section>

<main>
<div
id="gifs-list"
class="flex-row flex-wrap justify-content-center"
></div>
</main>
</section>
<aside></aside>
<script type="text/javascript">
mybutton = document.getElementById('myBtn');
logo = document.getElementById('logo');
searchbar = document.getElementById('searchbar');

// Indicate scroll down or scroll up
var scrollBefore = 0;

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
const scrolled = window.scrollY;

if (window.pageYOffset > 50 && scrollBefore < window.scrollY) {
mybutton.style.display = 'block';
logo.classList.add('fixedlogo', 'show');
logo.classList.remove('logo');

searchbar.classList.remove('stickysearchbar');
searchbar.classList.add('fixedsearchbar');
scrollBefore = scrolled;
} else if (window.pageYOffset < 50) {
scrollBefore = window.scrollY;
mybutton.style.display = 'none';

searchbar.classList.add('stickysearchbar');
searchbar.classList.remove('fixedsearchbar');

logo.classList.remove('fixedlogo', 'show');
logo.classList.add('logo');
}
}
<div class="signup-link">
Don't have an account? <a href="signup.html">Sign up</a>
</div>
</div>

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
</div>
</div>


<script>
document.getElementById('loginForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent form from submitting

const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

if (username && password) {
// You would typically validate against your backend here
// Set the authentication flag in localStorage
localStorage.setItem('isAuthenticated', 'true');
// Redirect to the main page
window.location.href = 'home.html';
} else {
alert('Please enter both username and password');
}
</script>
</body>
</html>
});

// Google Sign-In Callback Function
function handleCredentialResponse(response) {
// Decode the JWT token to retrieve user information
const userObject = jwt_decode(response.credential); // Ensure jwt_decode is imported correctly

// Log the encoded JWT ID token for debugging
console.log("Encoded JWT ID token: " + response.credential);
console.log("User Object:", userObject); // Log the decoded user object for verification

// Store user data and authentication state in local storage
localStorage.setItem('isAuthenticated', 'true'); // Set authenticated state
localStorage.setItem('user', JSON.stringify(userObject)); // Save user data

// Redirect to home page
window.location.href = 'home.html';
}
</script>
</body>

</html>
Loading