From b354fafeaf79b8761a550577ceda66e21c0974c5 Mon Sep 17 00:00:00 2001 From: Korbs Date: Wed, 17 Jul 2024 15:39:49 -0400 Subject: [PATCH] update --- astro.config.mjs | 5 + src/components/Header.astro | 20 ++- src/components/QuickForm.astro | 21 +++ src/components/QuickFormButton.astro | 9 + src/layouts/Settings.astro | 115 +++++++++++++ src/middleware/index.ts | 2 +- src/pages/account/beta.astro | 57 +++++++ src/pages/account/index.astro | 165 ++++++------------- src/pages/account/old.astro | 146 ++++++++++++++++ src/pages/account/preferences.astro | 74 +++++++++ src/pages/api/account/preference/beta-off.ts | 2 +- src/pages/api/account/preference/beta-on.ts | 2 +- src/pages/api/auth/anon.ts | 29 ++++ src/pages/api/auth/signout.ts | 3 + src/pages/index.astro | 15 +- src/pages/register.astro | 23 ++- src/pages/signin.astro | 21 ++- src/styles/root.scss | 50 +++--- 18 files changed, 586 insertions(+), 173 deletions(-) create mode 100644 src/components/QuickForm.astro create mode 100644 src/components/QuickFormButton.astro create mode 100644 src/layouts/Settings.astro create mode 100644 src/pages/account/beta.astro create mode 100644 src/pages/account/old.astro create mode 100644 src/pages/account/preferences.astro create mode 100644 src/pages/api/auth/anon.ts diff --git a/astro.config.mjs b/astro.config.mjs index 4074c5f..2923051 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -8,5 +8,10 @@ export default defineConfig({ }), security: { checkOrigin: true, + }, + vite: { + server: { + hmr: false + } } }) \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index 24c6a78..3af716c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,6 +1,8 @@ --- if (Astro.cookies.get('sb-access-token') && Astro.cookies.get('sb-refresh-token')) { var IsLoggedIn = true +} else if (Astro.cookies.get('anonymous-session')) { + var IsLoggedIn = true } else { var IsLoggedIn = false } @@ -17,15 +19,15 @@ const beta = user?.user_metadata.beta

Supabase Demo {beta ? Beta : null}

- {IsLoggedIn - ? - - Account - Sign Out - : - Register - Sign in - } + {IsLoggedIn + ? + + Account + Sign Out + : + Register + Sign in + }
diff --git a/src/components/QuickForm.astro b/src/components/QuickForm.astro new file mode 100644 index 0000000..f739260 --- /dev/null +++ b/src/components/QuickForm.astro @@ -0,0 +1,21 @@ +--- +const { + Action, + Method, + Label, + Name, + Type, + Value, + Button +} = Astro.props +--- + +
+
+ +
+ + +
+
+
\ No newline at end of file diff --git a/src/components/QuickFormButton.astro b/src/components/QuickFormButton.astro new file mode 100644 index 0000000..0cbbd2f --- /dev/null +++ b/src/components/QuickFormButton.astro @@ -0,0 +1,9 @@ +--- +const { + Action, + Method, + Button +} = Astro.props +--- + +
\ No newline at end of file diff --git a/src/layouts/Settings.astro b/src/layouts/Settings.astro new file mode 100644 index 0000000..0247212 --- /dev/null +++ b/src/layouts/Settings.astro @@ -0,0 +1,115 @@ +--- +const {Title} = Astro.props +import Head from "@components/Head.astro" +import Header from "@components/Header.astro" +import '@styles/root.scss' +--- + + + +
+ +
+
+
+ Account + Preferences + Reset Password +
+ Beta + Advance +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/src/middleware/index.ts b/src/middleware/index.ts index 58c9e74..96c0ac0 100644 --- a/src/middleware/index.ts +++ b/src/middleware/index.ts @@ -47,7 +47,7 @@ export const onRequest = defineMiddleware( const refreshToken = cookies.get("sb-refresh-token") if (accessToken && refreshToken) { - return redirect("/dashboard") + return redirect("/") } } return next() diff --git a/src/pages/account/beta.astro b/src/pages/account/beta.astro new file mode 100644 index 0000000..6881a49 --- /dev/null +++ b/src/pages/account/beta.astro @@ -0,0 +1,57 @@ +--- +import QuickForm from "@components/QuickForm.astro" +import QuickFormButton from "@components/QuickFormButton.astro" +import Settings from "@layouts/Settings.astro" + +// Supabase Data +import { supabase } from "@library/supabase" +const { data: { user } } = await supabase.auth.getUser() +const avatarUrl = user?.user_metadata.avatar_url +const displayName = user?.user_metadata.full_name +const email = user?.email +const id = user?.id + +// Get User Preferences +const user_plan = user?.user_metadata.plan +const user_theme = user?.user_metadata.theme +const user_color_scheme = user?.user_metadata.color_scheme +const user_beta = user?.user_metadata.beta +--- + + +

Beta

+ + {user_beta ? + + : + + } + + + + + + \ No newline at end of file diff --git a/src/pages/account/index.astro b/src/pages/account/index.astro index fe1adb2..a863b5e 100644 --- a/src/pages/account/index.astro +++ b/src/pages/account/index.astro @@ -1,21 +1,6 @@ --- -import Base from "@layouts/Base.astro" - -// Messages -if (Astro.url.href.endsWith('CheckEmail')) {var MessageCheckEmail = true} -else {var MessageCheckEmail = false} - -if (Astro.url.href.endsWith('AvatarUpdated')) {var MessageAvatarUpdated = true} -else {var MessageAvatarUpdated = false} - -if (Astro.url.href.endsWith('NameUpdated')) {var MessageNameUpdated = true} -else {var MessageNameUpdated = false} - -if (Astro.url.href.endsWith('EmailConfirmed')) {var MessageEmailConfirmed = true} -else {var MessageEmailConfirmed = false} - -if (Astro.url.href.endsWith('PasswordReset')) {var MessagePasswordReset = true} -else {var MessagePasswordReset = false} +import QuickForm from "@components/QuickForm.astro" +import Settings from "@layouts/Settings.astro" // Supabase Data import { supabase } from "@library/supabase" @@ -30,101 +15,56 @@ const user_plan = user?.user_metadata.plan const user_theme = user?.user_metadata.theme const user_color_scheme = user?.user_metadata.color_scheme const user_beta = user?.user_metadata.beta - -// Date - Readable Format (MONTH DAY, YEAR at #:##:## AM/PM / December 9, 2023 at 5:12:43 PM) -const dateFormat = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' } - -/// Created Date -const createdDate = new Date(user?.created_at) -const createDate = createdDate.toLocaleDateString('en-US', dateFormat) - -/// Last Logged In -const lastSignIn = new Date(user?.last_sign_in_at) -const lastSignInDate = lastSignIn.toLocaleDateString('en-US', dateFormat) --- - - -
- - - - -
-
-
- + + + + + + - -
- - {MessageCheckEmail ?

Check your email

: null} - {MessageAvatarUpdated ?

Your avatar has been updated

: null} - {MessageNameUpdated ?

Your display name has been updated

: null} - {MessageEmailConfirmed ?

Email confirmed

: null} - {MessagePasswordReset ?

Your new password has been updated

: null} - -

Your Account

-

Plan: {user_plan}

-

Display Name: {displayName}

-

Email: {email}

-
-

ID: {id}

-

Created at: {createDate}

-

Lasted login: {lastSignInDate}

-
- -

Preferences

-

Theme: {user_theme}

-

Color Scheme: {user_color_scheme}

- {user_beta ? -
- : -
- } -

-
- -
-

Change Avatar

-
- - -
- -
-
-

Update Display Name

-
- - -
- -
-
-

Change Email

-
- - -
- -
-
-

Change Password

-
- - -
-
- - -
- -
-

Do you want to delete your accout?

-
- + - - \ No newline at end of file + \ No newline at end of file diff --git a/src/pages/account/old.astro b/src/pages/account/old.astro new file mode 100644 index 0000000..fe1adb2 --- /dev/null +++ b/src/pages/account/old.astro @@ -0,0 +1,146 @@ +--- +import Base from "@layouts/Base.astro" + +// Messages +if (Astro.url.href.endsWith('CheckEmail')) {var MessageCheckEmail = true} +else {var MessageCheckEmail = false} + +if (Astro.url.href.endsWith('AvatarUpdated')) {var MessageAvatarUpdated = true} +else {var MessageAvatarUpdated = false} + +if (Astro.url.href.endsWith('NameUpdated')) {var MessageNameUpdated = true} +else {var MessageNameUpdated = false} + +if (Astro.url.href.endsWith('EmailConfirmed')) {var MessageEmailConfirmed = true} +else {var MessageEmailConfirmed = false} + +if (Astro.url.href.endsWith('PasswordReset')) {var MessagePasswordReset = true} +else {var MessagePasswordReset = false} + +// Supabase Data +import { supabase } from "@library/supabase" +const { data: { user } } = await supabase.auth.getUser() +const avatarUrl = user?.user_metadata.avatar_url +const displayName = user?.user_metadata.full_name +const email = user?.email +const id = user?.id + +// Get User Preferences +const user_plan = user?.user_metadata.plan +const user_theme = user?.user_metadata.theme +const user_color_scheme = user?.user_metadata.color_scheme +const user_beta = user?.user_metadata.beta + +// Date - Readable Format (MONTH DAY, YEAR at #:##:## AM/PM / December 9, 2023 at 5:12:43 PM) +const dateFormat = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' } + +/// Created Date +const createdDate = new Date(user?.created_at) +const createDate = createdDate.toLocaleDateString('en-US', dateFormat) + +/// Last Logged In +const lastSignIn = new Date(user?.last_sign_in_at) +const lastSignInDate = lastSignIn.toLocaleDateString('en-US', dateFormat) +--- + + + +
+ + + + +
+
+
+ +
+ + +
+ + {MessageCheckEmail ?

Check your email

: null} + {MessageAvatarUpdated ?

Your avatar has been updated

: null} + {MessageNameUpdated ?

Your display name has been updated

: null} + {MessageEmailConfirmed ?

Email confirmed

: null} + {MessagePasswordReset ?

Your new password has been updated

: null} + +

Your Account

+

Plan: {user_plan}

+

Display Name: {displayName}

+

Email: {email}

+
+

ID: {id}

+

Created at: {createDate}

+

Lasted login: {lastSignInDate}

+
+ +

Preferences

+

Theme: {user_theme}

+

Color Scheme: {user_color_scheme}

+ {user_beta ? +
+ : +
+ } +

+
+ +
+

Change Avatar

+
+ + +
+ +
+
+

Update Display Name

+
+ + +
+ +
+
+

Change Email

+
+ + +
+ +
+
+

Change Password

+
+ + +
+
+ + +
+ +
+

Do you want to delete your accout?

+
+ + + + + \ No newline at end of file diff --git a/src/pages/account/preferences.astro b/src/pages/account/preferences.astro new file mode 100644 index 0000000..b3fc3af --- /dev/null +++ b/src/pages/account/preferences.astro @@ -0,0 +1,74 @@ +--- +import QuickForm from "@components/QuickForm.astro" +import QuickFormButton from "@components/QuickFormButton.astro" +import Settings from "@layouts/Settings.astro" + +// Supabase Data +import { supabase } from "@library/supabase" +const { data: { user } } = await supabase.auth.getUser() +const avatarUrl = user?.user_metadata.avatar_url +const displayName = user?.user_metadata.full_name +const email = user?.email +const id = user?.id + +// Get User Preferences +const user_plan = user?.user_metadata.plan +const user_theme = user?.user_metadata.theme +const user_color_scheme = user?.user_metadata.color_scheme +const user_beta = user?.user_metadata.beta +--- + + +

Preferences

+ +

Theme

+

Current Theme: {user_theme}

+ + + + +

Color Scheme

+

Current Scheme: {user_color_scheme}

+ + + + + + + + \ No newline at end of file diff --git a/src/pages/api/account/preference/beta-off.ts b/src/pages/api/account/preference/beta-off.ts index 0587f68..f09b0f3 100644 --- a/src/pages/api/account/preference/beta-off.ts +++ b/src/pages/api/account/preference/beta-off.ts @@ -14,5 +14,5 @@ export const POST: APIRoute = async ({ redirect }) => { return new Response(error.message, { status: 500 }) } - return redirect("/account") + return redirect("/account/beta") } diff --git a/src/pages/api/account/preference/beta-on.ts b/src/pages/api/account/preference/beta-on.ts index d60725d..afe122c 100644 --- a/src/pages/api/account/preference/beta-on.ts +++ b/src/pages/api/account/preference/beta-on.ts @@ -14,5 +14,5 @@ export const POST: APIRoute = async ({ redirect }) => { return new Response(error.message, { status: 500 }) } - return redirect("/account") + return redirect("/account/beta") } diff --git a/src/pages/api/auth/anon.ts b/src/pages/api/auth/anon.ts new file mode 100644 index 0000000..4c52635 --- /dev/null +++ b/src/pages/api/auth/anon.ts @@ -0,0 +1,29 @@ +import type { APIRoute } from "astro" +import { supabase } from "@library/supabase" + +export const GET: APIRoute = async ({ cookies, request, redirect }) => { + const { error } = await supabase.auth.signInAnonymously({ + options: { + data: { + full_name: 'Anonymous', + avatar_url: 'https://img.sudovanilla.org/MAuSBXN.png', + plan: "Free", + theme: "Dark", + color_scheme: "Purple", + beta: false, + } + }, + }) + + if (error) { + return new Response(error.message, { status: 500 }) + } + + cookies.set("anonymous-session", 'true', { + path: "/", + secure: true, + httpOnly: true, + }) + + return redirect("/?=anonymous") +} diff --git a/src/pages/api/auth/signout.ts b/src/pages/api/auth/signout.ts index a8583a4..5ba4355 100644 --- a/src/pages/api/auth/signout.ts +++ b/src/pages/api/auth/signout.ts @@ -1,7 +1,10 @@ import type { APIRoute } from "astro" +import { supabase } from "@library/supabase" +import type { Provider } from "@supabase/supabase-js" export const GET: APIRoute = async ({ cookies, redirect }) => { cookies.delete("sb-access-token", { path: "/" }) cookies.delete("sb-refresh-token", { path: "/" }) + const { error } = await supabase.auth.signOut() return redirect("/signin") } \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index d0b5941..c3a6231 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -46,10 +46,21 @@ console.log(subs)

Channels

{channels.map((channel) => - {channel.creator} + {channel.creator} )}
{subs.map((data) =>

{data.Id} | Unsubscribe

)} - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/pages/register.astro b/src/pages/register.astro index 0d7596b..f56c0ae 100644 --- a/src/pages/register.astro +++ b/src/pages/register.astro @@ -5,7 +5,7 @@ import Base from "@layouts/Base.astro"

Register for Supabase Demo

Already have an account? Sign In.

-
+
@@ -22,18 +22,25 @@ import Base from "@layouts/Base.astro"
- +
-
-

- Or with -

+
+
+
+
Or with
+
- -
+ + \ No newline at end of file diff --git a/src/pages/signin.astro b/src/pages/signin.astro index 8bd682e..cb79de4 100644 --- a/src/pages/signin.astro +++ b/src/pages/signin.astro @@ -5,7 +5,7 @@ import Base from "@layouts/Base.astro"

Sign In

Don't have an account? Sign Up.

-
+
@@ -14,11 +14,12 @@ import Base from "@layouts/Base.astro"
- -
-

- Or with -

+ +
+
+
+
Or with
+
@@ -29,3 +30,11 @@ import Base from "@layouts/Base.astro" + + \ No newline at end of file diff --git a/src/styles/root.scss b/src/styles/root.scss index 4293026..2235410 100644 --- a/src/styles/root.scss +++ b/src/styles/root.scss @@ -1,5 +1,5 @@ body { - background: #1c1c1c; + background: black; color: #fdfdfd; max-width: 600px; margin: auto; @@ -17,13 +17,13 @@ a { button { color: color; - color: white; + color: black; font-size: 12px; text-decoration: none; margin-right: 6px; - background: #cbddbe5e; - padding: 6px; - border-radius: 4px; + background: white; + padding: 6px 12px; + border-radius: 3rem; border: none; cursor: pointer; &:hover { @@ -32,43 +32,39 @@ button { } header { - background: #232323; - border: 1px #2e2e2e solid; - transition: 1.3s border; - border-radius: 6px; display: flex; justify-content: space-between; align-items: center; - padding: 12px; - margin-top: 24px; - &:hover { - border-color: #3ecf8e; - transition: 1.3s border; - } + padding: 6px 0px; + margin-top: 12px; h2 { margin: 0px; font-size: 14px; } + .header-start { + a { + text-decoration: none; + } + } .header-end { display: flex; align-items: center; a { - color: color; - color: white; + color: black; font-size: 12px; text-decoration: none; margin-left: 6px; - background: #cbddbe5e; - padding: 6px; - border-radius: 4px; + background: white; + padding: 6px 12px; + border-radius: 3rem; &:hover { filter: brightness(0.8) } } img { height: 24px; - border-radius: 6px; - border: 2px #2e2e2e solid; + border-radius: 3rem; + border: 2px #282828 solid; } } } @@ -92,10 +88,6 @@ header { } .content { - background: #232323; - border: 1px #2e2e2e solid; - border-radius: 6px; - padding: 12px; margin-top: 12px; } @@ -121,11 +113,11 @@ header { grid-auto-flow: column; grid-gap: 6px; button { - background: #494949; - border: none; + background: transparent; + border: 1px white solid; color: white; padding: 6px 12px; - border-radius: 6px; + border-radius: 3rem; cursor: pointer; &:hover { filter: brightness(0.8)