Skip to content

Commit

Permalink
resolve #78
Browse files Browse the repository at this point in the history 
Create QuickGit_OAuth.html
  • Loading branch information
@CherrelleTucker
CherrelleTucker authored Dec 7, 2024
1 parent 27f96ea commit ce49fac
Showing 1 changed file with 222 additions and 0 deletions.
222 changes: 222 additions & 0 deletions DynamicDocToGitHubIssue/QuickGit_OAuth.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
<!DOCTYPE html>
<html>
<head>
<title>QuickGit</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f9f9f9;
}

.auth-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 20px;
}

.auth-content {
background-color: white;
border-radius: 8px;
padding: 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
text-align: center;
}

.auth-description {
color: #666;
margin: 16px 0 24px;
line-height: 1.5;
}

.auth-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background-color: #24292e;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}

.auth-button:hover {
background-color: #1b1f23;
}

.permissions-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1000;
}

.permissions-popup h2 {
margin-top: 0;
font-size: 18px;
}

.permissions-popup ul {
margin: 16px 0;
padding-left: 24px;
color: #666;
}

.permissions-popup button {
margin: 8px;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
}

.permissions-popup button.proceed {
background-color: #2ea44f;
color: white;
border: none;
}

.permissions-popup button.cancel {
background-color: #f6f8fa;
border: 1px solid #e1e4e8;
color: #24292e;
}
</style>
</head>
<body>
<!-- Main Content -->
<div class="auth-container">
<div class="auth-content">
<h1>Welcome to QuickGit</h1>
<p class="auth-description">Please authenticate with GitHub to start converting your Google Docs to issues.</p>
<button id="authButton" onclick="startAuth()" class="auth-button" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white" style="margin-right: 8px;">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
</svg>
Sign in with GitHub
</button>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
// Check if user is authenticated when the page loads
google.script.run
.withSuccessHandler(function(authenticated) {
if (!authenticated) {
console.log('User not authenticated, showing permissions popup.');
showPermissionsPopup();
} else {
console.log('User is authenticated, proceeding without showing popup.');
document.getElementById("authButton").style.display = "block";
}
})
.isUserAuthenticated();
});

function showPermissionsPopup() {
const popup = document.createElement('div');
popup.className = 'permissions-popup';
popup.innerHTML = `
<h2>GitHub Authorization Required</h2>
<p>This application requires the following GitHub permissions:</p>
<ul>
<li>Access to organization repositories (read/write)</li>
<li>Read access to organization memberships</li>
<li>Write access to issues and discussions</li>
</ul>
<button onclick="startAuth()" class="proceed">Proceed with Authorization</button>
<button onclick="closePermissionsPopup()" class="cancel">Cancel</button>
`;
document.body.appendChild(popup);
}

function closePermissionsPopup() {
const popup = document.querySelector('.permissions-popup');
if (popup) {
popup.remove();
}
}

function startAuth() {
console.log('Starting authentication flow...');

google.script.run
.withSuccessHandler(function(result) {
if (result.success) {
try {
const authWindow = window.open(result.authUrl, 'githubAuth',
'width=600,height=600,menubar=no,toolbar=no,location=no,status=no');

if (!authWindow) {
showMessage('Popup blocked - please allow popups for this site', 'error');
return;
}

const pollTimer = window.setInterval(function() {
try {
if (authWindow.closed) {
window.clearInterval(pollTimer);
console.log('Auth window closed, reloading page to reflect authentication state.');
window.location.reload();
}
} catch (error) {
console.error('Error polling auth window:', error);
window.clearInterval(pollTimer);
showMessage('Authentication error: ' + error.message, 'error');
}
}, 200);
} catch (error) {
console.error('Error opening auth window:', error);
showMessage('Error opening auth window: ' + error.message, 'error');
}
} else {
console.error('Auth start failed:', result.error);
showMessage(result.error || 'Failed to start authentication', 'error');
}
})
.withFailureHandler(function(error) {
console.error('Server error:', error);
showMessage('Server error: ' + error.message, 'error');
})
.startOAuthFlow();
}

function showMessage(text, type) {
const messageEl = document.createElement('div');
messageEl.className = `message ${type}`;
messageEl.textContent = text;
messageEl.style.cssText = `
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 12px 24px;
border-radius: 6px;
background-color: ${type === 'error' ? '#f44336' : '#4caf50'};
color: white;
font-size: 14px;
z-index: 1000;
`;
document.body.appendChild(messageEl);
setTimeout(() => messageEl.remove(), 5000);
}
</script>
</body>
</html>

0 comments on commit ce49fac

Please sign in to comment.