passport/local-login.js

@@ -10,6 +10,7 @@ module.exports = new PassportLocalStrategy(
     passReqToCallback: true,
   },
   (req, username, password, done) => {
+    logger.debug('verifying loggin attempt');
     username = `@${username}`;
     return db.User
         .findOne({where: {channelName: username}})

public/assets/css/generalStyle.css

@@ -2,6 +2,7 @@ body, button, input, textarea, label, select, option {
 	font-family: serif;
 }
 /* Containters */
+
 .wrapper {
 	margin-left: 20%;
 	width:60%;
@@ -76,6 +77,7 @@ a, a:visited {
 	color: blue;
 	text-decoration: none;
 }
+
 h1 {
 	font-size: x-large;
 }
@@ -111,6 +113,26 @@ table {
 	text-align: left;
 }
 
+button {
+	border: 1px solid black;
+	padding: 0.5em;
+	margin: 0.5em 0 0.5em 0;
+	color: black;
+	background-color: white;
+}
+
+button:hover, button:focus  {
+	border: 1px solid blue;
+	color: white;
+	background-color: blue;
+}
+
+button:active{
+	border: 1px solid blue;
+	color: white;
+	background-color: white;
+}
+
 .stop-float {
 	clear: both;
 }
@@ -137,10 +159,14 @@ table {
 	color: red;
 }
 
+input:-webkit-autofill {
+ -webkit-box-shadow: 0 0 0px 1000px white inset;
+}
+
 .input-text {
 	outline: none;
 	border: 0px;
-	background-color: #ffffff;
+	background-color: white;
 }
 
 .input-text--primary {

public/assets/js/authFunctions.js

@@ -1,11 +1,11 @@
-function sendSignupRequest (channelName, password) {
+function sendAuthRequest (channelName, password, url) {  // url === /signup or /login
     return new Promise(function(resolve, reject) {
         // make sure the claim name is still available
         let xhttp;
         const params = `username=${channelName}&password=${password}`;
-        console.log(params);
+        console.log(params, url);
         xhttp = new XMLHttpRequest();
-        xhttp.open('POST', '/api/signup', true);
+        xhttp.open('POST', url, true);
         xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         xhttp.responseType = 'json';
         xhttp.onreadystatechange = function() {

routes/api-routes.js

@@ -6,18 +6,8 @@ const { getClaimList, resolveUri } = require('../helpers/lbryApi.js');
 const { createPublishParams, validateFile, checkClaimNameAvailability, checkChannelAvailability } = require('../helpers/publishHelpers.js');
 const errorHandlers = require('../helpers/errorHandlers.js');
 const { postToStats, sendGoogleAnalytics } = require('../controllers/statsController.js');
-const passport = require('passport');
 
-module.exports = (app, hostedContentPath) => {
-  // route for auth
-  app.post('/api/signup', passport.authenticate('local-signup'), (req, res) => {
-    logger.debug('successful signup');
-    res.status(200).json(true);
-  });
-  app.post('/api/login', passport.authenticate('local-login'), (req, res) => {
-    logger.debug('successful login');
-    res.status(200).json(true);
-  });
+module.exports = (app) => {
   // route to run a claim_list request on the daemon
   app.get('/api/claim_list/:name', ({ headers, ip, originalUrl, params }, res) => {
     // google analytics

routes/auth-routes.js

@@ -0,0 +1,15 @@
+const logger = require('winston');
+const passport = require('passport');
+
+module.exports = (app) => {
+  // route for sign up
+  app.post('/signup', passport.authenticate('local-signup'), (req, res) => {
+    logger.debug('successful signup');
+    res.status(200).json(true);
+  });
+  // route for log in
+  app.post('/login', passport.authenticate('local-login'), (req, res) => {
+    logger.debug('successful login');
+    res.status(200).json(true);
+  });
+};

routes/page-routes.js

@@ -1,28 +1,12 @@
 const errorHandlers = require('../helpers/errorHandlers.js');
 const { postToStats, getStatsSummary, getTrendingClaims, getRecentClaims } = require('../controllers/statsController.js');
-const passport = require('passport');
-const logger = require('winston');
 
 module.exports = (app) => {
-  // route for auth
-  app.post('/signup', passport.authenticate('local-signup'), (req, res) => {
-    logger.debug('redirecting to user channel');
-    // If this function gets called, signup was successful.
-    // `req.user` contains the authenticated user.
-    res.redirect(`/${req.user.channelName}`);
-  });
-  app.post('/login', passport.authenticate('local-login'), (req, res) => {
-    logger.debug('redirecting to user channel');
-    // If this function gets called, login was successful.
-    // `req.user` contains the authenticated user.
-    res.redirect(`/${req.user.channelName}`);
-  });
   // route to log out
   app.get('/logout', (req, res) => {
     req.logout();
     res.redirect('/login');
   });
-
   // route to display login page
   app.get('/login', (req, res) => {
     if (req.user) {
@@ -31,14 +15,6 @@ module.exports = (app) => {
       res.status(200).render('login');
     }
   });
-  // route to display login page
-  // app.get('/users/:name', isAuthenticated, (req, res) => {
-  //   res.status(200).render('profile');
-  // });
-  // app.get('/logout', deAuthenticate, (req, res) => {
-  //   res.status(200).render('/');
-  // });
-
   // route to show 'about' page for spee.ch
   app.get('/about', (req, res) => {
     // get and render the content

speech.js

@@ -88,7 +88,8 @@ db.sequelize
     // add the hosted content folder at a static path
     app.use('/media', express.static(hostedContentPath));
     // require routes & wrap in socket.io
-    require('./routes/api-routes.js')(app, hostedContentPath);
+    require('./routes/auth-routes.js')(app);
+    require('./routes/api-routes.js')(app);
     require('./routes/page-routes.js')(app);
     require('./routes/serve-routes.js')(app);
     require('./routes/home-routes.js')(app);

views/login.handlebars

@@ -4,19 +4,17 @@
 
         <h2>Log In</h2>
         <p>Log in to an existing channel:</p>
-        <form id="login-form" action="/login" method="post">
+        <form id="login-form">
             <div>
                 <label>Username:</label>
-                @ <input type="text" name="username" class="input-text input-text--primary"/>
+                @ <input type="text" id="login-channel-name" class="input-text input-text--primary"/>
             </div>
             <div>
                 <label>Password:</label>
-                <input type="password" name="password" class="input-text input-text--primary"/>
-            </div>
-            <div>
-                <input type="submit" value="Log In"/>
+                <input type="password" id="login-channel-password" class="input-text input-text--primary"/>
             </div>
         </form>
+        <button onclick="loginToChannel(event)">Log In</button>
 
         <h2>Create New</h2>
         <p>Create a brand new channel:</p>
@@ -24,23 +22,23 @@
             <div>
                 <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)"/>
+                @ <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" name="password" value="" id="new-channel-password" class="input-text input-text--primary"/>
+                <input type="password" id="new-channel-password" class="input-text input-text--primary"/>
             </div>
         </form>
-        <button value="Create" onclick="publishNewChannel(event)">Create Channel</button>
+        <button onclick="publishNewChannel(event)">Create Channel</button>
     </div>
     {{> footer}}
 </div>
 
 <script src="/assets/js/generalFunctions.js"></script>
 <script src="/assets/js/validationFunctions.js"></script>
-<script src="/assets/js/publishChannelFunctions.js"></script>
+<script src="/assets/js/authFunctions.js"></script>
 <script type="text/javascript">
     function publishNewChannel (event) {
         const channelName = `@${document.getElementById('new-channel-name').value}`;
@@ -52,10 +50,10 @@
         // validate submission
         validateNewChannelSubmission(channelName, password)
             .then(() => {
-                return sendSignupRequest(channelName, password) // post the request
+                return sendAuthRequest(channelName, password, '/signup'); // post the request
             })
             .then(() => {
-                console.log('success');
+                console.log('signup success');
                 document.getElementById('publish-channel-form').innerHTML = '<p>Your channel has been successfully created! Redirecting you now...</p>';
                 window.location.href = `/${channelName}`;
             })
@@ -65,8 +63,23 @@
                 } else if (error.name === 'ChannelPasswordError'){
                     showError(passwordErrorDisplayElement, error.message);
                 } else {
-                    console.log('failure:', error);
+                    console.log('signup failure:', error);
                 }
             })
     }
+    function loginToChannel (event) {
+        const channelName = `@${document.getElementById('login-channel-name').value}`;
+        const password = document.getElementById('login-channel-password').value;
+        // prevent default action
+        event.preventDefault()
+        // send request
+        sendAuthRequest(channelName, password, '/login')
+            .then(() => {
+                console.log('login success');
+                //window.location.href = `/${channelName}`;
+            })
+            .catch(error => {
+                console.log('login failure:', error);
+            })
+    }
 </script>

views/partials/publishChannel.handlebars

@@ -7,41 +7,65 @@
                 <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>
+                <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="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)">
+                    <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="channelPassword" >Password: </label>
-                    <input type="password" name="channelPassword" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
+                    <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>
+        <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') {
+     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'));
-     } else {
-         createChannelTool.hidden = false;
      }
  }
 
@@ -55,12 +79,14 @@
      // validate submission
      validateNewChannelSubmission(channelName, password)
          .then(() => {
-             return sendSignupRequest(channelName, password) // post the request
+             document.getElementById('channel-create-details').innerHTML = '<p>Your channel is being created...</p>';
+             return sendAuthRequest(channelName, password, '/signup') // 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}`;
+             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'){
@@ -73,4 +99,20 @@
          })
  }
 
+ function loginToChannel (event) {
+     const channelName = `@${document.getElementById('login-channel-name').value}`;
+     const password = document.getElementById('login-channel-password').value;
+     // prevent default
+     event.preventDefault()
+     // send request
+     sendAuthRequest(channelName, password, '/login')
+         .then(() => {
+             console.log('login success');
+             //window.location.href = `/${channelName}`;
+         })
+         .catch(error => {
+             console.log('login failure:', error);
+         })
+ }
+
 </script>

views/partials/publishForm.handlebars

@@ -4,7 +4,7 @@
 		<div class="col-left" id="file-selection-area">
 			<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
 				<p>Drag and drop your file here, or choose your file below.</p>
-                <span class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></span><br/>
+                <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
 				<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
 			</div>
 			<div id="asset-preview-holder"></div>
@@ -40,7 +40,7 @@
 		// reset file selection area
 		document.getElementById('file-selection-area').innerHTML = `<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
 			<p>Drag and drop your file here, or choose your file below.</p>
-			<div class="input-error" id="input-error-file-selection" hidden="true"></div>
+			<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
 			<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
 		</div>
 		<div id="asset-preview-holder"></div>`;