Merge pull request #11 from dokun1/issue10

Updated web UI, ensured form data is used

Author: dokun1

Sources/Application/Routes/WebClientRoutes.swift

@@ -54,7 +54,6 @@ func handleWebClient(request: RouterRequest, response: RouterResponse, next: @es
         slackRequestGroup.notify(queue: DispatchQueue.global(qos: .default), execute: {
             serveClientPage(channels: storedChannels, team: storedTeam, users: storedUserCount, response: response)
         })
-//        slackRequestGroup.notify(queue: DispatchQueue.global(qos: .default), work: serveClientPage(channels: storedChannels, team: storedTeam, users: storedUserCount, response: response))
     } catch let error {
         Log.error(error.localizedDescription)
         try! response.status(.internalServerError).render("error", context: ["error": "uncaught exception: \(error.localizedDescription)"])
@@ -71,11 +70,14 @@ private func serveClientPage(channels: [SlackChannel]?, team: SlackTeam?, users:
             try response.status(.internalServerError).render("error", context: ["error": "could not load team info"])
             return
         }
+        var newUsers = (5, 40)
+        if let users = users {
+            newUsers = users
+        }
 //        guard let users = users else {
 //            try response.status(.internalServerError).render("Error", context: ["error": "could not load available user list"])
 //            return
 //        }
-        let newUsers = (5, 40)
         let validList = channels.contains { element in
             return element.name == "general"
         }

Views/home.stencil

@@ -18,10 +18,10 @@
             <p class="text2"><b style="color:#DE1E64">{{ usersOnline }}</b> users online now out of <b>{{ usersRegistered }}</b> registered.</p>
         </div>
         <div class="menu-add">
-            <input id="emailField" class="acronym-field" name="email" placeholder="[email protected]" />
+            <input id="emailField" class="email-field" name="email" placeholder="[email protected]"/>
         </div>
         <div class="menu-add">
-            <input class="button-primary" type="submit" value="GET MY INVITE" onClick="submitEmail()">
+            <input id="submitButton" class="button-primary" type="submit" value="GET MY INVITE" onClick="submitEmail(this.id)">
         </div>
         <div class="menu-add">
             <center>
@@ -36,26 +36,41 @@
         </footer>
         </div>
         <script type="text/javascript">
-            function submitEmail() {
+            function submitEmail(btn) {
                 var email = document.getElementById("emailField").value;
+                var button = document.getElementById(btn);
                 if (email == "") {
-                    alert("Email not entered!");
+                    button.style.backgroundColor = "#EE1632";
+                    button.value = "No email provided";
                     return;
                 }
                 var xhr = new XMLHttpRequest();
                 xhr.open("GET", "/api/invite/" + email);
                 xhr.onreadystatechange = function() {
+                    button.disabled = false;
                     if (xhr.readyState === 4) {
                         if (xhr.status === 200) {
-                            alert("User invited!!")
+                            button.style.backgroundColor = "#6EBE32";
+                            button.value = "W00T! Check your email";
                         } else {
-                            alert("Something went wrong. Error code: " + xhr.status);
+                            button.style.backgroundColor = "#EE1632";
+                            if (xhr.status === 400) {
+                                button.value = "You have already been invited to Slack. Check for an email from [email protected].";
+                            } else {
+                                button.value = ("Unexpected error: " + xhr.statusText);
+                            }
                         }
                     }
                 }
+                button.disabled = true;
+                button.style.backgroundColor = "#153BE6";
+                button.value = "Please wait...";
                 xhr.send();
             }
         </script>
         </div>
     </body>
 </html>
+
+
+

public/css/index.css

@@ -6,7 +6,7 @@
 .menu-container {
     background-color: white;
     color: #000;
- padding-left: 200px 0;
+    padding-left: 200px 0;
     display: flex;
     justify-content: center;
     font-family: 'Open Sans', 'helvetica Neue', 'Helvetica', 'Arial', "Lucida Grande", sans-serif;
@@ -24,33 +24,36 @@
     justify-content: space-around;
     font-family: "Helvetica Neue", Helvetica, Arial;
     font-size:x-small;
-    
+    text-align: center;
 
 }
 .menu-add-component {
     color: #000;
     display: flex;
     justify-content: space-around;
     width: 300px;
-    
+    max-width: 300px;
     font-family: "Helvetica Neue", Helvetica, Arial;
 }
 
 input.button-primary {
-    background-color: #DE1E64;
+    background-color: #E01563;
     color: #FFF;
     margin-bottom: 10px;
-    padding:10px 128px 10px 128px;
-    
+    padding:10px 10px 10px 10px;
+    min-width: 100px;
+    width: 320px;
+    max-width: 350px;
+    white-space: normal;
     font-family: 'Open Sans', 'Arial', sans-serif;
 }
-input.acronym-field {
+input.email-field {
     font-family: 'Open Sans', 'Arial', sans-serif;
     border-color: rgb(214,214,214);
-    
-    padding:10px 100px 10px 100px;
+    text-align: center;
+    padding:10px 10px 10px 10px;
     margin: 4px;
-    
+    width: 320px;
 }
 ::-webkit-input-placeholder {
     font-family: 'Open Sans', 'Arial', sans-serif;
@@ -90,6 +93,6 @@ input.acronym-field {
     margin-bottom:16px;
     font-size:medium;
 }
-.acronym-field{
+.email-field{
     border:1px solid rgb(214, 214, 214);
 }