JSFiddle - React, Tailwind, and code Playground

Saif Tase - Technical Assessment - Username and Password

by David Lomneck

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<div class="ui container">
  <div class="ui form error">
    <div class="field error">
      <label>Username</label>
      <input type="text" placeholder="Username" id="inputUsername">
    </div>
    <div class="field error">
      <label>Password</label>
      <input type="text" placeholder="Password" id="inputPassword">
    </div>
    <div class="ui error message">
      <div class="header">Something is invalid...</div>
      <p id="errorMessage"></p>
    </div>
  </div>
</div>

JavaScript

//
// Complete implementations of the validateUsername and validatePassword functions
// throwing errors when invalid. You may use: https://developer.mozilla.org if you need help with syntax
// https://getfirebug.com/firebug-lite-debug.js as external resource for a build-in console window


// A valid username is at least 6 characters long
// A valid username cannot be longer than 20 characters
function validateUsername(username) {
		if(username.length < 6 || username.length > 20){
  		throw 'Username is not valid!';
    }
}


// A Valid password must be at least 8 characters long
// A Valid password cannot be longer than 30 characters
// A valid password must contain at least 1 number
// A valid password must contain at least 1 UPPER case letter and 1 lower case letter

function validatePassword(password) {
	
  let validLength = password.length >= 8 && password.length <= 30
  let lower = /[a-z]/.test(password)
	let upper = /[A-Z]/.test(password)
  let number = /\d/.test(password)
  
  if(!validLength || !lower || !upper || !number)
  	throw 'Password is not valid!';
    
	/*
	let number = false;
	  let lCase = false;
	  let uCase = false;
	  
	  for(let i = 0; i < password.length; i++){
	    let char = password.charAt(i);
	    if(!!parseInt(char)){
	      number = true;
	    }else if(char == char.toLowerCase()){
	      lCase = true;
	    }else if(char == char.toUpperCase()){
	      uCase = true;
	    }
	    
	  }
	  
	  let valid = number && lCase && uCase;
	  if(password.length < 8 || password.length > 30 || !valid){
	    throw 'Password is not valid!';
	  } -->
    */
  
}





// You can ignore everything below this comment
(function() {
  var elements = {
    username: document.getElementById('inputUsername'),
    password: document.getElementById('inputPassword'),
    errorMessage: document.getElementById('errorMessage'),
    form: document.getElementsByClassName('ui form')[0]
  };
  var errors = {};

  wireup(elements.username, validateUsername);
 ...