[feature] Invalid entry prevents login button click

newsproutsmedia · Jan 22, 2021 · 2634c19 · 2634c19
1 parent 8a5d4bc
commit 2634c19
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -669,7 +669,7 @@ invite > button.send-invitations-btn {
  outline: none;
  padding-bottom: 6px;
  text-align: center;
- max-width: 80%;
+ width: 100%;
  font-size: 200%;
  letter-spacing: 3px;
  color: white; }
@@ -703,8 +703,7 @@ invite > button.send-invitations-btn {
 
 @media screen and (min-width: 750px) {
  .login .title {
- font-size: 200%;
- width: 400px; }
+ font-size: 200%; }
  #joinBtn {
  font-size: 100%; } }
 

diff --git a/public/js/index.js b/public/js/index.js
@@ -3,23 +3,25 @@ $(function() {
 
  const $loginPage = $('.pages'); // The login page
  const $usernameField = $('#usernameField');
+ const $loginForm = $('#loginForm');
  const $usernameInput = $('#usernameInput'); // Input for username
  const $usernameBtn = $('#usernameBtn'); // Input for username
  const $joinBtn = $('#joinBtn'); // Input for join
  const $emailField = $('#emailField');
  const $emailInput = $('#emailInput'); // Input for username
+ const $emailBtn = $('#emailBtn'); // Input for username
 
  let $currentInput = $usernameInput.focus();
 
  let username;
+ let email;
+ let user = {};
 
  // Focus input when clicking anywhere on login page
  $loginPage.on('click', () => {
  $currentInput.focus();
  });
 
- let user = {};
-
  $joinBtn.on('click', () => {
  window.location.href="/join";
  });
@@ -32,9 +34,35 @@ $(function() {
  // add to user object
  user.username = username;
  // show next step
- nextField($usernameField, $emailField, $emailInput);
+ if(username) {
+ nextField($usernameField, $emailField, $emailInput);
+ }
+ });
+ $emailBtn.on('click', () => {
+ $emailBtn.preventDefault();
+ console.log('email button clicked');
+ // get username from input
+ email = cleanInput($emailInput.val().trim());
+ // validate username
+ // add to user object
+ user.email = email;
+ // show next step
+ if(IsEmail(email)) {
+ $loginForm.submit();
+ }
  });
 
+ function IsEmail(email) {
+ const regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+ if(!regex.test(email)) {
+ console.log("invalid email");
+ return false;
+ }else{
+ console.log("valid email");
+ return true;
+ }
+ }
+
  // Prevents input from having injected markup
  const cleanInput = (input) => {
  return $('<div/>').text(input).html();

diff --git a/scss/pages/_index.scss b/scss/pages/_index.scss
@@ -80,7 +80,6 @@
 
  .title {
  font-size: 200%;
- width: 400px;
  }
  }
 

diff --git a/views/home.hbs b/views/home.hbs
@@ -5,7 +5,7 @@
  <div class="header-item"><button id="joinBtn" class="btn" href="/join">Join Chat</button></div>
  </header>
  <div class="login">
- <form method="post" action="/">
+ <form id="loginForm" method="post" action="/">
  <div id="usernameField" class="form-control">
  <div class="userinput">
  <h3 class="title">What's your nickname?</h3>
@@ -21,12 +21,12 @@
  <div class="userinput">
  <h3 class="title">What's your email address?</h3>
  <input id="emailInput" class="username-input"
- type="text"
+ type="email"
  name="email"
  required
  />
  </div>
- <div class="login-email-buttons"><button type="submit" id="emailBtn" class="btn">Create New Room</button></div>
+ <div class="login-email-buttons"><button id="emailBtn" class="btn">Create New Room</button></div>
  </div>
  </form>
  </div>