KazuAlex · KazuAlex · Jun 25, 2020 · May 24, 2020 · May 24, 2020 · Jun 14, 2020
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 config/default.json
+config/open_poll.json
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # Open source poll for slack
 
 Welcome to the open source poll for slack.  
+This repository is hosted on [GitLab](https://gitlab.com/KazuAlex/openpollslack). [Github repository](https://github.com/KazuAlex/openpollslack) is only a mirror.  
+But feel free to open new issues on both.  
 
 ## License
 
@@ -33,6 +35,10 @@ Remember the four freedoms of the GPL :
 
 For both question and choices, feel free to use slack's emoji, `*bold*` `~strike~` `_italics_` and `` `code` ``  
 
+## Self hosted installation
+
+Wiki pages are available to help you with the [app configuration](https://gitlab.com/KazuAlex/openpollslack/-/wikis/Self-hosted-installation-(v2)) and the [web page configuration](https://gitlab.com/KazuAlex/openpollslack/-/wikis/Web-page).
+
 ## Support me
 
 To support of thank me, you can contact me. I would be happy to provide you my PayPal address.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -19,20 +19,32 @@ body {
 }
 
 #usage > div {
-  min-height: 100vh;
+  min-height: 700px;
+  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 #usage > div > div {
-  min-height: 100vh;
+  min-height: 700px;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
+#usage .card-body > .command {
+  border-radius: 10px;
+  border: rgba(29,28,29,.5) 1px solid;
+  padding: 5px 10px 10px 10px;
+}
+
+#usage .card-body > .image > img {
+  max-height: 500px;
+}
+
 .title {
   text-align: center;
 }
@@ -72,3 +84,23 @@ body {
 #oauth-success.show, #oauth-error.show {
   display: block;
 }
+
+.navigation {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+
+  position: fixed;
+  right: 0;
+  top: calc(50vh - 60px);
+
+  margin-right: 20px;
+
+  user-select: none;
+}
+
+.navigation > .up,
+.navigation > .down {
+  font-size: 40px;
+  cursor: pointer;
+}
diff --git a/assets/poll-anonymous.png b/assets/poll-anonymous.png
diff --git a/assets/poll-both.png b/assets/poll-both.png
diff --git a/assets/poll-limited.png b/assets/poll-limited.png
diff --git a/assets/poll-simple.png b/assets/poll-simple.png
diff --git a/config/default.json.dist b/config/default.json.dist
@@ -1,4 +1,11 @@
 {
+  "port": 5000,
+  "command": "openpoll",
+  "help_link": "https://github.com/kazualex/openpollslack.git",
   "client_id": "",
-  "client_secret": ""
+  "client_secret": "",
+  "signing_secret": "",
+  "state_secret": "CHANGE ME",
+  "oauth_success": "https://openpoll.slack.alcor.space/?oauth=success",
+  "oauth_failure": "https://openpoll.slack.alcor.space/?oauth=error"
 }
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="slack-app-id" content="ANL7B2FDK" />
+    <meta name="slack-app-id" content="A0162QE8600" />
     <link rel="icon" type="image/png" href="/assets/logo.png" />
     <title>Open source poll for slack</title>
     <!-- STYLES -->
@@ -13,6 +13,14 @@
     <script type="text/javascript" src="/assets/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
+    <div class="navigation">
+      <div class="up" onclick="goUp()">
+        🡅 
+      </div>
+      <div class="down" onclick="goDown()">
+        🡇
+      </div>
+    </div>
     <div id="main">
       <h1>
         Open source poll for <img alt="slack" height="180" src="/assets/slack_logo_white.svg" />
@@ -30,7 +38,9 @@ <h1>
         </div>
       </div>
       <div>
-        <a target="_blank" href="https://slack.com/oauth/authorize?scope=commands&client_id=768246087712.768249083461"><img alt="Add to slack" src="https://platform.slack-edge.com/img/[email protected]" srcset="https://platform.slack-edge.com/img/add_to_slack.png 2x, https://platform.slack-edge.com/img/[email protected] 4x" height="80"></a>
+        <a target="_blank" href="https://slack.com/oauth/v2/authorize?client_id=768246087712.1206830278000&scope=commands,chat:write,chat:write.public&state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpbnN0YWxsT3B0aW9ucyI6eyJzY29wZXMiOlsiY29tbWFuZHMiLCJjaGF0OndyaXRlLnB1YmxpYyIsImNoYXQ6d3JpdGUiXX0sIm5vdyI6IjIwMjAtMDYtMTdUMjA6NTc6MjYuMzI1WiIsImlhdCI6MTU5MjQyNzQ0Nn0.ZmnhLDbqxYGf0SBjqb7PzBXIe0Ud_NQ2RrURg-4va_E">
+          <img alt="Add to Slack" src="https://platform.slack-edge.com/img/[email protected]" srcset="https://platform.slack-edge.com/img/add_to_slack.png 2x, https://platform.slack-edge.com/img/[email protected] 4x" height="80" />
+        </a>
       </div>
     </div>
     <div id="usage">
@@ -44,7 +54,12 @@ <h2>Simple poll</h2>
           </div>
           <div class="card">
             <div class="card-body">
-              <code>/openpoll "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              <div class="command">
+                <code>/poll "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              </div>
+              <div class="image">
+                <img src="/assets/poll-simple.png" alt="Simple poll" />
+              </div>
             </div>
           </div>
         </div>
@@ -56,7 +71,12 @@ <h2>Anonymous poll</h2>
           </div>
           <div class="card">
             <div class="card-body">
-              <code>/openpoll anonymous "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              <div class="command">
+                <code>/poll anonymous "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              </div>
+              <div class="image">
+                <img src="/assets/poll-anonymous.png" alt="Anonymous poll" />
+              </div>
             </div>
           </div>
         </div>
@@ -68,7 +88,12 @@ <h2>Limited choice poll</h2>
           </div>
           <div class="card">
             <div class="card-body">
-              <code>/openpoll limit 2 "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              <div class="command">
+                <code>/poll limit 2 "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              </div>
+              <div class="image">
+                <img src="/assets/poll-limited.png" alt="Limited poll" />
+              </div>
             </div>
           </div>
         </div>
@@ -80,7 +105,12 @@ <h2>Anonymous limited choice poll</h2>
           </div>
           <div class="card">
             <div class="card-body">
-              <code>/openpoll anonymous limit 2 "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              <div class="command">
+                <code>/poll anonymous limit 2 "What's you favourite color ?" "Red" "Green" "Blue" "Yellow"</code>
+              </div>
+              <div class="image">
+                <img src="/assets/poll-both.png" alt="Anonymous limited poll" />
+              </div>
             </div>
           </div>
         </div>
@@ -111,6 +141,7 @@ <h2>Need help ?</h2>
         </div>
       </div>
     </div>
+
     <script type="text/javascript">
       const urlParams = new URLSearchParams(window.location.search);
       const oauth = urlParams.get('oauth');
@@ -121,6 +152,47 @@ <h2>Need help ?</h2>
         const oauthDiv = document.getElementById('oauth-success');
         oauthDiv.className = 'show';
       }
+
+      function goUp() {
+        const screenHeight = window.innerHeight;
+
+        let currentY = window.scrollY - (window.scrollY % screenHeight);
+        let nextY = currentY;
+        if (0 === (window.scrollY % screenHeight)) {
+          nextY = currentY - screenHeight;
+        }
+        window.scrollTo(window.scrollX, nextY);
+      }
+
+      function goDown() {
+        const screenHeight = window.innerHeight;
+
+        let currentY = window.scrollY - (window.scrollY % screenHeight);
+        let nextY = currentY + screenHeight;
+        window.scrollTo(window.scrollX, nextY);
+      }
+
+      const ARROW_LEFT = 37;
+      const ARROW_UP = 38;
+      const ARROW_RIGHT = 39;
+      const ARROW_DOWN = 40;
+      document.addEventListener('keyup', function(event) {
+        if (
+          ARROW_UP === event.which
+          || ARROW_LEFT === event.which
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          goUp();
+        } else if (
+          ARROW_DOWN === event.which
+          || ARROW_RIGHT === event.which
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          goDown();
+        }
+      });
     </script>
   </body>
 </html>