From 297f5f24389c905e4e2ff93f8fe6ed6f2e06e614 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Ba=C4=8Do?= <matejbaco2000@gmail.com>
Date: Wed, 19 Apr 2023 09:24:36 +0200
Subject: [PATCH] Add GitHub OAuth

---
 src/lib/layout/unauthenticated.svelte      | 18 +++++++++
 src/routes/console/card/+layout.svelte     |  5 +++
 src/routes/console/card/+layout.ts         | 10 +++++
 src/routes/console/card/+page.svelte       | 22 +++++++++++
 src/routes/console/card/breadcrumbs.svelte | 12 ++++++
 src/routes/console/card/header.svelte      | 43 ++++++++++++++++++++++
 6 files changed, 110 insertions(+)
 create mode 100644 src/routes/console/card/+layout.svelte
 create mode 100644 src/routes/console/card/+layout.ts
 create mode 100644 src/routes/console/card/+page.svelte
 create mode 100644 src/routes/console/card/breadcrumbs.svelte
 create mode 100644 src/routes/console/card/header.svelte

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 20cb1e814..86fca656c 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -5,6 +5,7 @@
     import { user } from '$lib/stores/user';
     import LoginLight from '$lib/images/login/login-light-mode.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.svg';
+    import { sdkForConsole } from '$lib/stores/sdk';
 
     export let imgLight = LoginLight;
     export let imgDark = LoginDark;
@@ -22,6 +23,15 @@
         'kotlin',
         'swift'
     ];
+
+    function onGithubLogin() {
+        sdkForConsole.account.createOAuth2Session(
+            'github',
+            window.location.origin,
+            window.location.origin,
+            ['read:user', 'user:email']
+        );
+    }
 </script>
 
 <main class="grid-1-1 is-full-page" id="main">
@@ -84,6 +94,14 @@
                 </ul>
             </div>
 
+            <p class="u-margin-block-start-20">Or sign in with:</p>
+
+            <div class="u-margin-block-start-16 u-flex u-gap-12">
+                <button on:click={onGithubLogin} class="button is-secondary">
+                    <span class="text">GitHub</span>
+                </button>
+            </div>
+
             <div class="u-margin-block-start-auto" />
             <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
                 <!-- version 0.15.2.402 -->
diff --git a/src/routes/console/card/+layout.svelte b/src/routes/console/card/+layout.svelte
new file mode 100644
index 000000000..d1389b13f
--- /dev/null
+++ b/src/routes/console/card/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Card - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/card/+layout.ts b/src/routes/console/card/+layout.ts
new file mode 100644
index 000000000..cd42223bd
--- /dev/null
+++ b/src/routes/console/card/+layout.ts
@@ -0,0 +1,10 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/card/+page.svelte b/src/routes/console/card/+page.svelte
new file mode 100644
index 000000000..678666a5c
--- /dev/null
+++ b/src/routes/console/card/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import { onMount } from 'svelte';
+    import { user } from '$lib/stores/user';
+
+    let name: string = null,
+        email: string = null;
+
+    onMount(async () => {
+        name ??= $user.name;
+        email ??= $user.email;
+    });
+</script>
+
+<Container>
+    <div>
+        <CardGrid>
+            <Heading tag="h6" size="7">Update Name</Heading>
+        </CardGrid>
+    </div>
+</Container>
diff --git a/src/routes/console/card/breadcrumbs.svelte b/src/routes/console/card/breadcrumbs.svelte
new file mode 100644
index 000000000..edb898db1
--- /dev/null
+++ b/src/routes/console/card/breadcrumbs.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+
+    $: breadcrumbs = [
+        {
+            href: `/console`,
+            title: 'Console'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/card/header.svelte b/src/routes/console/card/header.svelte
new file mode 100644
index 000000000..1ea6a77f5
--- /dev/null
+++ b/src/routes/console/card/header.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { Tab, Tabs } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+
+    const path = `/console/card`;
+
+    $: tabs = [
+        {
+            href: path,
+            title: 'Overview',
+            event: 'overview'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>
+            {$user.name}
+        </CoverTitle>
+        <div class="u-margin-inline-start-auto">
+            <Button secondary>Logout</Button>
+        </div>
+    </svelte:fragment>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab
+                href={tab.href}
+                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>