Got basic dialog working, no morph animation yet

app/Model/Users/Users.js

@@ -70,42 +70,41 @@ Schemas.User = new SimpleSchema({
 
 Meteor.users.attachSchema(Schemas.User);
 
-Meteor.users.allow({
+Meteor.users.gnerateApiKey = new ValidatedMethod({
-	update: function(userId, doc, fields, modifier) {
+  name: "Users.methods.generateApiKey",
-		if (
+	validate: null,
-			doc._id === userId &&
+  run(){
-			_.contains(fields, "username") &&
+		if(Meteor.isClient) return;
-			_.contains(fields, "profile") &&
-			fields.length === 2 &&
-			_.keys(modifier).length === 1 &&
-			modifier.$set &&
-			modifier.$set["profile.username"] &&
-			modifier.$set.username &&
-			_.keys(modifier.$set).length === 2
-		){
-			var expectedUsername = modifier.$set["profile.username"];
-			expectedUsername = expectedUsername.toLowerCase().replace(/\s+/gm, "");
-			if (modifier.$set.username !== expectedUsername){
-				return false;
-			}
-			var foundUser = Meteor.call("getUserId", expectedUsername);
-			return !foundUser || foundUser === userId;
-		}
-	}
-});
-
-if (Meteor.isServer) Meteor.methods({
-	generateMyApiKey() {
 		var user = Meteor.users.findOne(this.userId);
 		if (!user) return;
 		if (user && user.apiKey) return;
 		var apiKey = Random.id(30);
 		Meteor.users.update(this.userId, {$set: {apiKey}});
 	},
-	sendVerificationEmail(address) {
+});
-		var user = Meteor.users.findOne(this.userId);
+
-		if (!user) return;
+Meteor.users.sendVerificationEmail = new ValidatedMethod({
-		if (!_.some(user.emails, email => email.address === address)) return;
+	name: "Users.methods.sendVerificationEmail",
-		Accounts.sendVerificationEmail(this.userId, address);
+	validate: new SimpleSchema({
-	},
+		userId:{
+			type: String,
+			optional: true,
+		},
+		address: {
+			type: String,
+		},
+	}).validator(),
+	run(userId, address){
+		userId = this.userId || userId;
+		let user = Meteor.users.findOne();
+		if (!user) {
+			throw new Meteor.Error("User not found",
+				"Can't send a validation email to a user that does not exist");
+		}
+		if (!_.some(user.emails, email => email.address === address)) {
+			throw new Meteor.Error("Email address not found",
+				"The specified email address wasn't found on this user account");
+		}
+		Accounts.sendVerificationEmail(this.userId, address);
+	}
 });

app/imports/ui/components/DialogBase.vue

@@ -1,19 +0,0 @@
-<template>
-  <transition
-    v-on:before-enter="beforeEnter"
-    v-on:enter="enter"
-    v-on:after-enter="afterEnter"
-    v-on:enter-cancelled="enterCancelled"
-
-    v-on:before-leave="beforeLeave"
-    v-on:leave="leave"
-    v-on:after-leave="afterLeave"
-    v-on:leave-cancelled="leaveCancelled"
-  >
-    <v-card>
-      <v-toolbar></v-toolbar>
-      <v-layout></v-layout>
-      <v-card-actions></v-card-actions>
-    </v-card>
-  </transition>
-</template>

app/imports/ui/components/DialogStack.vue

@@ -1,18 +0,0 @@
-<template>
-  <v-layout class="dialog-stack" column aligned-center justified-center>
-    <div class="backdrop"></div>
-    <div class="dialog-sizer">
-      <v-card
-        class="dialog"
-        v-for="dialog in dialogs"
-        :key="dialog.key"
-      >
-        <component :is="component"></component>
-      </v-card>
-    </div>
-  </v-layout>
-</template>
-
-<script>
-  
-</script>

app/imports/ui/dialogStack/DialogBase.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary" dark>
+      <slot name="toolbar"></slot>
+    </v-toolbar>
+    <v-layout>
+      <slot></slot>
+    </v-layout>
+    <v-card-actions>
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>

app/imports/ui/dialogStack/DialogStack.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-layout class="dialog-stack" align-center justify-center>
+    <div
+      class="backdrop"
+      @click="backdropClicked"
+      :class="dialogs.length ? '' : 'hidden' "
+    ></div>
+    <transition-group name="dialog-list" class="dialog-sizer" tag="div">
+      <div
+        v-for="(dialog, index) in dialogs"
+        :key="dialog._id"
+        class="dialog"
+        :style="getDialogStyle(index)"
+      >
+        <component :is="dialog.component" :data="dialog.data"></component>
+      </div>
+    </transition-group>
+  </v-layout>
+</template>
+
+<script>
+  import "/imports/ui/dialogStack/dialogStackWindowEvents.js";
+  import store from "/imports/ui/vuexStore.js";
+  import anime from "animejs";
+
+  const offset = 16;
+
+  export default {
+    computed: {
+      dialogs(){
+        return store.state.dialogStack.dialogs;
+      },
+    },
+    methods: {
+      popDialogStack(){
+        store.dispatch("popDialogStack");
+      },
+      backdropClicked(event){
+        if (event.target === event.currentTarget) this.popDialogStack();
+      },
+      getDialogStyle(index){
+        const length = store.state.dialogStack.dialogs.length;
+    		if (index >= length) return;
+    		const num = length - 1;
+    		const left = (num - index) * -offset;
+    		const top =  (num - index) * -offset;
+    		return `left:${left}px; top:${top}px;`;
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .dialog-stack {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+  .dialog-sizer {
+    position: relative;
+    height: 500px;
+    width: 500px;
+    z-index: 5;
+    flex: initial;
+  }
+  .backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 4;
+    pointer-events: initial;
+  }
+  .backdrop.hidden {
+    display: none
+  }
+  .dialog-list-move {
+    transition: transform 400ms;
+  }
+  .dialog-list-leave-active {
+
+  }
+  .dialog {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    pointer-events: initial;
+  }
+  .dialog > * {
+    height: 100%;
+    width: 100%;
+  }
+</style>

app/imports/ui/dialogStack/TestDialog.vue

@@ -0,0 +1,28 @@
+<template>
+  <dialog-base>
+    <div slot="toolbar">
+      Test Dialog
+    </div>
+    <div>
+      <v-btn @click="openDialog">Open Dialog</v-btn>
+    </div>
+  </dialog-base>
+</template>
+
+<script>
+  import store from "/imports/ui/vuexStore.js";
+  import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
+  const component = {
+    methods: {
+      openDialog(event){
+        store.commit("pushDialogStack", {
+          component,
+        });
+      }
+    },
+    components: {
+      DialogBase,
+    },
+  };
+  export default component;
+</script>

app/imports/ui/dialogStack/dialogStackStore.js

@@ -0,0 +1,87 @@
+import store from "/imports/ui/vuexStore.js";
+
+const offset = 16;
+const duration = 400;
+let dialogStack = {};
+dialogStack.dialogs = [];
+
+const dialogStackStore = {
+  state: {
+    dialogs: [],
+  },
+  mutations: {
+    pushDialogStack(state, {component, data, element, returnElement, callback}){
+      // Generate a new _id so that Vue knows how to shuffle the array
+      const _id = Random.id();
+      state.dialogs.push({
+        _id,
+        component,
+        data,
+        element,
+        returnElement,
+        callback,
+      });
+      updateHistory();
+    },
+    popDialogStackMutation (state, result){
+      const dialog = state.dialogs.pop();
+      updateHistory();
+      if (!dialog) return;
+      dialog.callback && dialog.callback(result);
+    },
+  },
+  actions: {
+    popDialogStack(context, result){
+      if (history && history.state && history.state.openDialogs){
+        history.back();
+      } else {
+        context.commit("popDialogStackMutation", result)
+      }
+    }
+  }
+};
+
+export default dialogStackStore;
+
+const updateHistory = function(){
+  // history should looks like: [{openDialogs: 0}, {openDialogs: n}] where
+  // n is the number of open dialogs
+
+  // If we can't access the history object, give up
+  if (!history) return;
+  // Make sure that there is a state tracking open dialogs
+  // replace the state without bashing it in the process
+  if (!history.state || !_.isFinite(history.state.openDialogs)){
+    let newState = _.clone(history.state)  || {};
+    newState.openDialogs = 0;
+    history.replaceState(newState, "");
+  }
+
+  const numDialogs = dialogStackStore.state.dialogs.length;
+  const stateDialogs = history.state.openDialogs;
+
+  // If the number of dialogs and state dialogs are equal, we don't need to do
+  // anything
+  if (numDialogs === stateDialogs) return;
+
+  if (stateDialogs > 0){
+    // On a dialog count
+    if (numDialogs === 0){
+      // but shouldn't be
+      history.back();
+    } else {
+      // but should replace with correct count
+      let newState = _.clone(history.state) || {};
+      newState.openDialogs = dialogStackStore.state.dialogs.length;
+      history.replaceState(newState, "");
+    }
+  } else if (numDialogs > 0 && stateDialogs === 0){
+    // On the zero state, push a dialog count
+    history.pushState({openDialogs: numDialogs}, "");
+  } else {
+    console.warn(
+      "History could not be updated correctly, unexpected case",
+      {stateDialogs, numDialogs},
+    )
+  }
+};

app/imports/ui/dialogStack/dialogStackWindowEvents.js

@@ -0,0 +1,11 @@
+import store from "/imports/ui/vuexStore.js";
+
+if (window){
+  window.onpopstate = function(event){
+    let state = event.state;
+    let numDialogs = store.state.dialogStack.dialogs.length;
+    if (_.isFinite(state.openDialogs) && numDialogs > state.openDialogs){
+      store.commit("popDialogStackMutation");
+    }
+  };
+}

app/imports/ui/layouts/AppLayout.vue

@@ -4,11 +4,13 @@
       <Sidebar></Sidebar>
     </v-navigation-drawer>
     <router-view></router-view>
+    <dialog-stack></dialog-stack>
   </v-app>
 </template>
 
 <script>
   import Sidebar from "/imports/ui/components/Sidebar.vue";
+  import DialogStack from "/imports/ui/dialogStack/DialogStack.vue"
   export default {
     computed: {
       drawer: {
@@ -22,6 +24,7 @@
     },
     components: {
       Sidebar,
+      DialogStack,
     },
   };
 </script>

app/imports/ui/pages/Account.vue

@@ -140,6 +140,8 @@
     data(){ return {
       showApiKey: false,
       signOutBusy: false,
+      apiKeyGenerationError: null,
+      emailVerificationError: null,
     }},
     methods: {
       signOut(){
@@ -148,11 +150,15 @@
         });
       },
       generateKey(){
-        Meteor.call("generateMyApiKey");
+        Meteor.users.gnerateApiKey.call(error => {
+          if(error) this.apiKeyGenerationError = error.reason;
+        });
     		this.showApiKey = true;
       },
       verifyEmail(address){
-    		Meteor.call("sendVerificationEmail", address);
+        Meteor.users.sendVerificationEmail.call({address}, error => {
+          if(error) this.emailVerificationError = error.reason;
+        });
       },
     },
     components: {

app/imports/ui/pages/NotFound.vue

@@ -0,0 +1,12 @@
+<template>
+  <toolbar-layout>
+    <div slot="toolbar">
+      Not Found
+    </div>
+    <v-layout align-center justify-center>
+      <h1>
+        No page was found for this address
+      </h1>
+    </v-layout>
+  </toolbar-layout>
+</template>

app/imports/ui/pages/Register.vue

@@ -67,6 +67,7 @@
 
 <script>
 	import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
+	import router from "/imports/ui/router.js";
 	export default{
 		data() {
 			return {
@@ -95,24 +96,21 @@
 		},
 		methods: {
       submit () {
-				console.log("submitting");
         if (this.$refs.form.validate()) {
 					Accounts.createUser({
 						username: this.username,
 						password: this.password,
 						email: this.email,
-					}, function(e){
+					}, function(error){
-						console.error(e);
+						this.error = error.reason;
-						this.error = e.reason;
 					});
         }
       },
 			googleLogin() {
-				console.log("logging in with Google");
+				Meteor.loginWithGoogle(error => {
-				Meteor.loginWithGoogle(e => {
+					if (error) this.googleError = error.reason;
-					this.googleError = e.message;
 				});
-			}
+			},
     },
     components: {
       ToolbarLayout,

app/imports/ui/pages/SignIn.vue

@@ -55,7 +55,7 @@
 
 <script>
 	import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
-	import router from "/imports/ui/Router.js";
+	import router from "/imports/ui/router.js";
 	export default{
 		data: () => ({
       valid: true,
@@ -72,11 +72,10 @@
     }),
 		methods: {
       submit () {
-				console.log("submitting");
         if (this.$refs.form.validate()) {
-					Meteor.loginWithPassword(this.name, this.password, e => {
+					Meteor.loginWithPassword(this.name, this.password, error => {
-						if (e){
+						if (error){
-							this.error = e.reason;
+							this.error = error.reason;
 						} else {
 							router.push("characterList");
 						}
@@ -84,9 +83,8 @@
         }
       },
 			googleLogin() {
-				console.log("logging in with Google");
+				Meteor.loginWithGoogle(error => {
-				Meteor.loginWithGoogle(e => {
+					if (error) this.googleError = error.reason;
-					this.googleError = e.message;
 				});
 			}
     },

app/imports/ui/router.js

@@ -7,6 +7,7 @@ import CharacterList from "/imports/ui/pages/CharacterList.vue";
 import SignIn from "/imports/ui/pages/SignIn.vue" ;
 import Register from "/imports/ui/pages/Register.vue" ;
 import Account from "/imports/ui/pages/Account.vue" ;
+import TestDialog from "/imports/ui/dialogStack/TestDialog.vue"
 
 // Not found
 import NotFound from '/imports/ui/pages/NotFound.vue';
@@ -38,6 +39,9 @@ RouterFactory.configure(factory => {
 		},{
 			path: "/account",
 			component: Account,
+		},{
+			path: "/test-dialog",
+			component: TestDialog,
 		},
   ]);
 });

app/imports/ui/vueSetup.js

@@ -1,7 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import Vuetify from "vuetify";
-import routerFactory from "/imports/ui/route.js";
 import store from "/imports/ui/vuexStore.js";
 import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';

app/imports/ui/vuexStore.js

@@ -1,9 +1,13 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import dialogStackStore from "/imports/ui/dialogStack/dialogStackStore.js";
 
 Vue.use(Vuex);
 const store = new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
+  modules: {
+    dialogStack: dialogStackStore,
+  },
   state: {
     drawer: undefined,
   },

app/package-lock.json

@@ -37,9 +37,13 @@
         "json-schema-traverse": "^0.3.0"
       }
     },
+    "animejs": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-2.2.0.tgz",
+      "integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA="
+    },
     "ansi-regex": {
       "version": "2.1.1",
-      "resolved": false,
       "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
     "aproba": {
@@ -125,7 +129,6 @@
     },
     "block-stream": {
       "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
       "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
       "requires": {
         "inherits": "~2.0.0"
@@ -190,7 +193,6 @@
     },
     "code-point-at": {
       "version": "1.1.0",
-      "resolved": false,
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
     "combined-stream": {
@@ -354,7 +356,7 @@
       "dependencies": {
         "combined-stream": {
           "version": "1.0.6",
-          "resolved": "http://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
           "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
           "requires": {
             "delayed-stream": "~1.0.0"
@@ -436,7 +438,6 @@
     },
     "graceful-fs": {
       "version": "4.1.11",
-      "resolved": false,
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
     },
     "har-schema": {
@@ -484,7 +485,6 @@
     },
     "inherits": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "ini": {
@@ -512,7 +512,6 @@
     },
     "is-fullwidth-code-point": {
       "version": "1.0.0",
-      "resolved": false,
       "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
       "requires": {
         "number-is-nan": "^1.0.0"
@@ -1464,7 +1463,6 @@
     },
     "number-is-nan": {
       "version": "1.0.1",
-      "resolved": false,
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
     "oauth-sign": {
@@ -1643,7 +1641,6 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
@@ -1748,7 +1745,6 @@
     },
     "set-blocking": {
       "version": "2.0.0",
-      "resolved": false,
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "shebang-command": {
@@ -1766,7 +1762,6 @@
     },
     "signal-exit": {
       "version": "3.0.2",
-      "resolved": false,
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "source-map": {
@@ -1829,7 +1824,6 @@
     },
     "string-width": {
       "version": "1.0.2",
-      "resolved": false,
       "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
       "requires": {
         "code-point-at": "^1.0.0",
@@ -1847,7 +1841,6 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
-      "resolved": false,
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "requires": {
         "ansi-regex": "^2.0.0"

app/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@babel/runtime": "7.0.0-beta.55",
     "@polymer/polymer": "^1.2.5-npm-test.2",
+    "animejs": "^2.2.0",
     "babel-runtime": "^6.26.0",
     "bcrypt": "^1.0.3",
     "bower": "^1.7.9",