User Login Button #TWA

index.pug

div#app
	button.userlogin(style="--accent:#EC87C0")
		div.photo ZS
		div.name Zoë Shackleton
		div.pin
			div.dot
			div.dot
			div.dot
			div.dot

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.ts

let pin = [...Array(4)].fill(null)
let pointer = 0

$(".userlogin").click(function(){
	console.log("click", $(this).find(".pin").hasClass("shown"))
	if(!$(this).find(".pin").hasClass("shown")) {
		pin = [...Array(4)].fill(null)
		pointer = 0
		$(".pin .dot").removeClass("entered")
		$(".pin").removeClass("correct")
	}
	$(this).find(".pin").toggleClass("shown")
})
$( ".userlogin" ).keydown(function(e) {
	let num = e.keyCode - 48
	if(num >= 0 && num <= 9 && pointer < 4) {
		pin[pointer] = num
		pointer++
		if(pointer==4 && pin.join("")=="1215") {
			$(".pin").addClass("correct")
		}
	} else if(e.keyCode == 8) {
		pin = [...Array(4)].fill(null)
		pointer = 0
	}
	let html = pin.map(x => `<div class="dot${x != null ? " entered":""}"></div>`)
	console.log(html)
	$(".pin").html(html)
});

style.scss

:root {
	--card-background:#ffffff;
	--card-background-hover:#F5F7FA;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	color:#323133;
	font-family: 'Cera Pro','Segoe UI', Tahoma, Verdana, sans-serif;
	#app {
		button.userlogin {
			--accent:grey;
			display: flex;
			flex-direction:column;
			justify-content: center;
			align-items: center;
			width: 25rem;
			min-height:15rem;
			background:var(--card-background);
			border:0.2rem solid var(--accent);
			border-radius:2rem;
			box-shadow: inset 0 -1rem var(--accent);
			cursor: pointer;
			&:hover {
				background:var(--card-background-hover);
			}
			.photo {
				display: grid;
				place-items: center;
				width:4rem;
				height:4rem;
				border-radius: 100%;
				background: var(--accent);
				color:white;
				font-size: 1.75rem;
				font-weight: bold;
			}
			.name {
				margin-top:1rem;
				font-size: 2rem;
			}
			.pin {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items:center;
				height:2rem;
				width:100%;
				margin-top:1rem;
				transition:.25s ease;
				&:not(.shown) {
					height:0;
					margin-top:0;
					transition-delay: .3s;
					.dot {
						opacity:0;
					}
				}
				.dot {
					width:.5rem;
					height:.5rem;
					border:.125rem solid #656D78;
					border-radius: 100%;
					margin: 0 .5rem;
					background:transparent;
					transition:.125s ease;
					&.entered {
						border-color:#323133;
						background:#323133;
					}
					@for $i from 1 to 6 {
						&:nth-child(#{$i}) {
							transition-delay: .0625s * $i;
						}
					}
				}
				&.shown {
					.dot {
						@for $i from 1 to 6 {
							&:nth-child(#{$i}) {
								transition-delay: .0625s * $i + .1s;
							}
						}
					}
				}
				&.correct .dot {
					border-color:#2ABA66;
					background:#2ABA66;
				}
			}
		}
	}
}