Error-reporting over mail also

server/config/mailconfig.example.js

@@ -15,7 +15,9 @@ var mail_config = {
     authMethod: 'PLAIN',
     tls: {
         ciphers:'SSLv3'
-    }
+    },
+    from: 'no-reply@zoff.me',
+    to: 'contact@zoff.me'
 };
 
 module.exports = mail_config;

server/public/assets/css/style.css

@@ -16,6 +16,12 @@ body {
     background: white;
 }
 
+.error-code-container {
+    background: lightgrey;
+    border: 1px solid darkgrey;
+    margin-bottom: 20px;
+}
+
 .admin_panel{
     margin-top:100px;
 }

server/public/assets/js/helpers.js

@@ -1,12 +1,16 @@
 var Helper = {
-
+    logs: [],
     log: function(to_log) {
         if(localStorage.debug === "true") {
-            console.log("------------");
+            console.log("------------ " + new Date());
             for(var i = 0; i < to_log.length; i++) {
                 console.log(to_log[i]);
             }
-            console.log("------------");
+            console.log("------------ " + new Date());
+        }
+        Helper.logs.unshift({log: to_log, date: new Date()});
+        if(Helper.logs.length > 10) {
+            Helper.logs.splice(-1, Helper.logs.length - 10);
         }
     },
 

server/public/assets/js/listeners.js

@@ -138,10 +138,34 @@ window.zoff = {
     disable_debug: disable_debug
 }
 
+if(!Helper.mobilecheck()) {
+    $(window).error(function(e){
+        e.preventDefault();
+        Helper.logs.unshift({log: e.originalEvent.error.stack.toString().replace(/(\r\n|\n|\r)/gm,""), date: new Date()});
+        $(".contact-form-content").remove();
+        $("#submit-contact-form").remove();
+        $(".contact-modal-header").text("An error occurred");
+        $(".contact-container-info").remove();
+        $(".contact-modal-footer").prepend('<a href="#!" class="waves-effect waves-green btn-flat send-error-modal">Send</a>');
+        $("#contact-form").attr("id", "error-report-form");
+        $("#contact-container").prepend('<p>Do you want to send an error-report?</p> \
+            <p class="error-report-success"></p> \
+            <div class="error-code-container"> \
+                <code id="error-report-code"></code> \
+            </div>');
+        $("#contact").modal();
+        $("#contact").modal("open");
+        /*$("#error-report-modal").modal();*/
+        $("#error-report-code").text(JSON.stringify(Helper.logs, undefined, 4));
+        console.error(e.originalEvent.error);
+    });
+}
+
 $().ready(function(){
     if(!localStorage.getItem("VERSION") || parseInt(localStorage.getItem("VERSION")) != VERSION) {
         localStorage.setItem("VERSION", VERSION);
     }
+
     if(!fromFront && window.location.pathname != "/") Channel.init();
     else if(!fromChannel && window.location.pathname == "/"){
         Frontpage.init();
@@ -1073,6 +1097,37 @@ $(document).on('submit', '#contact-form', function(e){
     Helper.send_mail(from, message);
 });
 
+$(document).on('click', ".send-error-modal", function(e) {
+    e.preventDefault();
+    $("#error-report-form").submit();
+})
+
+$(document).on('submit', "#error-report-form", function(e) {
+    e.preventDefault();
+    var captcha_response = grecaptcha.getResponse();
+    $("#send-loader").removeClass("hide");
+    $.ajax({
+        type: "POST",
+        data: {
+            from: "no-reply@zoff.me",
+            message: $("#error-report-code").text(),
+            "g-recaptcha-response": captcha_response,
+        },
+        url: "/api/mail",
+        success: function(data){
+            if(data == "success"){
+                $(".send-error-modal").remove();
+                $("#error-report-form").remove();
+                $(".error-code-container").remove();
+                $(".error-report-success").text("Error report sent!");
+                $("#contact-container").html("Mail has been sent, we'll be back with you shortly.")
+            }else{
+                $(".error-report-success").text("Mail was not sent, try again");
+            }
+            $("#send-loader").addClass("hide");
+        }
+    });
+});
 
 $(document).on( "click", "#add-many", function(e){
     var id 		= $(this).attr("data-video-id");

server/public/partials/contact.handlebars

@@ -1,16 +1,18 @@
 <div id="contact" class="modal">
-    <div class="modal-content">
+    <div class="modal-content contact-modal-content">
-        <h4>Contact</h4>
+        <h4 class="contact-modal-header">Contact</h4>
         <div id="contact-container">
-            <p>Found a bug, or just want to contact the team?</p>
+            <p class="contact-container-info">Found a bug, or just want to contact the team?</p>
             <form id="contact-form" method="post">
-                <div class="input-field">
+                <div class="contact-form-content">
-                    <input id="contact-form-from" name="from" type="email" autocomplete="off" class="validate" />
+                    <div class="input-field">
-                    <label for="contact-form-from" class="noselect">Email</label>
+                        <input id="contact-form-from" name="from" type="email" autocomplete="off" class="validate" />
-                </div>
+                        <label for="contact-form-from" class="noselect">Email</label>
-                <div class="input-field">
+                    </div>
-                    <input id="contact-form-message" name="message" type="text" autocomplete="off">
+                    <div class="input-field">
-                    <label for="contact-form-message" class="noselect">Message</label>
+                        <input id="contact-form-message" name="message" type="text" autocomplete="off">
+                        <label for="contact-form-message" class="noselect">Message</label>
+                    </div>
                 </div>
                 {{{captcha}}}
                 <div class="valign hide" id="send-loader">
@@ -21,7 +23,7 @@
             </form>
         </div>
     </div>
-    <div class="modal-footer">
+    <div class="modal-footer contact-modal-footer">
         <button class="waves-effect waves-green btn-flat" id="submit-contact-form">Send</button>
         <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Close</a>
     </div>

server/routing/client/api.js

@@ -114,12 +114,16 @@ try {
                     res.sendStatus(500);
                     return;
                 } else {
+                    var subject = 'ZOFF: Contact form webpage';
+                    if(req.body.error_report) {
+                        subject = 'ZOFF: Error report';
+                    }
                     var from = req.body.from;
                     var message = req.body.message;
                     var msg = {
-                        from: 'no-reply@zoff.me',
+                        from: mailconfig.from,
-                        to: 'contact@zoff.me',
+                        to: mailconfig.to,
-                        subject: 'ZOFF: Contact form webpage',
+                        subject: subject,
                         text: message,
                         html: message,
                         replyTo: from