bizpin login

by mgoetzke

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/waffle/0.3.1/waffle.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-pink.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="page">
  <div class="bg gradient"></div>
  <div class="indent">
    <div class="">
      <svg class="logo" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="26.503805mm" height="9.9942207mm" viewBox="0 0 26.503805 9.9942207" version="1.1" id="svg4496" sodipodi:docname="bizpin Text Logo 3.svg" inkscape:version="0.92.0 r15299">
        <defs id="defs4490" />
        <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="7.9195959" inkscape:cx="52.151727" inkscape:cy="23.758463" inkscape:document-units="mm" inkscape:current-layer="layer1"
        showgrid="false" inkscape:window-width="2560" inkscape:window-height="1537" inkscape:window-x="1912" inkscape:window-y="-8" inkscape:window-maximized="1" />
        <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-17.294624,-68.702378)">
          <g id="biz">
            <path d="m 17.294624,76.639877 v -7.792805 h 0.718303 v 3.136759 q 0.454752,-0.558106 1.018025,-0.831991 0.563273,-0.279052 1.235067,-0.279052 1.193726,0 2.036051,0.868164 0.847494,0.862996 0.847494,2.098063 0,1.219564 -0.852661,2.08256 -0.852661,0.862996 -2.051555,0.862996 -0.687296,0 -1.245401,-0.294555 -0.558106,-0.294556 -0.98702,-0.883667 v 1.033528 z m 2.89388,-0.552937 q...

CSS

body {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.login-card .mdl-card__title {
  color: #fff;
  height: 176px;
  background: lightblue;
  xbackground: linear-gradient( rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)), url('https://unsplash.it/300/176/?random') center / cover;
  position: relative;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.login-card .avatar {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translate(0, 172px);
  xdisplay: none; // VISIBLE WHEN USERNAME
  // transition: transform 3.0s ease;
  transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.login-card__hasname .avatar {
  transform: translate(0, 0);
}

.login-card .mdl-card__title-text {
  transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.login-card__hasname .mdl-card__title-text {
  opacity: 0;
}

.login-card .avatar img {
  border-radius: 200px;
  width: 128px;
  margin: 20px auto;
  display: table;
}

.mdl-textfield__label {
  color: rgba(0, 0, 0, 0.51) !important;
}

.page {
  background-image: url('https://unsplash.it/750/500/?random');
  background-size: cover;
  height: 100%;
  width: 100%;
}

.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0.5;
}

.indent {
  z-index: 1;
  position: absolute;
  padding: 20px;
  margin: 0 auto;
  right: 10%;
  top: 10%;
  xmargin-top: 0;
}

svg.logo {
  vertical-align: middle;
}

svg.logo #biz > path {
  fill: #BBDEFB !important;
}

svg.logo #pin > path {
  fill: white !important;
}

.page {
  font-family: Calibri;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
}

.page h1 {
  vertical-align: middle;
  font-size: 50px;
  font-weight: normal;
  margin-left: 00px;
  margin-bottom: 0px;
  color: white;
}

.forgot {
  font-size: 16px;
  /* margin: 0 auto; */
  /* position: relative; */
  text-align: center;
}

.forgot a {
 ...

JavaScript

var steps = ['user', 'password']
var stepsDone = new Set()

var checkname = function(text) {
  checkstep(text, 'user', 'login-card__hasname')
}

var checkpw = function(text) {
  checkstep(text, 'password', 'login-card__haspw')
}

var checkstep = function(text, stepName, className) {
  const loginPage = document.getElementById('card')

  if (text) {
    loginPage.classList.add(className)
    stepsDone.add(stepName)
  } else {
    loginPage.classList.remove(className)
    stepsDone.delete(stepName)
  }

  const stepProgress = stepsDone.size / steps.length

  const step = document.querySelector('div.step')
  step.style.minWidth = stepProgress * 100 + '%'

  if (stepsDone.size >= steps.length - 1 && stepsDone.has('user')) {
    const disabledStep = document.querySelector('.login-actions.disabled')

    if (disabledStep)
      disabledStep.classList.remove('disabled')

    const potentiallyEnabledBtn = document.querySelector('.login-actions .primary-btn')
    potentiallyEnabledBtn.disabled = null
  } else {
    const potentiallyEnabledStep = document.querySelector('.login-actions')

    if (potentiallyEnabledStep)
      potentiallyEnabledStep.classList.add('disabled')

    const potentiallyEnabledBtn = document.querySelector('.login-actions .primary-btn')
    potentiallyEnabledBtn.disabled = true
  }
}