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

home page improvements: link to create new client

Browse Source
This commit is contained in:
Yuri Tatishchev 2024-12-25 17:00:32 -08:00
parent 015bb7b05b
commit 423165e105
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
3 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/components/app/auth-form/auth-form.svelte
View File

@ -1,20 +1,29 @@
<script lang="ts"> <script lang="ts">
import { LucideLoaderCircle } from 'lucide-svelte'; import { LucideLoaderCircle } from 'lucide-svelte';
import { Button } from "$lib/components/ui/button"; import { Button } from '$lib/components/ui/button';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { class: className, ...rest }: {class: string | undefined | null, rest: { [p: string]: unknown }} = $props(); let { class: className, ...rest }: { class?: string; rest?: { [p: string]: unknown } } = $props();
let isLoading = $state(false); let isLoading = $state(false);
</script> </script>
<div class={cn("grid gap-6", className)} {...rest}> <div class={cn('flex gap-6', className)} {...rest}>
<form method="get" action="/auth/authentik"> <form method="get" action="/auth/authentik">
<Button type="submit" onclick={() => {isLoading=true}}> <Button
type="submit"
onclick={() => {
isLoading = true;
}}
>
{#if isLoading} {#if isLoading}
<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" /> <LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
{:else} {:else}
<img class="mr-2 h-4 w-4" alt="Authentik Logo" src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg" /> <img
class="mr-2 h-4 w-4"
alt="Authentik Logo"
src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg"
/>
{/if} {/if}
Sign in with Authentik Sign in with Authentik
</Button> </Button>

28
src/routes/+layout.svelte
View File

@ -1,35 +1,39 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
import { page } from '$app/stores';
import { cn } from '$lib/utils'; import { cn } from '$lib/utils';
import { page } from '$app/state';
const { data, children } = $props(); const { data, children } = $props();
const { user } = data; const { user } = data;
function getNavClass(path: RegExp) { function getNavClass(path: RegExp) {
return cn('hover:text-foreground/80 transition-colors', return cn(
path.test($page.url.pathname) ? 'text-foreground' : 'text-foreground/60'); 'hover:text-foreground/80 transition-colors',
path.test(page.url.pathname) ? 'text-foreground' : 'text-foreground/60',
);
} }
</script> </script>
<header class="p-4 sm:flex"> <header class="p-4 sm:flex">
<span class=" mr-6 font-bold sm:inline-block">VPGen</span> <span class=" mr-6 font-bold sm:inline-block">VPGen</span>
<nav class="flex items-center gap-6 text-sm"> <nav>
<a href="/" class={getNavClass(/^\/$/)}>Home</a> <ul class="flex items-center gap-6 text-sm">
{#if user} <li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
<a href="/user" class={getNavClass(/^\/user$/)}>Profile</a> {#if user}
<a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a> <li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
<a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a> <li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li>
{/if} <li><a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a></li>
{/if}
</ul>
</nav> </nav>
</header> </header>
<main class="flex flex-col flex-grow p-4"> <main class="flex flex-grow flex-col p-4">
{@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="p-4 relative text-center inset-x-0 bottom-0"> <footer class="relative inset-x-0 bottom-0 p-4 text-center">
<p>&copy; 2024</p> <p>&copy; 2024</p>
</footer> </footer>

24
src/routes/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AuthForm } from '$lib/components/app/auth-form'; import { AuthForm } from '$lib/components/app/auth-form';
import { Button } from '$lib/components/ui/button';
const { data } = $props(); const { data } = $props();
const { user } = data; const { user } = data;
@ -9,10 +10,27 @@
<title>VPGen</title> <title>VPGen</title>
</svelte:head> </svelte:head>
<h1>Welcome to VPGen</h1> <h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
Welcome to VPGen
</h1>
{#if user } {#if user}
<p>Hi {user.name}</p> <p>
Hi {user.name}!
</p>
<section id="get-started" class="border-l-2 pl-6">
<p>
To get started,
<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
</p>
</section>
{:else} {:else}
<AuthForm class="p-4" /> <AuthForm class="p-4" />
<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
{/if} {/if}
<style>
p {
@apply my-2;
}
</style>