pm-fetch-cors.js

const testsPassedTemplate = `
<div class="container">
    <h3>All tests passed! 🚀</h3>
    <p>Congratulations! You've completed {{workshopCode}}. If you've registered for the classroom program, enter the <strong>same email you used in registration</strong> below to submit your progress to your teacher</p>

    <form onsubmit="handleSubmit(event)">
    <input type="email" name="email" placeholder="Enter your email" required />
    <input type="submit" id="submit-button"/>
    </form>
</div>

<script>
const submitUrl = "https://classroom-program-student-work-submit-staging.glitch.me/submit/{{workshopCode}}"

const submitButton = document.getElementById('submit-button');
const container = document.querySelector('.container');

// attempt to send student data to progress monitor
async function handleSubmit(e) {
    e.preventDefault();
    enableSendingUI();

    const studentEmail = e.target.elements.email.value;
    const data = {
        studentEmail
    }

    try {
        const opts = { 
           method: 'post',
           body: JSON.stringify(data),
           headers: {
            'Content-Type': 'application/json'
           }
        }

        const res = await fetch(submitUrl, opts);
        if(res.ok) {
            displaySuccessMsg();
        } else {
            displayServerErrorMsg();
        }
    } catch(err) {
        console.error(err)
        displayServerErrorMsg();
    } finally {
        disableSendingUI();
    }
}; 

function enableSendingUI() {
   submitButton.disabled = true;
   submitButton.value = "Sending...";
}

function disableSendingUI() {
   submitButton.disabled = false;
   submitButton.value = "Submit";
}

function displaySuccessMsg() {
    const template = "<h3>Success! 🎉</h3><p>Your teacher will be able to see your progress. Please do not resubmit your progress again.</p>"
    container.innerHTML = template
}

function displayServerErrorMsg() {
    const template = "<h3>Uh oh!</h3><p>Something went wrong when attempting to submit your progress. If the problem persists, contact <code>studentprogram@postman.com</code></p>"
    container.innerHTML = template
}
</script>
`