autnam 1.0.0

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

@@ -0,0 +1,303 @@
+<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"
+            >
+          </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 request and auth bit.
+import { request, UserSession } from "@esri/arcgis-rest-request";
+// Import a simple loading indicator.
+import Loader from "./Loader";
+
+export default {
+  name: "App",
+  components: { Loader },
+  data() {
+    return {
+      // Store these values on this instance.
+      clientId: process.env.VUE_APP_CLIENTID || "QVQNb3XfDzoboWS0",
+      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}`;
+    },
+    session() {
+      return this.$store.state.session;
+    }
+  },
+  created() {
+    // Upon creation, check to see if the session prop exists. If it does,
+    // pre-populate the client id value.
+    if (this.$store.state.session) {
+      this.clientId = this.$store.state.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, update the application's store with this new
+            // session.
+            this.$store.dispatch("updateSession", session);
+          })
+          .catch(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() {
+      this.$store.dispatch("updateSession", null);
+      this.searchResults = null;
+    },
+    // 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.$store.state.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.$store.state.session.portal}/search?q=${query}`;
+      // Make the request. Tack on the current authentication session.
+      request(searchUrl, { authentication: this.$store.state.session })
+        .then(response => {
+          this.searching = false;
+          this.searchResults = response.results;
+        })
+        .catch(error => {
+          this.searching = false;
+        });
+    }
+  }
+};
+</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,65 @@
+<template>
+  <div id="authenticate-wrapper">
+    <!-- Just a simple loading indicator -->
+    <loader
+      size='25'
+      label='Authenticating...'
+      labelPosition='bottom'
+    ></loader>
+  </div>
+</template>
+
+<script>
+// Import the auth bit.
+import { UserSession } from "@esri/arcgis-rest-request";
+// 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
+      });
+      // Update the application store with the new session.
+      this.$store.dispatch("updateSession", 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,230 @@
+<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>

package/demos/vue/src/main.js

@@ -0,0 +1,92 @@
+// Import VueJS.
+import Vue from "vue";
+// Using the router to treat this like a single-page application.
+import Router from "vue-router";
+// Import the store plugin, Vuex.
+import Vuex from "vuex";
+// Import the arcgis-rest-request bit required for deserializing local storage sessions.
+import { UserSession } from "@esri/arcgis-rest-request";
+// Importing the main application.
+import App from "./components/App.vue";
+// Importing the authentication component that post-processes the OAuth response.
+import Authenticate from "./components/Authenticate.vue";
+
+// Tell Vue to use the vue-router plugin.
+Vue.use(Router);
+
+// Define the router.
+const router = new Router({
+  routes: [
+    // The root path will render the main application component.
+    { path: "/", component: App },
+    // At /authenticate, the authentication component will be rendered.
+    { path: "/authenticate", component: Authenticate }
+  ]
+});
+
+// Tell Vue to use the Vuex plugin.
+Vue.use(Vuex);
+
+// Define the application store.
+const store = new Vuex.Store({
+  state: {
+    session: null
+  },
+  mutations: {
+    setSession(state, data) {
+      state.session = data;
+    }
+  },
+  actions: {
+    updateSession({ commit }, session) {
+      // Apply the changes to the state's session.
+      commit("setSession", session);
+      // If the browser supports local storage, re-serialize it on change
+      // and update the local storage.
+      if (typeof Storage !== "undefined") {
+        if (session && session.serialize) {
+          localStorage.setItem(
+            "__ARCGIS_REST_USER_SESSION__",
+            session.serialize()
+          );
+        } else {
+          localStorage.removeItem("__ARCGIS_REST_USER_SESSION__");
+        }
+      }
+    }
+  }
+});
+
+// Define the main Vue instance.
+new Vue({
+  el: "#app",
+  router,
+  store,
+  data() {
+    return {};
+  },
+  created() {
+    // Load any previously serialized session.
+    this.loadSerializedSession();
+  },
+  methods: {
+    // Function to load any serialized session from local storage.
+    loadSerializedSession() {
+      if (typeof Storage !== "undefined") {
+        const serializedSession = localStorage.getItem(
+          "__ARCGIS_REST_USER_SESSION__"
+        );
+        if (serializedSession !== null && serializedSession !== "undefined") {
+          // If there is a serialized session, deserialize it into a new session object.
+          store.dispatch(
+            "updateSession",
+            UserSession.deserialize(serializedSession)
+          );
+        }
+      }
+    }
+  },
+  render(createElement) {
+    return createElement("router-view");
+  }
+});

package/demos/webmap-checker-sapper/.env.example

@@ -0,0 +1,5 @@
+CLIENT_ID=YfFEWoHwtOY4KP1t
+REDIRECT_URI=http://localhost:3000/auth/post-sign-in
+ENCRYPTION_KEY=vf00tpMiGRSCO36yrbNm9jWyAStIJWJ5
+SESSION_SECRET=Sb66uSlcA3RqyIXLOtwK5P1a37FvYqHD
+PORT=3000