Added User profiles so users can change their username

rpg-docs/client/views/GeneralCSS/general.css

@@ -94,7 +94,7 @@ paper-button {
 	color: rgba(0, 0, 0, 0.54);
 }
 
-.statCard {
+.statCard, .clickable {
 	cursor: pointer;
 }
 

rpg-docs/client/views/characterList/characterList.html

@@ -17,13 +17,15 @@
 						{{> gridPadding class="characterCard" num=12}}
 					</div>
 				{{else}}
-					<div layout vertical center center-justified>
+					<div layout vertical center center-justified class="padded">
 						<div>You don't seem to have any characters :(</div>
 						<paper-button class="addCharacter red-button" raised>Add Character</paper-button>
 					</div>
 				{{/if}}
 			{{else}}
-				You must sign in first.
+				<div layout vertical center center-justified class="padded">
+					<div>You must sign in to view your characters</div>
+				</div>
 			{{/if}}
 		<div class="fab-buffer"></div>
 		<paper-fab class="floatyButton addCharacter"

rpg-docs/client/views/layout/layout.css

@@ -5,6 +5,7 @@
   	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center center;
+	color: white;
 }
 
 #mainContentSection {

rpg-docs/client/views/layout/layout.html

@@ -2,7 +2,14 @@
 
 	<core-drawer-panel>
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
-			{{> loginButtons}}
+			<div id="accountSummary">
+				{{> loginButtons}}
+				{{#if currentUser}}
+					<div id="profileLink" style="text-decoration: underline; cursor: pointer;">
+						My account
+					</div>
+				{{/if}}
+			</div>
 			<paper-item id="charactersMenuButton">Characters</paper-item>
 		</core-header-panel>
 		<core-animated-pages main 

rpg-docs/client/views/layout/layout.js

@@ -15,5 +15,8 @@ Template.layout.helpers({
 Template.layout.events({
 	"tap #charactersMenuButton": function(event, instance){
 		Router.go("/");
+	},
+	"tap #profileLink": function(event, instance){
+		Router.go("profile");
 	}
 });

rpg-docs/client/views/loading/loading.css

@@ -1,7 +1,4 @@
-#iron-router-progress {
-    background-color : #D50000;
+.bigSpinner {
+	width: 100px;
+	height: 100px;
 }
-
-#iron-router-progress.spinner:before {
-    border-color : #D50000;
-}

rpg-docs/client/views/loading/loading.html

@@ -1,3 +1,8 @@
 <template name="loading">
-    loading
+	<core-toolbar class="blue-grey white-text">
+		<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
+	</core-toolbar>
+    <div fit layout vertical center center-justified>
+		<paper-spinner class="bigSpinner" active></paper-spinner>
+	</div>
 </template>

rpg-docs/client/views/user/profile/profile.html

@@ -0,0 +1,24 @@
+<template name="profile">
+	{{#with currentUser}}
+		<core-toolbar class="blue-grey white-text">
+			<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
+			<div id="username" class="clickable" flex>
+				{{#if username}}
+					{{username}}
+				{{else}}
+					Tap to set username
+				{{/if}}
+			</div>
+		</core-toolbar>
+		<div id="userProfile" class="padded">
+			<div>
+				<h2>Email</h2>
+				{{#each emails}}
+					<div layout horizontal>
+						<p>{{address}}</p>
+					</div>
+				{{/each}}
+			</div>
+		</div>
+	{{/with}}
+</template>

rpg-docs/client/views/user/profile/profile.js

@@ -0,0 +1,19 @@
+Template.profile.events({
+	"tap #username": function(){
+		if(this._id === Meteor.userId()){
+			GlobalUI.showDialog({
+				heading: "Change Username",
+				template: "usernameDialog"
+			});
+		}
+	},
+	"tap #verifyEmail": function(event, instance){
+		if(!Meteor.user()) return;
+		Accounts.sendVerificationEmail(Meteor.userId(), this.address);
+		GlobalUI.toast({
+			text: "Email verification sent to " + this.address,
+			template: "",
+			data: {}
+		});
+	}
+});

rpg-docs/client/views/user/profile/usernameDialog.html

@@ -0,0 +1,9 @@
+<template name="usernameDialog">
+	{{#with currentUser}}
+		<div>
+			<paper-input id="usernameInput" label="Username" value={{username}}></paper-input>
+		</div>
+	{{/with}}
+	<paper-button id="cancelButton" affirmative>    Cancel          </paper-button>
+	<paper-button id="changeButton"    affirmative> Change Username </paper-button>
+</template>

rpg-docs/client/views/user/profile/usernameDialog.js

@@ -0,0 +1,5 @@
+Template.usernameDialog.events({
+	"tap #changeButton": function(event, instance){
+		Meteor.users.update(Meteor.userId(), {$set: {username: instance.find("#usernameInput").value}});
+	}
+});