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

Commit

Permalink
Router
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 12, 2022
1 parent ccd9746 commit 081b67c
Show file tree
Hide file tree
Showing 10 changed files with 610 additions and 74 deletions.
14 changes: 12 additions & 2 deletions interface/layout/app.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,25 @@
<Route path="/" component={Landing} />
<Route path="/settings" component={Settings} />
<Route path="/codes" component={Codes} />
<Route path="/import" component={Import} />
<Route path="/export" component={Export} />
<Route path="/edit" component={Edit} />
<Route path="/confirm" component={Confirm} />
</div>
</div>
</Router>

<script lang="ts">
import { Router, Route } from "svelte-navigator"
import { Router, Route } from "svelte-routing"
import UpdateAlert from "../components/updateAlert.svelte"
import Landing from "../windows/landing.svelte"
import Codes from "../windows/codes.svelte"
import Codes from "../windows/codes/codes.svelte"
import Settings from "../windows/settings.svelte"
import Import from "../windows/import.svelte"
import Export from "../windows/export.svelte"
import Confirm from "../windows/confirm.svelte"
import Navigation from "../components/navigation.svelte"
import Edit from "../windows/edit.svelte"
</script>
29 changes: 24 additions & 5 deletions interface/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
@apply flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border-2 border-white bg-white py-4 px-6 text-xl font-medium text-black outline-none duration-200 ease-linear hover:bg-transparent hover:text-white focus-visible:ring-4 focus-visible:ring-popup-magenta;
}

.smallButton {
@apply flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border-2 border-white bg-white py-2 px-3 text-lg font-medium text-black outline-none duration-200 ease-linear hover:bg-transparent hover:text-white focus-visible:ring-4 focus-visible:ring-popup-magenta;
}

.menuButton {
@apply transparent-900-hover mx-3 mt-0 mb-3 flex h-20 w-20 flex-col items-center justify-center rounded-xl font-medium duration-200 ease-linear hover:text-gray-200;
}
Expand All @@ -20,7 +24,15 @@
}

.input {
@apply rounded-2xl border-2 border-white bg-transparent py-4 px-6 text-xl text-white outline-none;
@apply transparent-900 transparent-input rounded-xl p-4 text-xl text-white outline-none duration-200 ease-linear;
}

.link {
@apply transparent-900-hover rounded-lg p-1 text-lg font-medium text-popup-blue duration-200 ease-linear hover:text-gray-200;
}

.code {
@apply transparent-800 mb-10 flex w-full flex-col rounded-2xl p-3;
}
}

Expand All @@ -31,10 +43,9 @@ body {
display: flex;
flex-direction: column;
min-height: 100vh;
background: url(https://fluent-svelte.vercel.app/bloom-mica-dark.png);
background: url("../../images/mica.png");
line-height: normal;
font-family: system-ui, Arial;
accent-color: red;
}

/* headings */
Expand Down Expand Up @@ -73,12 +84,20 @@ h5 {
background-color: hsla(0, 0%, 100%, 3.26%);
}

.transparent-input:hover {
background-color: hsla(0, 0%, 100%, 15%);
}

.transparent-input:focus {
background-color: hsla(0, 0%, 100%, 15%);
}

.transparent-900-hover:hover {
background-color: hsla(0, 0%, 100%, 4.8%);
background-color: hsla(0, 0%, 100%, 5%);
}

.transparentHover:hover {
background-color: hsla(0, 0%, 100%, 1.86%);
background-color: hsla(0, 0%, 100%, 5%);
}

/* selection */
Expand Down
43 changes: 10 additions & 33 deletions interface/windows/codes/codes.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<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="content mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<div class="importCodes transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Import your codes</h2>
<h3>Import your 2FA codes, or if you have an import file choose it.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center gap-3 sm:flex-wrap">
Expand All @@ -20,7 +20,7 @@
</div>
</div>

<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<div class="saveCodes transparent-800 mb-10 hidden w-full rounded-2xl p-5">
<h2>Save codes</h2>
<h3>Save your currently imported codes.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center">
Expand All @@ -36,7 +36,7 @@
</div>
</div>

<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<div class="importingCodes transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Importing codes</h2>
<h3>Need help importing codes? Read the short tutorial or download a sample file.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center gap-3 sm:flex-wrap">
Expand All @@ -59,7 +59,7 @@
</div>
</div>

<div class="transparent-800 mb-10 w-full rounded-2xl p-5">
<div class="gettingStarted transparent-800 mb-10 w-full rounded-2xl p-5">
<h2>Getting started</h2>
<h3>In the mean time you can check out the settings or visit the GitHub page.</h3>
<div class="mx-auto mt-6 flex flex-row items-center justify-center gap-3 sm:flex-wrap">
Expand All @@ -79,41 +79,18 @@
</button>
</div>
</div>

<div class="transparent-800 mb-10 flex w-full flex-col rounded-2xl p-3">
<div class="mt-5 flex flex-row px-5">
<div class="flex flex-1 justify-start">
<h3 tabindex="0" class="mt-3 text-3xl font-normal">Google</h3>
</div>
<div class="flex flex-1 justify-center">
<p tabindex="0" class="transparent-900 relative mt-1.5 w-32 select-all rounded-2xl py-3 px-5 text-2xl">888888</p>
</div>
<div class="flex flex-1 justify-end">
<h3 tabindex="0" class="mt-3 text-3xl font-normal">15</h3>
</div>
</div>
<div class="my-5 flex flex-col items-center justify-center">
<div class="progress">
<div class="progressFill" style="width: 80%;" />
</div>
</div>
<div class="mb-5 flex items-center justify-center">
<button class="button w-32 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>
Copy
</button>
</div>
</div>
</div>
</div>

<script lang="ts">
import { onMount } from "svelte"
import { test } from "./index"
import { onMount, onDestroy } from "svelte"
import { test, stopCodesRefresher } from "./index"
onMount(() => {
test()
})
onDestroy(() => {
stopCodesRefresher()
})
</script>
14 changes: 13 additions & 1 deletion interface/windows/codes/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { textConverter } from "../../../libraries/convert"
import { TOTP } from "otpauth"

let codesRefresher

export const test = () => {
const text = `
Name: Google:leventelorik92@gmail.com
Expand All @@ -25,6 +27,10 @@ export const generateCodeElements = (data: LibImportFile) => {
const secrets = data.secrets
const issuers = data.issuers

document.querySelector(".importCodes").style.display = "none"
document.querySelector(".importingCodes").style.display = "none"
document.querySelector(".gettingStarted").style.display = "none"

const generate = () => {
for (let i = 0; i < names.length; i++) {
// create div
Expand Down Expand Up @@ -88,12 +94,14 @@ export const generateCodeElements = (data: LibImportFile) => {
button.addEventListener("click", () => {
navigator.clipboard.writeText(code.textContent)
})

console.log("yo")
}
}

generate()

setInterval(() => {
codesRefresher = setInterval(() => {
try {
refreshCodes(secrets)
} catch (error) {
Expand Down Expand Up @@ -125,3 +133,7 @@ const refreshCodes = (secrets: string[]) => {
time.textContent = remainingTime.toString()
}
}

export const stopCodesRefresher = () => {
clearInterval(codesRefresher)
}
133 changes: 133 additions & 0 deletions interface/windows/edit.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">Restore save</h1>
<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Latest save: 2022. July 10. 12:30:15</h2>
<h3>You can restore the latest save. If you load your codes below it will overwrite the current save.</h3>
</div>
<div class="ml-20 flex gap-3">
<button class="button requirePassword">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
<line x1="12" y1="9" x2="12" y2="12" />
<line x1="12" y1="15" x2="12.01" y2="15" />
</svg>
Restore
</button>
</div>
</div>
</div>
</div>

<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">Load saved codes</h1>
<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Loading saved codes</h2>
<h3>Load your saved 2FA codes. You can edit or delete your codes, or you can even add new codes here.</h3>
</div>
<div class="ml-20 flex gap-3">
<button class="button requirePassword">
<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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Confirm
</button>
</div>
</div>
</div>
</div>

<div class="transparent-900 m-auto mb-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">Edit saved codes</h1>
<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Save modifications</h2>
<h3>Save the changes you made.</h3>
</div>
<div class="ml-10 flex gap-3">
<button class="button requirePassword">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
<circle cx="12" cy="14" r="2" />
<polyline points="14 4 14 8 8 8 8 4" />
</svg>
Save modifications
</button>
</div>
</div>

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Revert changes</h2>
<h3>You can revert the changes you made.</h3>
</div>
<div class="ml-10 flex gap-3">
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
<line x1="12" y1="9" x2="12" y2="12" />
<line x1="12" y1="15" x2="12.01" y2="15" />
</svg>
Revert changes
</button>
</div>
</div>

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Delete codes</h2>
<h3>You can delete all codes.</h3>
</div>
<div class="ml-10 flex gap-3">
<button class="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Delete codes
</button>
</div>
</div>
</div>
</div>

<div class="transparent-900 m-auto mb-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">Loaded codes</h1>
<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div class="flex flex-wrap gap-5">
<div>
<h5>Name</h5>
<input class="input mt-1" type="text" value="Google" />
</div>

<div>
<h5>Description</h5>
<input class="input mt-1" type="text" value="levminer@levminer.com" />
</div>
</div>
<div class="ml-10 flex gap-3">
<button class="button requirePassword">
<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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
Edit
</button>
<button class="button requirePassword">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Delete
</button>
</div>
</div>
</div>
</div>
Loading

0 comments on commit 081b67c

Please sign in to comment.