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

Commit

Permalink
Codes layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Sep 4, 2022
1 parent cf916b2 commit 737ca9a
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 51 deletions.
9 changes: 5 additions & 4 deletions interface/components/sortCodes.svelte → interface/components/select.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
on:change={(event) => {
active = event.detail

$settings.settings.sortCodes = options.indexOf(active)
$settings.settings[setting] = options.indexOf(active)
}}
>
<div class="relative">
Expand All @@ -14,7 +14,7 @@
</span>

<Transition enter="transition duration-100 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-75 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0">
<div class="absolute mt-1 w-full rounded-xl bg-white shadow-lg ">
<div class="absolute z-10 mt-1 w-full rounded-xl bg-white shadow-lg ">
<ListboxOptions class="max-h-60 overflow-auto p-2 text-base leading-6 shadow-xl focus:outline-none sm:text-sm sm:leading-5">
{#each options as name (name)}
<ListboxOption
Expand Down Expand Up @@ -51,11 +51,12 @@
return classes.filter(Boolean).join(" ")
}
const options = ["Default", "A-Z", "Z-A"]
export let options: string[]
export let setting: string
let active: string | undefined
if (active === undefined) {
active = options[$settings.settings.sortCodes]
active = options[$settings.settings[setting]]
}
</script>
3 changes: 2 additions & 1 deletion interface/libraries/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ declare global {
codesDescription: boolean
blurCodes: boolean
searchHistory: boolean
sortCodes: null | number
sortCodes: number
codesLayout: number
}

searchHistory: {
Expand Down
1 change: 1 addition & 0 deletions interface/stores/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const defaultSettings: LibSettings = {
blurCodes: false,
searchHistory: true,
sortCodes: 0,
codesLayout: 0,
},

searchHistory: {
Expand Down
3 changes: 2 additions & 1 deletion interface/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

/* code element */
.code {
@apply transparent-800 mb-10 flex w-full flex-col rounded-2xl p-3;
@apply transparent-800 flex w-full max-w-2xl flex-grow basis-1/3 flex-col rounded-2xl p-3;
}

.dialog {
Expand Down Expand Up @@ -61,6 +61,7 @@ body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: rgb(10, 10, 10);
/* background: url("../../images/mica.png"); */
line-height: normal;
font-family: system-ui, Arial;
Expand Down
34 changes: 6 additions & 28 deletions interface/windows/codes/codes.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="transparent-900 m-auto my-20 w-3/5 rounded-2xl p-10 text-center sm:w-4/5">
<div class="transparent-900 main 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">
Expand All @@ -13,8 +13,9 @@
</div>
</div>
</div>
<div class="content mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10 sm:w-full">
<div class="importCodes transparent-800 mb-10 hidden w-full rounded-2xl p-5">

<div class="content mx-auto flex flex-col flex-wrap items-center justify-center gap-10 rounded-2xl p-10 sm:w-full">
<div class="importCodes transparent-800 hidden w-full max-w-2xl 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 @@ -33,30 +34,7 @@
</div>
</div>

<div class="importingCodes transparent-800 mb-10 hidden 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">
<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" />
<rect x="3" y="4" width="18" height="12" rx="1" />
<line x1="7" y1="20" x2="17" y2="20" />
<line x1="9" y1="16" x2="9" y2="20" />
<line x1="15" y1="16" x2="15" y2="20" />
</svg>
Show tutorial
</button>
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Sample file
</button>
</div>
</div>

<div class="gettingStarted transparent-800 mb-10 hidden w-full rounded-2xl p-5">
<div class="gettingStarted transparent-800 hidden w-full max-w-2xl 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 @@ -77,7 +55,7 @@
</div>
</div>

<div class="noSearchResults transparent-800 mb-10 hidden w-full rounded-2xl p-5">
<div class="noSearchResults transparent-800 hidden w-full max-w-2xl rounded-2xl p-5">
<h2>No search results found.</h2>
<h3>Not found search results for "<span class="searchResult" />".</h3>
</div>
Expand Down
21 changes: 15 additions & 6 deletions interface/windows/codes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export const generateCodeElements = (data: LibImportFile) => {
const issuers = data.issuers

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

Expand All @@ -31,9 +30,9 @@ export const generateCodeElements = (data: LibImportFile) => {
element.innerHTML = `
<div class="mt-5 flex flex-row px-5">
<div class="flex flex-1 justify-start">
<h3 id="name${i}" tabindex="0" class="mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
<h3 id="name${i}" tabindex="0" class="whitespace-nowrap mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
</div>
<div class="flex flex-1 justify-center">
<div class="flex flex-1 justify-center px-3">
<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 focusRing">-</p>
</div>
<div class="flex flex-1 justify-end">
Expand All @@ -57,9 +56,9 @@ export const generateCodeElements = (data: LibImportFile) => {
element.innerHTML = `
<div class="mt-5 flex flex-row px-5">
<div class="flex flex-1 justify-start">
<h3 id="name${i}" tabindex="0" class="mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
<h3 id="name${i}" tabindex="0" class="whitespace-nowrap mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
</div>
<div class="flex flex-1 justify-center">
<div class="flex flex-1 justify-center px-3">
<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 focusRing">-</p>
</div>
<div class="flex flex-1 justify-end">
Expand Down Expand Up @@ -173,6 +172,17 @@ export const generateCodeElements = (data: LibImportFile) => {

search()
}

if (settings.settings.codesLayout === 0) {
const main = document.querySelector(".main")
const content = document.querySelector(".content")

main.classList.remove("w-3/5")
main.classList.add("w-4/5")

content.classList.remove("flex-col")
content.classList.add("flex-row")
}
}

const refreshCodes = (secrets: string[]) => {
Expand Down Expand Up @@ -291,7 +301,6 @@ export const loadCodes = async () => {
} else {
// No saved and no imported codes
document.querySelector(".importCodes").style.display = "block"
document.querySelector(".importingCodes").style.display = "block"
document.querySelector(".gettingStarted").style.display = "block"
}

Expand Down
23 changes: 16 additions & 7 deletions interface/windows/settings/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { resetState } from "../../stores/state"
import { resetSettings } from "../../stores/settings"
import build from "../../../build.json"
import { fs, path, invoke, os, dialog, app } from "@tauri-apps/api"
import { path, invoke, os, dialog, app } from "@tauri-apps/api"
import { UAParser } from "ua-parser-js"
import { navigate, open } from "../../libraries/navigate"

Expand Down Expand Up @@ -31,14 +31,23 @@ export const about = async () => {
}

export const clearData = async () => {
localStorage.clear()
sessionStorage.clear()
const confirm0 = await dialog.ask("Are you sure you want to clear all data? \n\nThis cannot be undone!", { type: "warning" })

resetState()
resetSettings()
if (confirm0 === false) {
return
}

navigate("/")
location.reload()
const confirm1 = await dialog.ask("Are you absolutely sure? \n\nThere is no way back!", { type: "warning" })

if (confirm1 === true) {
localStorage.clear()
sessionStorage.clear()

navigate("/")
location.reload()

navigate("codes")
}
}

export const showLogs = async () => {
Expand Down
18 changes: 14 additions & 4 deletions interface/windows/settings/settings.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Mimimize to tray</h2>
<h3>When closeing the app Authme will not quit. You can open Authme from the system tray.</h3>
<h2>Minimize to tray</h2>
<h3>When closing the app Authme will not quit. You can open Authme from the system tray.</h3>
</div>
<div class="ml-20 flex gap-3">
<Toggle bind:checked={$settings.settings.minimizeToTray} />
Expand Down Expand Up @@ -83,13 +83,23 @@
</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>Codes layout</h2>
<h3>You can choose your preferred layout. Grid displays more items and adapts to the screen size.</h3>
</div>
<div class="ml-20 flex gap-3">
<Select options={["Grid", "List"]} setting={"codesLayout"} />
</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>Sort codes</h2>
<h3>You can choose how to sort the codes. By default codes are sorted by importing order.</h3>
</div>
<div class="ml-20 flex gap-3">
<SortCodes />
<Select options={["Default", "A-Z", "Z-A"]} setting={"sortCodes"} />
</div>
</div>
</div>
Expand Down Expand Up @@ -153,7 +163,7 @@
</div>

<script>
import SortCodes from "../../components/sortCodes.svelte"
import Select from "../../components/select.svelte"
import Toggle from "../../components/toggle.svelte"
import { about, clearData, showLogs, launchOnStartup } from "./index"
import { settings } from "../../stores/settings"
Expand Down

0 comments on commit 737ca9a

Please sign in to comment.