etincidunt 1.0.0

package/demos/vue/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@esri/arcgis-rest-demo-vue-with-popup",
+  "description": "VueJS demo of @esri/arcgis-rest-* packages.",
+  "version": "1.6.0",
+  "author": "",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-auth": "^1.6.0",
+    "@esri/arcgis-rest-request": "^1.6.0",
+    "vue": "^2.5.11",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "dotenv-webpack": "^1.5.5",
+    "file-loader": "^1.1.10",
+    "html-webpack-plugin": "^2.30.1",
+    "vue-loader": "^13.0.5",
+    "vue-template-compiler": "^2.4.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^3.1.3"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

package/demos/vue/src/assets/logo.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 400 400"
+   height="400"
+   width="400"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6" /><g
+     transform="matrix(1.3333333,0,0,-1.3333333,0,400)"
+     id="g10"><g
+       transform="translate(178.0626,235.0086)"
+       id="g12"><path
+         id="path14"
+         style="fill:#4dba87;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 0,0 -22.669,-39.264 -45.338,0 h -75.491 L -22.669,-170.017 75.491,0 Z" /></g><g
+       transform="translate(178.0626,235.0086)"
+       id="g16"><path
+         id="path18"
+         style="fill:#435466;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="M 0,0 -22.669,-39.264 -45.338,0 H -81.565 L -22.669,-102.01 36.227,0 Z" /></g></g></svg>

package/demos/vue/src/components/App.vue

@@ -0,0 +1,302 @@
+<template>
+  <div id="app-wrapper">
+    <div class="jumbotron">
+      <div class="container">
+        <div id="page-header" class="row">
+          <div id="logo-container" class="col-sm-3">
+            <img id="logo" src="../assets/logo.svg">
+          </div>
+          <div class="col-sm-9">
+            <h2>
+              ArcGIS Rest JS Vue Demo
+            </h2>
+            <p>
+              A simple vue application utilizing the arcgis-rest-js library.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12">
+          <!-- Hook the has-error class to the boolean clientIdError. -->
+          <div :class="{ 'has-error': clientIdError }" class="form-group">
+            <label class="control-label">ClientID</label>
+            <!-- Hook this input up to the clientId property. -->
+            <input
+              v-model="clientId"
+              type="text"
+              class="form-control"
+              placeholder="ClientID"
+            >
+          </div>
+          <p class="help-block">
+            You can generate your own clientid by creating an application on the
+            <a target='_blank' href='https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/browser-based-user-logins/'>
+              ArcGIS for Developers
+            </a>
+            website. Be sure to add
+            <code>
+              {{ redirect_uri }}
+            </code>
+            as a redirect uri for your application.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6">
+          <!-- On click, this button will call the signInWithPopup function. -->
+          <button class="btn btn-primary btn-block" @click="signInWithPopup">Sign In (with popup)</button>
+        </div>
+        <div class="col-xs-6">
+          <!-- On click, this button will call the signInWithoutPopup function. -->
+          <button class="btn btn-primary btn-block" @click="signInWithInlineRedirect">Sign In (inline redirect)</button>
+        </div>
+      </div>
+      <!-- If there is a current session, render this bit. -->
+      <div v-if="session" class="row">
+        <div class="col-xs-12 text-center">
+          <p class="bg-success info-panel">
+            <!-- Display the current user's username. -->
+            Logged in as {{ session.username }}.
+          </p>
+        </div>
+      </div>
+      <!-- If there is not a current session, render this instead. -->
+      <div v-else class="row">
+        <div class="col-xs-12 text-center">
+          <p class="bg-info info-panel">
+            Log in using one of the methods above to load rest of the page.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-xs-offset-3 text-center">
+          <button class="btn btn-block btn-warning" @click="signout">Sign Out</button>
+        </div>
+      </div>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <div class="row" style="margin-bottom: 0px">
+            <div class="col-xs-4">
+              <!-- This button will call the search function. It's disabled if there is no current session. -->
+              <button @click="search" :disabled="!session" class="btn btn-success btn-block">
+                <span class="glyphicon glyphicon-search"></span>
+                Search Your Content
+              </button>
+            </div>
+            <div class="col-xs-8">
+              <div class="input-group">
+                <div class="input-group-addon">
+                  <span class="glyphicon glyphicon-filter"></span>
+                </div>
+                <!-- Hook up this input the the filter string property. It's disabled if there is no current session. -->
+                <input
+                  v-model="filterString"
+                  :disabled="!session"
+                  type="text"
+                  class="form-control"
+                  placeholder="Filter"
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Render this only if their is a current search pending. -->
+        <div v-if="searching" class="panel-body loading-table">
+          <loader
+            size='25'
+            label='Fetching Data...'
+            labelPosition='bottom'
+          ></loader>
+        </div>
+        <!-- Render if there are search results. -->
+        <table v-if="searchResults" class="table table-hover">
+          <thead>
+            <tr>
+              <th>Title:</th>
+              <th>ID:</th>
+            </tr>
+          </thead>
+          <!-- If there are any search results, render them. -->
+          <tbody v-if="searchResults.length > 0">
+            <!-- Iterate over the search results and render a table row for each. -->
+            <tr
+              v-for="(item, index) in searchResults"
+              :key="index"
+            >
+              <td>
+                {{ item.title }}
+              </td>
+              <td>
+                {{ item.id }}
+              </td>
+            </tr>
+          </tbody>
+          <!-- If no results were found, render this information. -->
+          <tbody v-else>
+            <tr class="danger">
+              <td>
+                No results found.
+              </td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Import the arcgis-rest-auth bit.
+import { UserSession } from '@esri/arcgis-rest-auth';
+// Import the arcgis-rest-request bit.
+import { request } from '@esri/arcgis-rest-request';
+// Import the main Vue instance. Will be used for event dispatching.
+import Main from '../main';
+// Import a simple loading indicator.
+import Loader from './Loader';
+
+export default {
+  name: 'App',
+  components: { Loader },
+  // The session object is a prop supplied by the main Vue instance.
+  props: ['session'],
+  data() {
+    return {
+      // Store these values on this instance.
+      clientId: process.env.CLIENTID || null,
+      clientIdError: false,
+      filterString: null,
+      searching: null,
+      searchResults: null,
+    };
+  },
+  computed: {
+    // Simple computed property to access the current applications path to
+    // set it as the redirect_uri.
+    redirect_uri() {
+      return `${window.location.origin}${window.location.pathname}`;
+    }
+  },
+  created() {
+    // Upon creation, check to see if the session prop exists. If it does,
+    // pre-populate the client id value.
+    if (this.session) {
+      this.clientId = this.session.clientId;
+    }
+  },
+  mounted() {},
+  watch: {
+    // Set a watcher on the client id to validate it when it changes.
+    clientId() {
+      if (this.clientId === '') this.clientIdError = true;
+      else this.clientIdError = false;
+    },
+  },
+  methods: {
+    // Function to validate that the client id exists.
+    requireClientId() {
+      if (this.clientIdError || !this.clientId) {
+        this.clientIdError = true;
+        return false;
+      }
+      return true;
+    },
+    // The signup with a popup workflow. When popup is true, the beginOAuth2 function
+    // returns a promise.
+    signInWithPopup() {
+      if (this.requireClientId()) {
+        UserSession.beginOAuth2({
+          clientId: this.clientId,
+          // Passing the clientid here is only a requirement of this demo where we allow
+          // dynamic clientids via input. Typically you would have this hard-coded on
+          // the authorization callback.
+          redirectUri: `${this.redirect_uri}#/authenticate?clientID=${this.clientId}`,
+          popup: true,
+        }).then((session) => {
+          // Upon successful login, emit a login event on the main Vue instance. This
+          // triggers an update on the main Vue instance's session property which is
+          // passed to this component via props.
+          Main.$emit('login', session);
+        }).catch(error => {
+          console.error(error);
+        });
+      }
+    },
+    // The signup with an inline redirect workflow. In this case the user is just redirected to
+    // the authorization page.
+    signInWithInlineRedirect() {
+      if (this.requireClientId()) {
+        UserSession.beginOAuth2({
+          clientId: this.clientId,
+          redirectUri: `${this.redirect_uri}#/authenticate?clientID=${this.clientId}`,
+          popup: false,
+        });
+      }
+    },
+    // Function to log the use out of the current session.
+    signout() {
+      Main.$emit('logout');
+    },
+    // Function to call to search for a user's content.
+    search() {
+      // Update the properties for a new search.
+      this.searchResults = null;
+      this.searching = true;
+      // Timeout is for effect.
+      setTimeout(this.requestData, 300);
+    },
+    // Request data from AGOL.
+    requestData() {
+      // Construct a search query for only items the user owns. Add a filter if it exists.
+      const query = `owner: ${this.session.username}${this.filterString ? ` AND ${this.filterString}`:''}`
+      // Construct the url for the endpoint with the session's portal and the constructed
+      // query.
+      const searchUrl = `${this.session.portal}/search?q=${query}`;
+      // Make the request. Tack on the current authentication session.
+      request(searchUrl, { authentication: this.session })
+        .then((response) => {
+          this.searching = false;
+          this.searchResults = response.results;
+        }).catch(error => {
+          this.searching = false;
+          console.error(error);
+        });
+    },
+  },
+};
+</script>
+
+<style>
+.jumbotron {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+#logo-container {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+
+#logo {
+  width: 150px;
+  height: 150px;
+}
+
+.info-panel{
+  padding: 15px;
+}
+
+.loading-table {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+
+</style>

package/demos/vue/src/components/Authenticate.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="authenticate-wrapper">
+    <!-- Just a simple loading indicator -->
+    <loader
+      size='25'
+      label='Authenticating...'
+      labelPosition='bottom'
+    ></loader>
+  </div>
+</template>
+
+<script>
+// Import the arcgis-rest-auth bit.
+import { UserSession } from '@esri/arcgis-rest-auth';
+// Import the main Vue instance. Will be used for event dispatching.
+import Main from '../main';
+// Import a simple loading indicator.
+import Loader from './Loader';
+
+export default {
+  name: 'Authenticate',
+  components: { Loader },
+  props: [],
+  data() {
+    return {};
+  },
+  computed: {
+    // Simple computed property to make it easier to access the client id
+    // in the url. In a production app the clientid should be hardcoded.
+    clientId () {
+      return this.$route.query.clientID;
+    },
+  },
+  created() {},
+  mounted() {
+    // When this component is rendered, set a timeout to process the authentication.
+    // The timing is just for effect to show it's working.
+    setTimeout(this.processAuthentication, 500);
+  },
+  methods: {
+    processAuthentication() {
+      // Complete the OAuth2 process. If in a popup, the window will close before
+      // this finishes and will be handled by the beginOAuth2 function. If not in
+      // a popup, it will proceed to the next couple lines.
+      const session = UserSession.completeOAuth2({
+        // Required as it is a piece of the key in the popup method. If not using
+        // a popup, this shouldn't be required.
+        clientId: this.clientId,
+      });
+      // If this component isn't in a popup, it will emit an event on the main Vue
+      // instance that a successful login occurred with the session object attached.
+      Main.$emit('login', session);
+      // The app is the rerouted to the main application.
+      this.$router.replace('/');
+    },
+  },
+};
+</script>
+
+<style>
+#authenticate-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+</style>

package/demos/vue/src/components/Loader.vue

@@ -0,0 +1,216 @@
+<template>
+  <div ref='loader-wrapper' id='loader-wrapper'>
+    <div v-if="label" ref="label">
+      {{ label }}
+    </div>
+    <div ref="spinner" class="sk-fading-circle">
+      <div class="sk-circle1 sk-circle"></div>
+      <div class="sk-circle2 sk-circle"></div>
+      <div class="sk-circle3 sk-circle"></div>
+      <div class="sk-circle4 sk-circle"></div>
+      <div class="sk-circle5 sk-circle"></div>
+      <div class="sk-circle6 sk-circle"></div>
+      <div class="sk-circle7 sk-circle"></div>
+      <div class="sk-circle8 sk-circle"></div>
+      <div class="sk-circle9 sk-circle"></div>
+      <div class="sk-circle10 sk-circle"></div>
+      <div class="sk-circle11 sk-circle"></div>
+      <div class="sk-circle12 sk-circle"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Loader',
+  components: {},
+  props: ['size', 'label', 'labelPosition'],
+  data() {
+    return {};
+  },
+  watch: {
+    size() {
+      this.setSize();
+    },
+    labelPosition() {
+      this.setLabelPosition();
+    },
+  },
+  created() {},
+  mounted() {
+    this.setSize();
+    this.setLabelPosition();
+  },
+  methods: {
+    setSize() {
+      const marginPercentage = 0.2;
+      this.$refs.spinner.style.width = `${this.size || 40}px`;
+      this.$refs.spinner.style.height = `${this.size || 40}px`;
+      this.$refs.spinner.style.margin =
+        `${this.size * marginPercentage || 40 * marginPercentage}px`;
+    },
+    setLabelPosition() {
+      switch (this.labelPosition) {
+        case 'top':
+          this.$refs['loader-wrapper'].style['flex-direction'] = 'column';
+          break;
+        case 'bottom':
+          this.$refs['loader-wrapper'].style['flex-direction'] = 'column-reverse';
+          break;
+        case 'left':
+          this.$refs['loader-wrapper'].style['flex-direction'] = 'row';
+          break;
+        case 'right':
+          this.$refs['loader-wrapper'].style['flex-direction'] = 'row-reverse';
+          break;
+        default:
+          this.$refs['loader-wrapper'].style['flex-direction'] = 'column-reverse';
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+#loader-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sk-fading-circle {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+      -ms-transform: rotate(30deg);
+          transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+          transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+      -ms-transform: rotate(120deg);
+          transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+      -ms-transform: rotate(150deg);
+          transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+      -ms-transform: rotate(210deg);
+          transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+      -ms-transform: rotate(240deg);
+          transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+      -ms-transform: rotate(300deg);
+          transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+      -ms-transform: rotate(330deg);
+          transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+          animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+</style>