-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.js
128 lines (113 loc) · 3.79 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
function getQueryParam(param) {
const params = new URLSearchParams(window.location.search);
if (!params.has(param)) {
throw new Error(`Parameter ${param} is missing from the URL query string`);
}
return params.get(param);
}
function sendMessageToParent(data) {
window.parent.postMessage(data, "*"); // Accept messages from any origin
}
function showLoadingIndicator() {
const loadingDiv = document.createElement("div");
loadingDiv.id = "loadingIndicator";
loadingDiv.style.position = "fixed";
loadingDiv.style.top = "0";
loadingDiv.style.left = "0";
loadingDiv.style.width = "100%";
loadingDiv.style.height = "100%";
loadingDiv.style.zIndex = "9999";
loadingDiv.style.display = "flex";
loadingDiv.style.justifyContent = "center";
loadingDiv.style.alignItems = "center";
// Add spinner container
const spinnerContainer = document.createElement("div");
spinnerContainer.style.display = "flex";
spinnerContainer.style.flexDirection = "column";
spinnerContainer.style.alignItems = "center";
// Add spinner
const spinner = document.createElement("div");
spinner.style.border = "6px solid #f3f3f3"; // Light grey
spinner.style.borderTop = "6px solid #3498db"; // Blue
spinner.style.borderRadius = "50%";
spinner.style.width = "50px";
spinner.style.height = "50px";
spinner.style.animation = "spin 1s linear infinite";
// Add animation styles
const style = document.createElement("style");
style.textContent = `
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
margin-top: 10px;
color: white;
font-size: 16px;
font-family: Arial, sans-serif;
}
`;
// Add loading text
const loadingText = document.createElement("div");
loadingText.textContent = "Signing you in...";
loadingText.className = "loading-text";
document.head.appendChild(style);
spinnerContainer.appendChild(spinner);
spinnerContainer.appendChild(loadingText);
loadingDiv.appendChild(spinnerContainer);
document.body.appendChild(loadingDiv);
}
function hideLoadingIndicator() {
const loadingDiv = document.getElementById("loadingIndicator");
if (loadingDiv) {
loadingDiv.remove();
}
}
async function handleCredentialResponse(response) {
const idToken = response.credential;
const sessionPublicKey = getQueryParam("publicKey");
const appId = getQueryParam("appId");
// Show loading animation
showLoadingIndicator();
try {
const res = await fetch(`${BACKEND_URL}/verify-id-token`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Origin: window.location.origin,
},
body: JSON.stringify({ idToken, sessionPublicKey, appId }),
});
if (!res.ok) {
throw new Error("Authentication failed");
}
const { success, userIdHash } = await res.json(); // Extract googleId from the response
if (!success) {
throw new Error("Authentication failed");
}
sendMessageToParent({ type: "auth-success", userIdHash }); // Send googleId to the parent
} catch (error) {
sendMessageToParent({ type: "auth-error", error: error.message });
} finally {
// Hide loading animation
hideLoadingIndicator();
}
}
window.onload = function () {
const container = document.getElementById("buttonDiv");
container.innerHTML = `
<div style="text-align: center; font-family: Arial, sans-serif; margin-bottom: 20px;">
<h2 style="color: #333;">Login or sign up</h2>
</div>
`;
google.accounts.id.initialize({
client_id: GOOGLE_CLIENT_ID,
callback: handleCredentialResponse,
});
google.accounts.id.renderButton(container, {
theme: "outline",
size: "large",
});
};