This commit is contained in:
Unknown 2024-06-07 22:06:44 -07:00
parent 46de2d5e7f
commit d2c5777f95
4 changed files with 78 additions and 68 deletions

View file

@ -10,26 +10,17 @@
const code = urlParams.get("code");
// Exchange the authorization code for an access token
fetch(
"https://showcaseserver.azurewebsites.net/api/ExchangeTokenFunction",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ code: code }),
}
)
fetch("/Pages/ExchangeTokenFunction", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ code: code }),
})
.then((response) => response.json())
.then((data) => {
// Save the access token and optionally the refresh token in the parent window
window.opener.postMessage(
{
accessToken: data.access_token,
refreshToken: data.refresh_token,
},
"http://localhost:5500"
);
// Save the access token in local storage
localStorage.setItem("accessToken", data.access_token);
// Close the callback window
window.close();
})

View file

@ -6,7 +6,7 @@
href="/Resources/Favicons/favicon.png"
/>
<link rel="stylesheet" href="/Pages/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
window.addEventListener("DOMContentLoaded", (event) => {

View file

@ -28,8 +28,16 @@
<body>
<!--Navigation Bar-->
<div id="navbar"></div>
<h1></h1>
<h1>Shuffled Photos and Videos</h1>
<div class="Title-Container">
<h1 class="page-title" style="width: 100%; text-align: center">
Shuffled Photos and Videos
</h1>
<img
src="/Resources/Icons/team-icon.png"
id="TeamIcon"
alt="Team Icon"
/>
</div>
<div id="mediaContainer"></div>
<script src="/Pages/showcase.js"></script>

View file

@ -31,13 +31,13 @@
}
// Function to handle sign-in with Microsoft
function signInWithMicrosoft() {
function signInWithGoogle() {
window.open(
"https://login.microsoftonline.com/common/oauth2/v2.0/authorize?" +
"client_id=6a463b91-b81b-4837-8634-67ea902e09ed" + // Replace with your client ID
"https://accounts.google.com/o/oauth2/v2/auth?" +
"client_id=460702587834-648e1i2dmfu35i7ip1p5qa10mkcmastg.apps.googleusercontent.com" + // Replace with your client ID
"&response_type=code" +
"&redirect_uri=http://localhost:5500/Pages/Callback.html" + // Replace with your redirect URI
"&scope=openid%20offline_access%20Files.ReadWrite.All",
"&redirect_uri=http://localhost:5500/Pages/callback.html" + // Replace with your redirect URI
"&scope=https://www.googleapis.com/auth/drive",
"_blank"
);
}
@ -46,48 +46,57 @@
function logout() {
// Clear access token from local storage
localStorage.removeItem("accessToken");
// Open the logout endpoint in a new window
window.open(
"https://login.microsoftonline.com/common/oauth2/v2.0/logout" +
"?post_logout_redirect_uri=http://localhost:5500/Pages/logout.html",
"_blank"
);
// Reload the page
location.reload();
}
// Function to upload file
function uploadFile() {
async function uploadFile() {
const fileInput = document.getElementById("fileInput");
const file = fileInput.files[0];
if (file) {
const formData = new FormData();
formData.append("file", file);
// Retrieve access token from local storage
const accessToken = localStorage.getItem("accessToken");
if (!accessToken) {
alert("Access token not found. Please sign in again.");
return;
}
fetch(
"https://graph.microsoft.com/v1.0/me/drive/root:/Photos/" +
file.name +
":/content",
{
method: "PUT",
body: formData,
headers: {
Authorization: "Bearer " + accessToken,
},
}
)
.then((response) => {
if (response.ok) {
alert("File uploaded successfully!");
} else {
alert("Error uploading file!");
try {
// Exchange authorization code for access token
const tokenResponse = await fetch(
"https://us-central1-showcase-function.cloudfunctions.net/ExchangeTokenFunction",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
code: "AUTHORIZATION_CODE",
}), // Replace AUTHORIZATION_CODE with the actual authorization code
}
})
.catch((error) => console.error("Error:", error));
);
const tokenData = await tokenResponse.json();
const accessToken = tokenData.access_token;
// Use the access token to upload the file to Google Drive
const uploadResponse = await fetch(
"https://www.googleapis.com/upload/drive/v3/files?uploadType=media",
{
method: "POST",
headers: {
Authorization: "Bearer " + accessToken,
},
body: file,
}
);
if (uploadResponse.ok) {
alert("File uploaded successfully!");
} else {
alert("Error uploading file!");
}
} catch (error) {
console.error("Error:", error);
alert("Error uploading file!");
}
} else {
alert("Please select a file to upload.");
}
@ -136,8 +145,16 @@
<body>
<!--Navigation Bar-->
<div id="navbar"></div>
<h1></h1>
<h1>Upload Photos</h1>
<div class="Title-Container">
<h1 class="page-title" style="width: 100%; text-align: center">
Upload Photos
</h1>
<img
src="/Resources/Icons/team-icon.png"
id="TeamIcon"
alt="Team Icon"
/>
</div>
<button
class="button-style"
@ -150,17 +167,11 @@
id="fileInput"
accept="image/*"
style="display: none"
onchange="previewImage()"
/>
<button class="middle-button-style" onclick="uploadFile()">Send</button>
<img
id="previewImage"
class="centered-image"
style="display: none; max-width: 300px"
/>
<button class="button-style" onclick="signInWithMicrosoft()">
Click here to sign in with Microsoft
<button class="button-style" onclick="signInWithGoogle()">
Click here to sign in with Google
</button>
<!-- Logout button -->