MinPluto/Account-System-Demo
1
Fork 0
Code Issues Pull requests Activity

Update pages and UI

Browse source
This commit is contained in:
Korbs 2024-07-16 23:39:29 -04:00
parent da8882b162
commit 087ab36bb0
9 changed files with 371 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Head.astro Normal file
View file

@ -0,0 +1,9 @@
---
const { Title } = Astro.props
---
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2.2" />
<title>{Title}</title>
</head>

35
src/components/Header.astro Normal file
View file

@ -0,0 +1,35 @@
---
if (Astro.cookies.get('sb-access-token') && Astro.cookies.get('sb-refresh-token')) {
var IsLoggedIn = true
} else {
var IsLoggedIn = false
}
// Supabase Data
import { supabase } from "../library/supabase"
const { data: { user } } = await supabase.auth.getUser()
const avatar = user?.user_metadata.avatar_url
const beta = user?.user_metadata.beta
---
<header>
<div class="header-start">
<h2><a href="/">Supabase Demo</a> {beta ? <span>Beta</span> : null}</h2>
</div>
<div class="header-end">
{IsLoggedIn
?
<img src={avatar}/>
<a href="/account">Account</a>
<a href="/api/auth/signout">Sign Out</a>
:
<a href="/register">Register</a>
<a href="/signin">Sign in</a>
}
</div>
</header>
<script is:inline>
</script>

16
src/layouts/Base.astro Normal file
View file

@ -0,0 +1,16 @@
---
const {Title} = Astro.props
import Head from "@components/Head.astro"
import Header from "@components/Header.astro"
import '@styles/root.scss'
---
<html>
<Head Title={Title}/>
<Header/>
<body>
<div class="content">
<slot/>
</div>
</body>
</html>

169
src/pages/account.astro
View file

@ -1,45 +1,146 @@
--- ---
const { user, users } = Astro.locals import Base from "@layouts/Base.astro"
if (!user) {return Astro.redirect("/signin")}
import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
if (user.emailVerification) {var EmailIsVerified = true} // Messages
else {var EmailIsVerified = false} if (Astro.url.href.endsWith('CheckEmail')) {var MessageCheckEmail = true}
else {var MessageCheckEmail = false}
if (Astro.cookies.get('anonymous')) {var AN = true} if (Astro.url.href.endsWith('AvatarUpdated')) {var MessageAvatarUpdated = true}
else {var AN = false} else {var MessageAvatarUpdated = false}
const { account } = createAdminClient(); if (Astro.url.href.endsWith('NameUpdated')) {var MessageNameUpdated = true}
// const session = await account.createMagicURLToken(user.$id,user.email); 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)
--- ---
<p>Email: {AN ? <span>None</span> : <span>{user.email}</span>} <span><button><a style="color: white; text-decoration: none;" href="/settings/update-username">Change</a></button></span></p> <Base Title="Account">
<p>ID: {user.$id}</p> <!-- Dummy Sidebar -->
<!-- <p>Phone: {user.phone}</p> --> <div>
<p>Name: {AN ? <span>Anonymous</span> : <span>{user.name}</span>} <span><button><a style="color: white; text-decoration: none;" href="/settings/update-username">Change</a></button></span></p> <span class="dummies" style="width:80%;"></span>
<p>Created at: {user.$createdAt}</p> <span class="dummies" style="width:80%;"></span>
<p>Last login: {user.accessedAt}</p> <span class="dummies" style="width:80%;"></span>
<p>Last updated: {user.$updatedAt}</p> <span class="dummies" style="width:80%;"></span>
<p>Labels: <br/>
{user.labels.map((data) => <br/>
<ul> <br/>
<li>{data}</li> <span class="dummies" style="width:80%;"></span>
</ul> </div>
)}
</p>
Theme: {user.prefs.darkTheme} <!-- Account -->
<div class="dashboard-content">
<!-- Messages -->
{MessageCheckEmail ? <p class="message-in">Check your email</p> : null}
{MessageAvatarUpdated ? <p class="message-in">Your avatar has been updated</p> : null}
{MessageNameUpdated ? <p class="message-in">Your display name has been updated</p> : null}
{MessageEmailConfirmed ? <p class="message-in">Email confirmed</p> : null}
{MessagePasswordReset ? <p class="message-in">Your new password has been updated</p> : null}
<!-- Account Information -->
<h2>Your Account</h2>
<p>Plan: {user_plan}</p>
<p>Display Name: {displayName}</p>
<p>Email: <u>{email}</u></p>
<hr/>
<p>ID: {id}</p>
<p>Created at: {createDate}</p>
<p>Lasted login: {lastSignInDate}</p>
<hr/>
<!-- Account Preferences -->
<h2>Preferences</h2>
<p>Theme: {user_theme}</p>
<p>Color Scheme: {user_color_scheme}</p>
{user_beta ?
<form method="post" action="/api/account/beta-off"><button type="submit">Leave Beta</button></form>
:
<form method="post" action="/api/account/beta-on"><button type="submit">Enter Beta</button></form>
}
</p>
<hr/>
<!-- Account Actions -->
<form action="/api/account/update-avatar" method="post">
<p>Change Avatar</p>
<div class="form-field">
<label style="font-size: 12px;" for="avatar_url">Avatar URL</label>
<input id="avatar_url" type="url" name="avatar_url" value={avatarUrl} required />
</div>
<button type="submit">Update</button>
</form>
<form action="/api/account/update-name" method="post">
<p>Update Display Name</p>
<div class="form-field">
<label style="font-size: 12px;" for="name">New Display Name</label>
<input id="name" type="text" name="name" value={displayName} required />
</div>
<button type="submit">Update</button>
</form>
<form action="/api/account/update-email" method="post">
<p>Change Email</p>
<div class="form-field">
<label style="font-size: 12px;" for="email">New Email</label>
<input id="email" type="email" name="email" value={email} required />
</div>
<button type="submit">Update</button>
</form>
<form action="/api/account/update-password" method="post">
<p>Change Password</p>
<div class="form-field">
<label style="font-size: 12px;" for="password">New Password</label>
<input id="password" type="password" name="password" oninput="CheckPasswordConfirmation()" required />
</div>
<div class="form-field">
<label style="font-size: 12px;" for="confirm_password">Confirm Password</label>
<input id="confirm_password" type="password" name="confirm_password" oninput="CheckPasswordConfirmation()" required />
</div>
<button type="submit">Update</button>
</form>
<p>Do you want to delete your accout? <form action="/api/account/delete" method="post"><button style="color: rgb(255, 125, 125); text-decoration: none;">Delete account</a>.</button></form>
</div>
</Base>
{EmailIsVerified ? <script is:inline>
<p>Your account is verified</p> function CheckPasswordConfirmation() {
: const input = document.getElementById('confirm_password');
<p style="color: rgb(255, 113, 113)">Your account is not verified<!-- [<a href="/api/email/send-verification">Send Verification Email</a>] --></p> if (input.value !== document.getElementById('password').value) {
input.setCustomValidity('Password Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
} }
</script>
{AN ? <style is:inline>
<p>This is an anonmyous account.</p> .content {
: display: grid !important;
<p style="color: rgb(255, 113, 113)">Not an anonmyous account.</p> grid-template-columns: 160px auto !important;
} }
</style>
<a href="/signout">Sign Out</a>

26
src/pages/creator/C6nSFpj9HTCZ5t-N3Rm3-HA.astro Normal file
View file

@ -0,0 +1,26 @@
---
import Base from "@layouts/Base.astro"
const CreatorId = Astro.url.href.split("creator/").pop()
import { supabase } from "@library/supabase"
const { data: { user } } = await supabase.auth.getUser()
const id = user?.id
let { data: subs } = await supabase
.from('subs')
.select("*")
.eq('UserSubscribed', id)
.eq('Id', CreatorId)
---
<Base Title="Supabase Demo">
<div style="display: flex; justify-content: space-between; align-items: center;">
<p style="font-size: 18px; font-weight: bold;">Vsause</p>
<div>
{subs[0].Subscribed ?
<a style="font-size: 14px;" href={"/api/account/remove?=" + 'C6nSFpj9HTCZ5t-N3Rm3-HA'}>Unsubscribe</a>
:
<a style="font-size: 14px;" href={"/api/account/add?=" + 'C6nSFpj9HTCZ5t-N3Rm3-HA'}>Subscribe</a>
}
</div>
</div>
</Base>

55
src/pages/index.astro
View file

@ -1,8 +1,55 @@
--- ---
const { user } = Astro.locals; import Base from "@layouts/Base.astro"
if (user) {
return Astro.redirect("/account"); // Check Cookies
if (Astro.cookies.get('sb-access-token') && Astro.cookies.get('sb-refresh-token')) {
var IsLoggedIn = true
} else {
var IsLoggedIn = false
} }
return Astro.redirect("/signin"); // Supabase Data
import { supabase } from "../library/supabase"
const { data: { user } } = await supabase.auth.getUser()
const avatar = user?.user_metadata.avatar_url
const displayName = user?.user_metadata.full_name
const id = user?.id
// Get Channels
const { data: channels, error } = await supabase
.from('channels')
.select('*')
let { data: subs } = await supabase
.from('subs')
.select("*")
.eq('UserSubscribed', id)
console.log(subs)
--- ---
<Base Title="Supabase Demo">
{IsLoggedIn
?
<div class="welcome">
<img src={avatar}/>
<h2>Welcome back, {displayName}</h2>
</div>
:
<div class="welcome">
<h2>Welcome!</h2>
</div>
}
<hr/>
<h3>Channels</h3>
{channels.map((channel) =>
<a href={'/creator/' + channel.id}>{channel.creator}</a>
)}
<hr/>
{subs.map((data) =>
<p><a href={'/creator/' + data.Id}>{data.Id}</a> | <a href={'/api/account/remove?=' + data.Id}>Unsubscribe</a></p>
)}
</Base>

39
src/pages/register.astro Normal file
View file

@ -0,0 +1,39 @@
---
import Base from "@layouts/Base.astro"
---
<Base Title="Supabase - Register">
<h2>Register for Supabase Demo</h2>
<p>Already have an account? <a href="/signin">Sign In</a>.</p>
<form action="/api/auth/register" method="post">
<div class="form-field">
<label for="name">Avatar URL</label>
<input id="avatar_url" type="url" name="avatar_url" placeholder="https://example.com/profile.png" />
</div>
<div class="form-field">
<label for="name">Name</label>
<input id="name" type="text" name="name" placeholder="John Smith" />
</div>
<div class="form-field">
<label for="email">Email</label>
<input id="email" type="email" name="email" placeholder="john@example.com" />
</div>
<div class="form-field">
<label for="password">Password</label>
<input id="password" type="password" name="password" />
</div>
<button type="submit">Register</button>
</form>
<hr/>
<p>
<span>Or with</span>
</p>
<form action="/api/auth/signin" method="post">
<div class="oauth-grid">
<button value="github" name="provider" type="submit">Sign Up with GitHub</button>
<button value="gitlab" name="provider" type="submit">Sign Up with GitLab</button>
<button value="spotify" name="provider" type="submit">Sign Up with Spotify</button>
<button value="discord" name="provider" type="submit">Sign Up with Discord</button>
</div>
</form>
</Base>

32
src/pages/reset-password.astro Normal file
View file

@ -0,0 +1,32 @@
---
import Base from "@layouts/Base.astro"
---
<Base Title="Account">
<div class="content">
<form action="/api/account/reset-password" method="post">
<p>Change Password</p>
<div class="form-field">
<label style="font-size: 12px;" for="password">New Password</label>
<input id="password" type="password" name="password" oninput="CheckPasswordConfirmation()" required />
</div>
<div class="form-field">
<label style="font-size: 12px;" for="confirm_password">Confirm Password</label>
<input id="confirm_password" type="password" name="confirm_password" oninput="CheckPasswordConfirmation()" required />
</div>
<button type="submit">Update</button>
</form>
</div>
</Base>
<script is:inline>
function CheckPasswordConfirmation() {
const input = document.getElementById('confirm_password');
if (input.value !== document.getElementById('password').value) {
input.setCustomValidity('Password Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>

53
src/pages/signin.astro
View file

@ -1,28 +1,31 @@
--- ---
import SignInUp from "../layouts/SignInUp.astro"; import Base from "@layouts/Base.astro"
import { ID } from "node-appwrite";
import { SESSION_COOKIE, createAdminClient } from "../server/appwrite";
if (Astro.request.method === "POST") {
const data = await Astro.request.formData();
const email = data.get("email") as string;
const password = data.get("password") as string;
const { account } = createAdminClient();
const session = await account.createEmailPasswordSession(email, password);
Astro.cookies.set(SESSION_COOKIE, session.secret, {
path: "/",
expires: new Date(session.expire),
sameSite: "strict",
secure: true,
httpOnly: true,
});
return Astro.redirect("/account");
}
--- ---
<SignInUp Title="Demo Login" Type="SignIn"/> <Base Title="Supabase - Sign In">
<h2>Sign In</h2>
<p>Don't have an account? <a href="/register">Sign Up</a>.</p>
<form action="/api/auth/signin" method="post">
<div class="form-field">
<label for="email">Email</label>
<input id="email" type="email" name="email" />
</div>
<div class="form-field">
<label for="password">Password</label>
<input id="password" type="password" name="password" />
</div>
<button type="submit">Sign In</button>
<hr />
<p>
<span>Or with</span>
</p>
<form action="/api/auth/signin" method="post">
<div class="oauth-grid">
<button value="github" name="provider" type="submit">Sign In with GitHub</button>
<button value="gitlab" name="provider" type="submit">Sign In with GitLab</button>
<button value="spotify" name="provider" type="submit">Sign In with Spotify</button>
<button value="discord" name="provider" type="submit">Sign In with Discord</button>
</div>
</form>
</form>
</Base>