Merge pull request #389 from buhodev/buhodev-solution

Buhodev solution

src/components/buhodev/Badge.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+ export let strength: 'lowest' | 'low' | 'medium' | 'high' | 'highest' = 'highest'
+
+ let messages = {
+ lowest: 'Highly insecure',
+ low: 'Insecure',
+ medium: 'Barely secure',
+ high: 'Secure',
+ highest: 'Highly secure'
+ }
+</script>
+
+<div
+ class:bg-green-300={strength === 'highest'}
+ class:bg-blue-300={strength === 'high'}
+ class:bg-yellow-300={strength === 'medium'}
+ class:bg-orange-300={strength === 'low'}
+ class:bg-red-300={strength === 'lowest'}
+ class="flex items-center space-x-2 rounded-full py-0.5 px-3 transition"
+>
+ <span
+ class:bg-green-600={strength === 'highest'}
+ class:bg-blue-600={strength === 'high'}
+ class:bg-yellow-600={strength === 'medium'}
+ class:bg-orange-600={strength === 'low'}
+ class:bg-red-600={strength === 'lowest'}
+ class="rounded-full h-2 w-2 transition"
+ />
+ <span
+ class:text-green-800={strength === 'highest'}
+ class:text-blue-800={strength === 'high'}
+ class:text-yellow-800={strength === 'medium'}
+ class:text-orange-800={strength === 'low'}
+ class:text-red-800={strength === 'lowest'}
+ class="text-sm transition">{messages[strength]}</span
+ >
+</div>

src/components/buhodev/BarChart.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+ export let password: string
+
+ function getNumberOfDigits(str) {
+ return str.replace(/[^0-9]/g, '').length
+ }
+
+ function getNumberOfLowercase(str) {
+ return str.replace(/[^a-z]/g, '').length
+ }
+
+ function getNumberOfUppercase(str) {
+ return str.replace(/[^A-Z]/g, '').length
+ }
+
+ function getNumberOfSymbols(str) {
+ return str.replace(/[^`!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/g, '').length
+ }
+
+ function calculateHeight(charOcurrences, passwordLength) {
+ return (charOcurrences * 100) / passwordLength
+ }
+
+ $: numberOfCharacters = {
+ lowercase: getNumberOfLowercase(password),
+ uppercase: getNumberOfUppercase(password),
+ numbers: getNumberOfDigits(password),
+ symbols: getNumberOfSymbols(password)
+ }
+</script>
+
+<!-- <div class="flex justify-between items-baseline"> -->
+<!-- <div class="relative flex w-6 text-neutral-300 flex-col-reverse gap-2.5">
+ {#each Array(7) as _, i}
+ <span class="text-xs inset-x-0">{i * 5}</span>
+ {/each}
+ </div> -->
+<div class="w-full">
+ <div class="relative flex px-4 gap-3 h-40 items-stretch w-full">
+ {#each Object.keys(numberOfCharacters) as char, i}
+ <div class="flex flex-1 flex-col items-stretch justify-end">
+ {#if numberOfCharacters[char] <= 3}
+ <span class="text-center text-xs">{numberOfCharacters[char]}</span>
+ {/if}
+ <div
+ class="bg-purple-500/80 border rounded-tl-sm rounded-tr-sm border-b-0 flex transition-all"
+ style="flex-basis: {calculateHeight(numberOfCharacters[char], 30)}%"
+ >
+ {#if numberOfCharacters[char] > 3}
+ <span class="w-full text-center text-xs">{numberOfCharacters[char]}</span>
+ {/if}
+ </div>
+ </div>
+ {/each}
+ {#each Array(7) as _, i}
+ <div
+ class="absolute -z-10 inset-x-0 w-full border-dashed border-b border-neutral-500"
+ style="top: {16.67 * i}%"
+ />
+ {/each}
+ </div>
+ <div class="relative flex px-4 gap-4 items-stretch w-full text-sm text-neutral-300">
+ <div class="flex flex-1 w-6 justify-center">a-z</div>
+ <div class="flex flex-1 w-6 justify-center">A-Z</div>
+ <div class="flex flex-1 w-6 justify-center">0-9</div>
+ <div class="flex flex-1 w-6 justify-center">@#$%</div>
+ </div>
+</div>
+<!-- </div> -->

src/components/buhodev/Canvas.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+ import { onMount } from 'svelte'
+
+ export let width: number, height: number, seed: string
+
+ let canvas: HTMLCanvasElement
+ let currentMousePos
+
+ const ASCII = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53]
+
+ onMount(() => {
+ const ctx = canvas.getContext('2d')
+ canvas.height = height
+ canvas.width = width
+ ctx.fillStyle = '#000'
+ ctx.fillRect(0, 0, height, width)
+
+ const cols = Math.floor(width / 20) + 1
+ const ypos = Array(cols).fill(0)
+
+ function matrix() {
+ ctx.fillStyle = '#0001'
+ ctx.fillRect(0, 0, width, height)
+
+ ctx.fillStyle = '#0f0'
+ ctx.font = '15pt monospace'
+
+ ypos.forEach((y, index) => {
+ const text = String.fromCharCode(Math.random() * 128)
+ const x = index * 20
+ ctx.fillText(text, x, y)
+ if (y > 100 + Math.random() * 10000) ypos[index] = 0
+ else ypos[index] = y + 20
+ })
+ }
+
+ setInterval(matrix, 50)
+
+ function getMousePos(canvas, evt) {
+ var rect = canvas.getBoundingClientRect()
+ return {
+ x: evt.clientX - rect.left,
+ y: evt.clientY - rect.top
+ }
+ }
+
+ canvas.addEventListener(
+ 'mousemove',
+ function (evt) {
+ currentMousePos = getMousePos(canvas, evt)
+ let randomNumber = Math.random()
+
+ if (seed.length < 36 && randomNumber > 0.8) {
+ seed += String.fromCharCode(ASCII[currentMousePos.x - 1])
+ } else if (seed.length < 36 && randomNumber > 0.6) {
+ seed += String.fromCharCode(ASCII[currentMousePos.y - 1])
+ } else {
+ return
+ }
+ },
+ false
+ )
+ })
+</script>
+
+<canvas bind:this={canvas} />

src/components/buhodev/CardGlare.svelte

@@ -0,0 +1,18 @@
+<!-- borrowed from <https://github.com/simeydotme/pokemon-cards-css> -->
+
+<div id="buhodev" class="card__glare pointer-events-none" />
+
+<style>
+ #buhodev.card__glare {
+ transform: translateZ(1px);
+ z-index: 4;
+ background: radial-gradient(
+ farthest-corner circle at var(--mx) var(--my),
+ rgba(255, 255, 255, 0.8) 10%,
+ rgba(255, 255, 255, 0.65) 20%,
+ rgba(0, 0, 0, 0.5) 90%
+ );
+ mix-blend-mode: overlay;
+ opacity: var(--o);
+ }
+</style>

src/components/buhodev/CardShine.svelte

@@ -0,0 +1,22 @@
+<!-- borrowed from <https://github.com/simeydotme/pokemon-cards-css> -->
+
+<div id="buhodev" class="card__shine pointer-events-none" />
+
+<style>
+ #buhodev.card__shine {
+ display: grid;
+ overflow: hidden;
+ transform: translateZ(1px);
+ background: transparent;
+ z-index: 3;
+ mix-blend-mode: color-dodge;
+ filter: brightness(0.85) contrast(2.75) saturate(0.65);
+ background-size: cover;
+ background-position: center;
+ opacity: var(--o);
+ }
+
+ #buhodev.card__shine:after {
+ grid-area: 1/1;
+ }
+</style>