JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.ui.touch-punch.min.js"></script>

CSS

.pattern-authentication{
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
  z-index: 999999999999999999999999999999;
  background-color: #000;
  font-family: arial;
  perspective: 100px;
}

.pattern-authentication button.pattern-reset-button{
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #222;
  border-radius: 12px;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 20px;
  color: darkorange;
  border: none;
  font-size: 11px;
  cursor: pointer;
}
.pattern-authentication button.test-your-memory{
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #222;
  border-radius: 12px;
  line-height: 44px;
  padding-left: 20px;
  padding-right: 20px;
  color: #009f38;
  border: none;
  font-size: 17px;
  cursor: pointer;
  transform: translateX(-50%) translateY(-50%);
}


.pattern-authentication>article{
  font-size: 200px;
  color: #111;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  text-align: center;
  line-height: 100vh;
  height: 100%;
  display: block;
  pointer-events: none;
}

.pattern-authentication>ul{
  color:#222;
  display: block;
  width: 300px;
  margin: auto;
  position: fixed;
  bottom: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  padding: 0px;
  text-align: center;
  transition: all 0.5s;
}

.pattern-authentication.setup-mode>ul:before{
  content: "SETUP MODE: Enter the patterns you want to use for authentication";
  color: #fff;
  line-height: 20px;
  position: absolute;
  top: -30px;
  left: -100px;
  right: -100px;
}

.pattern-authentication>ul>li{
  display: inline-block;
  text-align: center;
  margin: auto;
  line-height: 32px;
  width: 32px;
  background-color:#181818;
  border-radius: 50%;
  margin: 5px;
  font-size: 54px;
}
.pattern-authentication>ul>li.current{
  color:...

JavaScript

class PatternAuthentication {

  constructor (parentElement,setupConfiguration,userConfiguration) {

    this.parentElement = parentElement;
    this.ui;
    this.setupConfiguration = setupConfiguration;
    this.userConfiguration = userConfiguration;
    this.points = [];
    this.firstPoint;
    this.lockIndex = 0;
    this.currentLock = this.userConfiguration.locks[0];
    this.clearButton;

    if(this.setupConfiguration.setMode){

      this.userConfiguration = {
        locks: []
      }

    }

    this.build();

  }

  dispose(){

    this.ui.remove();

  }

  build(){

    let t = this;

    this.ui = $(`<div class="pattern-authentication"><article>1</article><div>
    <div data-point="0"></div>
    <div data-point="1"></div>
    <div data-point="2"></div>
    <div data-point="3"></div>
    <div data-point="4"></div>
    <div data-point="5"></div>
    <div data-point="6"></div>
    </div>
    <ul></ul>
    <nav>
      <button class="top-left"></button>
      <button class="top-right"></button>
      <button class="bottom-left"></button>
      <button class="bottom-right"></button>
    </nav>
    </div>`);

    // add reset/clear button

    t.clearButton = $(`<button class="pattern-reset-button">RESET</button>`);

    t.clearButton.click( () => {

      t.dispose();

      new PatternAuthentication(t.parentElement,t.setupConfiguration,t.userConfiguration);

    });

    t.ui.append(t.clearButton);

    if(this.setupConfiguration.setMode){

      t.ui.addClass('setup-mode');

    } else {



    }

    setTimeout(function(){

      t.ui.find('>nav').addClass('open');

    },1000);

    if(this.setupConfiguration.setMode){

      for(let i=0;i<this.setupConfiguration.minimumLocks;i++){

        this.ui.find('>ul').append(`<li data-index="${i}">&#8226;</li>`);

      }

    } else {

      for(let i=0;i<this.userConfiguration.locks.length;i++){

       ...