benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth

Browse Source 
Former-commit-id: fbaf3eb1cb184e2e6e7ba8ed1b641f5bfb1ee18a
This commit is contained in:
Benjamin Kyd
2022-04-07 16:15:54 +01:00
parent 68e57d5128
commit 09611cd978
14 changed files with 1775 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@@ -1,6 +1,6 @@
NODE_ENV=dev
PORT=80
PORT=8080
PORT_DEV=8080
LOG_LEVEL=0

66
client/public/auth.mjs Normal file
View File

@@ -0,0 +1,66 @@
import { NotifyNavbar } from './components/navbar.mjs';
const AUTH0CONFIG = {
domain: 'benkyd.eu.auth0.com',
clientId: 'WAOkscCNYD4FzXrm6pEQi3oNKNfa8l1F',
};
let auth0 = null;
async function CheckRedirect() {
const isAuthenticated = await auth0.isAuthenticated();
if (isAuthenticated) {
return;
}
const query = window.location.search;
if (query.includes('state=')) {
try {
// process the login state
await auth0.handleRedirectCallback();
} catch (e) {
window.alert(e.message || 'authentication error, sorry');
Signout();
}
// remove the query parameters
window.history.replaceState({}, document.title, '/');
}
}
export async function InitAuth0() {
auth0 = await window.createAuth0Client({
domain: AUTH0CONFIG.domain,
client_id: AUTH0CONFIG.clientId,
});
await CheckRedirect();
const isAuthenticated = await auth0.isAuthenticated();
if (isAuthenticated) {
const user = await auth0.getUser();
console.log(user);
NotifyNavbar('login', user);
}
}
export async function LoginSignup(context) {
const isAuthenticated = await auth0.isAuthenticated();
if (isAuthenticated) {
return;
}
const options = {
redirect_uri: window.location.origin,
response_type: 'code',
scope: 'openid profile email',
};
auth0.loginWithRedirect(options);
}
export async function Signout() {
await auth0.logout({
returnTo: window.location.origin,
});
}

3
client/public/components/basket.mjs
View File

@@ -125,6 +125,9 @@ class Basket extends Component {
<span class="popup-content-item-value">{this.state.items}</span>
</div>
</div>
<div class="popup-footer">
<button class="popup-footer-button">View Basket</button>
</div
</div>
</span>
`,

22
client/public/components/css/navbar.css
View File

@@ -158,6 +158,14 @@
z-index: 5;
}
.nav-link:hover + .sub-nav {
display: block;
}
.sub-nav:hover {
display: block;
}
/* Make sure the thing doesnt move */
/* .nav-menu {
transform: translatey(-100%);
@@ -181,7 +189,7 @@
transform: translatey(-100%);
text-align: center;
z-index: 100;
}
}
.nav-menu .menu-item a {
font-size: 1.5em;
@@ -191,7 +199,7 @@
.menu-active .nav-menu {
transform: translatey(0%);
opacity: 1;
}
}
.sub-nav {
position: relative;
@@ -200,15 +208,7 @@
display: none;
background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box;
}
}
.nav-link:hover + .sub-nav {
display: block;
}
.sub-nav:hover {
display: block;
}
}
/* search bar */

54
client/public/components/navbar.mjs
View File

@@ -1,10 +1,25 @@
import { RegisterComponent, Component, SideLoad } from './components.mjs';
import { LoginSignup, Signout } from '../auth.mjs';
// due to peculiarities in asynchronus loading of components,
// we need to have this remember the state of the logged in user
// so that we can display the correct navbar
let navbarCallback = null;
export function NotifyNavbar(type, user) {
if (navbarCallback && type === 'login') {
navbarCallback.OnLogin(user);
}
if (navbarCallback && type === 'logout') {
navbarCallback.OnLogout();
}
}
class NavBar extends Component {
static __IDENTIFY() { return 'navbar'; }
constructor() {
super(NavBar);
navbarCallback = this;
}
Render() {
@@ -14,7 +29,7 @@ class NavBar extends Component {
};
}
OnRender() {
SetupHamburger() {
const menuToggler = document.querySelector('navbar-component').shadowRoot.querySelector('#menu-toggler');
const navMenu = document.querySelector('navbar-component').shadowRoot.querySelector('.navbar');
@@ -22,9 +37,42 @@ class NavBar extends Component {
menuToggler.classList.toggle('menu-active');
navMenu.classList.toggle('menu-active');
});
}
// set up basket
const basketToggler = document.querySelector('#basket-count');
OnLogin(user) {
const account = this.root.querySelector('.account-item');
// doing this with proper dom manipulation wasn't working
account.innerHTML = `
<a class="nav-link" href="#">${user.name}▾</a>
<ul class="sub-nav" >
<li><a class="sub-nav-link" href="#">My Account</a></li>
<li><a class="sub-nav-link logout-button" href="#">Log Out</a></li>
</ul>
`;
const logoutButton = account.querySelector('.logout-button');
logoutButton.addEventListener('click', () => {
Signout();
});
}
OnLogout() {
const account = this.root.querySelector('.account-item');
account.innerHTML = '<a class="account-button nav-link" href="#">My Account</a>';
}
OnRender() {
this.SetupHamburger();
// setup log in button
const loginButton = this.root.querySelector('.account-button');
loginButton.addEventListener('click', () => {
LoginSignup(this);
// remove event listener and then change the
// text to the users name and a dropdown that gives
// them the option to log out
});
}
}

89
client/public/components/storefront.mjs
View File

@@ -10,6 +10,25 @@ class StoreFront extends Component {
Render() {
return {
template: `
<div class="main-carousel">
<div class="carousel-cell">
<img class="carousel-image" src="/res/lego-image1.jpg" alt="">
<div class="carousel-caption">
<h1>Welcome to LegoLog!</h1>
<button>Shop LEGO® Now</button>
</div>
</div>
<div class="carousel-cell">
<img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="carousel-cell">
<img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="carousel-cell">
<img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
</div>
<product-list-component id="featured"
title="Featured Lego Sets"
getroute="/api/sets/featured"
@@ -17,6 +36,64 @@ class StoreFront extends Component {
</product-list-component>
`,
style: `
@import url('https://unpkg.com/flickity@2/dist/flickity.min.css');
/* enable Flickity by default */
.main-carousel:after {
content: 'flickity';
display: none; /* hide :after */
}
.carousel-image {
object-fit: none;
/* center image */
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
}
.carousel-cell {
height: 533px;
width: 800px;
margin-right : 10px;
}
.carousel-caption {
position: absolute;
right: 0;
left: 0;
bottom: 0;
text-align: center;
padding: 10px;
}
.carousel-caption h1 {
font-size: 2em;
color: #fff;
text-shadow: 0 0 5px #000;
font-weight: bold;
}
.carousel-caption p {
}
.carousel-caption button {
background-color: #E55744;
color: #fff;
text-shadow: 0 0 3px #000;
border: none;
padding: 10px;
font-size: 2em;
font-weight: bold;
border-radius: 5px;
}
.carousel-caption button:hover {
background-color: #D7331D;
cursor: pointer;
}
product-list-component {
z-index: 0;
display: block;
@@ -26,7 +103,17 @@ class StoreFront extends Component {
}
OnRender() {
// setup flickity
const carousel = this.root.querySelector('.main-carousel');
this.flkty = new window.Flickity(carousel, {
cellAlign: 'center',
contain: true,
wrapAround: true,
watchCSS: true,
autoPlay: true,
prevNextButtons: true,
pageDots: true,
});
}
}

2
client/public/components/templates/navbar.html
View File

@@ -29,7 +29,7 @@
<li><a class="sub-nav-link" href="#">Bricks by price</a></li>
</ul>
</li>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
<li class="account-item menu-item"><a class="account-button nav-link" href="#">My Account</a>
<li class="menu-item stock-mode" style="display: none;">
STOCK MODE
<label class="switch">

10
client/public/index.html
View File

@@ -4,11 +4,21 @@
<meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="global.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<!-- Auth0 - a library for authentication -->
<script type="module" src="https://cdn.auth0.com/js/auth0-spa-js/1.13/auth0-spa-js.production.js"></script>
<!-- Flickity - a library to make carousells easier to implement -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<!-- Components used on this page - they must be included to work -->
<script type="module" src="/components/components.mjs"></script>
<script type="module" src="/components/navbar.mjs"></script>
<script type="module" src="/components/search.mjs"></script>

5
client/public/index.mjs
View File

@@ -1,7 +1,10 @@
// import { RendererPreInit, BrickRenderer } from './brick-renderer/index.mjs';
import { AddProductToBasket, RemoveProductFromBasket } from '/components/basket.mjs';
import { InitAuth0 } from './auth.mjs';
function main() {
InitAuth0();
// await RendererPreInit();
// const canvas = document.querySelectorAll('#webglviewer');

4
client/public/product/index.html
View File

@@ -9,6 +9,10 @@
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<!-- Auth0 - a library for authentication -->
<script src="https://cdn.auth0.com/js/auth0-spa-js/1.13/auth0-spa-js.production.js"></script>
<!-- Components used on this page - they must be included to work -->
<script type="module" src="/components/components.mjs"></script>
<script type="module" src="/components/navbar.mjs"></script>
<script type="module" src="/components/search.mjs"></script>

BIN
client/public/res/lego-image1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1022 KiB

1533
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -26,15 +26,18 @@
}
},
"dependencies": {
"@auth0/auth0-spa-js": "^1.21.0",
"axios": "^0.25.0",
"cli-color": "^2.0.1",
"dotenv": "^10.0.0",
"express": "^4.17.2",
"install": "^0.13.0",
"jest": "^27.4.5",
"jsdoc": "^3.6.10",
"md5": "^2.3.0",
"moment": "^2.29.1",
"node-fetch": "^2.6.7",
"npm": "^8.6.0",
"pg": "^8.7.3",
"pg-native": "^3.0.0"
},

1
src/routes/api.js
View File

@@ -20,7 +20,6 @@ function Init() {
Server.App.get('/api/cdn/:id/');
Server.App.put('/api/auth/login/');
Server.App.post('/api/auth/signup/');
Server.App.get('/api/auth/orders/');
Server.App.get('/api/auth/order/:id/');