Mini Kabibi Habibi
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Crash Reporter Dialog</title>
<script src="messageHandler.js"></script>
<link rel="stylesheet" href="spectrum.css" />
<style>
@font-face {
font-family: 'AdobeClean-Regular'; /* Replace with a name for your font */
src: url('AdobeClean-Regular.otf') format('opentype');
}
@font-face {
font-family: 'AdobeClean-Bold'; /* Replace with a name for your font */
src: url('AdobeClean-Bold.otf') format('opentype');
}
</style>
</head>
<body class="spectrum spectrum--light spectrum--medium">
<div style="text-align: left; padding-bottom: 10px; padding-top: 10px">
<h6
class="spectrum-Heading spectrum-Heading--sizeM"
style="vertical-align: middle"
>
<svg
version="1.1"
id="Layer_1"
x="0"
y="0"
viewBox="0 0 30 26"
xml:space="preserve"
width="70"
height="70"
style="vertical-align: bottom"
>
<path
class="st0"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6 22.1 26h-4.6l-2.1-5.2h-5.2z"
fill="#fa0f00"
/>
</svg>
<span
id="dialogTitleSorryKeyStringHTML"
style="vertical-align: 20px; font-family: 'AdobeClean-Bold'"
>Sorry, an error occurred</span
>
</h6>
</div>
<hr
class="spectrum-Divider spectrum-Divider--sizeS"
style="margin-bottom: 15px"
/>
<b
><h6
class="spectrum-Body spectrum-Body--sizeM"
id="Dialog1TitleHTML"
style="
font-weight: bold;
padding-bottom: 10px;
"
>
FallDownGoBoom64 has encountered a problem and needs to close.
</h6>
</b>
<p
class="spectrum-Body spectrum-Body--sizeM"
id="firstTitleHTML"
style="font-family: 'AdobeClean-Regular'"
>
An error report has been generated. Click 'Send report' to help us analyze
the cause of the problem and explore solutions.
</p>
<br />
<p class="spectrum-Body spectrum-Body--sizeM">
<a
id="view-report-link"
onclick="handleViewReport()"
class="spectrum-Link spectrum-Link--quiet"
href="#"
style="font-family: 'AdobeClean-Regular'"
>View Report</a
>
</p>
<br />
<form class="spectrum-Form spectrum-Form--labelsAbove">
<div class="spectrum-Form-item">
<label
for="user-comment-textarea"
class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-Form-itemLabel"
id="pleaseTellTitleHTML"
style="font-family: 'AdobeClean-Regular'"
>Please tell us what led to the error</label
>
<div
class="spectrum-Textfield spectrum-Textfield--multiline story"
style="margin-bottom: 5px"
>
<textarea
id="user-comment-textarea"
placeholder=""
name="user-comment-textarea"
value=""
class="spectrum-Textfield-input"
style="
resize: none;
height: 390px;
width: 800px;
color: black;
font-family: 'AdobeClean-Regular';
"
></textarea>
</div>
</div>
<div class="spectrum-Form-item">
<label
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
>
<input
id="email-checkbox"
type="checkbox"
class="spectrum-Checkbox-input"
name="checkbox"
/>
<span class="spectrum-Checkbox-box">
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="6"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 12l2 2 6-6" />
</svg>
</span>
<span
class="spectrum-Checkbox-label"
id="solutionURLTitleHTML"
style="font-family: 'AdobeClean-Regular'"
>Adobe may contact me for fixes and workarounds at</span
>
</label>
</div>
<div class="spectrum-Form-item">
<div
id="textfield-outer-div"
class="spectrum-Textfield email is-disabled"
>
<input
id="email-text-field"
type="text"
placeholder="Email address"
name="field"
value=""
type="email"
class="spectrum-Textfield-input"
required
disabled
oninput="validateEmail()"
data-error-message="The email address you entered is invalid. Please correct it before submitting this error report."
data-custom-attribute=""
style="font-family: 'AdobeClean-Regular'"
/>
</div>
</div>
<script>
// Add event listener to the checkbox
var emailCheckbox = document.getElementById("email-checkbox");
var emailTextfield = document.getElementById("email-text-field");
var emailTextfieldOuterDiv = document.getElementById(
"textfield-outer-div"
);
emailTextfield.addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
event.preventDefault(); // Prevent default behavior of the "Enter" key
}
});
emailCheckbox.addEventListener("change", function () {
if (emailCheckbox.checked) {
emailTextfield.disabled = false; // Enable the text field
emailTextfieldOuterDiv.className = "spectrum-Textfield email";
emailTextfield.value = emailTextfield.getAttribute(
"data-custom-attribute"
);
} else {
emailTextfield.disabled = true; // Disable the text field
emailTextfield.value = "";
emailTextfieldOuterDiv.className =
"spectrum-Textfield email is-disabled";
}
});
// Function to handle view report click event
function handleViewReport() {
var userEmail = document.getElementById("email-text-field").value;
var userCommentTextArea = document.getElementById(
"user-comment-textarea"
).value;
viewReportLinkAPI(userCommentTextArea, userEmail);
}
</script>
<br />
<div class="spectrum-Form-item">
<label
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
>
<input
id="silent-send-checkbox"
type="checkbox"
class="spectrum-Checkbox-input"
/>
<span class="spectrum-Checkbox-box">
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="6"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 12l2 2 6-6" />
</svg>
</span>
<span
class="spectrum-Checkbox-label"
id="alwaysSendTitleHTML"
style="font-family: 'AdobeClean-Regular'"
>Automatically send future error reports to Adobe</span
>
</label>
</div>
<br />
<div class="spectrum-Form-item">
<div class="spectrum-ButtonGroup">
<button
id="send-report-button"
onclick="handleSendReportButtonAPI()"
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL spectrum-ButtonGroup-item"
>
<span
class="spectrum-Button-label"
id="sendButtonTitleHTML"
style="font-family: 'AdobeClean-Bold'"
>Send Report</span
>
</button>
<button
id="dont-send-button"
onclick="handleDontSendButton()"
class="spectrum-Button spectrum-Button--sizeL spectrum-Button--fill spectrum-Button--secondary spectrum-ButtonGroup-item"
>
<span
class="spectrum-Button-label"
id="cancelButtonHTML"
style="font-family: 'AdobeClean-Bold'"
>Don't Send</span
>
</button>
</div>
</div>
<script>
function validateEmail() {
const emailTextField = document.getElementById("email-text-field");
const email = emailTextField.value.trim();
// Regular expression for email validation
const emailRegex =
/^([A-Z0-9a-z_%+-]+\.?)+[A-Z0-9a-z_%+-]+@((([A-Za-z0-9]+-?)+[A-Za-z0-9])+\.)+[A-Za-z]{2,63}$/;
// Get the custom error message from the data attribute
const errorMessage = emailTextField.dataset.errorMessage;
if (email === "") {
// Empty email field, no validation error
emailTextField.setCustomValidity("");
} else if (emailRegex.test(email)) {
// Valid email
emailTextField.setCustomValidity("");
} else {
// Invalid email
emailTextField.setCustomValidity(errorMessage);
}
}
// Get references to the checkbox and button elements
const silentSendCheckbox = document.getElementById(
"silent-send-checkbox"
);
const dontSendButton = document.getElementById("dont-send-button");
// Function to handle checkbox click event
function handleCheckboxClick() {
if (silentSendCheckbox.checked) {
dontSendButton.disabled = true; // Disable the button
} else {
dontSendButton.disabled = false; // Enable the button
}
}
// Add click event listener to the checkbox
silentSendCheckbox.addEventListener("click", handleCheckboxClick);
function handleDontSendButton() {
var emailCheckbox = document.getElementById("email-checkbox");
if (emailCheckbox.checked) {
const emailTextField = document.getElementById("email-text-field");
const email = emailTextField.value.trim();
// Regular expression for email validation
const emailRegex =
/^([A-Z0-9a-z_%+-]+\.?)+[A-Z0-9a-z_%+-]+@((([A-Za-z0-9]+-?)+[A-Za-z0-9])+\.)+[A-Za-z]{2,63}$/;
// Get the custom error message from the data attribute
const errorMessage = emailTextField.dataset.errorMessage;
if (email === "" || !emailRegex.test(email)) {
// Invalid email, show an error message
emailTextField.setCustomValidity(errorMessage);
} else {
var userEmail = document.getElementById("email-text-field").value;
dontSendButtonAPI(userEmail);
}
} else {
var userEmail = document.getElementById("email-text-field").value;
dontSendButtonAPI(userEmail);
}
}
function handleSendReportButtonAPI() {
var emailCheckbox = document.getElementById("email-checkbox");
if (emailCheckbox.checked) {
const emailTextField = document.getElementById("email-text-field");
const email = emailTextField.value.trim();
// Regular expression for email validation
//const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const emailRegex =
/^([A-Z0-9a-z_%+-]+\.?)+[A-Z0-9a-z_%+-]+@((([A-Za-z0-9]+-?)+[A-Za-z0-9])+\.)+[A-Za-z]{2,63}$/;
// Get the custom error message from the data attribute
const errorMessage = emailTextField.dataset.errorMessage;
if (email === "" || !emailRegex.test(email)) {
// Invalid email, show an error message
emailTextField.setCustomValidity(errorMessage);
} else {
var userCommentTextArea = document.getElementById(
"user-comment-textarea"
).value;
var userEmail = document.getElementById("email-text-field").value;
var silentSendCheckboxValue = "false";
if (silentSendCheckbox.checked) {
silentSendCheckboxValue = "true";
}
sendReportButtonAPI(
silentSendCheckboxValue,
userCommentTextArea,
userEmail
);
}
} else {
var userCommentTextArea = document.getElementById(
"user-comment-textarea"
).value;
var userEmail = document.getElementById("email-text-field").value;
var silentSendCheckboxValue = "false";
if (silentSendCheckbox.checked) {
silentSendCheckboxValue = "true";
}
sendReportButtonAPI(
silentSendCheckboxValue,
userCommentTextArea,
userEmail
);
}
}
</script>
</form>
</body>
</html>