CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: CaZzzer:0064ad318244e429607138ec7246ecc3a0c78146
Branches Tags
CaZzzer:develop CaZzzer:feature/wg-quick CaZzzer:feature/invite CaZzzer:feature/auth CaZzzer:feature/auth-1 CaZzzer:feature/ci CaZzzer:feature/api CaZzzer:feature/provider-interface-1 CaZzzer:feature/provider-interface CaZzzer:feature/logging CaZzzer:feature/qrcode CaZzzer:feature/trailing-slashes CaZzzer:feature/opnsense CaZzzer:master
...
compare: CaZzzer:feature/trailing-slashes
Branches Tags
CaZzzer:feature/wg-quick CaZzzer:develop CaZzzer:feature/invite CaZzzer:feature/auth CaZzzer:feature/auth-1 CaZzzer:feature/ci CaZzzer:feature/api CaZzzer:feature/provider-interface-1 CaZzzer:feature/provider-interface CaZzzer:feature/logging CaZzzer:feature/qrcode CaZzzer:feature/trailing-slashes CaZzzer:feature/opnsense CaZzzer:master

3 Commits
0064ad3182 ... feature/tr

Author SHA1 Message Date
Yuri Tatishchev
41066eefe4 enable trailing slash on layout (excluding api paths) 2024-12-31 19:50:27 -08:00
Yuri Tatishchev
d5b54722b3 super mega layout improvements 2024-12-31 19:40:15 -08:00
Yuri Tatishchev
923c24a93e client page: add tutorial, layout ui improvements 2024-12-26 01:45:58 -08:00
15 changed files with 258 additions and 125 deletions
Expand all files Collapse all files

1
.gitattributes vendored Normal file
View File

@@ -0,0 +1 @@
*.mp4 filter=lfs diff=lfs merge=lfs -text

8
src/app.css
View File

@@ -97,4 +97,12 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
ol > li {
@apply flex flex-wrap gap-x-2;
counter-increment: counterName;
}
ol > li:before {
content: counter(counterName) '.';
}
} }

7
src/app.html
View File

@@ -6,7 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body
<div class="flex flex-col min-h-screen">%sveltekit.body%</div> data-sveltekit-preload-data="hover"
class="flex min-h-screen flex-col items-center gap-8 p-4 max-sm:px-2"
>
%sveltekit.body%
</body> </body>
</html> </html>

BIN
src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/lib/assets/guide-client.mp4 (Stored with Git LFS) Normal file
View File

Binary file not shown.

3
src/lib/components/app/code-snippet/code-snippet.svelte
View File

@@ -22,10 +22,9 @@
} }
</script> </script>
<div class="relative max-w-fit overflow-x-hidden rounded-lg bg-accent"> <div class="relative flex-grow overflow-x-hidden rounded-lg bg-accent">
<div class="flex items-start overflow-x-auto p-2"> <div class="flex items-start overflow-x-auto p-2">
<pre><code>{data}</code></pre> <pre><code>{data}</code></pre>
{#if copy || download} {#if copy || download}
<!--Copy button--> <!--Copy button-->
<!--Flex reverse for peer hover to work properly--> <!--Flex reverse for peer hover to work properly-->

5
src/lib/components/app/wireguard-guide/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import WireguardGuide from "./wireguard-guide.svelte";
export {
WireguardGuide
};

85
src/lib/components/app/wireguard-guide/wireguard-guide.svelte Normal file
View File

@@ -0,0 +1,85 @@
<script lang="ts">
import * as Tabs from '$lib/components/ui/tabs';
import * as Card from '$lib/components/ui/card';
import getItOnGooglePlay from '$lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png';
import guideVideo from '$lib/assets/guide-client.mp4';
</script>
<Tabs.Root value="android">
<Tabs.List class="grid w-full grid-cols-3">
<Tabs.Trigger value="android">Android</Tabs.Trigger>
<Tabs.Trigger value="windows">Windows</Tabs.Trigger>
<Tabs.Trigger value="other">Other</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="android">
<Card.Root>
<Card.Header class="max-sm:px-4 max-sm:pt-4">
<Card.Title>WireGuard on Android</Card.Title>
</Card.Header>
<Card.Content class="max-sm:p-4">
<ol class="flex flex-col gap-2">
<li>
<div class="flex flex-col gap-2">
Install the WireGuard app
<a
class="contents"
href="https://play.google.com/store/apps/details?id=com.wireguard.android"
target="_blank"
rel="noopener noreferrer"
>
<img class="size-min" alt="Get it on google play" src={getItOnGooglePlay} />
</a>
</div>
</li>
<li>
<div class="flex flex-col gap-2">
<p>Download the configuration file and import it</p>
<aside>Alternatively, you can scan the QR code with the WireGuard app</aside>
<video autoplay loop controls muted preload="metadata" class="max-h-screen">
<source src={guideVideo} type="video/mp4" />
</video>
</div>
</li>
</ol>
</Card.Content>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="windows">
<Card.Root>
<Card.Header>
<Card.Title>WireGuard on Windows</Card.Title>
</Card.Header>
<Card.Content>
<p>
<a
class="underline"
href="https://download.wireguard.com/windows-client/wireguard-installer.exe"
target="_blank"
rel="noopener noreferrer"
>
Download WireGuard
</a>
</p>
</Card.Content>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="other">
<Card.Root>
<Card.Header>
<Card.Title>WireGuard on Other Platforms</Card.Title>
</Card.Header>
<Card.Content>
<p>
You can download the WireGuard client from the <a
class="underline"
href="https://www.wireguard.com/install/"
target="_blank"
rel="noopener noreferrer"
>
official website
</a>.
</p>
</Card.Content>
</Card.Root>
</Tabs.Content>
</Tabs.Root>

6
src/routes/+layout.server.ts
View File

@@ -1,9 +1,11 @@
import type { LayoutServerLoad } from "./$types"; import type { LayoutServerLoad } from './$types';
export const trailingSlash = 'always';
export const load: LayoutServerLoad = async (event) => { export const load: LayoutServerLoad = async (event) => {
const { user } = event.locals; const { user } = event.locals;
return { return {
user user,
}; };
}; };

21
src/routes/+layout.svelte
View File

@@ -14,26 +14,29 @@
} }
</script> </script>
<header class="p-4 sm:flex"> <header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 xl:max-w-screen-xl">
<span class=" mr-6 font-bold sm:inline-block">VPGen</span> <span class="font-bold sm:inline-block">VPGen</span>
<nav> <nav class="max-w-full">
<ul class="flex items-center gap-6 text-sm"> <ul class="flex items-center gap-6 overflow-x-auto text-sm">
<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li> <li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
{#if user} {#if user}
<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li> <li><a href="/user/" class={getNavClass(/^\/user\/$/)}>Profile</a></li>
<li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li> <li><a href="/connections/" class={getNavClass(/^\/connections\/$/)}>Connections</a></li>
<li><a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a></li> <li><a href="/clients/" class={getNavClass(/^\/clients(\/\d+)?\/$/)}>Clients</a></li>
{/if} {/if}
</ul> </ul>
</nav> </nav>
</header> </header>
<main class="flex flex-grow flex-col p-4"> <main class="flex min-w-full max-w-full flex-grow flex-col gap-4 xl:min-w-[1280px]">
{@render children()} {@render children()}
</main> </main>
<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936--> <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
<!--Some shenanings needed to be done to get the footer position to stick correctly, <!--Some shenanings needed to be done to get the footer position to stick correctly,
didn't work with display: contents--> didn't work with display: contents-->
<footer class="relative inset-x-0 bottom-0 p-4 text-center"> <footer class="inset-x-0 bottom-0 w-full text-center">
<p>&copy; 2024</p> <p>&copy; 2024</p>
</footer> </footer>
<style>
</style>

29
src/routes/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AuthForm } from '$lib/components/app/auth-form';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import { AuthForm } from '$lib/components/app/auth-form';
const { data } = $props(); const { data } = $props();
const { user } = data; const { user } = data;
@@ -10,7 +10,7 @@
<title>VPGen</title> <title>VPGen</title>
</svelte:head> </svelte:head>
<h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl"> <h1 class="mb-2 scroll-m-20 text-center text-3xl font-extrabold tracking-tight lg:text-4xl">
Welcome to VPGen Welcome to VPGen
</h1> </h1>
@@ -21,16 +21,35 @@
<section id="get-started" class="border-l-2 pl-6"> <section id="get-started" class="border-l-2 pl-6">
<p> <p>
To get started, To get started,
<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button> <Button class="ml-2" href="/clients/?add=New+Client">Create a New Client</Button>
</p> </p>
</section> </section>
<!-- <section id="using-wireguard">-->
<!-- <details class="mt-10">-->
<!-- <summary class="relative flex flex-col gap-2 pl-10">-->
<!-- <h2 class="text-xl font-semibold">Using WireGuard</h2>-->
<!-- To use VPGen, you need to install the WireGuard app on your device.-->
<!-- </summary>-->
<!-- <WireguardGuide />-->
<!-- </details>-->
<!-- </section>-->
{:else} {:else}
<AuthForm class="p-4" /> <AuthForm />
<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p> <!-- <p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>-->
{/if} {/if}
<style> <style>
p { p {
@apply my-2; @apply my-2;
} }
/*
summary::before {
content: '▶';
@apply absolute -left-0;
}
details[open] summary::before {
content: '▼';
}
*/
</style> </style>

2
src/routes/clients/+page.server.ts
View File

@@ -15,7 +15,7 @@ export const actions = {
switch (res._tag) { switch (res._tag) {
case 'ok': { case 'ok': {
return redirect(303, `/clients/${res.value}`); return redirect(303, `/clients/${res.value}/`);
} }
case 'err': { case 'err': {
const [status, message] = res.error; const [status, message] = res.error;

15
src/routes/clients/+page.svelte
View File

@@ -41,7 +41,7 @@
<Table.Row class="group hover:bg-background hover:bg-opacity-40"> <Table.Row class="group hover:bg-background hover:bg-opacity-40">
<Table.Head scope="row"> <Table.Head scope="row">
<a <a
href={`/clients/${client.id}`} href={`./${client.id}/`}
class="flex size-full items-center group-hover:underline" class="flex size-full items-center group-hover:underline"
> >
{client.name} {client.name}
@@ -61,13 +61,13 @@
</Table.Root> </Table.Root>
<!--Floating action button for adding a new client--> <!--Floating action button for adding a new client-->
<!--Not sure if this is the best place for the input field, will think about it later--> <Dialog.Root bind:open={dialogOpen}>
<div class="mt-auto flex self-end pt-4"> <div class="mt-auto flex self-end pt-4">
<Dialog.Root bind:open={dialogOpen}> <Dialog.Trigger class={buttonVariants({ variant: 'default' }) + ' flex gap-4'}>
<Dialog.Trigger class={buttonVariants({ variant: "default" }) + "flex gap-4"}>
<LucidePlus /> <LucidePlus />
Add Client New Client
</Dialog.Trigger> </Dialog.Trigger>
</div>
<Dialog.Content class="max-w-xs"> <Dialog.Content class="max-w-xs">
<form class="contents" method="post" action="?/create"> <form class="contents" method="post" action="?/create">
<Dialog.Header class=""> <Dialog.Header class="">
@@ -90,5 +90,4 @@
</Dialog.Footer> </Dialog.Footer>
</form> </form>
</Dialog.Content> </Dialog.Content>
</Dialog.Root> </Dialog.Root>
</div>

14
src/routes/clients/[id]/+page.svelte
View File

@@ -2,6 +2,7 @@
import type { PageData } from './$types'; import type { PageData } from './$types';
import QRCode from 'qrcode-svg'; import QRCode from 'qrcode-svg';
import { CodeSnippet } from '$lib/components/app/code-snippet'; import { CodeSnippet } from '$lib/components/app/code-snippet';
import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
const { data }: { data: PageData } = $props(); const { data }: { data: PageData } = $props();
@@ -19,15 +20,20 @@
</script> </script>
<svelte:head> <svelte:head>
<title></title> <title>{data.client.name}</title>
</svelte:head> </svelte:head>
<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1> <h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
<div class="flex flex-wrap gap-4"> <section id="client-configuration" class="flex flex-wrap justify-center gap-4">
<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download /> <CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
<div class="overflow-hidden rounded-lg"> <div class="overflow-hidden rounded-lg">
{@html qrCode.svg()} {@html qrCode.svg()}
</div> </div>
</div> </section>
<section id="usage" class="flex w-full flex-col gap-2">
<h2 class="text-xl font-semibold">Usage</h2>
<p>To use VPGen, you need to install the WireGuard app on your device.</p>
<WireguardGuide />
</section>

2
tailwind.config.ts
View File

@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate"; import tailwindcssAnimate from "tailwindcss-animate";
const config: Config = { const config: Config = {
darkMode: ["class"], darkMode: ["media"],
content: ["./src/**/*.{html,js,svelte,ts}"], content: ["./src/**/*.{html,js,svelte,ts}"],
safelist: ["dark"], safelist: ["dark"],
theme: { theme: {