Added accounts page

app/Model/Creature/CharacterComputation.js

@@ -1,3 +1,6 @@
+// TODO allow abilities to get disadvantage, making all skills that are based
+// on them disadvantaged as well
+
 import { ValidatedMethod } from 'meteor/mdg:validated-method';
 
 const recomputeCharacter = new ValidatedMethod({

app/Model/Users/Users.js

@@ -102,4 +102,10 @@ if (Meteor.isServer) Meteor.methods({
 		var apiKey = Random.id(30);
 		Meteor.users.update(this.userId, {$set: {apiKey}});
 	},
+	sendVerificationEmail(address) {
+		var user = Meteor.users.findOne(this.userId);
+		if (!user) return;
+		if (!_.some(user.emails, email => email.address === address)) return;
+		Accounts.sendVerificationEmail(this.userId, address);
+	},
 });

app/imports/ui/pages/Account.vue

@@ -0,0 +1,162 @@
+<template>
+  <toolbar-layout>
+    <span slot="toolbar">
+      Account
+    </span>
+    <v-layout align-center justify-center>
+      <v-card class="ma-4 pa-2">
+        <v-list>
+          <v-subheader>
+            Username
+          </v-subheader>
+          <v-list-tile>
+            <v-list-tile-title>
+              {{user.username}}
+            </v-list-tile-title>
+            <v-list-tile-action>
+              <v-tooltip left>
+                <span>Change Username</span>
+                <v-btn icon flat slot="activator">
+                  <v-icon>create</v-icon>
+                </v-btn>
+              </v-tooltip>
+            </v-list-tile-action>
+          </v-list-tile>
+          <v-subheader>
+            Email
+          </v-subheader>
+          <v-list-tile v-for="email in emails" :key="email.address">
+            <v-list-tile-title>
+              {{email.address}}
+            </v-list-tile-title>
+            <v-list-tile-action>
+              <v-tooltip left v-if="email.verified">
+                <span>Verified</span>
+                <v-icon slot="activator">
+                  assignment_turned_in
+                </v-icon>
+              </v-tooltip>
+              <v-tooltip left v-else="email.verified">
+                <span>Verify Account</span>
+                <v-btn
+                  flat
+                  icon
+                  slot="activator"
+                  @click="verifyEmail(email.address)"
+                >
+                  <v-icon>
+                    assignment_late
+                  </v-icon>
+                </v-btn>
+              </v-tooltip>
+            </v-list-tile-action>
+          </v-list-tile>
+          <v-list-tile>
+            <v-list-tile-action>
+              <v-tooltip right>
+                <span>Add email address</span>
+                <v-btn flat icon slot="activator">
+                  <v-icon>
+                    add
+                  </v-icon>
+                </v-btn>
+              </v-tooltip>
+            </v-list-tile-action>
+          </v-list-tile>
+          <v-subheader>
+            API Key
+          </v-subheader>
+          <v-list-tile v-if="user.apiKey">
+            <v-list-tile v-if="showApiKey">
+              {{user.apiKey}}
+            </v-list-tile>
+            <v-list-tile-title v-else="showApiKey">
+              {{"•".repeat(user.apiKey.length)}}
+            </v-list-tile-title>
+            <v-list-tile-action>
+              <v-btn flat icon @click="showApiKey=!showApiKey">
+                <v-icon>{{showApiKey ? 'visibility_off' : 'visibility'}}</v-icon>
+              </v-btn>
+            </v-list-tile-action>
+          </v-list-tile>
+          <v-list-tile v-else="user.apiKey">
+            <v-btn flat color="accent" @click="generateKey">
+              Generate API Key
+            </v-btn>
+          </v-list-tile>
+          <v-subheader>
+            Google Account
+          </v-subheader>
+          <v-list-tile v-if="googleAccount">
+            <v-list-tile-avatar>
+              <img src="googleAccount.picture">
+            </v-list-tile-avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>
+                {{googleAccount.name}}
+              </v-list-tile-title>
+              <v-list-tile-sub-title>
+                {{googleAccount.email}}
+              </v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile v-else="googleAccount">
+            <v-btn flat color="accent">
+              Connect Google
+            </v-btn>
+          </v-list-tile>
+        </v-list>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn flat color="accent">
+            Sign Out
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-layout>
+  </toolbar-layout>
+</template>
+
+<script>
+  import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
+  import { Accounts } from "meteor/accounts-base";
+  import router from "/imports/ui/vueSetup.js";
+  export default {
+    meteor: {
+      $subscribe: {
+        "user": [],
+      },
+      user(){
+        return Meteor.user();
+      },
+      googleAccount(){
+        const user = Meteor.user();
+        return user.services && user.services.google;
+      },
+      emails(){
+        return Meteor.user().emails;
+      },
+    },
+    data(){ return {
+      showApiKey: false,
+      signOutBusy: false,
+    }},
+    methods: {
+      signOut(){
+        Meteor.logout(function (e) {
+
+        });
+      },
+      generateKey(){
+        Meteor.call("generateMyApiKey");
+    		this.showApiKey = true;
+      },
+      verifyEmail(address){
+    		Meteor.call("sendVerificationEmail", address);
+      },
+    },
+    components: {
+      ToolbarLayout,
+    },
+  }
+</script>

app/imports/ui/pages/CharacterList.vue

@@ -1,12 +1,12 @@
 <template>
-  <ToolbarLayout>
+  <toolbar-layout>
     <span slot="toolbar">Characters</span>
     <v-card class="ma-4">
       <v-list v-if="charactersWithNoParty.length">
         <v-list-tile
           v-for="character in charactersWithNoParty"
           :key="character._id"
-          :href="character.url"
+          :to="character.url"
         >
           <v-list-tile-avatar :color="character.color">
               <img
@@ -18,9 +18,14 @@
                 {{character.initial}}
               </template>
           </v-list-tile-avatar>
-          <v-list-tile-title>
-            {{character.name}}
-          </v-list-tile-title>
+          <v-list-tile-content>
+            <v-list-tile-title>
+              {{character.name}}
+            </v-list-tile-title>
+            <v-list-tile-sub-title>
+              {{character.alignment}} {{character.gender}} {{character.race}}
+            </v-list-tile-sub-title>
+          </v-list-tile-content>
         </v-list-tile>
       </v-list>
       <v-expansion-panel popout>
@@ -63,7 +68,7 @@
       <labeled-fab icon="face" label="New Character"></labeled-fab>
       <labeled-fab icon="group" label="New Party"></labeled-fab>
     </v-speed-dial>
-  </ToolbarLayout>
+  </toolbar-layout>
 </template>
 
 <script>

app/imports/ui/pages/SignIn.vue

@@ -55,7 +55,7 @@
 
 <script>
 	import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
-	import {router} from "/imports/ui/vueSetup.js";
+	import router from "/imports/ui/Router.js";
 	export default{
 		data: () => ({
       valid: true,
@@ -78,7 +78,7 @@
 						if (e){
 							this.error = e.reason;
 						} else {
-							Router
+							router.push("characterList");
 						}
 					});
         }

app/imports/ui/router.js

@@ -6,6 +6,7 @@ import Home from '/imports/ui/pages/Home.vue';
 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" ;
 
 // Not found
 import NotFound from '/imports/ui/pages/NotFound.vue';
@@ -34,6 +35,9 @@ RouterFactory.configure(factory => {
 		},{
 			path: "/register",
 			component: Register,
+		},{
+			path: "/account",
+			component: Account,
 		},
   ]);
 });
@@ -46,4 +50,6 @@ RouterFactory.configure(factory => {
   });
 }, -1);
 
-export default routerFactory;
+// Create the router instance
+const router = routerFactory.create();
+export default router;

app/imports/ui/vueSetup.js

@@ -5,6 +5,7 @@ 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';
+import router from "/imports/ui/router.js";
 import "vuetify/dist/vuetify.min.css";
 
 Vue.use(VueMeteorTracker);
@@ -21,9 +22,6 @@ Vue.use(Vuetify, {
   iconfont: "mdi",
 });
 
-// Create the router instance
-const router = routerFactory.create();
-export router;
 
 // App start
 Meteor.startup(() => {