Report system

Author: bhasher

src/publics/css/base.less

@@ -2,26 +2,20 @@
 |      Generic      |
 \*******************/
 
+@background-color: #222;
+@color: #fff;
+@font: sans-serif;
+
 *{
     margin: 0;
     padding: 0;
-    scrollbar-color: #202324 #454a4d;
-}
-
-.bold{
-    font-weight: bold;
-}
-
-.blur{
-    -webkit-filter: blur(5px);
-    -ms-filter: blur(5px);
-    filter: blur(5px);
+    scrollbar-color: lighten(@background-color, 10%) lighten(@background-color, 30%);
 }
 
 body{
-    background-color: #222222;
-    color: white;
-    font-family: sans-serif;
+    background-color: @background-color;
+    color: @color;
+    font-family: @font;
     height:100vh;
 }
 
@@ -144,7 +138,7 @@ div#welcome{
 .blur-background > *:not(#body):not(#welcome) {
     filter: blur(3px);
     pointer-events: none;
-  }
+}
 
 /******************\
 |   Report Issue   |
@@ -166,6 +160,36 @@ div#welcome{
     border-radius: 20px;
     border: 1px solid forestgreen;
     box-shadow: forestgreen 0 0 10px;
+    display: none;
+
+    h3{
+        display: block;
+        text-align: center;
+        margin-bottom: 10px;
+    }
+
+    textarea{
+        width: 96%;
+        height: 300px;
+        padding: 2%;
+        resize: none;
+        color: contrast(@color);
+        background-color: contrast(@background-color);
+        font: @font;
+    }
+
+    p{
+        margin: 10px;
+    }
+
+    input[type=submit]{
+        float: right;
+    }
+}
+
+.blur-background > *:not(#body):not(#report-issue) {
+    filter: blur(3px);
+    pointer-events: none;
 }
 
 /******************\

src/publics/js/dev/page/base.js

@@ -15,7 +15,18 @@ new Welcome(_.id('welcome-button'));
 
 document.getElementById('link-welcome').onclick = Welcome.show;
 
-document.getElementById('link-report').onclick = () => {};
+document.getElementById('link-report').onclick = () => {
+    document.getElementById('report-issue').style.display = "block";
+    document.getElementById('main').classList.add("blur-background");
+};
+
+document.getElementById('reported').addEventListener('click', e => {
+    document.getElementById('report-issue').style.display = "none";
+    document.getElementById('main').classList.remove("blur-background");
+});
+
+
+
 /*
 let token =
     "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmb28iOiJiYXIiLCJleHAiOjEzOTMyODY4OTMsImlhdCI6MTM5MzI2ODg5M30.4-iaDojEVl0pJQMjrbM1EzUIfAZgsbK_kgnVyVxFSVo";

src/routes/index.js

@@ -9,7 +9,9 @@
  *
  */
 
-  /**
+const discordWebhook = require('webhook-discord');
+
+/**
  * express module
  * @const
  */
@@ -28,6 +30,8 @@ const config = require('../config/config');
  */
 const router = express.Router();
 
+const hook = config.DISCORD_WEBHOOK ? new discordWebhook.Webhook(config.DISCORD_WEBHOOK) : null;
+
 /**
  * Route serving editorindex page
  * @name get/
@@ -56,4 +60,15 @@ router.post('/create_document', async (req, res) => {
     }
 });
 
+router.post('/report-issue', async (req, res) => {
+    try{
+        const report = req.body.report;
+        const agree = Boolean(req.body.agree);
+        hook.warn('Report', `***Share data:*** ${agree}\n***Report:***\n${report}`);
+    } catch (err) {
+    console.log(err);
+    throw new Error(err);
+}
+});
+
 module.exports = router;

src/views/component/footer.html

@@ -6,7 +6,7 @@
         <a href="#" id="link-welcome">Welcome&#8239message</a>
         <a href="https://github.com/allEyezOnCode/CodeWe">Github</a>
         <a href="#">Support</a>
-        <a href="#" id="link-report">Report&#8239issue</a>
+        <a href="#report" id="link-report">Report&#8239issue</a>
     </div>
     Copyright © 2020 Dewilde Alexandre, Dubois Brieuc and Fischer Nicolas
 </div>

src/views/component/report-issue.html

@@ -1,3 +1,12 @@
 <div id="report-issue">
-    Test
+    <h3>Which problem do you want to report ?</h3>
+    <iframe name="dummyframe" style="display: none;"></iframe>
+    <form action="/report-issue" method="post" target="dummyframe">
+        <textarea spellcheck="false" name="report"></textarea>
+        <p>
+            <input type="checkbox" checked name="agree"/><label>I agree to anonymously share certain browser-related information with the development team.</label>
+        </p>
+            <input type="submit" id="reported" value="Send" />
+        </p>
+    </form>
 </div>