dtomlinson/web-dev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updating latest tutorials

Browse Source
This commit is contained in:
dtomlinson
2020-03-02 01:04:02 +00:00
parent ca42763a44
commit a0b0eedc86
13 changed files with 594 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tutorials/events-app/auth_config.json Normal file
View File

@@ -0,0 +1,4 @@
{
"domain": "dev-xu-97g3w.eu.auth0.com",
"clientId": "W0Iim8av0OOJXQMfuPiOAjA3fx3ESQoi"
}

98
tutorials/events-app/flow.md Normal file
View File

@@ -0,0 +1,98 @@
# Flow + Structure of Vue project
- If components are to be imported elsewhere they should `export default` and set their name to be the name of the html element you want.
- If components import an element they should `export default` and set a `components` with an array of the components being used in the html.
```
import Nav from './components/partials/Nav.vue';
export default {
name: 'App',
components: {
Nav
}
}
```
## Main Page
### `App.vue`
This is the main entrypoint into the website.
- `template` should inject a `<div id="app">`
- insert the `<Nav />` component
## Navigation
- Create a `VueRouter` in `./router/index.js`
- Create a `routes` array which takes a dict of each route
- Route should set three things:
- A `path` - this sets the URL path.
- A `name` - this is the name to appear in the navbar.
- A `component` - this should import the vue component
Example:
```
{
path: '/event/:id',
name: 'eventSingle',
component: () => import ('../views/EventSingle.vue')
}
```
### `./router/index.js`
- Import all components
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/event/:id',
name: 'eventSingle',
component: () => import ('../views/EventSingle.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
To do - how to use the cards:
EventCard
- Takes a prop of the data you need
- Creates a card for a single item
- Links to a EventSingle using a route parameter
EventSingle
- Hits an API
- Uses a route parameter to determine which event to show
- Displays a whole page for a single event
EventsList
- Hits an API for its data
- Uses a `v-for` to render a EventCard
- Uses a router-link to link to a EventSingle

82
tutorials/events-app/notes.md Normal file
View File

@@ -0,0 +1,82 @@
setting a router param
{
path: '/event/:id',
name: 'eventSingle',
component: () => import ('../views/EventSingle.vue')
}
reading a router param
created() {
const ID = Number(this.$route.params.id);
const event = this.events.find(event => event.id === ID);
this.event = event;
}
create something from this router param (Using it)
see above
find in a dict and the syntax of => ===
Use find as a method on an array.
find(something => something.id === ID)
use arrow notation here in order to use the param you define to be used.
the bit before the arrow notation is a param you want to find (name is arbitrary it will resolve to an object)
the bit after the arrow allows you to use the name you want to be iterated/used. this must resolve to a boolean (i.e === as a coniditional)
think of the arrow notation as a "where" clause (find something where something===True/False)
setting a param based off this
in a hook you can set the value of your find and bind it to something
this.event = event;
make sure to create it in data too
using class bindings (setting a class of an element dynamically)
link to https://vuejs.org/v2/guide/class-and-style.html
v-binds (v-bind: and just :)
using v-for, what it does (renders the thing being v-for'd for each thing in it)
how to set an html attribute from this (using v-bind:attribute e.g v-bind:src)
<div class="event-images columns is-multiline has-text-centered">
<div v-for="image in event.images" :key="image.id" class="column is-one-third">
<img :src="image" :alt="event.name">
</div>
</div>
Vue lifecycle (useful for seeing all hooks available)
https://cdn.auth0.com/blog/vue-meetup/vue-lifecycle.png
doing something on a click
in a `<a>` you can use `@click="login"` to do a method
You should define this method in the script directive
Conditional (ternary) operator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
The "?" and ":" syntax is often used as a shortcut to a if block
When using this you should specify 3 arguments:
- the condition to check
- what should happen if it's true (?)
- what should happen if it's false (:)
onRedirectCallback: appState => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
}

1
tutorials/events-app/package.json
View File

@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@auth0/auth0-spa-js": "^1.6.4",
"@beyonk/google-fonts-webpack-plugin": "^1.2.3",
"axios": "^0.19.2",
"bulma": "^0.8.0",

127
tutorials/events-app/src/auth/index.js Normal file
View File

@@ -0,0 +1,127 @@
import Vue from "vue";
import createAuth0Client from "@auth0/auth0-spa-js";
/** Define a default action to perform after authentication */
const DEFAULT_REDIRECT_CALLBACK = () =>
window.history.replaceState({}, document.title, window.location.pathname);
let instance;
/** Returns the current instance of the SDK */
export const getInstance = () => instance;
/** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */
export const useAuth0 = ({
onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
redirectUri = window.location.origin,
...options
}) => {
if (instance) return instance;
// The 'instance' is simply a Vue object
instance = new Vue({
data() {
return {
loading: true,
isAuthenticated: false,
user: {},
auth0Client: null,
popupOpen: false,
error: null
};
},
methods: {
/** Authenticates the user using a popup window */
async loginWithPopup(o) {
this.popupOpen = true;
try {
await this.auth0Client.loginWithPopup(o);
} catch (e) {
// eslint-disable-next-line
console.error(e);
} finally {
this.popupOpen = false;
}
this.user = await this.auth0Client.getUser();
this.isAuthenticated = true;
},
/** Handles the callback when logging in using a redirect */
async handleRedirectCallback() {
this.loading = true;
try {
await this.auth0Client.handleRedirectCallback();
this.user = await this.auth0Client.getUser();
this.isAuthenticated = true;
} catch (e) {
this.error = e;
} finally {
this.loading = false;
}
},
/** Authenticates the user using the redirect method */
loginWithRedirect(o) {
return this.auth0Client.loginWithRedirect(o);
},
/** Returns all the claims present in the ID token */
getIdTokenClaims(o) {
return this.auth0Client.getIdTokenClaims(o);
},
/** Returns the access token. If the token is invalid or missing, a new one is retrieved */
getTokenSilently(o) {
return this.auth0Client.getTokenSilently(o);
},
/** Gets the access token using a popup window */
getTokenWithPopup(o) {
return this.auth0Client.getTokenWithPopup(o);
},
/** Logs the user out and removes their session on the authorization server */
logout(o) {
return this.auth0Client.logout(o);
}
},
/** Use this lifecycle method to instantiate the SDK client */
async created() {
// Create a new instance of the SDK client using members of the given options object
this.auth0Client = await createAuth0Client({
domain: options.domain,
client_id: options.clientId,
audience: options.audience,
redirect_uri: redirectUri
});
try {
// If the user is returning to the app after authentication...
if (
window.location.search.includes("code=") &&
window.location.search.includes("state=")
) {
// handle the redirect and retrieve tokens
const { appState } = await this.auth0Client.handleRedirectCallback();
// Notify subscribers that the redirect callback has happened, passing the appState
// (useful for retrieving any pre-authentication state)
onRedirectCallback(appState);
}
} catch (e) {
this.error = e;
} finally {
// Initialize our internal authentication state
this.isAuthenticated = await this.auth0Client.isAuthenticated();
this.user = await this.auth0Client.getUser();
this.loading = false;
}
}
});
return instance;
};
// Create a simple Vue plugin to expose the wrapper object throughout the application
export const Auth0Plugin = {
install(Vue, options) {
Vue.prototype.$auth = useAuth0(options);
}
};

63
tutorials/events-app/src/components/EventCard.vue
View File

@@ -0,0 +1,63 @@
<template>
<div class="event-card">
<div class="card">
<div class="card-content">
<h2 class="is-size-4 has-text-weight-bold">{{ event.name }}</h2>
<small class="event-date">{{ event.date }}</small>
<span>{{ event.location }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'EventCard',
props: ['event'],
data() {
return {
};
},
};
</script>
<style lang="scss" scoped>
.card {
background-image: url('https://placekitten.com/400/400');
height: 200px;
background-position: center;
background-size: cover;
text-align: center;
}
.card-content {
padding-top: 50px;
position: absolute;
color: #FFF;
background-color: rgba(0, 0, 0, 0.35);
top: 0;
padding: 10px;
height: 200px;
width: 100%;
span {
font-size: 18px;
text-align: center;
width: 100%;
position: absolute;
bottom: 10px;
right: 0;
}
h2 {
margin-top: 10px;
}
}
.event-date {
background-color: #151515;
color: #FFF;
font-size: .75em;
padding: 2px 10px;
position: absolute;
top: 0;
right: 0;
}
</style>

40
tutorials/events-app/src/components/EventsList.vue
View File

@@ -4,8 +4,10 @@
Check out our incoming events
</h2>
<div class="columns is-multiline">
<div class="column is-one-quarter">
<EventCard />
<div v-for="event in events" :key="event.id" class="column is-one-quarter">
<router-link :to="'/event/' + event.id">
<EventCard :event="event"></EventCard>
</router-link>
</div>
</div>
</div>
@@ -19,9 +21,39 @@ export default {
},
data() {
return {
};
event: {},
events: [{
id: 1,
name: 'Charity Ball',
category: 'Fundraising',
description: 'Spend an elegant night of dinner and dancing with us as we raise money for our new rescue farm.',
featuredImage: 'https://placekitten.com/500/500',
images: [
'https://placekitten.com/500/500',
'https://placekitten.com/500/500',
'https://placekitten.com/500/500',
],
location: '1234 Fancy Ave',
date: '12-25-2019',
time: '11:30'
},
};
{
id: 2,
name: 'Rescue Center Goods Drive',
category: 'Adoptions',
description: 'Come to our donation drive to help us replenish our stock of pet food, toys, bedding, etc. We will have live bands, games, food trucks, and much more.',
featuredImage: 'https://placekitten.com/500/500',
images: [
'https://placekitten.com/500/500'
],
location: '1234 Dog Alley',
date: '11-21-2019',
time: '12:00'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.events {

22
tutorials/events-app/src/components/partials/Nav.vue
View File

@@ -19,9 +19,15 @@
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-dark">
<strong>Sign In</strong>
</a>
<!-- Check that the SDK client is not currently loading before accessing is methods -->
<div v-if="!$auth.loading">
<!-- show login when not authenticated -->
<a v-if="!$auth.isAuthenticated" @click="login" class="button is-dark"><strong>Sign
in</strong></a>
<!-- show logout when authenticated -->
<a v-if="$auth.isAuthenticated" @click="logout" class="button is-dark"><strong>Log
out</strong></a>
</div>
</div>
</div>
<div class="navbar-item" id="live-time" v-if="timeReady">
@@ -45,6 +51,16 @@ export default {
getTime() {
// console.log('Getting current time');
return moment().format('HH:mm:ss')
},
// Log the user in
login() {
this.$auth.loginWithRedirect();
},
// Log the user out
logout() {
this.$auth.logout({
returnTo: window.location.origin
});
}
},
mounted() {

19
tutorials/events-app/src/main.js
View File

@@ -6,6 +6,25 @@ import VueAxios from 'vue-axios'
import './../node_modules/bulma/css/bulma.css'
// import moment from './../node_modules/moment/moment.js'
// Import the Auth0 configuration
import { domain, clientId } from "../auth_config.json";
// Import the plugin here
import { Auth0Plugin } from "./auth";
// Install the authentication plugin here
Vue.use(Auth0Plugin, {
domain,
clientId,
onRedirectCallback: appState => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
}
});
Vue.config.productionTip = false
// Object.defineProperty(Vue.prototype, '$moment', { value: moment });

5
tutorials/events-app/src/router/index.js
View File

@@ -17,6 +17,11 @@ const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/event/:id',
name: 'eventSingle',
component: () => import ('../views/EventSingle.vue')
}
]

92
tutorials/events-app/src/views/EventSingle.vue
View File

@@ -0,0 +1,92 @@
<template>
<div class="event-single">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
{{ event.name }}
</h1>
<h2 class="subtitle">
<strong>Date:</strong> {{ event.date }}
<br>
<strong>Time:</strong> {{ event.time }}
</h2>
</div>
</div>
</section>
<section class="event-content">
<div class="container">
<p class="is-size-4 description">{{ event.description }}</p>
<p class="is-size-4">Location: {{ event.location }}</p>
<p class="is-size-4">Category: {{ event.category }}</p>
<div class="event-images columns is-multiline has-text-centered"></div>
<div class="event-images columns is-multiline has-text-centered">
<div v-for="image in event.images" :key="image.id" class="column is-one-third">
<img :src="image" :alt="event.name">
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: 'EventSingle',
data() {
return {
events: [{
id: 1,
name: 'Charity Ball',
category: 'Fundraising',
description: 'Spend an elegant night of dinner and dancing with us as we raise money for our new rescue farm.',
featuredImage: 'https://placekitten.com/500/500',
images: [
'https://placekitten.com/500/500',
'https://placekitten.com/500/500',
'https://placekitten.com/500/500',
],
location: '1234 Fancy Ave',
date: '12-25-2019',
time: '11:30'
},
{
id: 2,
name: 'Rescue Center Goods Drive',
category: 'Adoptions',
description: 'Come to our donation drive to help us replenish our stock of pet food, toys, bedding, etc. We will have live bands, games, food trucks, and much more.',
featuredImage: 'https://placekitten.com/500/500',
images: [
'https://placekitten.com/500/500'
],
location: '1234 Dog Alley',
date: '11-21-2019',
time: '12:00'
}
],
event: {}
}
},
created () {
const ID = Number(this.$route.params.id);
let event = this.events.find(my_event => my_event.id === ID);
this.event = event;
}
}
</script>
<style lang="scss" scoped>
.event-single {
margin-top: 30px;
}
.hero {
margin-bottom: 70px;
}
.event-images {
margin-top: 50px;
}
.description {
margin-bottom: 30px
}
</style>

19
tutorials/events-app/src/views/Home.vue
View File

@@ -10,7 +10,8 @@
Make sure you check out the upcoming events below:
</h2>
<div class="button-block">
<button class="button is-xl is-dark">Sign Up to Browse Events</button>
<button v-if="!$auth.isAuthenticated" @click="login" class="button is-xl is-dark">Sign Up to Browse Events</button>
<h3 v-if="$auth.isAuthenticated" class="is-size-5 has-background-dark welcome">Welcome, {{ $auth.user.nickname }}!</h3>
</div>
</div>
</div>
@@ -20,23 +21,17 @@
</div>
</template>
<script>
import Vue from 'vue'
import vBlur from 'v-blur'
import EventsList from '@/components/EventsList'
Vue.use(vBlur)
export default {
name: 'home',
components: {
EventsList
},
data: () => {
return {
isBlurred: true,
disableBlur: {
isBlurred: false,
}
methods : {
// Log the user in
login() {
this.$auth.loginWithRedirect();
}
}
}
@@ -44,7 +39,6 @@ export default {
<style lang="scss" scoped>
.hero {
text-align: center;
// background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
background-image: url('https://face4pets.files.wordpress.com/2018/01/shelter-data-1.jpg');
background-size: cover;
background-position: center;
@@ -72,6 +66,7 @@ export default {
width: 100%;
position: absolute;
bottom: -150px;
color: white;
.button {
margin-right: 50px;

39
tutorials/events-app/yarn.lock
View File

@@ -2,6 +2,18 @@
# yarn lockfile v1
"@auth0/auth0-spa-js@^1.6.4":
version "1.6.4"
resolved "https://registry.yarnpkg.com/@auth0/auth0-spa-js/-/auth0-spa-js-1.6.4.tgz#52c2a9f796dcaffacf9614a5043d77cbaca9ee1f"
integrity sha512-zKUfUxOHL/YwSedP1BkKKRRrB4AJ7whMKBVlf6M7dTvVzeCrRzTWEXUF+HB4/iG4skVRyr+U35qQzMYoFWCxhw==
dependencies:
browser-tabs-lock "^1.2.1"
core-js "^3.2.1"
es-cookie "^1.2.0"
fast-text-encoding "^1.0.0"
promise-polyfill "^8.1.3"
unfetch "^4.1.0"
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
version "7.8.3"
resolved "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.8.3.tgz?cache=0&sync_timestamp=1578951996370&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
@@ -1753,6 +1765,11 @@ brorand@^1.0.1:
resolved "https://registry.npm.taobao.org/brorand/download/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
browser-tabs-lock@^1.2.1:
version "1.2.6"
resolved "https://registry.yarnpkg.com/browser-tabs-lock/-/browser-tabs-lock-1.2.6.tgz#3812e530796d623130a23f2cd00282e2c4299f3b"
integrity sha512-+FUo97nnOix/nQo+j4HyCO47bsJtfx1EFhj1rghqYx7N0MQ8D34aoP4eJGrMtN0D18s2OAGpbPqo/0ONGxDLiA==
browserify-aes@^1.0.0, browserify-aes@^1.0.4:
version "1.2.0"
resolved "https://registry.npm.taobao.org/browserify-aes/download/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
@@ -2433,7 +2450,7 @@ core-js-compat@^3.6.2, core-js-compat@^3.6.4:
browserslist "^4.8.3"
semver "7.0.0"
core-js@^3.6.4:
core-js@^3.2.1, core-js@^3.6.4:
version "3.6.4"
resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
integrity sha1-RAqDU2tFgRS5yyrBWAujd9xHBkc=
@@ -3116,6 +3133,11 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
string.prototype.trimleft "^2.1.1"
string.prototype.trimright "^2.1.1"
es-cookie@^1.2.0:
version "1.3.2"
resolved "https://registry.yarnpkg.com/es-cookie/-/es-cookie-1.3.2.tgz#80e831597f72a25721701bdcb21d990319acd831"
integrity sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==
es-to-primitive@^1.2.1:
version "1.2.1"
resolved "https://registry.npm.taobao.org/es-to-primitive/download/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3470,6 +3492,11 @@ fast-levenshtein@~2.0.6:
resolved "https://registry.npm.taobao.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
fast-text-encoding@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.0.tgz#3e5ce8293409cfaa7177a71b9ca84e1b1e6f25ef"
integrity sha512-R9bHCvweUxxwkDwhjav5vxpFvdPGlVngtqmx4pIZfSUhM/Q4NiIUHB456BAf+Q1Nwu3HEZYONtu+Rya+af4jiQ==
faye-websocket@^0.10.0:
version "0.10.0"
resolved "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -6378,6 +6405,11 @@ promise-inflight@^1.0.1:
resolved "https://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
promise-polyfill@^8.1.3:
version "8.1.3"
resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116"
integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==
proxy-addr@~2.0.5:
version "2.0.6"
resolved "https://registry.npm.taobao.org/proxy-addr/download/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -7753,6 +7785,11 @@ uglify-js@3.4.x:
commander "~2.19.0"
source-map "~0.6.1"
unfetch@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4"
resolved "https://registry.npm.taobao.org/unicode-canonical-property-names-ecmascript/download/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"