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

Commit

Permalink
Navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 8, 2022
1 parent 5112362 commit b2211d9
Show file tree
Hide file tree
Showing 6 changed files with 274 additions and 118 deletions.
81 changes: 81 additions & 0 deletions interface/components/navigation.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<div class="transparent-900 flex h-full flex-col justify-between overflow-visible shadow-2xl">
<div class="flex flex-col">
<Link to="/codes">
<button on:click={() => changeClasses("codes")} class="codes selectedMenuButton mt-3">
<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 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
Codes
</button>
</Link>

<Link to="/import">
<button on:click={() => changeClasses("codes")} class="import menuButton mx-3 mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3" />
</svg>
Import
</button>
</Link>

<Link to="/export">
<button class="menuButton">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-export" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" />
</svg>
Export
</button>
</Link>

<Link to="/edit">
<button class="menuButton">
<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>
</Link>
</div>

<div class="flex-flex-col">
<Link to="/settings">
<button on:click={() => changeClasses("settings")} class="settings menuButton">
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</button>
</Link>

<button class="menuButton">
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
About
</button>
</div>
</div>

<script lang="ts">
import { Link } from "svelte-navigator"
let currentRoute = "codes"
const changeClasses = (name) => {
const current = document.querySelector(`.${currentRoute}`)
const next = document.querySelector(`.${name}`)
current.classList.remove("selectedMenuButton")
current.classList.add("menuButton")
next.classList.remove("menuButton")
next.classList.add("selectedMenuButton")
currentRoute = name
}
</script>
19 changes: 14 additions & 5 deletions interface/layout/app.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,23 @@
<title>hi</title>
</svelte:head>

<Settings />
<Router>
<div class="flex h-screen">
<Navigation />

<div class="w-full overflow-hidden overflow-y-scroll">
<Route path="/" component={Landing} />
<Route path="/settings" component={Settings} />
<Route path="/codes" component={Codes} />
</div>
</div>
</Router>

<script lang="ts">
import { Router, Route } from "svelte-navigator"
import Landing from "../windows/landing.svelte"
import Codes from "../windows/codes.svelte"
import Dropdown from "../components/dropdown.svelte"
import Settings from "../windows/settings.svelte"
import Tools from "../windows/tools.svelte"
import Navigation from "../components/navigation.svelte"
</script>
14 changes: 11 additions & 3 deletions interface/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@

@layer components {
.button {
@apply flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border-2 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;
@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;
}

.buttonm {
@apply transparentHover flex w-60 transform cursor-pointer items-center gap-2 rounded-2xl border-2 border-transparent px-8 py-[16.5px] text-left text-xl font-medium text-white duration-200 ease-in motion-reduce:transform-none motion-reduce:transition-none;
.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;
}

.selectedMenuButton {
@apply mx-3 mb-3 flex h-20 w-20 flex-col items-center justify-center rounded-xl bg-white font-medium text-black duration-200 ease-linear hover:bg-gray-200;
}

.select {
Expand Down Expand Up @@ -69,6 +73,10 @@ h5 {
background-color: hsla(0, 0%, 100%, 3.26%);
}

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

.transparentHover:hover {
background-color: hsla(0, 0%, 100%, 1.86%);
}
Expand Down
148 changes: 38 additions & 110 deletions interface/windows/settings.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,47 @@
<div class="flex h-screen ">
<!-- sidebar -->
<div class="transparent-900 flex h-screen flex-col justify-between overflow-visible">
<div class="flex flex-col">
<div class="mb-1 mt-5 mr-4 ml-4">
<button id="general " class="buttonm general">
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span data-loc>General</span>
</button>
</div>
<div class="mb-1 mt-1 mr-4 ml-4">
<button id="codes " class="buttonm codes">
<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 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
<span data-loc>Codes</span>
</button>
</div>
<div class="mb-1 mt-1 mr-4 ml-4">
<button id="shortcuts " class="buttonm shortcuts">
<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" />
<rect x="2" y="6" width="20" height="12" rx="2" />
<line x1="6" y1="10" x2="6" y2="10" />
<line x1="10" y1="10" x2="10" y2="10" />
<line x1="14" y1="10" x2="14" y2="10" />
<line x1="18" y1="10" x2="18" y2="10" />
<line x1="6" y1="14" x2="6" y2="14.01" />
<line x1="18" y1="14" x2="18" y2="14.01" />
<line x1="10" y1="14" x2="14" y2="14" />
</svg>
<span data-loc>Shortcuts</span>
</button>
</div>
<div class="mb-1 mt-1 mr-4 ml-4">
<button id="experimental " class="buttonm experimental">
<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.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
<span data-loc>Experimental</span>
</button>
</div>
<div class="transparent-900 m-auto mt-40 mb-60 w-4/5 rounded-2xl p-10 text-left">
<h1 class="ml-1">Settings</h1>
<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Launch on startup</h2>
<h3>Start Authme after your computer started. Authme will start on the system tray.</h3>
</div>
<div class="flex-flex-col">
<div class="mb-1 mt-1 mr-4 ml-4">
<button class="buttonm">
<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="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
<line x1="8" y1="9" x2="16" y2="9" />
<line x1="8" y1="13" x2="14" y2="13" />
</svg>
<span data-loc>Feedback</span>
</button>
</div>
<div class="mb-12 mt-1 mr-4 ml-4">
<button class="buttonm">
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span data-loc>Version</span>
</button>
</div>
<div class="ml-10 flex gap-3">
<Toggle />
</div>
</div>

<div class="flex flex-1 flex-col overflow-y-scroll">
<!-- header -->
<div class="transparent-900 m-auto mt-40 mb-60 w-4/5 rounded-2xl p-10 text-left">
<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Launch on startup</h2>
<h3>Start Authme after your computer started. Authme will start on the system tray.</h3>
</div>
<div class="ml-10 flex gap-3">
<Toggle />
</div>
</div>

<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Language</h2>
<h3>Choose which language should Authme use by default. The translations are not perfect and changing the language requires a restart.</h3>
</div>
<div class="ml-10 flex gap-3">
<Dropdown on:message={handleMessage} />
</div>
</div>
<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Language</h2>
<h3>Choose which language should Authme use by default. The translations are not perfect and changing the language requires a restart.</h3>
</div>
<div class="ml-10 flex gap-3">
<Dropdown on:message={handleMessage} />
</div>
</div>

<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Clear data</h2>
<h3>Clear password, 2FA codes and all other settings. Be careful.</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" 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>
Clear data
</button>
</div>
</div>
<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Clear data</h2>
<h3>Clear password, 2FA codes and all other settings. Be careful.</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" 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>
Clear data
</button>
</div>
</div>

<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Input</h2>
<h3>Clear password, 2FA codes and all other settings. Be careful.</h3>
</div>
<div class="ml-10 flex gap-3">
<input class="input" type="text" />
</div>
</div>
<div class="transparent-800 my-10 flex flex-row items-center justify-between rounded-xl p-5">
<div>
<h2>Input</h2>
<h3>Clear password, 2FA codes and all other settings. Be careful.</h3>
</div>
<div class="ml-10 flex gap-3">
<input class="input" type="text" />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit b2211d9

Please sign in to comment.