update
This commit is contained in:
parent
b354fafeaf
commit
11856a0f04
2 changed files with 4 additions and 148 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue