From 37b5c2ac43abc42a92f59d07fd6dea3e8dd961cd Mon Sep 17 00:00:00 2001 From: h0lybyte <5599058+h0lybyte@users.noreply.github.com> Date: Fri, 11 Aug 2023 23:00:48 -0400 Subject: [PATCH] Supabase - Profile Issue: https://github.com/KBVE/kbve.com/issues/725 --- .astro/types.d.ts | 14 ++ .vscode/settings.json | 1 + src/components/API/storage.ts | 41 ++-- src/components/API/supabase.ts | 10 +- src/components/Supabase/Login.svelte | 244 ++++++++++++------------ src/components/Supabase/Profile.svelte | 82 ++++++++ src/components/Supabase/Register.svelte | 13 +- src/components/Widget/Profile.astro | 7 +- src/components/Widget/Widget.astro | 32 +++- src/components/kbve.ts | 6 + src/content/account/calendar.mdx | 23 +++ src/content/account/login.mdx | 5 +- src/content/account/register.mdx | 13 +- src/content/account/settings.mdx | 23 +++ 14 files changed, 358 insertions(+), 156 deletions(-) create mode 100644 src/components/Supabase/Profile.svelte create mode 100644 src/components/kbve.ts create mode 100644 src/content/account/calendar.mdx create mode 100644 src/content/account/settings.mdx diff --git a/.astro/types.d.ts b/.astro/types.d.ts index a7a584a7c4..8ac96b2e14 100644 --- a/.astro/types.d.ts +++ b/.astro/types.d.ts @@ -201,6 +201,13 @@ declare module 'astro:content' { type ContentEntryMap = { "account": { +"calendar.mdx": { + id: "calendar.mdx"; + slug: "calendar"; + body: string; + collection: "account"; + data: InferEntrySchema<"account"> +} & { render(): Render[".mdx"] }; "login.mdx": { id: "login.mdx"; slug: "login"; @@ -229,6 +236,13 @@ declare module 'astro:content' { collection: "account"; data: InferEntrySchema<"account"> } & { render(): Render[".mdx"] }; +"settings.mdx": { + id: "settings.mdx"; + slug: "settings"; + body: string; + collection: "account"; + data: InferEntrySchema<"account"> +} & { render(): Render[".mdx"] }; }; "application": { "android.mdx": { diff --git a/.vscode/settings.json b/.vscode/settings.json index 02784eef55..01f36cb0e3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -115,6 +115,7 @@ "swup", "syncthing", "tailwindcss", + "tasker", "Threlte", "TLDR", "tlsv", diff --git a/src/components/API/storage.ts b/src/components/API/storage.ts index 89c5d923e1..225b52734f 100644 --- a/src/components/API/storage.ts +++ b/src/components/API/storage.ts @@ -1,8 +1,8 @@ import { atom, WritableAtom, task } from "nanostores"; -import { persistentAtom } from '@nanostores/persistent'; +import { persistentAtom } from "@nanostores/persistent"; -export const uuid$: WritableAtom = atom(''); -export const username$: WritableAtom = atom("Guest"); +export const uuid$: WritableAtom = atom(""); +export const username$: WritableAtom = atom(""); export const email$: WritableAtom = atom(""); export const khash$: WritableAtom = atom(0); //? [DATA]->[UX] @@ -12,21 +12,30 @@ export const fetchProfile$: WritableAtom = atom(""); //? [DATA]=>[DX] export const log$: WritableAtom = atom(""); -export const log = async( log : string) => { - task(async() => { - log$.set(log); - console.log(`[LOG] ${log$.get()}`); - }) -} +export const log = async (log: string) => { + task(async () => { + log$.set(log); + console.log(`[LOG] ${log$.get()}`); + }); +}; + +export const tasker = async (__key: WritableAtom, __data) => { + task(async () => { + log(`Storing ${__data} into atom!`); + __key.set(__data); + + + }); +}; export const __getProfile = async () => { task(async () => { - log("Starting Cache -> Profile"); - }); + log("Starting Cache -> Profile"); + }); }; -export const notification = async( error: string) => { - task(async() => { - notification$.set(error); - }) -} +export const notification = async (error: string) => { + task(async () => { + notification$.set(error); + }); +}; diff --git a/src/components/API/supabase.ts b/src/components/API/supabase.ts index 7a324c1607..f49dd36878 100644 --- a/src/components/API/supabase.ts +++ b/src/components/API/supabase.ts @@ -2,6 +2,8 @@ import { Session, User, createClient } from "@supabase/supabase-js"; import { atom, WritableAtom, task } from "nanostores"; import { persistentAtom } from "@nanostores/persistent"; +import * as kbve from "@c/kbve"; + import * as Storage from "./storage"; //TODO [ENV-MIGRATION] @@ -18,8 +20,8 @@ export const supabase_user$: WritableAtom = atom(undefined); //! [MAIN] export const supabase = createClient( - "https://haiukcmcljjfaflqdmjc.supabase.co", - "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhhaXVrY21jbGpqZmFmbHFkbWpjIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTE1NTM0MjMsImV4cCI6MjAwNzEyOTQyM30.0taw1sQp2fHLY3byK2cnGtLttXPFRs9GfkxFBNQL6E8", + kbve.supabase_api, + kbve.supabase_projectId, ); supabase.auth.getSession().then(({ data: { session } }) => { @@ -51,5 +53,9 @@ export const getProfile = async ({ cache = true }: { cache: boolean }) => { export const _getProfile = async () => { task(async () => { Storage.log(" Starting Supabase -> Profile Table"); + const userData = await supabase_account(); + Storage.tasker(Storage.email$, userData?.email); + Storage.tasker(Storage.uuid$, userData?.id); + }); }; diff --git a/src/components/Supabase/Login.svelte b/src/components/Supabase/Login.svelte index 3c40c9ca96..3590835433 100644 --- a/src/components/Supabase/Login.svelte +++ b/src/components/Supabase/Login.svelte @@ -25,14 +25,14 @@ import { onMount, onDestroy, createEventDispatcher } from 'svelte'; import { log, notification$, notification } from '@c/API/storage'; import WidgetWrapper from './UX/WidgetWrapper.svelte'; - + import * as kbve from '@c/kbve'; const browser = import.meta.env.SSR === undefined ? true : !import.meta.env.SSR; const dispatch = createEventDispatcher(); - export let sitekey: string = 'e77af3f6-a0e3-44b7-82f8-b7c098d38022'; + export let sitekey: string = kbve.hcaptcha; export let apihost: string = 'https://js.hcaptcha.com/1/api.js'; export let hl: string = ''; export let reCaptchaCompat: boolean = false; @@ -53,6 +53,7 @@ let mounted = false; let loaded = false; let widgetID: any; + let skeleton: any; const query = new URLSearchParams({ recaptchacompat: reCaptchaCompat ? 'on' : 'off', @@ -92,6 +93,8 @@ } dispatch('mount'); + console.log('mounted'); + mounted = true; }); @@ -118,6 +121,8 @@ 'expired-callback': 'onExpired', size, }); + skeleton = window.document.getElementById('skeleton') as HTMLElement; + if(skeleton) skeleton.remove(); } let loading = false; @@ -147,7 +152,6 @@ log(error.message); notification(error.message); reset(); - } } finally { loading = false; @@ -161,127 +165,129 @@ {/if} + -
+ +
+
+ + logo +
- - logo - -
-
-
- {#if $notification$} -

+ class="w-full bg-transparent rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0"> +
+
+ {#if $notification$} +

+

- {:else} -

- Sign in to your account! -

- {/if} -
-
-
- - -
-
- - -
-
-
- Forgot password? -
-
- -

- Don’t have an account yet? Sign up -

- +
+ {$notification$} +
+ +
+

+ {:else} +

+ Sign in to your account! +

+ {/if}
+
+
+ + +
+
+ + +
+
+
+ Forgot password? +
+
+ +

+ Don’t have an account yet? Sign up +

+
-
- + +
+ \ No newline at end of file diff --git a/src/components/Supabase/Profile.svelte b/src/components/Supabase/Profile.svelte new file mode 100644 index 0000000000..c5c92cd9b6 --- /dev/null +++ b/src/components/Supabase/Profile.svelte @@ -0,0 +1,82 @@ + + + + + + + +
+
+ +
+

+ Avatar Here +

+

+ {$username$} +

+ +
+ {$email$} +
+
+
+
+ + + Github + + + +
+
+ + diff --git a/src/components/Supabase/Register.svelte b/src/components/Supabase/Register.svelte index 3a897138b7..b86a591776 100644 --- a/src/components/Supabase/Register.svelte +++ b/src/components/Supabase/Register.svelte @@ -24,6 +24,8 @@ import { supabase } from '@c/API/supabase'; import { onMount, onDestroy, createEventDispatcher } from 'svelte'; import { log, notification$, notification } from '@c/API/storage'; + import * as kbve from '@c/kbve'; + import WidgetWrapper from './UX/WidgetWrapper.svelte'; const browser = @@ -31,12 +33,12 @@ const dispatch = createEventDispatcher(); - export let sitekey: string = 'e77af3f6-a0e3-44b7-82f8-b7c098d38022'; + export let sitekey: string = kbve.hcaptcha ; export let apihost: string = 'https://js.hcaptcha.com/1/api.js'; export let hl: string = ''; export let reCaptchaCompat: boolean = false; - export let theme: CaptchaTheme = CaptchaTheme.LIGHT; - export let size: 'normal' | 'compact' | 'invisible' = 'normal'; + export let theme: CaptchaTheme = CaptchaTheme.DARK; + export let size: 'normal' | 'compact' | 'invisible' = 'compact'; export const reset = () => { if (mounted && loaded && widgetID) hcaptcha.reset(widgetID); @@ -52,6 +54,7 @@ let mounted = false; let loaded = false; let widgetID: any; + let skeleton: any; const query = new URLSearchParams({ recaptchacompat: reCaptchaCompat ? 'on' : 'off', @@ -118,6 +121,8 @@ 'expired-callback': 'onExpired', size, }); + skeleton = window.document.getElementById('skeleton') as HTMLElement; + if(skeleton) skeleton.remove(); } let usernameRegex = new RegExp(/^[a-z0-9]+$/i); @@ -317,7 +322,7 @@ required bind:value={confirm} /> -
+
- - + \ No newline at end of file diff --git a/src/components/Widget/Widget.astro b/src/components/Widget/Widget.astro index b2bafb9ee7..516cabcbc3 100644 --- a/src/components/Widget/Widget.astro +++ b/src/components/Widget/Widget.astro @@ -1,20 +1,38 @@ --- -const { data, img } = Astro.props; +const {img, minHeight = '200' } = Astro.props; ---
-
+
-
-
+
+
+
+ + -
+ +
+
+
+
+
+
+
+
+
+
+ + +
+ +
diff --git a/src/components/kbve.ts b/src/components/kbve.ts new file mode 100644 index 0000000000..b676c59706 --- /dev/null +++ b/src/components/kbve.ts @@ -0,0 +1,6 @@ +export const kbve_v01d: number = 0.99; +export const supabase_api: string = 'https://haiukcmcljjfaflqdmjc.supabase.co'; +export const supabase_projectId: string = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhhaXVrY21jbGpqZmFmbHFkbWpjIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTE1NTM0MjMsImV4cCI6MjAwNzEyOTQyM30.0taw1sQp2fHLY3byK2cnGtLttXPFRs9GfkxFBNQL6E8"; +export const hcaptcha: string = 'e77af3f6-a0e3-44b7-82f8-b7c098d38022'; +export const appwrite_api: string = ''; +export const appwrite_projectId: string = ''; \ No newline at end of file diff --git a/src/content/account/calendar.mdx b/src/content/account/calendar.mdx new file mode 100644 index 0000000000..42bd7e7209 --- /dev/null +++ b/src/content/account/calendar.mdx @@ -0,0 +1,23 @@ +--- +layout: ../../layouts/Account.astro +title: Calendar +description: KBVE Account Profile Page +author: KBVE +bg_img: https://images.unsplash.com/photo-1605373401635-7efc1d10d1e3?fit=crop&w=1400&h=700&q=75 +img: https://images.unsplash.com/photo-1689852484069-3e0fe82cc7c1?fit=crop&w=1400&h=700&q=75 +tags: + - account + - login + - user +--- + +import Details from '@w/Details.astro'; +import Widget from "@w/Widget.astro"; +import MDXJS from '@w/MDXJS.astro'; +import Profile from '@w/Profile.astro'; + + + + + + \ No newline at end of file diff --git a/src/content/account/login.mdx b/src/content/account/login.mdx index 8498c1032d..cbf5f8a618 100644 --- a/src/content/account/login.mdx +++ b/src/content/account/login.mdx @@ -13,12 +13,15 @@ tags: import Details from '@w/Details.astro'; +import Widget from "@w/Widget.astro"; import MDXJS from '@w/MDXJS.astro'; import Login from "@w/Login.astro"; - + + + diff --git a/src/content/account/register.mdx b/src/content/account/register.mdx index 1e1da4ce4d..aed06dc848 100644 --- a/src/content/account/register.mdx +++ b/src/content/account/register.mdx @@ -3,7 +3,7 @@ layout: ../../layouts/Account.astro title: Register description: KBVE Account Register author: KBVE -bg_img: https://images.unsplash.com/photo-1605373401635-7efc1d10d1e3?fit=crop&w=1400&h=700&q=75 +bg_img: https://images.unsplash.com/photo-1520121843168-25f75bb5c99a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=711&q=80 img: https://images.unsplash.com/photo-1689852484069-3e0fe82cc7c1?fit=crop&w=1400&h=700&q=75 tags: - account @@ -17,14 +17,19 @@ error: import Details from '@w/Details.astro'; import MDXJS from '@w/MDXJS.astro'; import Register from '@w/Register.astro'; +import Widget from "@w/Widget.astro"; + + ---- +--- + + ## Notes Notes for Register MDX. @@ -56,4 +61,6 @@ Here we go! Doing another round of the login page! ---- \ No newline at end of file +--- + + \ No newline at end of file diff --git a/src/content/account/settings.mdx b/src/content/account/settings.mdx new file mode 100644 index 0000000000..e98a424490 --- /dev/null +++ b/src/content/account/settings.mdx @@ -0,0 +1,23 @@ +--- +layout: ../../layouts/Account.astro +title: Settings +description: KBVE Account Settings Page +author: KBVE +bg_img: https://images.unsplash.com/photo-1605373401635-7efc1d10d1e3?fit=crop&w=1400&h=700&q=75 +img: https://images.unsplash.com/photo-1689852484069-3e0fe82cc7c1?fit=crop&w=1400&h=700&q=75 +tags: + - account + - login + - user +--- + +import Details from '@w/Details.astro'; +import Widget from "@w/Widget.astro"; +import MDXJS from '@w/MDXJS.astro'; +import Profile from '@w/Profile.astro'; + + + + + + \ No newline at end of file