238 lines
9.1 KiB
HTML
238 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Idea & Feedback Form</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#4c51bf',
|
|
secondary: '#5b21b6',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="min-h-screen bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex justify-center items-center font-sans">
|
|
<!-- Login Container -->
|
|
<div id="loginContainer" class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">Cardoza Construction</h1>
|
|
<p class="text-gray-600">Idea & Feedback Form</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<p class="text-gray-700 text-center">Sign in with your Microsoft account to access the Idea & Feedback Form</p>
|
|
<button type="button" id="loginBtn" class="w-full py-3 px-4 bg-gradient-to-br from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-95 transition-opacity shadow-lg hover:shadow-xl">
|
|
Login with Microsoft
|
|
</button>
|
|
</div>
|
|
|
|
<div id="loginError" class="hidden mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>
|
|
</div>
|
|
|
|
<!-- Form Container (hidden until logged in) -->
|
|
<div id="formContainer" class="hidden bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-6 sm:p-12">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div>
|
|
<h1 class="text-3xl sm:text-4xl font-bold text-gray-800">Idea & Feedback Form</h1>
|
|
<p class="text-gray-600 text-sm sm:text-base">Please share your ideas or feedback for improvement</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p id="userEmailDisplay" class="text-sm text-gray-600 mb-2"></p>
|
|
<button type="button" id="logoutBtn" class="px-3 py-1 bg-gray-200 text-gray-800 rounded-lg text-sm hover:bg-gray-300 transition-colors">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="feedbackForm" class="space-y-6" autocomplete="off">
|
|
<!-- Form Type -->
|
|
<div class="bg-gray-50 rounded-xl p-4 sm:p-6">
|
|
<div class="text-lg font-semibold text-gray-700 mb-4 pb-2 border-b-2 border-primary">Form Type</div>
|
|
|
|
<div class="flex flex-col">
|
|
<label class="block text-sm font-medium text-gray-700 mb-4">
|
|
Select Type <span class="text-red-600">*</span>
|
|
</label>
|
|
<div class="flex flex-wrap gap-6">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input type="radio" id="formTypeFeedback" name="Form_Type" value="Feedback" required class="w-4 h-4 text-primary focus:ring-primary" autocomplete="off">
|
|
<span class="text-sm font-medium">Feedback</span>
|
|
</label>
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input type="radio" id="formTypeSuggestion" name="Form_Type" value="Suggestion" required class="w-4 h-4 text-primary focus:ring-primary" autocomplete="off">
|
|
<span class="text-sm font-medium">Suggestion</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="bg-gray-50 rounded-xl p-4 sm:p-6">
|
|
<div class="text-lg font-semibold text-gray-700 mb-4 pb-2 border-b-2 border-primary">Description</div>
|
|
|
|
<div class="flex flex-col">
|
|
<label for="Description" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Details <span class="text-red-600">*</span>
|
|
</label>
|
|
<textarea id="Description" name="Description" required placeholder="Please describe your idea or feedback and be as detailed as possible" rows="6"
|
|
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all resize-none"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" id="submitBtn" disabled
|
|
class="w-full py-3 bg-gradient-to-br from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-95 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl">
|
|
Submit Feedback
|
|
</button>
|
|
|
|
<div id="message" class="hidden p-4 rounded-lg font-medium"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
|
|
<script>
|
|
// Initialize PocketBase client
|
|
const pb = new PocketBase('https://pocketbase.ccllc.pro');
|
|
|
|
// Update auth UI based on login state
|
|
function updateAuthUI() {
|
|
const loginContainer = document.getElementById('loginContainer');
|
|
const formContainer = document.getElementById('formContainer');
|
|
const userEmailDisplay = document.getElementById('userEmailDisplay');
|
|
|
|
if (pb.authStore.isValid) {
|
|
// Show form, hide login
|
|
loginContainer.classList.add('hidden');
|
|
formContainer.classList.remove('hidden');
|
|
const userName = pb.authStore.record?.name || pb.authStore.record?.email || 'Unknown User';
|
|
userEmailDisplay.textContent = userName;
|
|
} else {
|
|
// Show login, hide form
|
|
loginContainer.classList.remove('hidden');
|
|
formContainer.classList.add('hidden');
|
|
document.getElementById('loginError').classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Handle login button click
|
|
document.getElementById('loginBtn').addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const loginError = document.getElementById('loginError');
|
|
|
|
loginBtn.disabled = true;
|
|
loginBtn.textContent = 'Logging in...';
|
|
loginError.classList.add('hidden');
|
|
|
|
try {
|
|
const authData = await pb.collection('Users').authWithOAuth2({
|
|
provider: 'microsoft',
|
|
});
|
|
console.log('✓ Logged in with Microsoft');
|
|
updateAuthUI();
|
|
} catch (error) {
|
|
console.error(error);
|
|
loginError.textContent = `Login failed: ${error.message}`;
|
|
loginError.classList.remove('hidden');
|
|
} finally {
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = 'Login with Microsoft';
|
|
}
|
|
});
|
|
|
|
// Handle logout button click
|
|
document.getElementById('logoutBtn').addEventListener('click', () => {
|
|
pb.authStore.clear();
|
|
updateAuthUI();
|
|
});
|
|
|
|
// Initial auth UI update
|
|
updateAuthUI();
|
|
|
|
// Function to check if required fields are filled
|
|
function checkRequiredFields() {
|
|
const formType = document.querySelector('input[name="Form_Type"]:checked');
|
|
const description = document.getElementById('Description').value.trim();
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
if (formType && description) {
|
|
submitBtn.disabled = false;
|
|
} else {
|
|
submitBtn.disabled = true;
|
|
}
|
|
}
|
|
|
|
// Add event listeners to required fields
|
|
document.querySelectorAll('input[name="Form_Type"]').forEach(radio => {
|
|
radio.addEventListener('change', checkRequiredFields);
|
|
});
|
|
document.getElementById('Description').addEventListener('input', checkRequiredFields);
|
|
|
|
// Initial check
|
|
checkRequiredFields();
|
|
|
|
// Form submission
|
|
document.getElementById('feedbackForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Check if user is authenticated
|
|
if (!pb.authStore.isValid) {
|
|
alert('Please log in with your Microsoft account first');
|
|
return;
|
|
}
|
|
|
|
const submitBtn = e.target.querySelector('#submitBtn');
|
|
const message = document.getElementById('message');
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Submitting...';
|
|
message.classList.add('hidden');
|
|
|
|
const formData = new FormData(e.target);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
// Add user's PocketBase token
|
|
data.pbToken = pb.authStore.token;
|
|
|
|
try {
|
|
const response = await fetch('/api/submit', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
message.className = 'p-4 rounded-lg font-medium bg-green-50 text-green-700 border border-green-200';
|
|
message.textContent = result.message;
|
|
message.classList.remove('hidden');
|
|
e.target.reset();
|
|
checkRequiredFields();
|
|
} else {
|
|
throw new Error(result.message);
|
|
}
|
|
} catch (error) {
|
|
message.className = 'p-4 rounded-lg font-medium bg-red-50 text-red-700 border border-red-200';
|
|
message.textContent = error.message || 'Failed to submit form. Please try again.';
|
|
message.classList.remove('hidden');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = 'Submit Feedback';
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|