From 8fab84de73f7c758f2365f9e9da9c8c00229a7fd Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 20 Sep 2017 11:36:20 -0700
Subject: [PATCH] fixed error location and messages

---
 controllers/publishController.js            |  2 +-
 public/assets/js/publishChannelFunctions.js | 30 -----------
 public/assets/js/validationFunctions.js     |  6 +--
 views/login.handlebars                      | 40 +++++++++++---
 views/partials/publishChannel.handlebars    | 60 +++++++++++++++------
 views/partials/publishForm.handlebars       |  2 +-
 6 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/controllers/publishController.js b/controllers/publishController.js
index 099675ba..3c1ca453 100644
--- a/controllers/publishController.js
+++ b/controllers/publishController.js
@@ -14,7 +14,7 @@ module.exports = {
         if (result === true) {
           return lbryApi.publishClaim(publishParams);
         } else {
-          return new Error('That name has already been claimed by spee.ch.  Please choose a new claim name.');
+          return new Error('That name has already been claimed by spee.ch.');
         }
       })
       // 3. upsert File record (update is in case the claim has been published before by this daemon)
diff --git a/public/assets/js/publishChannelFunctions.js b/public/assets/js/publishChannelFunctions.js
index 42e5078e..49bc7abb 100644
--- a/public/assets/js/publishChannelFunctions.js
+++ b/public/assets/js/publishChannelFunctions.js
@@ -23,34 +23,4 @@ function sendSignupRequest (channelName, password) {
         };
         xhttp.send(params);
     });
-}
-
-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(() => {
-            return sendSignupRequest(channelName, password) // post the request
-        })
-        .then(() => {
-            console.log('success');
-            document.getElementById('signup-form').innerHTML = '<p>Your channel has been successfully created! Redirecting you now...</p>';
-            window.location.href = `/${channelName}`;
-        })
-        .catch(error => {
-            if (error.name === 'ChannelNameError'){
-                showError(channelNameErrorDisplayElement, error.message);
-            } else if (error.name === 'ChannelPasswordError'){
-                showError(passwordErrorDisplayElement, error.message);
-            } else {
-                console.log('failure:', error);
-            }
-        })
-
-
 }
\ No newline at end of file
diff --git a/public/assets/js/validationFunctions.js b/public/assets/js/validationFunctions.js
index d2555dba..e8b05c0c 100644
--- a/public/assets/js/validationFunctions.js
+++ b/public/assets/js/validationFunctions.js
@@ -31,12 +31,12 @@ function validateFile(file) {
 function validateClaimName (name) {
 	// ensure a name was entered
 	if (name.length < 1) {
-		throw new NameError("You must enter a name for your claim");
+		throw new NameError("You must enter a name for your url");
 	}
 	// validate the characters in the 'name' field
 	const invalidCharacters = /[^A-Za-z0-9,-]/g.exec(name);
 	if (invalidCharacters) {
-		throw new NameError('"' + invalidCharacters + '" characters are not allowed in the title.');
+		throw new NameError('"' + invalidCharacters + '" characters are not allowed in the url.');
 	}
 }
 
@@ -81,7 +81,7 @@ function isNameAvailable (name, apiUrl) {
                     if (this.response == true) {
                         resolve();
                     } else {
-                        reject( new NameError("That name has already been claimed by another user.  Please choose a different name."));
+                        reject( new NameError("That name has already been claimed by someone else."));
                     }
                 } else {
                     reject("request to check claim name failed with status:" + this.status);
diff --git a/views/login.handlebars b/views/login.handlebars
index 5f3ff6a9..daa6de4b 100644
--- a/views/login.handlebars
+++ b/views/login.handlebars
@@ -20,23 +20,20 @@
 
         <h2>Create New</h2>
         <p>Create a brand new channel:</p>
-        <form id="signup-form" action="/signup" method="post">
+        <form id="publish-channel-form">
             <div>
-                <span id="input-error-channel-name" class="info-message info-message--failure"></span><br/>
+                <div id="input-error-channel-name" class="info-message info-message--failure"></div>
                 <label>Channel name:</label>
                 @ <input type="text" name="username" value="" 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>
-                <span id="input-error-password" class="info-message info-message--failure"></span><br/>
+                <div id="input-error-password" class="info-message info-message--failure"></div>
                 <label>Password:</label>
                 <input type="password" name="password" value="" id="new-channel-password" class="input-text input-text--primary"/>
             </div>
-            <div>
-                <input type="submit" value="Create" onclick="publishNewChannel(event)"/>
-            </div>
         </form>
-
+        <button value="Create" onclick="publishNewChannel(event)">Create Channel</button>
     </div>
     {{> footer}}
 </div>
@@ -44,3 +41,32 @@
 <script src="/assets/js/generalFunctions.js"></script>
 <script src="/assets/js/validationFunctions.js"></script>
 <script src="/assets/js/publishChannelFunctions.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(() => {
+                return sendSignupRequest(channelName, password) // post the request
+            })
+            .then(() => {
+                console.log('success');
+                document.getElementById('publish-channel-form').innerHTML = '<p>Your channel has been successfully created! Redirecting you now...</p>';
+                window.location.href = `/${channelName}`;
+            })
+            .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>
diff --git a/views/partials/publishChannel.handlebars b/views/partials/publishChannel.handlebars
index aea12fd3..48c9da5c 100644
--- a/views/partials/publishChannel.handlebars
+++ b/views/partials/publishChannel.handlebars
@@ -1,8 +1,8 @@
 <div id="claim-channel-input-area">
-    <span id="input-error-channel-select" class="info-message info-message--failure"></span>
     <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="check(event)">
+        <select type="text" id="channel-name-select" name="channel" value="channel" onclick="toggleChannel(event)">
             {{#if user}}
                 <option value="{{user.channelName}}" >{{user.channelName}}</option>
             {{/if}}
@@ -12,25 +12,30 @@
     </p>
 
     <div id="channel-create-details" hidden="true">
-        <span id="input-error-channel-name" class="info-message info-message--failure"></span>
         <p>
-            <label for="channelName">Channel Name: </label>
-            @<input type="text" id="channel-name-input" 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>
-            <br/>
+            <form id="publish-channel-form">
+                <div>
+                    <div id="input-error-channel-name" class="info-message info-message--failure"></div>
+                    <label for="channelName">Channel Name: </label>
+                    @<input type="text" name="channelName" 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="channelPassword" >Password: </label>
+                    <input type="password" name="channelPassword" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
+                </div>
 
-            <label for="password" >Password: </label>
-            <input type="password" id="password" placeholder="" value="" class="input-text input-text--primary">
-            <br/>
+            </form>
         </p>
-            <button >create</button>
+            <button onclick="publishNewChannel(event)">Create Channel</button>
     </div>
 </div>
 
 <script type="text/javascript">
- // toggle channel creation tool
- const createChannelTool = document.getElementById('channel-create-details');
- function check(event) {
+
+ function toggleChannel (event) {
+     const createChannelTool = document.getElementById('channel-create-details');
      const selectedOption = event.target.selectedOptions[0].value;
      if (selectedOption != 'new') {
          createChannelTool.hidden = true;
@@ -39,8 +44,33 @@
          createChannelTool.hidden = false;
      }
  }
- function createChannel() {
 
+ 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(() => {
+             return sendSignupRequest(channelName, password) // post the request
+         })
+         .then(() => {
+             console.log('success');
+             document.getElementById('signup-form').innerHTML = '<p>Your channel has been successfully created! Redirecting you now...</p>';
+             window.location.href = `/${channelName}`;
+         })
+         .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/publishForm.handlebars b/views/partials/publishForm.handlebars
index 0a767866..7c80e3f2 100644
--- a/views/partials/publishForm.handlebars
+++ b/views/partials/publishForm.handlebars
@@ -12,8 +12,8 @@
 		<div class="col-right">
 			<div id="publish-active-area">
 				<div class="stop-float">
-                    <span id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></span>
 					<p>
+                        <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
                         Spee.ch/
                         <input type="text" id="claim-name-input" class="input-text input-text--primary" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
                         <span id="input-success-claim-name" class="info-message info-message--success"></span>