mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-04-27 15:31:21 +00:00
feat: add oauth2 icons
This commit is contained in:
parent
71a8a60aa5
commit
54a4695034
12 changed files with 153 additions and 14 deletions
13
apps/web/src/lib/components/site/icons/apple.svelte
Normal file
13
apps/web/src/lib/components/site/icons/apple.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 384 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 638 B |
13
apps/web/src/lib/components/site/icons/bitbucket.svelte
Normal file
13
apps/web/src/lib/components/site/icons/bitbucket.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M22.2 32A16 16 0 0 0 6 47.8a26.35 26.35 0 0 0 .2 2.8l67.9 412.1a21.77 21.77 0 0 0 21.3 18.2h325.7a16 16 0 0 0 16-13.4L505 50.7a16 16 0 0 0-13.2-18.3 24.58 24.58 0 0 0-2.8-.2L22.2 32zm285.9 297.8h-104l-28.1-147h157.3l-25.2 147z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 429 B |
13
apps/web/src/lib/components/site/icons/discord.svelte
Normal file
13
apps/web/src/lib/components/site/icons/discord.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 640 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
13
apps/web/src/lib/components/site/icons/facebook.svelte
Normal file
13
apps/web/src/lib/components/site/icons/facebook.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 448 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 461 B |
13
apps/web/src/lib/components/site/icons/gitlab.svelte
Normal file
13
apps/web/src/lib/components/site/icons/gitlab.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 967 B |
13
apps/web/src/lib/components/site/icons/google.svelte
Normal file
13
apps/web/src/lib/components/site/icons/google.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 488 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 450 B |
|
|
@ -3,17 +3,33 @@ import { ArrowRight, Loader2 } from 'lucide-svelte';
|
|||
import { GithubLogo, VercelLogo, LinkedinLogo } from 'radix-icons-svelte';
|
||||
import Logo from './logo.svelte';
|
||||
import Svelte from './svelte.svelte';
|
||||
import Microsoft from './microsoft.svelte';
|
||||
import MicrosoftLogo from './microsoft.svelte';
|
||||
import AppleLogo from './apple.svelte';
|
||||
import GitLabLogo from './gitlab.svelte';
|
||||
import BitBucketLogo from './bitbucket.svelte';
|
||||
import DiscordLogo from './discord.svelte';
|
||||
import FacebookLogo from './facebook.svelte';
|
||||
import GoogleLogo from './google.svelte';
|
||||
import InstagramLogo from './instagram.svelte';
|
||||
import TwitterLogo from './twitter.svelte';
|
||||
|
||||
export type Icon = LucideIcon;
|
||||
|
||||
export const Icons = {
|
||||
logo: Logo,
|
||||
gitHub: GithubLogo,
|
||||
microsoft: Microsoft,
|
||||
microsoft: MicrosoftLogo,
|
||||
svelte: Svelte,
|
||||
vercel: VercelLogo,
|
||||
linkedIn: LinkedinLogo,
|
||||
spinner: Loader2,
|
||||
arrowRight: ArrowRight
|
||||
arrowRight: ArrowRight,
|
||||
apple: AppleLogo,
|
||||
bitBucket: BitBucketLogo,
|
||||
gitLab: GitLabLogo,
|
||||
discord: DiscordLogo,
|
||||
facebook: FacebookLogo,
|
||||
google: GoogleLogo,
|
||||
instagram: InstagramLogo,
|
||||
twitter: TwitterLogo,
|
||||
};
|
||||
|
|
|
|||
13
apps/web/src/lib/components/site/icons/instagram.svelte
Normal file
13
apps/web/src/lib/components/site/icons/instagram.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 448 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
13
apps/web/src/lib/components/site/icons/twitter.svelte
Normal file
13
apps/web/src/lib/components/site/icons/twitter.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...$$restProps}
|
||||
><path
|
||||
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
|
||||
></path></svg
|
||||
>
|
||||
|
After Width: | Height: | Size: 994 B |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue