Material Design Login / Sign Up Form. Emoji password strength meter using zxcvbn on sign up.

index.html

<div class="container">
  <div class="row">
    <div class="col s12 m6 offset-m3">
      <div class="card hoverable">
        <div class="card-content grey-text text-lighten-1">
          <div class="row card-title">
            <div class="col s6 left-align login-link"><span>Log in</span></div>
            <div class="col s6 right-align signup-link active"><span>Sign up</span></div>
          </div>
          <div class="row">
            <div class="input-field email-field col s12">
              <input id="email" type="email" class="validate white-text">
              <label for="email" class="grey-text text-lighten-1">Email</label>
            </div>
          </div>
          <div class="row">
            <form action="." class="col s12 password-form" autocomplete="nope">
              <div class="row">
                <div class="input-field password-field col s12">
                  <input id="password" type="password" class="validate">
                  <span id="password-strength"></span>
                  <label for="password">Password</label>
                  <p class="help-text"></p>
                </div>
              </div>
              <div class="row confirm-password-row">
                <div class="input-field confirm-password-field col s12">
                 <input id="confirm-password" type="password" class="validate">
                 <label for="confirm-password">Confirm Password</label>
               </div>
              </div>
            </form>
          </div>
        </div>
        <div class="card-action center-align">
          <div class="row">
            <a class="btn-login btn amber darken-4 waves-effect white-text">Log In</a>
          </div>
          <div class="row forgot-password-row">
            <span class="amber-text text-darken-4 waves-effect">Forgot Password?</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

material-design-login-sign-up-form-emoji-password-strength-meter-using-zxcvbn-on-sign-up.markdown

Material Design Login / Sign Up Form. Emoji password strength meter using zxcvbn on sign up.

A Pen by Tyler Moeller on CodePen.

License.

script.js

function showLogin() {
  $(".login-link").addClass("active");
  $(".signup-link").removeClass("active");
  $(".btn-login").text("Log in");
  $(".confirm-password-row, .forgot-password-row").toggle();
}

function showSignup() {
  $(".login-link").removeClass("active");
  $(".signup-link").addClass("active");
  $(".btn-login").text("Sign up");
  $(".confirm-password-row, .forgot-password-row").toggle();
}

function checkPasswordStrength() {
  if (!$("#password").val() || $(".login-link").hasClass("active")) return;

  const emoji = {
    0: "\u{1F628}", // Fearful 😨
    1: "\u{1F616}", // Confounded 😖
    2: "\u{1F61E}", // Disappointed 😞
    3: "\u{1F615}", // Confused 😕
    4: "\u{1F603}" // Grinning 😃
  };
  const result = zxcvbn($("#password").val());
  const warning = result.feedback.warning || "";
  const suggestion = result.feedback.suggestions.join(", ").replace(/,/g, "") || "";
  
  $("#password-strength").html(emoji[result.score]);
  $(".help-text").text(`${suggestion} ${warning}`);
}

function init() {
  $(".login-link").on("click", showLogin);
  $(".signup-link").on("click", showSignup);
  $("#password")
    .on("input focus", checkPasswordStrength)
    .on("blur", () => $("#password-strength, .help-text").empty());
}

$(init);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>

style.css

html {
  min-height: 100vh;
}

body {
  background-image: url(https://images.unsplash.com/photo-1440558547120-1c1cae0397a1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1920&h=1200);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;  
  font-size: 16px;
  max-width: 1024px;
  margin: 0 auto;
  min-width: 280px;
  padding-top: 70px;
}

.card,
.card-content,
.card-action {
  background-color: rgba(255,255,255,0.03);
  margin: 0;
}

.login-link span,
.signup-link span {
  padding-bottom: .25rem;
  cursor: pointer;  
}

.login-link span:hover,
.signup-link span:hover {
  border-bottom: 2px solid #bdbdbd;
}

.login-link.active span,
.signup-link.active span {
  border-bottom: 2px solid #ff6f00;
}

.password-form {
  margin-bottom: -1rem;
}

.input-field input[type=email],
.input-field input[type=password] {
  font-size: 16px;
  margin-bottom: .5em;  
}

.input-field input[type=email]:focus + label,
.input-field input[type=password]:focus + label {
  color: #e0e0e0;
}

.input-field input[type=email]:focus,
.input-field input[type=password]:focus {
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 0 0 #eee;
}

.input-field input[type=email].valid {
  border-bottom: 1px solid #ff6f00;
  box-shadow: 0 1px 0 0 #ff6f00;
}

#password-strength {
  position: absolute;
  top: 4px;
  right: 16px;
  font-size: 22px;
}

.help-text {
  font-size: 12px;
}

.card-action span:hover {
  text-decoration: underline;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />