Merge pull request #38 from Tolfix/dev

CD Notifications

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .env
 package-lock.json
 build
-/Docker/
+/Docker/
+/public/css/

DMCD.sh

@@ -0,0 +1,75 @@
+#!/bin/bash
+
+COMMAND=$1
+
+start() {
+    pm2 start ./build/Server.js
+}
+
+stop() {
+    pm2 stop ./build/Server.js
+}
+
+build() {
+    npm run build
+}
+
+restart() {
+    pm2 restart ./build/Server.js
+}
+
+logs() {
+    pm2 logs ./build/Server.js
+}
+
+update() {
+    echo "* Getting the newest release"
+    TAG=$(curl --silent "https://api.github.com/repos/tolfix/dmcd/releases/latest" |
+        grep '"tag_name":' |
+        sed -E 's/.*"([^"]+)".*/\1/')
+
+    curl -L -o master.tar.gz https://github.com/Tolfix/dmcd/archive/refs/tags/$TAG.tar.gz
+    tar xf master.tar.gz -C /var/dmcd --strip-components 1
+    rm -r master.tar.gz
+    echo "* Updated DMCD"
+}
+
+commands() {
+    echo "
+    Commands: 
+    start => Starts the application
+    build => Builds the application
+    stop => Stops the application
+    restart => Restarts the application
+    logs => Shows what it has been logging
+    update => Pulls new updates from github (if any)"
+}
+
+if [ "$COMMAND" = "start" ]; then
+    start
+fi
+
+if [ "$COMMAND" = "stop" ]; then
+    stop
+fi
+
+if [ "$COMMAND" = "build" ]; then
+    build
+fi
+
+if [ "$COMMAND" = "restart" ]; then
+    restart
+fi
+
+if [ "$COMMAND" = "logs" ]; then
+    logs
+fi
+
+if [ "$COMMAND" = "update" ]; then
+    update
+fi
+
+if [ ! "$COMMAND" ]; then
+    commands
+fi
+

Sass/css/Bootstrap.scss

@@ -0,0 +1,20 @@
+@import "./ThemeColors.scss";  
+
+$theme-colors: (
+  "primary": $theme_main_blue,
+  "danger": $theme_main_red,
+  "info": $theme_main_blue,
+  "light": $theme_main_white,
+  "warning": $theme_main_orange,
+  "dark": $theme_main_dark,
+  "success": $theme_main_green,
+);
+
+$card-bg: $theme_main_dark;
+$card-color: $theme_main_white;
+$modal-content-bg: $theme_main_dark;
+$toast-header-background-color: $theme_main_dark;
+$toast-background-color: $theme_main_dark;
+$toast-color:$theme_main_white;
+$table-color: $theme_main_white;
+@import "../../node_modules/bootstrap/scss/bootstrap";

Sass/css/Main.scss

@@ -0,0 +1,7 @@
+@import "./Bootstrap.scss";
+@import "./ThemeColors.scss";
+
+body {
+    background-color: $theme_darker_dark;
+    color: $theme_main_white;
+}

Sass/css/ThemeColors.scss

@@ -0,0 +1,12 @@
+$theme_main_dark: #595353;
+$theme_main_green: #72BA8C;
+$theme_main_purple: #ee80dc;
+$theme_main_pink: #d9abee;
+$theme_main_blue: #78b2e0;
+$theme_main_red: #f18986;
+$theme_main_orange: #dac26d;
+$theme_main_white: #F3EEDB;
+$theme_darker_dark: #3F3A3A;
+$theme_darker_green: #679A47;
+$theme_darker_orange: #aa9856;
+$theme_darker_white: #D3CFBD;

install.sh

@@ -97,6 +97,9 @@ install_node() {
     echo "* Installing typescript"
     npm install typescript -g
     echo "* Installed typescript"
+    echo "* Installing pm2"
+    npm install pm2 -g
+    echo "* Installed pm2"
 }
 
 gen_random_string() {

package.json

@@ -24,7 +24,9 @@
   },
   "homepage": "https://github.com/Tolfix/dmcd#readme",
   "dependencies": {
+    "@types/node-sass-middleware": "0.0.32",
     "bcryptjs": "^2.4.3",
+    "bootstrap": "^5.0.2",
     "colors": "^1.4.0",
     "command-exists": "^1.2.9",
     "common-tags": "^1.8.0",
@@ -39,6 +41,7 @@
     "express-session": "^1.17.2",
     "method-override": "^3.0.0",
     "mongoose": "^5.13.0",
+    "node-sass-middleware": "^0.11.0",
     "nodemailer": "^6.6.3",
     "passport": "^0.4.1",
     "passport-local": "^1.0.0",

public/Scripts/Toast.js

@@ -1,13 +1,15 @@
+let toastCount = 0;
+
 function Toast(msg, status, title)
 {
     let TOAST = document.createElement("div");
 
     TOAST.innerHTML = `
-    <div class="toast border-${status} border-top" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
+    <div id="toast-${toastCount}" data-bs-autohide="false" class="toast border-${status} border-top" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
         <div class="toast-header">
             <img src="https://cdn.tolfix.com/images/TX-Small.png" width="28" class="rounded mr-2" alt="...">
             <strong class="me-auto">${title}</strong>
-            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            <button id="toast-button-${toastCount}" type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
         </div>
         <div class="toast-body">
             ${msg}
@@ -19,4 +21,10 @@ function Toast(msg, status, title)
     $(document).ready(function(){
         $('.toast').toast('show');
     });
+    let tempCount = toastCount;
+    document.querySelector(`#toast-button-${toastCount}`).addEventListener("click", (msg) => {
+        document.querySelector(`#toast-${tempCount}`).remove()
+    })
+
+    toastCount++
 }

src/Interfaces/Docker.ts

@@ -7,4 +7,18 @@ export interface ICreateDockerCompose
     restartPolicy: "always" | "never" | "on_failure" | "unless_stopped";
     env?: ENV[];
     ports?: PORTS[];
+    volumes?: Volume[];
+    binds?: Bind[];
+}
+
+export interface Volume
+{
+    name: string;
+    path: string;
+}
+
+export interface Bind
+{
+    host: string;
+    container: string;
 }

src/Lib/Seperator.ts

@@ -0,0 +1,20 @@
+export function env_seperator(env: string)
+{
+    let value, name;
+    let indexOfName = 0;
+
+    for(let char of env)
+    {
+        if(char === "=")
+            break;
+        indexOfName++;
+    }
+
+    value = env.slice(indexOfName+1);
+    name = env.slice(0, indexOfName)
+
+    return {
+        value,
+        name
+    }
+}

src/Routers/CD.ts

@@ -14,6 +14,7 @@ import { CreateDockerCompose, DockerCompose } from "../Docker/DockerCompose";
 import SOCKET from "../Server";
 import { getCDSocketBuild, getCDSocketLogs } from "../Lib/CDSocket";
 import PullImage from "../Docker/Pull";
+import { env_seperator } from "../Lib/Seperator";
 
 export default class CDRouter {
     protected server: Application;
@@ -37,11 +38,7 @@ export default class CDRouter {
 
             if(t_envs[0] !== "")
                 envs = (t_envs as Array<string>).map((t_value) => {
-                    const splited = t_value.split("=");
-                    return {
-                        value: splited[1],
-                        name: splited[0]
-                    }
+                    return env_seperator(t_value)
                 });
 
             if(typeof t_port === "string")
@@ -156,11 +153,7 @@ export default class CDRouter {
 
             if(t_envs && t_envs[0] !== "")
                 envs = (t_envs as Array<string>).map((t_value) => {
-                    const splited = t_value.split("=");
-                    return {
-                        value: splited[1],
-                        name: splited[0]
-                    }
+                    return env_seperator(t_value)
                 });
 
             if(typeof t_port === "string")
@@ -305,5 +298,38 @@ export default class CDRouter {
             return res.redirect("back");
         });
 
+        this.router.put("/edit/smtp/:cd", async (req, res) => {
+            const CD = req.params.cd;
+
+            let { onFail, onBuild, onActive, onLog, email_reciever, enableEmail } = req.body;
+
+            const [CDM, C_Error] = await AW<IDCD>(CDModel.findOne({ name: CD }));
+
+            if(C_Error || !CDM)
+            {
+                req.flash(`error`, `Unable to find this CD ${CD}`);
+                return res.redirect("back");
+            }
+
+            const notis = CDM.email_noti;
+
+            notis.onActive = onActive === "on" ? true : false;
+            notis.onBuild = onBuild === "on" ? true : false;
+            notis.onFail = onFail === "on" ? true : false;
+            notis.onLog = onLog === "on" ? true: false;
+
+            CDM.email = enableEmail === "on" ? true : false;
+
+            CDM.email_reciever = email_reciever;
+
+            CDM.email_noti = notis
+            CDM.markModified("email_noti");
+            CDM.markModified("email");
+            CDM.markModified("email_reciever");
+            await CDM.save()
+            req.flash("success", "Settings saved.");
+            return res.redirect("back");
+        });
+
     }
 }

src/Server.ts

@@ -6,6 +6,7 @@ import mongoose from "mongoose";
 import session from "express-session";
 import flash from "connect-flash"
 import cors from "cors";
+import compileSass from "node-sass-middleware";
 import methodOverride from "method-override";
 import log from "./Lib/Logger";
 import { PORT, Web_Title, MongoDB_URI, Domain, Session_Secret, DebugMode, HTTPS } from "./Config"
@@ -34,6 +35,13 @@ Auth(passport);
 
 server.use(expressLayout);
 server.set('view engine', 'ejs');
+server.use(
+    compileSass({
+        src: process.cwd()+"/sass", 
+        dest: process.cwd()+"/public",
+        outputStyle: 'compressed'
+    })
+);
 server.use(express.static('public'));
 
 server.use(cors({

src/Socket/SocketHandler.ts

@@ -39,22 +39,22 @@ export default class SocketHandler
         // Check if what type, and then see if that type is allowed to send an email for.
         const notis = cd.email_noti;
         if(status === "active" && notis.onActive)
-            return SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
+            SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
                 body: `${content.map((e) => `${e}\n`).reduce((a,b) => `${a}${b}`)}`,
                 isHTML: false
             });
         if(status === "building" && notis.onBuild)
-            return SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
+            SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
                 body: `${content.map((e) => `${e}\n`).reduce((a,b) => `${a}${b}`)}`,
                 isHTML: false
             });
         if(status === "fail" && notis.onFail)
-            return SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
+            SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
                 body: `${content.map((e) => `${e}\n`).reduce((a,b) => `${a}${b}`)}`,
                 isHTML: false
             });
         if(status === "log" && notis.onLog)
-            return SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
+            SendEmail(cd.email_reciever, `${cd.name} | ${status.toUpperCase()}`, {
                 body: `${content.map((e) => `${e}\n`).reduce((a,b) => `${a}${b}`)}`,
                 isHTML: false
             });

views/Main.ejs

@@ -74,7 +74,8 @@
                   <button class="btn btn-block btn-danger" onclick="removeCD(`<%= cd.name %>`)">Remove</button>
                   <button class="btn btn-block btn-info" onclick="fetch(`/cd/build/<%= cd.name %>`, {method: 'POST'})">Build container</button>
                   <button class="btn btn-block btn-success" onclick="fetch(`/cd/pull/<%= cd.name %>`, {method: 'POST'})">Pull image</button>
-                  <p class="card-text"><small class="text-muted">Webhook endpoint: <a href="<%= HTTP %>://<%= Domain %><%= Domain === "localhost" ? ":"+Port : "" %>/webhook/<%= cd.webhookUrl %>">
+                  <button class="btn btn-block btn-warning" data-toggle="modal" data-target="#CD-SMTP-<%= cd.name %>">Email notifications</button>
+                  <p class="card-text"><small class="text-monospace">Webhook endpoint: <a href="<%= HTTP %>://<%= Domain %><%= Domain === "localhost" ? ":"+Port : "" %>/webhook/<%= cd.webhookUrl %>">
                     <%= HTTP %>://<%= Domain %><%= Domain === "localhost" ? ":"+Port : "" %>/webhook/<%= cd.webhookUrl %>
                   </a> <a title="New WebhookID" class="fas fa-sync text-decoration-none" onclick="newWebhook('<%= cd.name %>')"></a> </small></p>
                 </div>
@@ -181,4 +182,5 @@
 </script>
 
 <%- include("./Modals/Create-New-CD") %>
-<%- include("./Modals/Edit-CD") %>
+<%- include("./Modals/Edit-CD") %>
+<%- include("./Modals/Edit-SMTP-CD") %>

views/Modals/Edit-CD.ejs

@@ -5,7 +5,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalLabel">Edit <%= cd.name %></h5>
-                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
+                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                 </button>
                 </div>
                 <div class="modal-body">