As Per Leo Request.
Here is the post for the EML code
Using the xml final draft upgrades to the orginal eml version provided via leo:
Info and orgnall eml template write, and fixes from other codes/sources, i have finished my final working draft of the eml code
*This code is still a work in progress as there are some edits and sugestions about this on the post...
Current errors:
Form doesn't clear when finished after submit is clicked, but message is sent and written
-- I believe in the end of the code where the alert box is should be a clear end code... (as it should clear the form after a successful submit)
here is the code for view/quick review
<!DOCTYPE html>
<html>
<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
{.set item|%folder%|add upload=@anonymous.}
<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Form using JavaScript</title>
</head>
<!-- include css file here -->
<!-- <link rel="stylesheet" href="/Contact/form.css"/> -->
<style type="text/css">
/* below line is write to use google font online */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: 'Ubuntu', sans-serif;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 300px;
height: auto !important;
height: 300px;
}
#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 471px;
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #CCC;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #FC0;
}
#contact-area button.submit-button {
width: 100px;
height: 30px;
float: right;
cursor: default;
color: buttontext;
text-align: center;
padding: 2px 6px 3px;
box-sizing: border-box;
align-items: flex-start;
border: 0px outset buttonface;
-webkit-appearance: push-button;
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
white-space: pre;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
/* -------------------------------------
CSS for sidebar (optional)
---------------------------------------- */
div#fugo{
float:right;
}
</style>
<body>
<div id="page-wrap">
<p><h1>« Contacting the Server Administrator »</h1></p>
<div id="contact-area">
<!-- <form method="GET"> -->
<!-- https://www.w3schools.com/tags/att_input_type.asp -->
<label for="contact-name">Full Name:</label>
<input type="text" tabindex="1" class="form-control" name="NameA" id="NameB" placeholder="Please Enter Your Full Name.." onkeyup='validateName()'>
<div style="text-align: right"><span class='error-message' id='name-error'></span></div>
<label for="contact-email">Email Address:</label>
<input type="email" tabindex="2" class="form-control" name="MailA" id="MailB" placeholder="Please Enter a valid Email (your@email.com) " onkeyup='validateEmail()'>
<div style="text-align: right"><span class='error-message' id='email-error'></span></div>
<label for="contact-subject">Subject:</label><br />
<input type="text" tabindex="3" class="form-control" name="SubjectA" id="SubjectB" placeholder="Ex: I Have Experienced an Error" onkeyup='validateSubject()'>
<div style="text-align: right"><span class='error-message' id='subject-error'></span></div>
<label for='contactMessage'>Your Message:</label><br />
<textarea name="MessageA" id="MessageB" rows="20" cols="20" class="form-control" tabindex="4" placeholder="Please Detail your needs - Enter a brief message" onkeyup='validateMessage()'></textarea>
<div style="text-align: right"><span class='error-message' id='message-error'></span></div>
<br /><br />
<div style="text-align: right"><span class='error-message' id='submit-error'></span></div>
<br />
<button id="SendMe" name="SubmitMessage" OnMouseOver='return validateForm()' class="submit-button" tabindex="5" onclick="sendMessage(); return false">{.!Submit.}</button>
<!-- ?cani have both in a single line or will one parse out before the other? buton onclick validation became OnMouseOver / a html embeded javascript function -->
<!-- </form> -->
</div>
</div>
<!-- Validation code using Leos ids -->
<script type="text/javascript">
//Creates box and validate textbox content for a name
function validateName() {
var name = document.getElementById('NameB').value;
if(name.length == 0) {
producePrompt('Name is required', 'name-error' , 'red')
return false;
}
if (!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {
producePrompt('First and Last name, please.','name-error', 'red');
return false;
}
producePrompt('Valid', 'name-error', 'green');
return true;
}
//Creates box and validate textbox content for a Email Subject
function validateSubject() {
var submessage = document.getElementById('SubjectB').value;
var required = 2;
var left = required - submessage.length;
if (left > 0) {
producePrompt(left + ' characters are left, At least 2 characters are required for the Subject','subject-error','red');
return false;
}
producePrompt('Valid', 'subject-error', 'green');
return true;
}
//Creates box and validate textbox content for a valid Email
function validateEmail () {
var email = document.getElementById('MailB').value;
if(email.length == 0) {
producePrompt('Email Invalid','email-error', 'red');
return false;
}
if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
producePrompt('Email Invalid', 'email-error', 'red');
return false;
}
producePrompt('Valid', 'email-error', 'green');
return true;
}
//Creates box and validate textbox content for Email Message - Text to save to file later?
function validateMessage() {
var message = document.getElementById('MessageB').value;
var required = 10;
var left = required - message.length;
if (left > 0) {
producePrompt(left + ' more characters are required, Please Provide More deails for the server admin','message-error','red');
return false;
}
producePrompt('Valid', 'message-error', 'green');
return true;
}
//Secondary Code for JS validation(hide validation content box):
function jsShow(id) {
document.getElementById(id).style.display = 'block';
}
function jsHide(id) {
document.getElementById(id).style.display = 'none';
}
//ON Sybmit button button click/ Mouse Over action(Validate form passes)://ON button click action:
var booleanXCHECK = false;
//use to check validation and change boolean value to check before writes ...
function validateForm() {
if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
jsShow('submit-error');
producePrompt('Please fix errors to submit.', 'submit-error', 'red');
setTimeout(function(){jsHide('submit-error');}, 5000);
return false;
}
else
{
//Change alert for message sent successfully
//producePrompt('Sent Successfully', 'Submit-error', 'green');
jsShow('submit-error');
producePrompt('Mesage Passed Validation.', 'submit-error', 'green');
setTimeout(function(){jsHide('submit-error');}, 2000);
return booleanXCHECK = true;
return true;
}
}
//Populates the HTML span tag
function producePrompt(message, promptLocation, color) {
document.getElementById(promptLocation).innerHTML = message;
document.getElementById(promptLocation).style.color = color;
}
</script>
<!-- How we will write this to hfs:-->
<script type="text/javascript">
//variables to pass latter
var LoggedInUser = '[%user%]';
var LoggedUserIP = '%ip%';
</script>
<script>
document.getElementById("SendMe").onclick = function () {
//alert("your check is :"+booleanXCHECK );
//check value in code in event of issues that needs resolved fail/pass true
if (booleanXCHECK === true) {
//if statement add to check before running write code... as this code should just run after validation...
var Today = new Date();
var OwnTZ = -(Today.getTimezoneOffset()/60);
var Offset = new Date().getTimezoneOffset();
var MyDate = new Date((new Date).getTime()+3600*OwnTZ*1e3).toUTCString().replace(/ GMT$/,"");
Offset = (Offset<0?"+":"-")+Pad(parseInt(Math.abs(Offset/60)),2)+""+Pad(Math.abs(Offset%60),2);
function Pad(number,length){for(var tz=""+number;tz.length<length;)tz="0"+tz;return tz};
MyFullLocalTime = MyDate+' '+Offset;
var GetName = document.getElementById("NameB").value;
var GetMail = document.getElementById("MailB").value;
var GetSubject = document.getElementById("SubjectB").value;
var GetMessage = '\n'+document.getElementById("MessageB").value+'\n';
//GetMessage=GetMessage.replace(/([^\r])\n/g, "$1\r\n");
//atempt to fix single line text saved to 1 single string... (i think eml write is oky as a 1 line string...)
var TextCurrentLength = document.getElementById("MessageB").value.length;
var Header0 = 'Received: from '+LoggedInUser+' ('+LoggedUserIP+')'+'\n';
var Header1 = 'From: "'+GetName+'" <'+GetMail+'>'+'\n';
var Header2 = 'To: "HFS Server Administrator"'+'\n';
var Header3 = 'Subject: '+GetSubject+'\n';
var Header4 = 'Date: '+MyFullLocalTime+'\n';
var Header5 = 'MIME-Version: 1.0'+'\n';
var Header6 = 'Content-Type: text/plain; charset=UTF-8'+'\n';
var Header7 = 'Content-Length: '+TextCurrentLength+'\n';
var Header8 = 'Content-Transfer-Encoding: 8bit'+'\n';
var Header9 = 'X-Originating-IP: '+LoggedUserIP+'\n';
var Header10 = 'X-Mailer: HFS Custom template'+'\n';
var FullHeaders = Header0+Header1+Header2+Header3+Header4+Header5+Header6+Header7+Header8+Header9+Header10;
var formData = new FormData();
// JavaScript file-like object
var content = FullHeaders+GetMessage; // Message content...
var blob = new Blob([content], { type: "text/plain"});
formData.append("webmasterfile", blob, "%folder%New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.eml");
var request = new XMLHttpRequest();
request.open("POST", "./"); //enable upload in contact
request.send(formData);
//disabled as it is now apart of the javascript
alert("Message sent!");
//can become the a message on the page instead of an alert box...
//jsShow('submit-error');
//producePrompt('Mesage SENT.', 'submit-error', 'green');
//setTimeout(function(){jsHide('submit-error');}, 2000);
return true;
}
else { return false; }
}
</script>
</body>
</html>
log:
10:13:54 AM 127.0.0.1:52301 Requested GET /
10:13:54 AM 127.0.0.1:52302 Requested GET /?mode=jquery
10:13:56 AM 127.0.0.1:52305 Requested GET /contact/
10:14:40 AM 127.0.0.1:52305 Uploading New-Message-2018.08.28-at-10.13.56.eml
10:14:40 AM 127.0.0.1:52305 Fully uploaded New-Message-2018.08.28-at-10.13.56.eml - 317 @ 23.8 KB/s
10:14:40 AM 127.0.0.1:52305 Requested POST /contact/
10:15:10 AM 127.0.0.1:52305 Requested GET /
10:15:10 AM 127.0.0.1:52305 Requested GET /?mode=jquery
10:15:12 AM 127.0.0.1:52305 Requested GET /contact/
example file:
file name:New-Message-2018.08.28-at-10.13.56
------------
Received: from [] (127.0.0.1)
From: "brandon " <myemail@test.com>
To: "HFS Server Administrator"
Subject: test
Date: Tue, 28 Aug 2018 10:20:08 -0500
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Length: 48
Content-Transfer-Encoding: 8bit
X-Originating-IP: 127.0.0.1
X-Mailer: HFS Custom template
failed mesage baox validation(auto passes???...)
------------
see pictures and finaly eml draft code atached