Inital commit

add alpine, auth0 and navigo to a webpack project
James-Burgess · Oct 1, 2021 · 3cdf91d · 3cdf91d
1 parent 7470892
commit 3cdf91d
Show file tree

Hide file tree

Showing 16 changed files with 4,913 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+.idea
+*.iml
+out
+gen
+
+
+./node_modules/**/*
+node_modules/
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Mountain</title>
+</head>
+<body>
+<script src="/main.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "Mountain",
+  "version": "1.0.0",
+  "description": "Alpinejs project",
+  "main": "index.js",
+  "author": "james-burgess",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack",
+    "serve": "webpack serve --mode=development"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.8",
+    "@babel/preset-env": "^7.14.8",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^6.2.0",
+    "html-loader": "^2.1.2",
+    "sass": "^1.36.0",
+    "sass-loader": "^12.1.0",
+    "webpack": "^5.46.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "@auth0/auth0-spa-js": "^1.16.1",
+    "alpinejs": "^3.2.2",
+    "bulma": "^0.9.3",
+    "lodash": "^4.17.21",
+    "navigo": "^8.11.1",
+    "style-loader": "^3.2.1"
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+import Alpine from 'alpinejs'
+import router from './utils/router'
+import './styles/main.scss';
+
+window.Alpine = Alpine
+Alpine.start();
+router.resolve();
diff --git a/src/pages/about/about.html b/src/pages/about/about.html
@@ -0,0 +1,35 @@
+<aside class="menu">
+    <p class="menu-label">
+        General
+    </p>
+    <ul class="menu-list">
+
+        <li><a href="/" data-navigo>Dashboard</a></li>
+        <li><a>Customers</a></li>
+    </ul>
+    <p class="menu-label">
+        Administration
+    </p>
+    <ul class="menu-list">
+        <li><a>Team Settings</a></li>
+        <li>
+            <a class="is-active">Manage Your Team</a>
+            <ul>
+                <li><a>Members</a></li>
+                <li><a>Plugins</a></li>
+                <li><a>Add a member</a></li>
+            </ul>
+        </li>
+        <li><a>Invitations</a></li>
+        <li><a>Cloud Storage Environment Settings</a></li>
+        <li><a>Authentication</a></li>
+    </ul>
+    <p class="menu-label">
+        Transactions
+    </p>
+    <ul class="menu-list">
+        <li><a>Payments</a></li>
+        <li><a>Transfers</a></li>
+        <li><a>Balance</a></li>
+    </ul>
+</aside>
diff --git a/src/pages/about/index.js b/src/pages/about/index.js
@@ -0,0 +1,6 @@
+import render from '../../utils/render'
+import page from './about.html'
+
+export default function aboutPage() {
+    return render(page)
+}
diff --git a/src/pages/home/index.html b/src/pages/home/index.html
@@ -0,0 +1,13 @@
+<section x-data="user" x-bind:class="authenticated ? 'hero is-success' : 'hero is-danger'">
+    <div class="hero-body">
+        <p class="title" x-text="authenticated ? 'You are authenticated' : 'You are not logged into the website'">
+        </p>
+        <a x-bind:href="authenticated ? '/about' : '/login'" data-navigo>
+        <button x-bind:class="authenticated ? 'is-success' : 'is-danger'" class="button is-light" x-text="authenticated ? 'Dashboard' : 'Login'">Dashboard</button>
+        </a>
+
+        <button x-show="authenticated" class="button is-light" x-on:click="logout">
+            Logout
+        </button>
+    </div>
+</section>
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -0,0 +1,8 @@
+import render from "../../utils/render";
+import user from "../../utils/authentication"
+import page from './index.html'
+
+export default function homePage() {
+    Alpine.data('user', user)
+    return render(page)
+}
diff --git a/src/pages/login/index.html b/src/pages/login/index.html
@@ -0,0 +1,8 @@
+<section class="hero is-danger">
+    <div class="hero-body">
+        <p class="title">
+            Log in here
+        </p>
+        <button class="button is-danger is-light" x-data="user" x-on:click="login">Login</button>
+    </div>
+</section>
diff --git a/src/pages/login/index.js b/src/pages/login/index.js
@@ -0,0 +1,9 @@
+import render from "../../utils/render";
+import user from '../../utils/authentication'
+import page from './index.html'
+
+export default function loginPage() {
+    Alpine.data('user', user)
+
+    return render(page)
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -0,0 +1,24 @@
+@charset "utf-8";
+@import "./node_modules/bulma/bulma.sass";
+
+
+@media(max-width: 500px) {
+  .reverse-columns {
+    flex-direction: column-reverse;
+    display: flex;
+  }
+}
+
+.titled {
+  font-family: 'Merriweather', serif !important;
+  font-size: 58px !important;
+  font-weight: 400 !important;
+  line-height: 64px !important;
+}
+
+.subtitled {
+  font-family: 'Merriweather', serif !important;
+  font-size: 22px !important;
+  font-weight: 400 !important;
+  line-height: 36px !important;
+}
diff --git a/src/utils/authentication.js b/src/utils/authentication.js
@@ -0,0 +1,30 @@
+import router from './router'
+import { Auth0Client } from '@auth0/auth0-spa-js';
+
+export const auth0 = new Auth0Client({
+    domain: '<auth0 domain>',
+    client_id: '<auth0 client id>'
+});
+
+const loginWithAuth = () => {
+    auth0.loginWithRedirect({
+        redirect_uri: window.location.origin + '/login'
+    }).then(token => {
+        auth0.getUser().then(user => {
+            console.log(user);
+        });
+    });
+}
+
+export default function user() {
+    return {
+        authenticated: window.localStorage.getItem('jwt_token'),
+        login() {
+            loginWithAuth()
+        },
+        logout() {
+            window.localStorage.removeItem('jwt_token')
+            router.resolve('/login')
+        }
+    }
+}
diff --git a/src/utils/render.js b/src/utils/render.js
@@ -0,0 +1,3 @@
+export default function render(page) {
+    document.body.innerHTML = page
+}
diff --git a/src/utils/router.js b/src/utils/router.js
@@ -0,0 +1,41 @@
+import Navigo from "navigo";
+import render from "./render";
+import homePage from "../pages/home";
+import aboutPage from "../pages/about";
+import loginPage from "../pages/login";
+const router = new Navigo('/');
+
+import { auth0 } from "./authentication";
+
+const before = async (done, match) => {
+    const authenticated = window.localStorage.getItem('jwt_token');
+    if (authenticated !== null){
+        if (match.url === 'login') {
+            console.log(authenticated)
+            router.navigate('')
+        }
+    }else{
+        if (match.url === 'login' && match.params){
+            console.log(decodeURI(window.location.href))
+            await auth0.handleRedirectCallback();
+            window.localStorage.setItem('jwt_token', await auth0.getTokenSilently())
+            window.localStorage.setItem('user', await auth0.getUser())
+            router.navigate('')
+        }
+    }
+    done()
+}
+
+
+router
+    .hooks({
+        before
+    })
+    .on('', homePage)
+    .on('login', loginPage)
+    .on('about', aboutPage)
+    .notFound(() => {
+        render("Page Not found");
+    });
+
+export default router
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,32 @@
+var path = require('path');
+
+module.exports = {
+    experiments: {
+        topLevelAwait: true,
+    },
+
+    devServer: {
+        contentBase: path.join(__dirname, 'dist'),
+        compress: true,
+        historyApiFallback: {
+            index: 'index.html'
+        },
+        port: 8080,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.html$/i,
+                loader: 'html-loader',
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    "style-loader",
+                    "css-loader",
+                    "sass-loader",
+                ],
+            },
+        ],
+    }
+};