bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-04-28 07:51:20 +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 }) => { oauth2: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
const body = Object.fromEntries(await request.formData()); const body = Object.fromEntries(await request.formData());
const provider = body.provider.toString(); const provider = body.provider.toString();
console.log('provider: ', provider);
await locals.pocketBase.collection('users').authWithOAuth2({ 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="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"> <div class="flex flex-col space-y-2 text-center">
<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1> <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 Enter your email and password below to log into your account
</p> </p>
</div> </div>
@ -91,19 +91,19 @@
<span class="w-full border-t" /> <span class="w-full border-t" />
</div> </div>
<div class="relative flex justify-center text-xs uppercase"> <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> </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} /> <input type="hidden" name="provider" bind:value={currentProvider.name} />
<div class="flex w-full items-center justify-center space-x-2"> <div class="flex w-full items-center justify-center space-x-2">
<Button <Button
type="submit" type="submit"
name={currentProvider.name} name={currentProvider.name}
variant="secondary" variant="ghost"
class="px-3" class="w-full"
disabled={isLoading} disabled={isLoading}
> >
{#if isLoading} {#if isLoading}
@ -122,43 +122,45 @@
</div> </div>
{#if providers.length > 1} {#if providers.length > 1}
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<Separator orientation="vertical" class="h-[20px] bg-gray-400 dark:bg-gray-500" /> <Separator orientation="vertical" class="bg-secondary h-[20px]" />
<DropdownMenu.Root> <div class="flex items-center space-x-2">
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Root>
<Button builders={[builder]} variant="secondary" class="px-2 shadow-none"> <DropdownMenu.Trigger asChild let:builder>
<ChevronDown class="h-4 w-4 text-secondary-foreground" /> <Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
</Button> <ChevronDown class="h-4 w-4" />
</DropdownMenu.Trigger> </Button>
<DropdownMenu.Content class="w-80" align="end"> </DropdownMenu.Trigger>
<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label> <DropdownMenu.Content class="" align="center">
{#each providersWithIcons as provider} <DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
{#if provider.name !== currentProvider.name} {#each providersWithIcons as provider}
<DropdownMenu.Item {#if provider.name !== currentProvider.name}
class="flex justify-center" <DropdownMenu.Item
on:click={() => (currentProvider = provider)} class="flex justify-center"
> on:click={() => (currentProvider = provider)}
{#if provider.icon === undefined} >
<img {#if provider.icon === undefined}
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`} <img
alt={provider.name} src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
class="mr-2 h-4 w-4" alt={provider.name}
/> class="mr-2 h-4 w-4"
{:else} />
<svelte:component this={provider.icon} class="mr-2 h-4 w-4" /> {:else}
{/if} <svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
{provider.displayName} {/if}
</DropdownMenu.Item> {provider.displayName}
{/if} </DropdownMenu.Item>
{/each} {/if}
</DropdownMenu.Content> {/each}
</DropdownMenu.Root> </DropdownMenu.Content>
</DropdownMenu.Root>
</div>
</div> </div>
{/if} {/if}
</div> </div>
{/if} {/if}
</form> </form>
</div> </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 /> 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> Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
</p> </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> <span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
</div> </div>
</div> </div>
<Button variant="outline" type="button" disabled={true}> <Button variant="outline" type="button" disabled={isLoading}>
{#if isLoading} {#if isLoading}
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" /> <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
{:else} {:else}