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

update

Browse source
This commit is contained in:
Korbs 2024-07-17 18:34:04 -04:00
parent b354fafeaf
commit 11856a0f04
2 changed files with 4 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -1,6 +1,8 @@
## Todo List
- [ ] Add loading feedback with ViewTransition API
- [ ] Revamp Design and Layout
- [x] Add loading feedback with ViewTransition API
- [x] Revamp Design and Layout
- [ ] Stay on same page when making API request
- [ ] Speed up loading time (why so slow? idk)
## Setting Up Supabase
### Selfhosting

146
src/pages/account/old.astro
View file

@ -1,146 +0,0 @@
---
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)
---
<Base Title="Account">
<!-- Dummy Sidebar -->
<div>
<span class="dummies" style="width:80%;"></span>
<span class="dummies" style="width:80%;"></span>
<span class="dummies" style="width:80%;"></span>
<span class="dummies" style="width:80%;"></span>
<br/>
<br/>
<br/>
<span class="dummies" style="width:80%;"></span>
</div>
<!-- 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/preferences/beta-off"><button type="submit">Leave Beta</button></form>
:
<form method="post" action="/api/account/preferences/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>
<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>
<style is:inline>
.content {
display: grid !important;
grid-template-columns: 160px auto !important;
}
</style>