Skip to content
This repository has been archived by the owner on Oct 19, 2022. It is now read-only.

Commit

Permalink
Search
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 13, 2022
1 parent b1a6ca8 commit 4539e48
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 6 deletions.
20 changes: 19 additions & 1 deletion interface/windows/codes/codes.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
<div class="transparent-900 m-auto my-20 w-3/5 rounded-2xl p-10 text-center sm:w-4/5">
<h1>Authme</h1>
<div class="searchContainer mx-auto mt-10 mb-5 hidden justify-center px-10">
<div class="mx-auto flex items-center justify-center">
<svg id="searchIcon" xmlns="http://www.w3.org/2000/svg" class="pointer-events-none relative left-9 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>

<input on:keyup={search} class="search input w-96 pl-12 pr-12" type="text" />

<svg xmlns="http://www.w3.org/2000/svg" class="relative right-9 h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
</div>
</div>
<div class="content mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
<div class="importCodes transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Import your codes</h2>
Expand Down Expand Up @@ -79,12 +92,17 @@
</button>
</div>
</div>

<div class="noSearchResults transparent-800 mb-10 hidden w-full rounded-2xl p-5">
<h2>No search results found.</h2>
<h3>Not found search results for "<span class="searchResult" />".</h3>
</div>
</div>
</div>

<script lang="ts">
import { onMount, onDestroy } from "svelte"
import { test, stopCodesRefresher } from "./index"
import { test, stopCodesRefresher, search } from "./index"
onMount(() => {
test()
Expand Down
63 changes: 58 additions & 5 deletions interface/windows/codes/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { textConverter } from "../../../libraries/convert"
import { TOTP } from "otpauth"

let codesRefresher
let codesRefresher: NodeJS.Timer
const searchQuery: string[] = []

export const test = () => {
const text = `
Expand Down Expand Up @@ -30,6 +31,7 @@ export const generateCodeElements = (data: LibImportFile) => {
document.querySelector(".importCodes").style.display = "none"
document.querySelector(".importingCodes").style.display = "none"
document.querySelector(".gettingStarted").style.display = "none"
document.querySelector(".searchContainer").style.display = "flex"

const generate = () => {
for (let i = 0; i < names.length; i++) {
Expand All @@ -43,7 +45,7 @@ export const generateCodeElements = (data: LibImportFile) => {
<h3 id="name${i}" tabindex="0" class="mt-3 text-3xl font-normal">-</h3>
</div>
<div class="flex flex-1 justify-center">
<p id="code${i}" tabindex="0" class="transparent-900 relative mt-1.5 w-32 select-all rounded-2xl py-3 px-5 text-2xl">-</p>
<p id="code${i}" tabindex="0" class="transparent-900 relative mt-1.5 w-[140px] select-all rounded-2xl py-3 px-5 text-2xl">-</p>
</div>
<div class="flex flex-1 justify-end">
<h3 id="time${i}" tabindex="0" class="mt-3 text-3xl font-normal">-</h3>
Expand All @@ -55,7 +57,7 @@ export const generateCodeElements = (data: LibImportFile) => {
</div>
</div>
<div class="mb-5 mt-5 flex items-center justify-center">
<button id="button${i}" class="button w-32 py-3 px-5">
<button id="button${i}" class="button w-[140px] py-3 px-5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Expand All @@ -65,6 +67,8 @@ export const generateCodeElements = (data: LibImportFile) => {

// add div
element.classList.add("code")
element.setAttribute("id", `codes${i}`)

document.querySelector(".content").appendChild(element)

// get elements
Expand All @@ -75,6 +79,9 @@ export const generateCodeElements = (data: LibImportFile) => {
const progress = document.querySelector(`#progress${i}`)
const button = document.querySelector(`#button${i}`)

// add to query
searchQuery.push(`${issuers[i].toLowerCase().trim()}`)

// generate token
const token = new TOTP({
secret: secrets[i],
Expand All @@ -93,9 +100,23 @@ export const generateCodeElements = (data: LibImportFile) => {

button.addEventListener("click", () => {
navigator.clipboard.writeText(code.textContent)
})

console.log("yo")
button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
</svg>
Copied
`

setTimeout(() => {
button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Copy
`
}, 800)
})
}
}

Expand Down Expand Up @@ -137,3 +158,35 @@ const refreshCodes = (secrets: string[]) => {
export const stopCodesRefresher = () => {
clearInterval(codesRefresher)
}

export const search = () => {
const searchBar: HTMLInputElement = document.querySelector(".search")
const input = searchBar.value.toLowerCase()
let noResults = 0

// restart
for (let i = 0; i < searchQuery.length; i++) {
const div = document.querySelector(`#codes${[i]}`)
div.style.display = "flex"
}

document.querySelector(".noSearchResults").style.display = "none"

// search algorithm
for (let i = 0; i < searchQuery.length; i++) {
if (!searchQuery[i].startsWith(input)) {
const div = document.querySelector(`#codes${[i]}`)
div.style.display = "none"

if (div.style.display === "none") {
noResults++
}
}
}

// no search results
if (searchQuery.length === noResults) {
document.querySelector(".noSearchResults").style.display = "block"
document.querySelector(".searchResult").textContent = input
}
}

0 comments on commit 4539e48

Please sign in to comment.