bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-10-25 21:59:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: add oauth2 icons

Browse source
This commit is contained in:
Bart van der Braak 2024-02-03 22:36:31 +01:00
parent 71a8a60aa5
commit 54a4695034
12 changed files with 153 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

26
apps/web/src/routes/(auth)/login/+page.svelte
View file

@ -5,6 +5,7 @@
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import * as Alert from '$lib/components/ui/alert';
import * as Select from '$lib/components/ui/select';
import { cn } from '$lib/utils';
export let form;
@ -31,7 +32,7 @@
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<div class="flex flex-col space-y-2 text-center">
<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
<p class="text-sm text-muted-foreground">
<p class="text-muted-foreground text-sm">
Enter your email and password below to log into your account
</p>
</div>
@ -85,11 +86,26 @@
<span class="w-full border-t" />
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
<span class="bg-background text-muted-foreground px-2"> Or continue with </span>
</div>
</div>
<form action="/?msauth" method="POST">
<Button type="submit" variant="outline" disabled={true} class="w-full">
<form action="/?oauth2" method="POST" class="flex">
<Select.Root disabled={isLoading}>
<Select.Trigger class="w-12">
</Select.Trigger>
<Select.Content class="w-full">
<Select.Item value="microsoft"><Icons.microsoft class="mr-2 h-4 w-4" />Microsoft</Select.Item>
<Select.Item value="apple"><Icons.apple class="mr-2 h-4 w-4" />Apple</Select.Item>
<Select.Item value="google"><Icons.google class="mr-2 h-4 w-4" />Google</Select.Item>
<Select.Item value="bitBucket"><Icons.bitBucket class="mr-2 h-4 w-4" />BitBucket</Select.Item>
<Select.Item value="discord"><Icons.discord class="mr-2 h-4 w-4" />Discord</Select.Item>
<Select.Item value="facebook"><Icons.facebook class="mr-2 h-4 w-4" />Facebook</Select.Item>
<Select.Item value="gitLab"><Icons.gitLab class="mr-2 h-4 w-4" />GitLab</Select.Item>
<Select.Item value="facebook"><Icons.twitter class="mr-2 h-4 w-4" />Twitter</Select.Item>
<Select.Item value="instagram"><Icons.instagram class="mr-2 h-4 w-4" />Instagram</Select.Item>
</Select.Content>
</Select.Root>
<Button type="submit" variant="outline" disabled={isLoading} class="w-full">
{#if isLoading}
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
{:else}
@ -100,7 +116,7 @@
</Button>
</form>
</div>
<p class="px-8 text-center text-sm text-muted-foreground">
<p class="text-muted-foreground px-8 text-center text-sm">
Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
</p>

3
apps/web/src/routes/+layout.server.ts
View file

@ -16,6 +16,7 @@ export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals })
return {
authenticated: locals.pocketBase.authStore.isValid,
user
user,
providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders,
};
};

12
apps/web/src/routes/+page.svelte
View file

@ -11,13 +11,15 @@
<div class="pb-16 pt-52 md:pb-32 md:pt-60">
<div class="container mx-auto text-center">
<h1
class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-transparent dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60 lg:text-7xl"
class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl font-extrabold tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60"
>
<span class="inline-block text-balance align-top decoration-inherit"
>One Dashboard <br /> Countless Solutions</span
>
<span class="inline-block text-balance align-top decoration-inherit">
One Dashboard
<br />
Countless Solutions
</span>
</h1>
<p class="mb-8 text-sm md:text-xl text-zinc-800 dark:text-zinc-300">
<p class="mb-8 text-sm text-zinc-800 md:text-xl dark:text-zinc-300">
Tame ticket overload and keep your operations teams sane
</p>
<div