Init project

.eslintrc.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+	env: {
+		browser: true,
+		commonjs: true,
+		es2021: true,
+		node: true,
+	},
+	parser: "@typescript-eslint/parser",
+	extends: ["standard", "eslint:recommended", "plugin:node/recommended", "plugin:promise/recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:svelte/recommended"],
+	plugins: ["@typescript-eslint", "prettier"],
+	ignorePatterns: ["/node_modules/*", "/dist/*", "/build/*"],
+	parserOptions: {
+		ecmaVersion: 12,
+		extraFileExtensions: [".svelte"],
+	},
+	overrides: [
+		{
+			files: ["*.svelte"],
+			parser: "svelte-eslint-parser",
+			parserOptions: {
+				parser: "@typescript-eslint/parser",
+			},
+		},
+	],
+	rules: {
+		indent: ["off", "tab", { SwitchCase: 1 }],
+		quotes: ["error", "double"],
+		semi: ["error", "never"],
+
+		"prettier/prettier": ["warn"],
+		"linebreak-style": ["warn", "windows"],
+		"prefer-const": ["warn"],
+		"prefer-arrow-callback": ["error"],
+		"prefer-template": ["error"],
+		"func-style": ["error"],
+		"no-var": ["error"],
+		"node/no-unpublished-require": ["off"],
+		"node/no-unpublished-import": ["off"],
+		"node/no-unsupported-features/es-syntax": ["off"],
+		"no-unused-vars": ["warn"],
+		"no-use-before-define": ["off"],
+	},
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,58 @@
+# Authme
+
+-   Simple cross-platform two-factor (2FA) authenticator app for desktop.
+
+[![Downloads](https://img.shields.io/github/downloads/levminer/authme/total?label=Downloads)](https://authme.levminer.com/#downloads)
+[![Support](https://img.shields.io/badge/Support-PayPal-blue)](https://paypal.me/levminer)
+[![License](https://img.shields.io/github/license/levminer/authme?label=License)](https://github.com/Levminer/authme/blob/main/LICENSE.md)
+
+## Features
+
+-   🔒 Secure by design: Your codes is secured by AES 256bit encryption with your own password.
+-   🔑 Import codes: Import form any 2FA TOTP QR code or import directly from Google Authenticator.
+-   ⌨️ Many shortcuts: Easily open Authme with custom shortcuts and the app will start with your system for quick and easy access.
+-   📡 Completely offline: You own your data, internet is only required for updates.
+-   💻 Privacy in mind: Authme is hidden from video capture and screenshots.
+-   📃 Easy export and backup: You can export your 2FA codes anytime and you can create a backup of your codes very easily.
+
+## Compatible 2FA codes
+
+-   TOTP 2FA QR code: A TOTP QR code is that you find mostly everywhere, if you want to setup 2FA. Example: Google, Facebook, Microsoft, etc.
+-   Google Authenticator QR code: A Google Authenticator QR code is what you can export, and contains all of your already imported codes. Example: Google Authenticator.
+
+## Screenshot
+
+<img src="https://raw.githubusercontent.com/Levminer/authme/dev/screenshots/application.png?raw=true">
+
+## Downloads (Release)
+
+-   Latest release version for users that want a stable and polished experience.
+
+[![Latest release](https://img.shields.io/github/package-json/v/levminer/authme/main?label=Release)](https://tooomm.github.io/github-release-stats/?username=Levminer&repository=authme)
+[![Download](https://img.shields.io/badge/Windows,%20Linux,%20macOS-download-brightgreen)](https://authme.levminer.com/#downloads)
+[![Updated](https://img.shields.io/github/last-commit/levminer/authme/main?color=yellowgreen&label=Updated)](https://github.com/Levminer/authme/releases)
+
+-   Also available on: [Microsoft Store](https://link.levminer.com/authme-ms-store), [Snapcraft](https://snapcraft.io/authme), [winget](https://winstall.app/apps/Levminer.Authme)
+
+## Downloads (Alpha)
+
+-   Latest alpha version for users that want to try out new features early.
+
+[![Latest alpha](https://img.shields.io/github/package-json/v/levminer/authme/dev?label=Alpha&color=blue)](https://tooomm.github.io/github-release-stats/?username=Levminer&repository=authme)
+[![Download](https://img.shields.io/badge/Windows,%20Linux,%20macOS-download-brightgreen)](https://authme.levminer.com/#downloads-alpha)
+[![Updated](https://img.shields.io/github/last-commit/levminer/authme/dev?color=yellowgreen&label=Updated)](https://github.com/Levminer/authme/actions/workflows/alpha-artifacts.yml)
+
+## Translating
+
+-   Help translate Authme: [Translation](https://github.com/Levminer/authme/blob/main/.github/CONTRIBUTING.md#translation)
+-   You can translate on Crowdin to: [Crowdin](https://crowdin.com/project/authme-2fa)
+
+## Contributing and development
+
+-   Read for development and building instructions: [Contributing](https://github.com/Levminer/authme/blob/main/.github/CONTRIBUTING.md)
+-   Read before contributing: [Code Of Conduct](https://github.com/Levminer/authme/blob/main/.github/CODE_OF_CONDUCT.md)
+
+## License
+
+-   This software is licensed under: [GPL-3.0](https://github.com/Levminer/authme/blob/main/LICENSE.md)
+-   If you are planning to use this software as a business please contact me at: <authme@levminer.com>

interface/components/details.svelte

@@ -0,0 +1,16 @@
+<div class="transparent-800 mx-auto w-full rounded-xl">
+	<Disclosure let:open>
+		<DisclosureButton class="transparentHover flex w-full items-center justify-between rounded-xl px-6 py-3 text-left text-2xl font-medium text-white outline-none duration-200 ease-linear focus:outline-none focus-visible:ring-4 focus-visible:ring-purple-500">
+			<span>More options</span>
+			<ChevronUpIcon class={`${open ? "rotate-180 transform" : ""} h-5 w-5 text-white`} />
+		</DisclosureButton>
+		<Transition enter="transition duration-200 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-200 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0">
+			<DisclosurePanel class="px-4 pt-4 pb-2 text-left text-lg text-gray-200">If you're unhappy with your purchase for any reason, email us within 90 days and we'll refund you in full, no questions asked.</DisclosurePanel>
+		</Transition>
+	</Disclosure>
+</div>
+
+<script lang="ts">
+	import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from "@rgossiaux/svelte-headlessui"
+	import { ChevronUpIcon } from "@rgossiaux/svelte-heroicons/solid"
+</script>

interface/components/dropdown.svelte

@@ -0,0 +1,66 @@
+<Listbox
+	value={active}
+	on:change={(event) => {
+		active = event.detail
+
+		sendEvent()
+	}}
+>
+	<div class="relative">
+		<span class="inline-block w-full shadow-sm">
+			<ListboxButton class="select w-48">
+				<span class="block truncate">{active}</span>
+			</ListboxButton>
+		</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 ">
+				<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 people as name (name)}
+						<ListboxOption
+							value={name}
+							class={({ active }) => {
+								return classNames("relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 duration-200 ease-linear focus:outline-none", active ? "bg-gray-800 text-white" : "text-gray-900")
+							}}
+							let:active
+							let:selected
+						>
+							<span class={classNames("flex flex-row items-center truncate", selected ? "font-bold" : "font-normal")}>
+								{name}
+							</span>
+							{#if selected}
+								<span class={classNames("absolute inset-y-0 right-0 flex items-center pr-4", active ? "text-white" : "text-black")}>
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 duration-200 ease-linear" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+									</svg>
+								</span>
+							{/if}
+						</ListboxOption>
+					{/each}
+				</ListboxOptions>
+			</div>
+		</Transition>
+	</div>
+</Listbox>
+
+<script lang="ts">
+	import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@rgossiaux/svelte-headlessui"
+	import { createEventDispatcher } from "svelte"
+
+	const classNames = (...classes: (string | false | null | undefined)[]) => {
+		return classes.filter(Boolean).join(" ")
+	}
+	const people = ["English (US)", "Magyar (HU)"]
+	let active: string | undefined
+	if (active === undefined) {
+		active = people[Math.floor(Math.random() * people.length)]
+	}
+
+	const dispatch = createEventDispatcher()
+
+	const sendEvent = () => {
+		dispatch("message", {
+			value: active,
+		})
+	}
+</script>

interface/components/toggle.svelte

@@ -0,0 +1,16 @@
+<SwitchGroup as="div" class="flex items-center space-x-4">
+	<SwitchLabel class="text-xl">{checked ? "On" : "Off"}</SwitchLabel>
+
+	<Switch as="button" {checked} on:change={(event) => (checked = event.detail)} class={({ checked }) => classNames("focus:shadow-outline relative inline-flex h-7 w-12 flex-shrink-0  cursor-pointer rounded-full border-2 border-white transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-4 focus-visible:ring-popup-magenta", checked ? "bg-white" : "bg-transparent")} let:checked>
+		<span class={classNames("relative top-[4px] left-1 inline-block h-4 w-4 transform rounded-full bg-white transition duration-200 ease-in-out ", checked ? "translate-x-[21px] bg-black" : "translate-x-0")} />
+	</Switch>
+</SwitchGroup>
+
+<script lang="ts">
+	import { Switch, SwitchGroup, SwitchLabel } from "@rgossiaux/svelte-headlessui"
+
+	const classNames = (...classes: (string | false | null | undefined)[]) => {
+		return classes.filter(Boolean).join(" ")
+	}
+	let checked = false
+</script>

interface/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Authme</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="./layout/app.ts"></script>
+	</body>
+</html>
+

interface/layout/app.svelte

@@ -0,0 +1,15 @@
+<svelte:head>
+	<title>hi</title>
+</svelte:head>
+
+<Settings />
+
+<script lang="ts">
+	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"
+</script>

interface/layout/app.ts

@@ -0,0 +1,8 @@
+import App from "./app.svelte"
+import "../styles/index.css"
+
+const app = new App({
+	target: document.body,
+})
+
+export default app

interface/styles/index.css

@@ -0,0 +1,97 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@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;
+	}
+
+	.buttonm {
+		@apply 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 hover:!border-gray-700 hover:!bg-gray-700 motion-reduce:transform-none motion-reduce:transition-none;
+	}
+
+	.select {
+		@apply form-select cursor-pointer rounded-2xl !border-white py-4 text-xl font-medium text-black !ring-transparent duration-200 ease-linear hover:bg-gray-200 focus-visible:!ring-4 focus-visible:!ring-popup-magenta;
+	}
+
+	.input {
+		@apply rounded-2xl border-2 border-white bg-transparent py-4 px-6 text-xl text-white outline-none;
+	}
+}
+
+/* body */
+body {
+	color: white;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	background: url(https://fluent-svelte.vercel.app/bloom-mica-dark.png);
+	line-height: normal;
+	font-family: system-ui, Arial;
+	accent-color: red;
+}
+
+/* headings */
+h1 {
+	font-size: 64px;
+	font-weight: 700;
+}
+
+/* main card */
+h2 {
+	font-size: 32px;
+	font-weight: 700;
+}
+
+h3 {
+	font-size: 24px;
+	color: #d3cfcf;
+}
+
+/* secondary card */
+h4 {
+	font-size: 24px;
+	font-weight: 500;
+}
+
+h5 {
+	font-size: 18px;
+	color: #d3cfcf;
+}
+
+.transparent-900 {
+	background-color: hsla(0, 0%, 100%, 5.12%);
+}
+
+.transparent-800 {
+	background-color: hsla(0, 0%, 100%, 3.26%);
+}
+
+.transparentHover:hover {
+	background-color: hsla(0, 0%, 100%, 1.86%);
+}
+
+/* selection */
+::selection {
+	color: white;
+	background: gray;
+}
+
+.progress {
+	top: -30px;
+	position: relative;
+	width: 73%;
+	height: 15px;
+	border-radius: 30px;
+	overflow: hidden;
+}
+
+.progress__fill {
+	width: 0%;
+	height: 100%;
+	background: white;
+	transition: all 0.2s;
+}
+

interface/svelte.config.js

@@ -0,0 +1,8 @@
+import sveltePreprocess from "svelte-preprocess"
+
+export default {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	// @ts-ignore
+	preprocess: sveltePreprocess(),
+}

interface/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite"
+import { svelte } from "@sveltejs/vite-plugin-svelte"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	root: "interface",
+	build: {
+		outDir: "../dist",
+		emptyOutDir: true,
+	},
+	plugins: [svelte()],
+})