2fa example

2fa.svelte

<script>
  let twoFactor;
  let isCorrect = true;
  $: isCorrect
  
  function maybeRight() {
		console.log(twoFactor)
    Math.random() > 0.5 ? isCorrect = true : isCorrect = false;
  }
 
</script>
<br/>
<input
  class="{isCorrect ? 'idle' : 'err'}"
  bind:value={twoFactor}
  type="text"
  maxlength="4"
  autocomplete="off"
  required>
<button on:click={maybeRight}>Submit</button>

<style>
  
  input {
    width: 180px !important;
    height: 30px !important;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 29px;
    padding-left: 5px;
    text-align: left;
    margin: 10px auto -5px auto;
    color: transparent !important;
    text-shadow: 0px 0px 0px #666;
		border: transparent;
  }
  
  .idle {
    background: linear-gradient(to right, #eff1f1, #eff1f1 25px, white 10px, white 40px, #eff1f1 40px, #eff1f1 65px, white 10px, white 80px, #eff1f1 80px, #eff1f1 105px, white 10px, white 120px, #eff1f1 120px, #eff1f1 145px, white 10px, white 160px);
  }
  
  .err {
    background: linear-gradient(to right, #f00, #f00 25px, white 10px, white 40px, #f00 40px, #f00 65px, white 10px, white 80px, #f00 80px, #f00 105px, white 10px, white 120px, #f00 120px, #f00 145px, white 10px, white 160px, white 160px);
  }
  
  input:focus {
    outline: none;
  }
  
  button {
    background: #eff1f1;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 20px;
    font-weight: 900;
    color: #666;
    cursor: pointer;
  }
</style>