From e4a56d5ed14a7ce7c960a1dd949e6cf04b81ec36 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 20 Sep 2017 16:04:58 -0700
Subject: [PATCH] made channel components DRYer

---
 public/assets/css/generalStyle.css         |   2 +-
 routes/page-routes.js                      |   2 +-
 views/login.handlebars                     |  76 +------------
 views/partials/channelCreation.handlebars  |  51 +++++++++
 views/partials/channelLogin.handlebars     |  35 ++++++
 views/partials/channelSelection.handlebars |  43 ++++++++
 views/partials/publishChannel.handlebars   | 121 ---------------------
 views/partials/publishForm.handlebars      |   2 +-
 8 files changed, 134 insertions(+), 198 deletions(-)
 create mode 100644 views/partials/channelCreation.handlebars
 create mode 100644 views/partials/channelLogin.handlebars
 create mode 100644 views/partials/channelSelection.handlebars
 delete mode 100644 views/partials/publishChannel.handlebars

diff --git a/public/assets/css/generalStyle.css b/public/assets/css/generalStyle.css
index 8d2babcc..5a777639 100644
--- a/public/assets/css/generalStyle.css
+++ b/public/assets/css/generalStyle.css
@@ -121,7 +121,7 @@ button {
 	background-color: white;
 }
 
-button:hover, button:focus  {
+button:hover {
 	border: 1px solid blue;
 	color: white;
 	background-color: blue;
diff --git a/routes/page-routes.js b/routes/page-routes.js
index fee208a8..855198bf 100644
--- a/routes/page-routes.js
+++ b/routes/page-routes.js
@@ -5,7 +5,7 @@ module.exports = (app) => {
   // route to log out
   app.get('/logout', (req, res) => {
     req.logout();
-    res.redirect('/login');
+    res.redirect('/');
   });
   // route to display login page
   app.get('/login', (req, res) => {
diff --git a/views/login.handlebars b/views/login.handlebars
index 7823a498..ff0f9ecd 100644
--- a/views/login.handlebars
+++ b/views/login.handlebars
@@ -4,35 +4,10 @@
 
         <h2>Log In</h2>
         <p>Log in to an existing channel:</p>
-        <form id="login-form">
-            <div id="login-error-display-element" class="info-message info-message--failure"></div>
-            <div>
-                <label>Username:</label>
-                @ <input type="text" id="login-channel-name" class="input-text input-text--primary"/>
-            </div>
-            <div>
-                <label>Password:</label>
-                <input type="password" id="login-channel-password" class="input-text input-text--primary"/>
-            </div>
-        </form>
-        <button onclick="loginToChannel(event)">Log In</button>
-
+        {{>channelLogin}}
         <h2>Create New</h2>
         <p>Create a brand new channel:</p>
-        <form id="publish-channel-form">
-            <div>
-                <div id="input-error-channel-name" class="info-message info-message--failure"></div>
-                <label>Channel name:</label>
-                @ <input type="text" id="new-channel-name" class="input-text input-text--primary" oninput="checkChannelName(event.target.value)"/>
-                <span id="input-success-channel-name" class="info-message info-message--success"></span>
-            </div>
-            <div>
-                <div id="input-error-password" class="info-message info-message--failure"></div>
-                <label>Password:</label>
-                <input type="password" id="new-channel-password" class="input-text input-text--primary"/>
-            </div>
-        </form>
-        <button onclick="publishNewChannel(event)">Create Channel</button>
+        {{>channelCreation}}
     </div>
     {{> footer}}
 </div>
@@ -40,50 +15,3 @@
 <script src="/assets/js/generalFunctions.js"></script>
 <script src="/assets/js/validationFunctions.js"></script>
 <script src="/assets/js/authFunctions.js"></script>
-<script type="text/javascript">
-    function publishNewChannel (event) {
-        const channelName = `@${document.getElementById('new-channel-name').value}`;
-        const password = document.getElementById('new-channel-password').value;
-        const channelNameErrorDisplayElement = document.getElementById('input-error-channel-name');
-        const passwordErrorDisplayElement = document.getElementById('input-error-password');
-        // prevent default so this script can handle submission
-        event.preventDefault();
-        // validate submission
-        validateNewChannelSubmission(channelName, password)
-            .then(() => {
-                document.getElementById('publish-channel-form').innerHTML = '<p>Creating your new channel...</p>';
-                return sendAuthRequest(channelName, password, '/signup'); // post the request
-            })
-            .then(() => {
-                console.log('signup success');
-                document.getElementById('publish-channel-form').innerHTML = '<p>Your channel has been successfully created! Signing you in now...</p>';
-                window.location.href = '/';
-            })
-            .catch(error => {
-                if (error.name === 'ChannelNameError'){
-                    showError(channelNameErrorDisplayElement, error.message);
-                } else if (error.name === 'ChannelPasswordError'){
-                    showError(passwordErrorDisplayElement, error.message);
-                } else {
-                    console.log('signup failure:', error);
-                }
-            })
-    }
-    function loginToChannel (event) {
-        const channelName = `@${document.getElementById('login-channel-name').value}`;
-        const password = document.getElementById('login-channel-password').value;
-        const loginErrorDisplayElement = document.getElementById('login-error-display-element');
-        // prevent default action
-        event.preventDefault()
-        // send request
-        sendAuthRequest(channelName, password, '/login')
-            .then( () => {
-                console.log('login success');
-                window.location.href = `/${channelName}`;
-            })
-            .catch(error => {
-                showError(loginErrorDisplayElement, error);
-                console.log('login failure:', error);
-            })
-    }
-</script>
diff --git a/views/partials/channelCreation.handlebars b/views/partials/channelCreation.handlebars
new file mode 100644
index 00000000..e0f3c692
--- /dev/null
+++ b/views/partials/channelCreation.handlebars
@@ -0,0 +1,51 @@
+<div id="channel-publish-wrapper">
+    <p>
+        <form id="publish-channel-form">
+            <div>
+                <div id="input-error-channel-name" class="info-message info-message--failure"></div>
+                <label for="new-channel-name">Channel Name: </label>
+                @<input type="text" name="new-channel-name" id="new-channel-name" class="input-text input-text--primary" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
+                <span id="input-success-channel-name" class="info-message info-message--success"></span>
+            </div>
+            <div>
+                <div id="input-error-channel-password" class="info-message info-message--failure"></div>
+                <label for="new-channel-password">Password: </label>
+                <input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
+            </div>
+        </form>
+    </p>
+    <button onclick="publishNewChannel(event)">Create Channel</button>
+</div>
+
+<script type="text/javascript">
+ function publishNewChannel (event) {
+     const channelName = `@${document.getElementById('new-channel-name').value}`;
+     const password = document.getElementById('new-channel-password').value;
+     const channelNameErrorDisplayElement = document.getElementById('input-error-channel-name');
+     const passwordErrorDisplayElement = document.getElementById('input-error-channel-password');
+     const wrapper = document.getElementById('channel-publish-wrapper');
+     // prevent default so this script can handle submission
+     event.preventDefault();
+     // validate submission
+     validateNewChannelSubmission(channelName, password)
+         .then(() => {
+             wrapper.innerHTML = '<p>Creating your new channel...</p>';
+             return sendAuthRequest(channelName, password, '/signup') // post the request
+         })
+         .then(() => {
+             console.log('success');
+             wrapper.innerHTML = '<p>Your channel has been successfully created!</p>';
+             // referesh window logged in as the channel
+             window.location.href = '/';
+         })
+         .catch(error => {
+             if (error.name === 'ChannelNameError'){
+                 showError(channelNameErrorDisplayElement, error.message);
+             } else if (error.name === 'ChannelPasswordError'){
+                 showError(passwordErrorDisplayElement, error.message);
+             } else {
+                 console.log('failure:', error);
+             }
+         })
+ }
+</script>
\ No newline at end of file
diff --git a/views/partials/channelLogin.handlebars b/views/partials/channelLogin.handlebars
new file mode 100644
index 00000000..fe715c5c
--- /dev/null
+++ b/views/partials/channelLogin.handlebars
@@ -0,0 +1,35 @@
+<p>
+    <form id="channel-login-form">
+        <div id="login-error-display-element" class="info-message info-message--failure"></div>
+        <div>
+            <label for="login-channel-name">Channel Name: </label>
+            @<input type="text" name="login-channel-name" id="login-channel-name" class="input-text input-text--primary" placeholder="" value="">
+        </div>
+        <div>
+            <label for="login-channel-password" >Password: </label>
+            <input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
+        </div>
+
+    </form>
+</p>
+<button onclick="loginToChannel(event)">Login</button>
+
+<script type="text/javascript">
+ function loginToChannel (event) {
+     const channelName = `@${document.getElementById('login-channel-name').value}`;
+     const password = document.getElementById('login-channel-password').value;
+     const loginErrorDisplayElement = document.getElementById('login-error-display-element');
+     // prevent default
+     event.preventDefault()
+     // send request
+     sendAuthRequest(channelName, password, '/login')
+         .then(() => {
+             console.log('login success');
+             window.location.href = '/';
+         })
+         .catch(error => {
+             showError(loginErrorDisplayElement, error);
+             console.log('login failure:', error);
+         })
+ }
+</script>
\ No newline at end of file
diff --git a/views/partials/channelSelection.handlebars b/views/partials/channelSelection.handlebars
new file mode 100644
index 00000000..1056d17a
--- /dev/null
+++ b/views/partials/channelSelection.handlebars
@@ -0,0 +1,43 @@
+<div>
+    <p>
+        <div id="input-error-channel-select" class="info-message info-message--failure"></div>
+        <label for="channel-name-select">Channel:</label>
+        <select type="text" id="channel-name-select" name="channel" value="channel" onclick="toggleChannel(event)">
+            {{#if user}}
+                <option value="{{user.channelName}}" >{{user.channelName}}</option>
+            {{/if}}
+            <option value="@speech" >Anonymous</option>
+            <option value="login">Login</option>
+            <option value="new" >New</option>
+        </select>
+    </p>
+
+    <div id="channel-login-details" hidden="true">
+        {{> channelLogin}}
+    </div>
+
+    <div id="channel-create-details" hidden="true">
+        {{> channelCreation}}
+    </div>
+</div>
+
+<script src="/assets/js/authFunctions.js"></script>
+<script type="text/javascript">
+
+ function toggleChannel (event) {
+     const createChannelTool = document.getElementById('channel-create-details');
+     const loginToChannelTool = document.getElementById('channel-login-details');
+     const selectedOption = event.target.selectedOptions[0].value;
+     if (selectedOption === 'new') {
+         createChannelTool.hidden = false;
+         loginToChannelTool.hidden = true;
+     } else if (selectedOption === 'login') {
+         loginToChannelTool.hidden = false;
+         createChannelTool.hidden = true;
+     } else {
+         loginToChannelTool.hidden = true;
+         createChannelTool.hidden = true;
+         hideError(document.getElementById('input-error-channel-select'));
+     }
+ }
+</script>
\ No newline at end of file
diff --git a/views/partials/publishChannel.handlebars b/views/partials/publishChannel.handlebars
deleted file mode 100644
index 32bf8c32..00000000
--- a/views/partials/publishChannel.handlebars
+++ /dev/null
@@ -1,121 +0,0 @@
-<div id="claim-channel-input-area">
-    <p>
-        <div id="input-error-channel-select" class="info-message info-message--failure"></div>
-        <label for="channel-name-select">Channel:</label>
-        <select type="text" id="channel-name-select" name="channel" value="channel" onclick="toggleChannel(event)">
-            {{#if user}}
-                <option value="{{user.channelName}}" >{{user.channelName}}</option>
-            {{/if}}
-            <option value="@speech" >Anonymous</option>
-            <option value="login">Login</option>
-            <option value="new" >New</option>
-        </select>
-    </p>
-
-    <div id="channel-login-details" hidden="true">
-        <p>
-        <form id="channel-login-form">
-            <div id="login-error-display-element" class="info-message info-message--failure"></div>
-            <div>
-                <label for="login-channel-name">Channel Name: </label>
-                @<input type="text" name="login-channel-name" id="login-channel-name" class="input-text input-text--primary" placeholder="" value="">
-            </div>
-            <div>
-                <label for="login-channel-password" >Password: </label>
-                <input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
-            </div>
-
-        </form>
-        </p>
-        <button onclick="loginToChannel(event)">Login</button>
-    </div>
-
-    <div id="channel-create-details" hidden="true">
-        <p>
-            <form id="publish-channel-form">
-                <div>
-                    <div id="input-error-channel-name" class="info-message info-message--failure"></div>
-                    <label for="new-channel-name">Channel Name: </label>
-                    @<input type="text" name="new-channel-name" id="new-channel-name" class="input-text input-text--primary" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
-                    <span id="input-success-channel-name" class="info-message info-message--success"></span>
-                </div>
-                <div>
-                    <div id="input-error-channel-password" class="info-message info-message--failure"></div>
-                    <label for="new-channel-password">Password: </label>
-                    <input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
-                </div>
-            </form>
-        </p>
-        <button onclick="publishNewChannel(event)">Create Channel</button>
-    </div>
-</div>
-
-<script src="/assets/js/authFunctions.js"></script>
-<script type="text/javascript">
-
- function toggleChannel (event) {
-     const createChannelTool = document.getElementById('channel-create-details');
-     const loginToChannelTool = document.getElementById('channel-login-details');
-     const selectedOption = event.target.selectedOptions[0].value;
-     if (selectedOption === 'new') {
-         createChannelTool.hidden = false;
-         loginToChannelTool.hidden = true;
-     } else if (selectedOption === 'login') {
-         loginToChannelTool.hidden = false;
-         createChannelTool.hidden = true;
-     } else {
-         loginToChannelTool.hidden = true;
-         createChannelTool.hidden = true;
-         hideError(document.getElementById('input-error-channel-select'));
-     }
- }
-
- function publishNewChannel (event) {
-     const channelName = `@${document.getElementById('new-channel-name').value}`;
-     const password = document.getElementById('new-channel-password').value;
-     const channelNameErrorDisplayElement = document.getElementById('input-error-channel-name');
-     const passwordErrorDisplayElement = document.getElementById('input-error-channel-password');
-     // prevent default so this script can handle submission
-     event.preventDefault();
-     // validate submission
-     validateNewChannelSubmission(channelName, password)
-         .then(() => {
-             document.getElementById('channel-create-details').innerHTML = '<p>Creating your new channel...</p>';
-             return sendAuthRequest(channelName, password, '/signup') // post the request
-         })
-         .then(() => {
-             console.log('success');
-             document.getElementById('channel-create-details').innerHTML = '<p>Your channel has been successfully created!</p>';
-             // referesh window logged in as the channel
-             window.location.href = '/';
-         })
-         .catch(error => {
-             if (error.name === 'ChannelNameError'){
-                 showError(channelNameErrorDisplayElement, error.message);
-             } else if (error.name === 'ChannelPasswordError'){
-                 showError(passwordErrorDisplayElement, error.message);
-             } else {
-                 console.log('failure:', error);
-             }
-         })
- }
-
- function loginToChannel (event) {
-     const channelName = `@${document.getElementById('login-channel-name').value}`;
-     const password = document.getElementById('login-channel-password').value;
-     const loginErrorDisplayElement = document.getElementById('login-error-display-element');
-     // prevent default
-     event.preventDefault()
-     // send request
-     sendAuthRequest(channelName, password, '/login')
-         .then(() => {
-             console.log('login success');
-             window.location.href = '/';
-         })
-         .catch(error => {
-             showError(loginErrorDisplayElement, error);
-             console.log('login failure:', error);
-         })
- }
-
-</script>
\ No newline at end of file
diff --git a/views/partials/publishForm.handlebars b/views/partials/publishForm.handlebars
index 79eab66a..91da57ad 100644
--- a/views/partials/publishForm.handlebars
+++ b/views/partials/publishForm.handlebars
@@ -20,7 +20,7 @@
                     </p>
 				</div>
                 <div class="stop-float">
-                    {{> publishChannel}}
+                    {{> channelSelection}}
                 </div>
 				<div class="stop-float">
                     {{> publishDetails}}