${netVotes > 0 ? '+' : ''}${netVotes}
@@ -832,18 +1187,254 @@ window.addEventListener('DOMContentLoaded', async () => {
const upvoteButton = proposalCard.querySelector('[data-vote-type="upvote"]');
const downvoteButton = proposalCard.querySelector('[data-vote-type="downvote"]');
- upvoteButton.addEventListener('click', () => {
- handleVote(proposal.id, 'upvote');
- });
+ if (upvoteButton) {
+ upvoteButton.addEventListener('click', () => {
+ handleVote(proposal.id, 'upvote');
+ });
+ }
- downvoteButton.addEventListener('click', () => {
- handleVote(proposal.id, 'downvote');
- });
+ if (downvoteButton) {
+ downvoteButton.addEventListener('click', () => {
+ handleVote(proposal.id, 'downvote');
+ });
+ }
});
}
- // Initial load of proposals
- fetchProposals();
+ // Display the modal for petition verification
+ function showVerificationModal(proposalId) {
+ // Create the modal element
+ const modalOverlay = document.createElement('div');
+ modalOverlay.className = 'modal-overlay';
+
+ const modalContainer = document.createElement('div');
+ modalContainer.className = 'modal-container';
+
+ // Modal header
+ const modalHeader = document.createElement('div');
+ modalHeader.className = 'modal-header';
+
+ const modalTitle = document.createElement('h3');
+ modalTitle.textContent = 'Sign Official Petition';
+
+ const closeButton = document.createElement('button');
+ closeButton.className = 'modal-close';
+ closeButton.textContent = '✕';
+ closeButton.setAttribute('aria-label', 'Close modal');
+
+ modalHeader.appendChild(modalTitle);
+ modalHeader.appendChild(closeButton);
+
+ // Modal body
+ const modalBody = document.createElement('div');
+ modalBody.className = 'modal-body';
+
+ // Find the proposal text to display in the modal
+ const proposalCard = document.querySelector(`[data-proposal-id="${proposalId}"]`).closest('.proposal-card');
+ const proposalText = proposalCard.querySelector('.proposal-text').textContent;
+
+ // Current proposal context
+ const petitionContext = document.createElement('p');
+ petitionContext.innerHTML = `
You are officially petitioning for:
+
"${proposalText}"
+
Your details will be verified with the Australian Electoral Commission (AEC).`;
+
+ const formElement = document.createElement('form');
+ formElement.className = 'petition-form';
+
+ // Form fields
+ const fields = [
+ { id: 'full-name', label: 'Full Name (as registered with AEC)', type: 'text', required: true },
+ { id: 'address', label: 'Residential Address', type: 'text', required: true },
+ { id: 'postcode', label: 'Postcode', type: 'text', required: true, pattern: '\\d{4}' },
+ { id: 'dob', label: 'Date of Birth', type: 'date', required: true },
+ { id: 'email', label: 'Email Address', type: 'email', required: true }
+ ];
+
+ fields.forEach(field => {
+ const formGroup = document.createElement('div');
+ formGroup.className = 'form-group';
+
+ const label = document.createElement('label');
+ label.setAttribute('for', field.id);
+ label.textContent = field.label;
+
+ const input = document.createElement('input');
+ input.className = 'form-input';
+ input.id = field.id;
+ input.type = field.type;
+ input.required = field.required;
+
+ if (field.pattern) {
+ input.pattern = field.pattern;
+ }
+
+ const errorSpan = document.createElement('span');
+ errorSpan.className = 'form-error';
+ errorSpan.id = `${field.id}-error`;
+
+ formGroup.appendChild(label);
+ formGroup.appendChild(input);
+ formGroup.appendChild(errorSpan);
+
+ formElement.appendChild(formGroup);
+ });
+
+ // Consent checkbox
+ const consentDiv = document.createElement('div');
+ consentDiv.className = 'consent-checkbox';
+
+ const consentCheckbox = document.createElement('input');
+ consentCheckbox.type = 'checkbox';
+ consentCheckbox.id = 'petition-consent';
+ consentCheckbox.required = true;
+
+ const consentLabel = document.createElement('label');
+ consentLabel.setAttribute('for', 'petition-consent');
+ consentLabel.innerHTML = 'I certify that I am an Australian citizen or eligible resident, registered to vote, and consent to my information being used for this official petition.';
+
+ consentDiv.appendChild(consentCheckbox);
+ consentDiv.appendChild(consentLabel);
+
+ formElement.appendChild(consentDiv);
+
+ // Legal info
+ const infoText = document.createElement('p');
+ infoText.className = 'info-text';
+ infoText.textContent = 'Your details will be verified with the AEC database. A valid petition requires accurate information matching your electoral enrollment. Multiple signatures from the same person are prohibited.';
+
+ formElement.appendChild(infoText);
+
+ // Submit button
+ const submitButton = document.createElement('button');
+ submitButton.type = 'submit';
+ submitButton.className = 'petition-submit-btn';
+ submitButton.textContent = 'Sign Petition';
+ submitButton.disabled = true;
+
+ formElement.appendChild(submitButton);
+
+ modalBody.appendChild(petitionContext);
+ modalBody.appendChild(formElement);
+
+ modalContainer.appendChild(modalHeader);
+ modalContainer.appendChild(modalBody);
+
+ modalOverlay.appendChild(modalContainer);
+ document.body.appendChild(modalOverlay);
+
+ // Form validation
+ const inputs = formElement.querySelectorAll('input:not([type="checkbox"])');
+ const checkValidation = () => {
+ let isValid = true;
+
+ inputs.forEach(input => {
+ if (!input.validity.valid) {
+ isValid = false;
+ }
+ });
+
+ if (!consentCheckbox.checked) {
+ isValid = false;
+ }
+
+ submitButton.disabled = !isValid;
+ };
+
+ inputs.forEach(input => {
+ input.addEventListener('input', checkValidation);
+
+ // Show specific error messages
+ input.addEventListener('invalid', (e) => {
+ e.preventDefault();
+ const errorSpan = document.getElementById(`${input.id}-error`);
+ if (input.validity.valueMissing) {
+ errorSpan.textContent = 'This field is required';
+ } else if (input.validity.patternMismatch && input.id === 'postcode') {
+ errorSpan.textContent = 'Please enter a valid 4-digit postcode';
+ } else if (input.validity.typeMismatch && input.type === 'email') {
+ errorSpan.textContent = 'Please enter a valid email address';
+ } else {
+ errorSpan.textContent = 'Please enter valid information';
+ }
+ });
+ });
+
+ consentCheckbox.addEventListener('change', checkValidation);
+
+ // Close button functionality
+ closeButton.addEventListener('click', () => {
+ document.body.removeChild(modalOverlay);
+ });
+
+ // Form submission
+ formElement.addEventListener('submit', async (e) => {
+ e.preventDefault();
+
+ // Show loading state
+ submitButton.disabled = true;
+ submitButton.textContent = 'Verifying...';
+
+ // Collect form data
+ const formData = {
+ fullName: document.getElementById('full-name').value,
+ address: document.getElementById('address').value,
+ postcode: document.getElementById('postcode').value,
+ dob: document.getElementById('dob').value,
+ email: document.getElementById('email').value,
+ consent: document.getElementById('petition-consent').checked
+ };
+
+ // Verify with AEC (simulated)
+ await verifyWithAEC(formData, proposalId);
+ });
+ }
+
+ // Verify user details with AEC (simulated)
+ async function verifyWithAEC(userData, proposalId) {
+ try {
+ // Show loading state with timeout to simulate verification
+ await new Promise(resolve => setTimeout(resolve, 1500));
+
+ // In a real implementation, this would call your server which would verify with AEC APIs
+ // For demo purposes, we'll simulate a successful verification
+
+ // Store the verified state
+ if (!verifiedUsers[currentUser.id]) {
+ verifiedUsers[currentUser.id] = {};
+ }
+
+ // Mark this user as verified for this proposal
+ verifiedUsers[currentUser.id][proposalId] = {
+ verified: true,
+ timestamp: Date.now(),
+ userData: userData
+ };
+
+ // Save verification data to localStorage (in real app, this would be in your database)
+ localStorage.setItem('radical_verified_users', JSON.stringify(verifiedUsers));
+
+ // Remove the modal
+ const modal = document.querySelector('.modal-overlay');
+ document.body.removeChild(modal);
+
+ // Show success message
+ showToastMessage('✓ Petition signed successfully!', '#11cc77');
+
+ // Finally submit the vote with petition details
+ submitVote(proposalId, currentVoteType, true, userData);
+ } catch (error) {
+ console.error('Verification error:', error);
+ showToastMessage('⚠️ Verification failed. Please try again.', '#ff0099');
+
+ // Reset the form
+ const submitButton = document.querySelector('.petition-submit-btn');
+ if (submitButton) {
+ submitButton.disabled = false;
+ submitButton.textContent = 'Sign Petition';
+ }
+ }
+ }