bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-04-27 15:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: change oauth button

Browse source
This commit is contained in:
Bart van der Braak 2024-02-05 16:59:50 +01:00
parent 2ea6df9fbe
commit b4b2eb9055
3 changed files with 39 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/web/src/routes/(auth)/login/+page.server.ts
View file

@ -26,7 +26,6 @@ export const actions: Actions = {
oauth2: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
const body = Object.fromEntries(await request.formData());
const provider = body.provider.toString();
console.log('provider: ', provider);
await locals.pocketBase.collection('users').authWithOAuth2({ provider: provider });
}
};

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

@ -28,7 +28,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>
@ -91,19 +91,19 @@
<span class="w-full border-t" />
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-background px-2 py-6 text-muted-foreground"> Or continue with </span>
<span class="bg-background text-muted-foreground px-2 py-6"> Or continue with </span>
</div>
</div>
<div
class="flex items-center justify-between rounded-md bg-secondary text-secondary-foreground"
class="focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground flex items-center justify-between whitespace-nowrap rounded-md border bg-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
>
<input type="hidden" name="provider" bind:value={currentProvider.name} />
<div class="flex w-full items-center justify-center space-x-2">
<Button
type="submit"
name={currentProvider.name}
variant="secondary"
class="px-3"
variant="ghost"
class="w-full"
disabled={isLoading}
>
{#if isLoading}
@ -122,43 +122,45 @@
</div>
{#if providers.length > 1}
<div class="flex items-center space-x-2">
<Separator orientation="vertical" class="h-[20px] bg-gray-400 dark:bg-gray-500" />
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="secondary" class="px-2 shadow-none">
<ChevronDown class="h-4 w-4 text-secondary-foreground" />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="w-80" align="end">
<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
{#each providersWithIcons as provider}
{#if provider.name !== currentProvider.name}
<DropdownMenu.Item
class="flex justify-center"
on:click={() => (currentProvider = provider)}
>
{#if provider.icon === undefined}
<img
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
alt={provider.name}
class="mr-2 h-4 w-4"
/>
{:else}
<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
{/if}
{provider.displayName}
</DropdownMenu.Item>
{/if}
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
<Separator orientation="vertical" class="bg-secondary h-[20px]" />
<div class="flex items-center space-x-2">
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
<ChevronDown class="h-4 w-4" />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="" align="center">
<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
{#each providersWithIcons as provider}
{#if provider.name !== currentProvider.name}
<DropdownMenu.Item
class="flex justify-center"
on:click={() => (currentProvider = provider)}
>
{#if provider.icon === undefined}
<img
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
alt={provider.name}
class="mr-2 h-4 w-4"
/>
{:else}
<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
{/if}
{provider.displayName}
</DropdownMenu.Item>
{/if}
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div>
{/if}
</div>
{/if}
</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>

2
apps/web/src/routes/(auth)/register/+page.svelte
View file

@ -76,7 +76,7 @@
<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
</div>
</div>
<Button variant="outline" type="button" disabled={true}>
<Button variant="outline" type="button" disabled={isLoading}>
{#if isLoading}
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
{:else}