Kamran Ahmed
2 years ago
parent
bf9e767083
commit
6a0403ec25
9 changed files with 109 additions and 99 deletions
@ -0,0 +1,4 @@ |
||||
--- |
||||
--- |
||||
|
||||
<script src='./authenticator.ts'></script> |
||||
@ -0,0 +1,39 @@ |
||||
import Cookies from 'js-cookie'; |
||||
import { TOKEN_COOKIE_NAME } from '../../lib/constants'; |
||||
|
||||
/** |
||||
* Prepares the UI for the user who is logged in |
||||
*/ |
||||
function handleLoggedOut() { |
||||
document.querySelectorAll('[data-auth-required]').forEach((el) => { |
||||
el.classList.add('hidden'); |
||||
}); |
||||
|
||||
document.querySelectorAll('[data-guest-required]').forEach((el) => { |
||||
el.classList.remove('hidden'); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Prepares the UI for the user who is logged out |
||||
*/ |
||||
function handleLoggedIn() { |
||||
document.querySelectorAll('[data-auth-required]').forEach((el) => { |
||||
el.classList.remove('hidden'); |
||||
}); |
||||
|
||||
document.querySelectorAll('[data-guest-required]').forEach((el) => { |
||||
el.classList.add('hidden'); |
||||
}); |
||||
} |
||||
|
||||
function handleAuthRequired() { |
||||
const token = Cookies.get(TOKEN_COOKIE_NAME); |
||||
if (token) { |
||||
handleLoggedIn(); |
||||
} else { |
||||
handleLoggedOut(); |
||||
} |
||||
} |
||||
|
||||
handleAuthRequired(); |
||||
@ -1,32 +0,0 @@ |
||||
--- |
||||
import AccountDropdown from './AccountDropdown.astro'; |
||||
--- |
||||
|
||||
<div> |
||||
<AccountDropdown /> |
||||
|
||||
<a |
||||
id='register-button' |
||||
class='flex h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600' |
||||
href='/signup' |
||||
> |
||||
<span>Register</span> |
||||
</a> |
||||
</div> |
||||
|
||||
<script> |
||||
import Cookies from 'js-cookie'; |
||||
import { TOKEN_COOKIE_NAME } from '../../lib/constants'; |
||||
const registerButton = document.getElementById('register-button'); |
||||
const accountDropdown = document.getElementById('account-dropdown'); |
||||
|
||||
const token = Cookies.get(TOKEN_COOKIE_NAME); |
||||
|
||||
if (token) { |
||||
accountDropdown?.classList.remove('hidden'); |
||||
registerButton?.classList.add('hidden'); |
||||
} else { |
||||
registerButton?.classList.remove('hidden'); |
||||
accountDropdown?.classList.add('hidden'); |
||||
} |
||||
</script> |
||||
@ -0,0 +1,28 @@ |
||||
import Cookies from 'js-cookie'; |
||||
import { TOKEN_COOKIE_NAME } from '../../lib/constants'; |
||||
|
||||
function logout() { |
||||
Cookies.remove(TOKEN_COOKIE_NAME); |
||||
window.location.href = '/'; |
||||
} |
||||
|
||||
function bindEvents() { |
||||
document.addEventListener('click', (e) => { |
||||
const target = e.target as HTMLElement; |
||||
const dataset = { |
||||
...target.dataset, |
||||
...target.closest('button')?.dataset, |
||||
}; |
||||
|
||||
// If the user clicks on the logout button, remove the token cookie
|
||||
if (dataset.logoutButton !== undefined) { |
||||
logout(); |
||||
} else if (dataset.showMobileNav !== undefined) { |
||||
document.querySelector('[data-mobile-nav]')?.classList.remove('hidden'); |
||||
} else if (dataset.closeMobileNav !== undefined) { |
||||
document.querySelector('[data-mobile-nav]')?.classList.add('hidden'); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
bindEvents(); |
||||
Loading…
Reference in new issue