From a0b0eedc86903ef9a4fdf3a3b56cd87c8c0add4d Mon Sep 17 00:00:00 2001
From: dtomlinson <dtomlinson@panaetius.co.uk>
Date: Mon, 2 Mar 2020 01:04:02 +0000
Subject: [PATCH] updating latest tutorials

---
 tutorials/events-app/auth_config.json         |   4 +
 tutorials/events-app/flow.md                  |  98 ++++++++++++++
 tutorials/events-app/notes.md                 |  82 +++++++++++
 tutorials/events-app/package.json             |   1 +
 tutorials/events-app/src/auth/index.js        | 127 ++++++++++++++++++
 .../events-app/src/components/EventCard.vue   |  63 +++++++++
 .../events-app/src/components/EventsList.vue  |  42 +++++-
 .../src/components/partials/Nav.vue           |  26 +++-
 tutorials/events-app/src/main.js              |  19 +++
 tutorials/events-app/src/router/index.js      |   5 +
 .../events-app/src/views/EventSingle.vue      |  92 +++++++++++++
 tutorials/events-app/src/views/Home.vue       |  19 +--
 tutorials/events-app/yarn.lock                |  39 +++++-
 13 files changed, 594 insertions(+), 23 deletions(-)
 create mode 100644 tutorials/events-app/auth_config.json
 create mode 100644 tutorials/events-app/flow.md
 create mode 100644 tutorials/events-app/notes.md
 create mode 100644 tutorials/events-app/src/auth/index.js

diff --git a/tutorials/events-app/auth_config.json b/tutorials/events-app/auth_config.json
new file mode 100644
index 0000000..7b6e7f5
--- /dev/null
+++ b/tutorials/events-app/auth_config.json
@@ -0,0 +1,4 @@
+{
+  "domain": "dev-xu-97g3w.eu.auth0.com",
+  "clientId": "W0Iim8av0OOJXQMfuPiOAjA3fx3ESQoi"
+}
diff --git a/tutorials/events-app/flow.md b/tutorials/events-app/flow.md
new file mode 100644
index 0000000..018818a
--- /dev/null
+++ b/tutorials/events-app/flow.md
@@ -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
diff --git a/tutorials/events-app/notes.md b/tutorials/events-app/notes.md
new file mode 100644
index 0000000..171ceae
--- /dev/null
+++ b/tutorials/events-app/notes.md
@@ -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
+  );
+}
diff --git a/tutorials/events-app/package.json b/tutorials/events-app/package.json
index 6e676d3..c716877 100644
--- a/tutorials/events-app/package.json
+++ b/tutorials/events-app/package.json
@@ -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",
diff --git a/tutorials/events-app/src/auth/index.js b/tutorials/events-app/src/auth/index.js
new file mode 100644
index 0000000..51c7030
--- /dev/null
+++ b/tutorials/events-app/src/auth/index.js
@@ -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);
+  }
+};
diff --git a/tutorials/events-app/src/components/EventCard.vue b/tutorials/events-app/src/components/EventCard.vue
index e69de29..ca87386 100644
--- a/tutorials/events-app/src/components/EventCard.vue
+++ b/tutorials/events-app/src/components/EventCard.vue
@@ -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>
diff --git a/tutorials/events-app/src/components/EventsList.vue b/tutorials/events-app/src/components/EventsList.vue
index 710358b..44fb473 100644
--- a/tutorials/events-app/src/components/EventsList.vue
+++ b/tutorials/events-app/src/components/EventsList.vue
@@ -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 {
diff --git a/tutorials/events-app/src/components/partials/Nav.vue b/tutorials/events-app/src/components/partials/Nav.vue
index fbb22e8..fcce232 100644
--- a/tutorials/events-app/src/components/partials/Nav.vue
+++ b/tutorials/events-app/src/components/partials/Nav.vue
@@ -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">
@@ -42,12 +48,22 @@ export default {
     }
   },
   methods: {
-    getTime () {
+    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 () {
+  mounted() {
     setInterval(() => {
       this.time = this.getTime(), 1000
     });
diff --git a/tutorials/events-app/src/main.js b/tutorials/events-app/src/main.js
index 93ac50a..6d2c71c 100644
--- a/tutorials/events-app/src/main.js
+++ b/tutorials/events-app/src/main.js
@@ -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 });
 
diff --git a/tutorials/events-app/src/router/index.js b/tutorials/events-app/src/router/index.js
index d36779e..8b740ab 100644
--- a/tutorials/events-app/src/router/index.js
+++ b/tutorials/events-app/src/router/index.js
@@ -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')
   }
 ]
 
diff --git a/tutorials/events-app/src/views/EventSingle.vue b/tutorials/events-app/src/views/EventSingle.vue
index e69de29..177ea51 100644
--- a/tutorials/events-app/src/views/EventSingle.vue
+++ b/tutorials/events-app/src/views/EventSingle.vue
@@ -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>
diff --git a/tutorials/events-app/src/views/Home.vue b/tutorials/events-app/src/views/Home.vue
index 64b12f3..fc2c1df 100644
--- a/tutorials/events-app/src/views/Home.vue
+++ b/tutorials/events-app/src/views/Home.vue
@@ -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;
diff --git a/tutorials/events-app/yarn.lock b/tutorials/events-app/yarn.lock
index 07d6b86..b5374e6 100644
--- a/tutorials/events-app/yarn.lock
+++ b/tutorials/events-app/yarn.lock
@@ -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"