LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Forgot Password?
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: 8px;
  right: 16px;
}

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

.card-action span:hover {
  text-decoration: underline;
}
JS
$(document).ready(() => {
  $('.login-link').on('click', showLogin);
  $('.signup-link').on('click', showSignup);
});

const showLogin = () => {
  $('.login-link').addClass('active');
  $('.signup-link').removeClass('active');
  $('.confirm-password-row').hide();
  $('.btn-login').text('Log in');
  $('.forgot-password-row').show();
}

const showSignup = () => {
  $('.signup-link').addClass('active');
  $('.login-link').removeClass('active');
  $('.btn-login').text('Sign up');
  $('.forgot-password-row').hide();
  $('.confirm-password-row').show();
}

$('#password').on('input focus', checkPasswordStrength)
              .on('blur', () => $('#password-strength, .help-text').empty());

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

  const result = zxcvbn($('#password').val()),
    emoji = {
      0: 'fearful',
      1: 'confounded',
      2: 'disappointed',
      3: 'confused',
      4: 'smile'
    },
    warning = result.feedback.warning || '',
    suggestion = result.feedback.suggestions.join(', ').replace(',','') || '';

  $('#password-strength').html(``);
  $('.help-text').text(suggestion + ' ' + warning + '')
}
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID