feat(web): update 1.0.1

README.md

@@ -1,15 +1,34 @@
+
 # nyawer-hook
 Contoh web server saweria webhook mengirim notifikasi donasi ke discord webhook.
 
 ## Contoh
+<img src="https://github.com/JadlionHD/nyawer-hook/blob/master/.github/img/contoh3.png?raw=true">
 <img src="https://github.com/JadlionHD/nyawer-hook/blob/master/.github/img/contoh1.png?raw=true" width=350>
 
 ## Cara kerjanya?
-Cara kerjanya lumayan mudah, yaitu menggunakan salah satu integrations yang disediakan [Saweria](https://saweria.co) yaitu webhook.
-<img src="https://github.com/JadlionHD/nyawer-hook/blob/master/.github/img/example1.png?raw=true">
+Cara kerjanya menggunakan salah satu integrations yang disediakan [Saweria](https://saweria.co) yaitu webhook.
+<img src="https://github.com/JadlionHD/nyawer-hook/blob/master/.github/img/contoh2.png?raw=true">
 Jadi ini adalah gambaran cara kerjanya:
 - Saweria webhook > Website kamu > Discord webhook
 
 
 ## Install
-Untuk sekarang masih belum selesai dibuat.
+Dokumentasi belum lengkap, tapi ini sedikit instalisasinya sebagai berikut:
+- Buatlah .env file lalu isi beberapa line berikut ini
+```
+SECRET=TOKENRAHASIA // token websitemu
+DISCORD_WEBHOOK=URL // discord webhook url
+PORT=NOMOR // port website yang akan dibuka
+```
+- Lalu install modules yang diperlukan dengan cara:
+```bash
+$ npm install
+```
+- Setelah semuanya selesai, maka untuk memulainya ketik:
+```bash
+$ npm start
+```
+
+## Contribution
+Kalo kalian menemukan sebuah bug, dengan senang hati membuka issues agar dibahas lebih lanjut.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nyawer-hook",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "^0.24.0",
     "dotenv": "^10.0.0",
+    "ejs": "^3.1.6",
     "express": "^4.17.1"
   }
 }

src/Saweria.js

@@ -1,23 +1,42 @@
 const axios = require("axios");
 const utils = require("./util.js");
+const fs = require("fs");
 
 function webhookTest(req) {
-	axios.post(process.env.DISCORD_WEBHOOK_TEST, {
+	let embed = JSON.parse(fs.readFileSync("src/embed.json", "utf8"));
+
+	let tempEmbed = {
 		embeds: [{
-			title: `Sankyu ${req.body.donator_name}! telah nyawer Rp${utils.format(req.body.amount_raw)}`,
-			description: `Pesan:\n \`\`\`${req.body.message}\`\`\``,
+			title: embed.embeds[0].title,
+			description: embed.embeds[0].description,
 			image: {
-				url: "https://c.tenor.com/z89eTLYza68AAAAd/yuudachi-poi.gif"
+				url: embed.embeds[0].image.url
 			},
 			thumbnail: {
-				url: "https://saweria.co/twitter_card.png"
+				url: embed.embeds[0].thumbnail.url
 			},
 			footer: {
-				text: "https://saweria.co/JadlionHD"
+				text: embed.embeds[0].footer.text
 			},
-			color: 0x25ba0e
+			color: parseInt(embed.embeds[0].color.replace("#", "0x"))
 		}]
-	})
+	};
+	let embeds = tempEmbed.embeds[0];
+
+
+	for(let [k,v] of Object.entries(tempEmbed.embeds[0])) {
+		if(typeof v !== "object") {
+
+			if(k === "color")
+				continue;
+
+			embeds[k] = embeds[k].replace(/{message}/g, req.body.message);
+			embeds[k] = embeds[k].replace(/{donator_name}/g, req.body.donator_name);
+			embeds[k] = embeds[k].replace(/{amount}/g, utils.format(req.body.amount_raw));
+		}
+
+	}
+	axios.post(process.env.DISCORD_WEBHOOK, tempEmbed);
 }
 
 function handlePostReq(req, res) {
@@ -29,8 +48,34 @@ function handlePostReq(req, res) {
 	}
 }
 
+function handleEditEmbed(req, res) {
+	if(req.body.token !== process.env.SECRET) {
+		return res.status(301).redirect(req.get("host"));
+	}
+	let tempEmbed = {
+		embeds: [{
+			title: req.body.title,
+			description: req.body.description,
+			image: {
+				url: req.body.imageUrl
+			},
+			thumbnail: {
+				url: req.body.thumbnailUrl
+			},
+			footer: {
+				text: req.body.footerText
+			},
+			color: req.body.color
+		}]
+	};
+
+	fs.writeFileSync("src/embed.json", JSON.stringify(tempEmbed, null, 2));
+	return res.status(301).redirect(req.get("host"));
+}
+
 
 module.exports = {
  handlePostReq,
+ handleEditEmbed,
  webhookTest
 };

src/embed.json

@@ -0,0 +1,18 @@
+{
+  "embeds": [
+    {
+      "title": "Sankyu {donator_name}! telah nyawer Rp{amount}",
+      "description": "Pesan: ```{message}```",
+      "image": {
+        "url": "https://c.tenor.com/z89eTLYza68AAAAd/yuudachi-poi.gif"
+      },
+      "thumbnail": {
+        "url": "https://saweria.co/twitter_card.png"
+      },
+      "footer": {
+        "text": "https://saweria.co/JadlionHD"
+      },
+      "color": "#d41138"
+    }
+  ]
+}

src/server.js

@@ -1,12 +1,23 @@
 const express = require("express");
+const path = require("path");
 const app = express();
+const fs = require("fs");
 require("dotenv").config();
-const { handlePostReq } = require("./Saweria.js");
+const { handlePostReq, handleEditEmbed } = require("./Saweria.js");
 
 app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.set("view engine", "ejs");
+app.set("views", path.join(__dirname, "/web/views"));
+app.use(express.static(path.join(__dirname, "/web/public")));
 
 app.post("/callback/discord", handlePostReq);
+app.get("/", (req, res) => {
+	const embed = JSON.parse(fs.readFileSync("src/embed.json", "utf8"));
+	res.render("index.ejs", {embed: embed.embeds[0]});
+});
+app.post("/edit/embed", handleEditEmbed);
 
-app.listen(parseInt(process.env.PORT), () => {
-	console.log("Server siap!");
+app.listen(process.env.PORT, () => {
+	console.log("Web Server siap!");
 })

src/web/public/css/style.css

@@ -0,0 +1,39 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "Century Gothic Bold", sans-serif;
+	color: white;
+}
+
+.main {
+	background-color: #151515;
+	padding-top: 2rem;
+}
+
+#titleEmbed {
+	width: 50%;
+}
+#descEmbed {
+	width: 75%;
+}
+
+.container {
+	background-color: #525252;
+	padding: 1.5rem;
+	border-radius: 10px;
+}
+
+.pfooter {
+	padding: 1rem;
+	text-align: center;
+}
+
+.heartd {
+	text-decoration: none;
+	color: white;
+	transition: 0.3s;
+}
+
+.heartd:hover {
+	color: red;
+}

src/web/views/index.ejs

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <link rel="stylesheet" href="css/style.css">
+	<title>Saweria - Hook</title>
+</head>
+<body>
+	<div class="main">
+		<div class="container">
+			<h2>Nyawer-hook Embed Editor</h2>
+			<form action="/edit/embed" method="post" target="_self" id="main-form">
+
+				<div class="mb-3">
+					<label for="titleCheckbox">Title</label><br>
+					<input type="text" class="form-control" id="titleEmbed" name="title" placeholder="Hai shikikan" maxlength="256" value="<%=embed.title%>">
+				</div>
+
+				<div class="mb-3">
+					<label for="descCheckbox">Description</label><br>
+					<textarea class="form-control" id="descEmbed" name="description" rows="3" placeholder="Shikikan-san you got some donation" maxlength="4096"><%=embed.description%></textarea>
+				</div>
+
+				<div class="row">
+					<div class="col">
+						<label for="footerCheckbox">Footer Text</label><br>
+						<input type="text" class="form-control" id="footerEmbed" name="footerText" placeholder="Sankyuu~!" maxlength="2048" value="<%=embed.footer.text%>">				
+					</div>
+
+					<div class="col">
+						<label for="imageUrlCheckbox">Image URL</label><br>
+						<input type="text" class="form-control" id="imageEmbed" name="imageUrl" placeholder="https://example.com/image.jpg" value="<%=embed.image.url%>">				
+					</div>
+
+					<div class="col">
+						<label for="thumbnailCheckbox">Thumbnail URL</label><br>
+						<input type="text" class="form-control" id="thumbnailEmbed" name="thumbnailUrl" placeholder="https://example.com/image.jpg" value="<%=embed.thumbnail.url%>"><br>
+					</div>					
+				</div>
+
+				<div class="mb-3">
+					<label for="secretToken">Token (<a href="#" style="text-decoration: none;" data-bs-toggle="tooltip" data-bs-placement="top" title="You can find the token from environment variable (.env)">?</a>)</label>
+					<input type="password" class="form-control" id="secretToken" name="token" placeholder="Your Secret Token">
+				</div>
+
+				<div class="mb-3">
+					<label for="colorCheckbox">Embed Color</label><br>
+					<input type="color" id="colorEmbed" name="color" value="<%=embed.color%>">		
+				</div>
+
+				<input type="submit" value="Save" class="btn btn-primary">
+			</form>
+		</div>
+		<footer class="pfooter">
+			<h4>Made with <a href="#" class="heartd">&#10084;</a> <a href="https://github.com/JadlionHD" style="text-decoration: none; color: white; font-size: 25px;">JadlionHD</a></h4>
+		</footer>
+	</div>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+	<script>
+		var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+		var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+		  return new bootstrap.Tooltip(tooltipTriggerEl)
+		})
+	</script>
+
+</body>
+</html>

src/web/views/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <link rel="stylesheet" href="../public/css/style.css">
+	<title>Saweria - Hook</title>
+</head>
+<body>
+	<div class="main">
+		<div class="container">
+			<h2>Nyawer-hook Embed Editor</h2>
+			<form action="/edit/embed" method="post" target="_top" id="main-form">
+
+				<div class="mb-3">
+					<label for="titleCheckbox">Title</label><br>
+					<input type="text" class="form-control" id="titleEmbed" name="title" placeholder="Hai shikikan" maxlength="256" required>
+				</div>
+
+				<div class="mb-3">
+					<label for="descCheckbox">Description</label><br>
+					<textarea class="form-control" id="descEmbed" name="description" rows="3" placeholder="Shikikan-san you got some donation" maxlength="4096"></textarea>
+				</div>
+
+				<div class="row">
+					<div class="col">
+						<label for="footerCheckbox">Footer Text</label><br>
+						<input type="text" class="form-control" id="footerEmbed" name="footerText" placeholder="Sankyuu~!" maxlength="2048">				
+					</div>
+
+					<div class="col">
+						<label for="imageUrlCheckbox">Image URL</label><br>
+						<input type="text" class="form-control" id="imageEmbed" name="imageUrl" placeholder="https://example.com/image.jpg">				
+					</div>
+
+					<div class="col">
+						<label for="thumbnailCheckbox">Thumbnail URL</label><br>
+						<input type="text" class="form-control" id="thumbnailEmbed" name="thumbnailUrl" placeholder="https://example.com/image.jpg"><br>
+					</div>					
+				</div>
+
+				<div class="mb-3">
+					<label for="secretToken">Token (<a href="#" style="text-decoration: none;" data-bs-toggle="tooltip" data-bs-placement="top" title="You can find the token from environment variable (.env)">?</a>)</label>
+					<input type="password" class="form-control" id="secretToken" name="token" placeholder="Your Secret Token">
+				</div>
+
+				<div class="mb-3">
+					<label for="colorCheckbox">Embed Color</label><br>
+					<input type="color" id="colorEmbed" name="color">		
+				</div>
+
+				<input type="submit" value="Save" class="btn btn-primary">
+			</form>
+		</div>
+		<footer class="pfooter">
+			<h4>Made with <a href="#" class="heartd">&#10084;</a> <a href="https://github.com/JadlionHD" style="text-decoration: none; color: white; font-size: 25px;">JadlionHD</a></h4>
+		</footer>
+	</div>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+	<script>
+		var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+		var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+		  return new bootstrap.Tooltip(tooltipTriggerEl)
+		})
+	</script>
+
+</body>
+</html>