Replace Google captcha with hCaptcha

IgorKowalczyk · Apr 24, 2022 · 82e8833 · 82e8833
1 parent 6dec1a6
commit 82e8833
Show file tree

Hide file tree

Showing 5 changed files with 559 additions and 6,675 deletions.
diff --git a/dashboard/index.js b/dashboard/index.js
@@ -16,6 +16,7 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
  const fetch_message_channels = require("../utilities/mysql/util/member_messages/get_messages_channels");
  const { glob } = require("glob");
  const { promisify } = require("util");
+ const { verify } = require("hcaptcha");
  const globPromise = promisify(glob);
  const csrfProtection = csrf({ cookie: true });
  const render_port = port == 8080 ? "" : `:${port}`;
@@ -321,14 +322,14 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
    res.status(401);
    return errorPage(req, res, "You must be logged in to perform this action!");
   }
-  if (!data.name || data.name.length < 1) {
+  if (!data.name) {
    return renderTemplate(res, req, "contact.ejs", {
-    alert: data.name && data.name.lenght < 1 ? "Invaild nickname!" : "Please enter your nickname!",
+    alert: data.name && data.name.length < 1 ? "Invaild nickname!" : "Please enter your nickname!",
     error: true,
     csrfToken: req.csrfToken(),
    });
   }
-  if (data.name && data.name.lenght > 100) {
+  if (data.name && data.name.length > 100) {
    return renderTemplate(res, req, "contact.ejs", {
     alert: "Too long username! (Max: 100)",
     error: true,
@@ -344,7 +345,7 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
   }
   if (!data.email || data.email.length < 1) {
    return renderTemplate(res, req, "contact.ejs", {
-    alert: data.email && data.email.lenght < 1 ? "Invaild email!" : "Please enter email!",
+    alert: data.email && data.email.length < 1 ? "Invaild email!" : "Please enter email!",
     error: true,
     csrfToken: req.csrfToken(),
    });
@@ -356,7 +357,7 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
     csrfToken: req.csrfToken(),
    });
   }
-  if (data.email.lenght > 100) {
+  if (data.email.length > 100) {
    return renderTemplate(res, req, "contact.ejs", {
     alert: "Too long email (Max: 100)!",
     error: true,
@@ -370,7 +371,7 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
     csrfToken: req.csrfToken(),
    });
   }
-  if (data.message && data.message.lenght > 1000) {
+  if (data.message && data.message.length > 1000) {
    return renderTemplate(res, req, "contact.ejs", {
     alert: "Too long message! (Max: 1000)",
     error: true,
@@ -384,15 +385,15 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
     csrfToken: req.csrfToken(),
    });
   }
-  const recaptcha = await fetch(`https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${data["g-recaptcha-response"]}&remoteip=${req.connection.remoteAddress}`).then((res) => res.json());
-  if (recaptcha.success !== true) {
+ verify(process.env.RECAPTCHA_SECRET_KEY, data["h-captcha-response"]).then((recaptcha_data) => {
+    if (recaptcha_data.success !== true) {
    return renderTemplate(res, req, "contact.ejs", {
     alert: "Please verify that you are not a robot!",
     error: true,
     csrfToken: req.csrfToken(),
    });
-  }
-  const webhook = new WebhookClient({ url: process.env.CONTACT_WEBHOOK });
+    } else {
+        const webhook = new WebhookClient({ url: process.env.CONTACT_WEBHOOK });
   const contact_form = new MessageEmbed() // Prettier
    .setColor("#4f545c")
    .setTitle(`📬 Contact Form`)
@@ -403,7 +404,7 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
    .addField("Reason", `> \`${data.reason.replaceAll("_", " ").capitalize()}\``)
    .setTimestamp()
    .setFooter({ text: client.user.username.capitalize(), iconURL: client.user.displayAvatarURL() });
-  await webhook.send({
+  webhook.send({
    // Prettier
    username: `${client.user.username.capitalize()} Contact`,
    avatarURL: client.user.displayAvatarURL(),
@@ -414,6 +415,8 @@ module.exports = (app, client, port, config, secure_connection, domain, express)
    error: false,
    csrfToken: req.csrfToken(),
   });
+    }
+  })
  });
 
  // Settings endpoint.

diff --git a/dashboard/static/css/contact.css b/dashboard/static/css/contact.css
@@ -119,8 +119,7 @@ iframe {
 .wrap-input {
  width: 100%;
  position: relative;
- margin-bottom: 65px;
- padding-bottom: 13px;
+ margin-bottom: 30px;
 }
 
 .rs1-wrap-input {

diff --git a/dashboard/templates/contact.ejs b/dashboard/templates/contact.ejs
@@ -1,129 +1,106 @@
 <%- include("includes/head", { bot, user, path, title: "Contact" }) %>
 
 <% if (user) { %>
-<% const checked = "contact" %>
-<%- include("includes/side_nav_other", { bot, user, path, checked_nav: checked }) %>
-<div class="content" style="padding: 40px 20px 40px;">
+ <% const checked = "contact" %>
+ <%- include("includes/side_nav_other", { bot, user, path, checked_nav: checked }) %>
+ <div class="content" style="padding: 40px 20px 40px;">
 <% } else { %>
-<div class="container-contact">
+ <div class="container-contact">
  <div class="wrap-contact">
 <% } %>
 <link rel="stylesheet" type="text/css" href="<%= secure_connection %><%= domain %><%= port %>/css/contact.css" />
-  <% if (alert) { %>
-  <% if(error == true) { %>
+<% if (alert) { %>
+ <% if(error == true) { %>
   <style>
    .banner {
     background-color: #F05454;
    }
-   </style>
-  }
-  <% } %>
-<div class="banner" style="width: 100%;">
- <div class="banner-content">
-  <div class="banner-text">
-   <%= alert %>
-  </div>
-  <button class="banner-close" type="button">
-  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
-  </button>
+  </style>
+ <% } %>
+ <div class="banner" style="width: 100%;">
+  <div class="banner-content">
+   <div class="banner-text">
+    <%= alert %>
+   </div>
+   <button class="banner-close" type="button">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
+   </button>
   </div>
  </div>
  <script>
-const close_banner = document.querySelector(".banner-close")
-const banner = document.querySelector (".banner")
-close_banner.addEventListener("click", function () {
-  banner.style.display = "none";
-});
-</script>
+  const close_banner = document.querySelector(".banner-close")
+  const banner = document.querySelector (".banner")
+  close_banner.addEventListener("click", function () {
+   banner.style.display = "none";
+  });
+ </script>
 <% }  %>
-  <form action="/contact" class="contact-form validate-form" method="POST">
-  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
-   <span class="contact-form-title"></span>
-   <% if (user) { %>
-   <input type="hidden" name="id" value="<%= user.id %>">
-   <input type="hidden" name="name" value="<%= user.username %>#<%= user.discriminator %>">
-   <div class="wrap-input rs1-wrap-input">
-    <span class="label">Name</span>
-    <input disabled class="input" maxlenght="100" autocomplete="off" spellcheck="false" title="You can't change your nickname here!" type="text" name="name_invi" placeholder="Name" value="<%= user.username %>#<%= user.discriminator %>" />
-   </div>
-   <div class="wrap-input rs1-wrap-input">
-    <span class="label">Email</span>
-    <input class="input" type="email" maxlenght="100" title="E-mail through which we can contact you" spellcheck="false" name="email" placeholder="wumpus@discord.com" required="true"/>
-   </div>
-   <div class="wrap-input">
-    <span class="label">Message</span>
-    <textarea class="input" name="message" maxlenght="1000" title="Message we have to read <3"spellcheck="true" placeholder="Your looong message" required="true"></textarea>
-   </div>
-   <div class="wrap-input">
-    <span class="label">Why are you contacting us?</span>
-     <select class="input" title="Why are you contacting us?" style="height: 40px;margin-top: 10px;width: 100%;" name="reason">
-     <option value="select_disabled" disabled selected>Select option</option>
-     <option value="feature_request">Feauture Request</option>
-     <option value="bug_report">Bug report</option>
-     <option value="general_question">General question</option>
-     <option value="developer_question">Developer question</option>
-     <option value="partnership">Partnership</option>
-     <option value="other">Other</option>
-     </select>
-    </div>
-   <% } else { %>
-   <div class="wrap-input rs1-wrap-input noactive">
-    <span class="label">Name</span>
-    <input class="input" title="Please login to contact us!" maxlenght="100" autocomplete="off" spellcheck="false" type="text" name="tmp_name" placeholder="Wumpus#0001" disabled />
-   </div>
-   <div class="wrap-input rs1-wrap-input noactive">
-    <span class="label">Email</span>
-    <input class="input" title="Please login to contact us!" maxlenght="100" autocomplete="off" spellcheck="false" type="email" name="tmp_email" placeholder="wumpus@discord.com" disabled />
-   </div>
-   <div class="wrap-input noactive">
-    <span class="label">Message</span>
-    <textarea class="input" title="Please login to contact us!" maxlenght="2000" autocomplete="off" spellcheck="true" name="tmp_message" placeholder="Your looong message" disabled></textarea>
-   </div>
-        <div class="wrap-input noactive">
-    <span class="label">Why are you contacting us?</span>
-     <select class="input" disabled title="Please login to contact us!" style="height: 40px;margin-top: 10px;width: 100%;" name="reason">
-     <option value="select_disabled" disabled selected>Select option</option>
-     <option value="feature_request">Feauture Request</option>
-     <option value="bug_report">Bug report</option>
-     <option value="general_question">General question</option>
-     <option value="developer_question">Developer question</option>
-     <option value="partnership">Partnership</option>
-     <option value="other">Other</option>
-     </select>
-    </div>
-   <% } %>
 
-   <div class="container-contact-form-btn">
-   <% if (user) { %>
-      <div id="captcha"></div>
-   <script type="text/javascript">
-    var verifyCallback = function (response) {
-     console.log(response);
-    };
-    var onloadCallback = function () {
-     grecaptcha.render("captcha", {
-      sitekey: "<%= recaptcha %>",
-      callback: verifyCallback,
-      theme: "dark",
-     });
-    };
-
-   </script>
-   </div>
-    <button class="link-button green" style="margin-top: 50px; margin-left: 0px" type="submit">Send</button>
-   <% } else { %>
-    <p>You must be logged in to contact us!</p>
-    </div>
-    <a href="<%= secure_connection %><%= domain %><%= port %>/login" style="margin-left: 0" class="link-button green">Login</a>
-<% if (config.support_server) { %>
-<a href="<%= secure_connection %><%= domain %><%= port %>/server" style="margin-left: 0;     display: flex; padding: 10px 17px;" class="link-button"><%- include('includes/icons/new_tab.ejs') %> Discord</a>
-<% } %>
+<form action="/contact" class="contact-form validate-form" method="POST">
+ <input type="hidden" name="_csrf" value="<%= csrfToken %>">
+ <span class="contact-form-title"></span>
+ <% if (user) { %>
+  <input type="hidden" name="id" value="<%= user.id %>">
+  <input type="hidden" name="name" value="<%= user.username %>#<%= user.discriminator %>">
+  <div class="wrap-input rs1-wrap-input">
+   <span class="label">Name</span>
+   <input disabled class="input" maxlenght="100" autocomplete="off" spellcheck="false" title="You can't change your nickname here!" type="text" name="name_invi" placeholder="Name" value="<%= user.username %>#<%= user.discriminator %>" />
+  </div>
+  <div class="wrap-input rs1-wrap-input">
+   <span class="label">Email</span>
+   <input class="input" type="email" maxlenght="100" title="E-mail through which we can contact you" spellcheck="false" name="email" placeholder="wumpus@discord.com" required="true"/>
+  </div>
+  <div class="wrap-input">
+   <span class="label">Message</span>
+   <textarea class="input" name="message" maxlenght="1000" title="Message we have to read <3"spellcheck="true" placeholder="Your looong message" required="true"></textarea>
+  </div>
+  <div class="wrap-input">
+   <span class="label">Why are you contacting us?</span>
+   <select class="input" title="Why are you contacting us?" style="height: 40px;margin-top: 10px;width: 100%;margin-bottom: 30px;" name="reason">
+    <option value="select_disabled" disabled selected>Select option</option>
+    <option value="feature_request">Feauture Request</option>
+    <option value="bug_report">Bug report</option>
+    <option value="general_question">General question</option>
+    <option value="developer_question">Developer question</option>
+    <option value="partnership">Partnership</option>
+    <option value="other">Other</option>
+   </select>
+  </div>
+ <% } else { %>
+  <div class="wrap-input rs1-wrap-input noactive">
+   <span class="label">Name</span>
+   <input class="input" title="Please login to contact us!" maxlenght="100" autocomplete="off" spellcheck="false" type="text" name="tmp_name" placeholder="Wumpus#0001" disabled />
+  </div>
+  <div class="wrap-input rs1-wrap-input noactive">
+   <span class="label">Email</span>
+   <input class="input" title="Please login to contact us!" maxlenght="100" autocomplete="off" spellcheck="false" type="email" name="tmp_email" placeholder="wumpus@discord.com" disabled />
+  </div>
+  <div class="wrap-input noactive">
+   <span class="label">Message</span>
+   <textarea class="input" title="Please login to contact us!" maxlenght="2000" autocomplete="off" spellcheck="true" name="tmp_message" placeholder="Your looong message" disabled></textarea>
+  </div>
+  <div class="wrap-input noactive">
+   <span class="label">Why are you contacting us?</span>
+   <select class="input" disabled title="Please login to contact us!" style="height: 40px;margin-top: 10px;width: 100%;margin-bottom: 30px;" name="reason"></select>
+  </div>
+ <% } %>
+ <div class="container-contact-form-btn">
+ <% if (user) { %>
+  <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+  <div class="h-captcha" data-sitekey="<%= recaptcha %>" data-theme="dark"></div>
+  <div id="captcha"></div>
+  </div>
+  <button class="link-button green" style="margin-top: 20px; margin-left: 0px" type="submit">Send</button>
+ <% } else { %>
+  <p>You must be logged in to contact us!</p>
+  </div>
+  <a href="<%= secure_connection %><%= domain %><%= port %>/login" style="margin-left: 0" class="link-button green">Login</a>
+  <% if (config.support_server) { %>
+    <a href="<%= secure_connection %><%= domain %><%= port %>/server" style="margin-left: 0; display: flex; padding: 10px 17px;" class="link-button"><%- include('includes/icons/new_tab.ejs') %> Discord</a>
    <% } %>
-  </form>
+  <% } %>
+ </form>
  </div>
 </div>
-<% if (user) { %>
-<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
-<% } %>
 
 <%- include("includes/footer") %>