I know this is a hot mess, but I just need to add a spinner after someone clicks ok, and it errors our or completes. I have no idea how to do front end, I just figured out azure functions like yesterday. I can’t believe this thing even works…
I am not sure exactly how to add the spinner or how to make it go away once the script is over.
I looked at a bunch of examples, but I’m stumped.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GDAP Request </title>
<style>
form {
max-width: 400px;
margin: 0 auto;
}
input[type="text"],
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2 style="text-align: center;">GDAP Request</h2>
<form id="contactForm">
<label for="TenantID">Enter Tenant ID Here</label>
<input
type="text"
id="TenantID"
name="TenantID"
placeholder="TenantID..."
required
/>
<label for="ClientContact">Email Address for Global Admin</label>
<input
type="text"
id="ClientContact"
name="ClientContact"
placeholder="Client email..."
required
/>
<label for="gdapconfig">Select Permisions given to REMOVED</label>
<select name="gdapconfig" id="gdapconfig">
<option value="0">Support Only</option>
<option value="1">Cloudmore Basic</option>
<option value="2">Assisted GDAP</option>
<option value="3">Global Admin + Assist</option>
</select>
<input type="submit" value="Submit" />
</form>
<script>
document
.getElementById("contactForm")
.addEventListener("submit", function (event) {
event.preventDefault();
const formData = new FormData(this);
const object = {};
formData.forEach((value, key) => {
object[key] = value;
});
const jsonData = JSON.stringify(object);
let test = fetch(
"https://fa-cus-afa-gdap-02.azurewebsites.net/api/gdapCreateRow?code=REMOVED-LdRyJ9Ac2LAzFujwNOSQ==",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: jsonData,
}
)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
alert("Client Add Complete.");
var requestOptions = {
method: "POST",
redirect: "follow",
};
fetch(
"https://5f6fc7f3-d8a5-4d06-ad4a-67460f3fa3eb.webhook.cus.azure-automation.net/webhooks?token=REMOVED%2b%2bnFKr2GWrtHU1E4%3d",
requestOptions
)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
})
.catch((error) => {
console.error(
"There was an error sending the message:",
jsonData
);
alert(
"Client Add Complete.",
test
);
var requestOptions = {
method: "POST",
redirect: "follow",
};
fetch(
"https://5f6fc7f3-d8a5-4d06-ad4a-67460f3fa3eb.webhook.cus.azure-automation.net/webhooks?token=REMOVED%2b%2bnFKr2GWrtHU1E4%3d",
requestOptions
)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
});
});
</script>
</body>
</html>