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 15:39:49 -04:00
parent ef00b108f1
commit b354fafeaf
18 changed files with 586 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
astro.config.mjs
View file

@ -8,5 +8,10 @@ export default defineConfig({
}),
security: {
checkOrigin: true,
},
vite: {
server: {
hmr: false
}
}
})

20
src/components/Header.astro
View file

@ -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
<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>
}
{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>

21
src/components/QuickForm.astro Normal file
View file

@ -0,0 +1,21 @@
---
const {
Action,
Method,
Label,
Name,
Type,
Value,
Button
} = Astro.props
---
<form action={Action} method={Method} class="quick-input-form">
<div>
<label>{Label}</label>
<div class="qif-input-w-button">
<input id={Name} type={Type} name={Name} value={Value}/>
<button type="submit">{Button}</button>
</div>
</div>
</form>

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

@ -0,0 +1,9 @@
---
const {
Action,
Method,
Button
} = Astro.props
---
<form action={Action} method={Method} class="quick-input-button"><button type="submit">{Button}</button></form>

115
src/layouts/Settings.astro Normal file
View file

@ -0,0 +1,115 @@
---
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 transition:animate="fade" class="content">
<div class="settings-panel">
<div class="sp-sidebar">
<a id="sb-s-account" href="/account">Account</a>
<a id="sb-s-preferences" href="/account/preferences">Preferences</a>
<a id="sb-s-resetpassword" href="#">Reset Password</a>
<hr/>
<a id="sb-s-beta" href="/account/beta">Beta</a>
<a id="sb-s-advance" href="#">Advance</a>
</div>
<div class="sp-content">
<slot/>
</div>
</div>
</div>
</body>
</html>
<style lang="scss" is:global>
.settings-panel {
display: grid;
grid-template-columns: 160px auto;
gap: 24px;
.sp-sidebar {
display: flex;
flex-direction: column;
gap: 6px;
a {
background: transparent;
color: white;
border: 1px transparent solid;
transition: 0.3s border-color;
border-radius: 4px;
padding: 6px 12px;
text-decoration: none;
font-size: 14px;
&:hover {
border-color: white;
transition: 1s border-color;
}
}
}
.account-info-cet {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
* {
margin: 0px;
}
div {
display: flex;
align-items: center;
}
img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 3rem;
}
}
}
.quick-input-form {
display: flex;
flex-direction: column;
margin-bottom: 24px;
label {
display: block;
margin-bottom: 12px;
}
input {
width: 100%;
border: 1px rgb(49, 49, 49) solid;
background: black;
color: white;
padding: 6px 12px;
border-radius: 4px 0px 0px 4px;
&:hover {
border-color: rgb(145, 145, 145);
}
&:focus {
border-color: white;
outline: none;
}
}
.qif-input-w-button {
display: flex;
width: 100%;
button {
color: white;
background: rgb(49, 49, 49);
border-radius: 0px 4px 4px 0px;
&:hover {
background: rgb(145, 145, 145);
}
&:focus {
color: black;
background: white;
}
}
}
}
</style>

2
src/middleware/index.ts
View file

@ -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()

57
src/pages/account/beta.astro Normal file
View file

@ -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
---
<Settings Title="Account">
<h2>Beta</h2>
{user_beta ?
<QuickFormButton
Action="/api/account/preference/beta-off"
Method="post"
Button="Leave Beta Program"
/>
:
<QuickFormButton
Action="/api/account/preference/beta-on"
Method="post"
Button="Join Beta Program"
/>
}
</Settings>
<style is:global>
#sb-s-beta {
background: white;
color: black;
}
</style>
<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>

165
src/pages/account/index.astro
View file

@ -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)
---
<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>
<Settings Title="Account">
<div class="account-info-cet">
<div>
<img src={avatarUrl}/>
<div style="margin-left: 12px; display: flex;flex-direction: column;text-align: left;float: left;align-items: baseline;">
<h2>{displayName}</h2>
<p>{email}</p>
</div>
</div>
<div>
<p>{user_plan}</p>
</div>
</div>
<QuickForm
Action="/api/account/update-avatar"
Method="post"
Label="Avatar"
Name="avatar"
Type="url"
Value={avatarUrl}
Button="Update"
/>
<QuickForm
Action="/api/account/update-name"
Method="post"
Label="Display Name"
Name="name"
Type="text"
Value={displayName}
Button="Update"
/>
<QuickForm
Action="/api/account/update-email"
Method="post"
Label="Email"
Name="email"
Type="email"
Value={email}
Button="Update"
/>
</Settings>
<!-- 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>
<style is:global>
#sb-s-account {
background: white;
color: black;
}
</style>
<script is:inline>
function CheckPasswordConfirmation() {
@ -136,11 +76,4 @@ function CheckPasswordConfirmation() {
input.setCustomValidity('');
}
}
</script>
<style is:inline>
.content {
display: grid !important;
grid-template-columns: 160px auto !important;
}
</style>
</script>

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

@ -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)
---
<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>

74
src/pages/account/preferences.astro Normal file
View file

@ -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
---
<Settings Title="Account">
<h2>Preferences</h2>
<p>Theme</p>
<p style="font-size: 14px; color: gray;">Current Theme: {user_theme}</p>
<QuickFormButton
Action="/api/account/preference/theme/light"
Method="post"
Button="Light"
/>
<QuickFormButton
Action="/api/account/preference/theme/dark"
Method="post"
Button="Dark"
/>
<p>Color Scheme</p>
<p style="font-size: 14px; color: gray;">Current Scheme: {user_color_scheme}</p>
<QuickFormButton
Action="/api/account/preference/color/default"
Method="post"
Button="Default"
/>
<QuickFormButton
Action="/api/account/preference/color/red"
Method="post"
Button="Red"
/>
<QuickFormButton
Action="/api/account/preference/color/green"
Method="post"
Button="Green"
/>
</Settings>
<style is:global>
#sb-s-preferences {
background: white;
color: black;
}
</style>
<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>

2
src/pages/api/account/preference/beta-off.ts
View file

@ -14,5 +14,5 @@ export const POST: APIRoute = async ({ redirect }) => {
return new Response(error.message, { status: 500 })
}
return redirect("/account")
return redirect("/account/beta")
}

2
src/pages/api/account/preference/beta-on.ts
View file

@ -14,5 +14,5 @@ export const POST: APIRoute = async ({ redirect }) => {
return new Response(error.message, { status: 500 })
}
return redirect("/account")
return redirect("/account/beta")
}

29
src/pages/api/auth/anon.ts Normal file
View file

@ -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")
}

3
src/pages/api/auth/signout.ts
View file

@ -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")
}

15
src/pages/index.astro
View file

@ -46,10 +46,21 @@ console.log(subs)
<hr/>
<h3>Channels</h3>
{channels.map((channel) =>
<a href={'/creator/' + channel.id}>{channel.creator}</a>
<a class="creator-list" 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>
</Base>
<style lang="scss">
.creator-list {
background: #464646;
color: white;
text-decoration: none;
padding: 6px 12px;
border-radius: 6px;
margin-right: 6px;
}
</style>

23
src/pages/register.astro
View file

@ -5,7 +5,7 @@ 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">
<form action="/api/auth/register" method="post" onsubmit="LoginTriggered()">
<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" />
@ -22,18 +22,25 @@ import Base from "@layouts/Base.astro"
<label for="password">Password</label>
<input id="password" type="password" name="password" />
</div>
<button type="submit">Register</button>
<button onclick="LoginTriggered()" style="float: right;" type="submit">Register</button>
</form>
<hr/>
<p>
<span>Or with</span>
</p>
<form action="/api/auth/anon" method="get"><button style="border-color: gray;" type="submit">Create Anomyous Session</button></form>
<br/>
<br/>
<center><span>Or with</span></center>
<br/>
<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>
<script is:inline>
function LoginTriggered() {
document.querySelector("body > div > form > button").innerText = 'Loading, please wait...'
document.querySelector(".pri-submit").style.filter = "brightness(0.5)"
document.querySelector(".pri-submit").style.cursor = "wait"
}
</script>

21
src/pages/signin.astro
View file

@ -5,7 +5,7 @@ import Base from "@layouts/Base.astro"
<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">
<form action="/api/auth/signin" method="post" onsubmit="LoginTriggered()">
<div class="form-field">
<label for="email">Email</label>
<input id="email" type="email" name="email" />
@ -14,11 +14,12 @@ import Base from "@layouts/Base.astro"
<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>
<button onclick="LoginTriggered()" class="pri-submit" style="float: right;" type="submit">Sign In</button>
<br/>
<br/>
<br/>
<center><span>Or with</span></center>
<br/>
<form action="/api/auth/signin" method="post">
<div class="oauth-grid">
<button value="github" name="provider" type="submit">Sign In with GitHub</button>
@ -29,3 +30,11 @@ import Base from "@layouts/Base.astro"
</form>
</form>
</Base>
<script is:inline>
function LoginTriggered() {
document.querySelector("body > div > form > button").innerText = 'Loading, please wait...'
document.querySelector(".pri-submit").style.filter = "brightness(0.5)"
document.querySelector(".pri-submit").style.cursor = "wait"
}
</script>

50
src/styles/root.scss
View file

@ -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)