Added User profiles so users can change their username

rpg-docs/Model/Users/Users.js

@@ -1,35 +1,44 @@
 Schema = {};
 
 Schema.User = new SimpleSchema({
-    username: {
-        type: String,
-        regEx: /^[a-z0-9A-Z_]{3,15}$/
-    },
-    emails: {
-        type: [Object],
-        // this must be optional if you also use other login services like facebook,
-        // but if you use only accounts-password, then it can be required
-        optional: true
-    },
-    "emails.$.address": {
-        type: String,
-        regEx: SimpleSchema.RegEx.Email
-    },
-    "emails.$.verified": {
-        type: Boolean
-    },
-    createdAt: {
-        type: Date
-    },
-    services: {
-        type: Object,
-        optional: true,
-        blackbox: true
-    },
-    roles: {
-        type: [String],
-        optional: true
-    }
+	username: {
+		type: String,
+		regEx: /^[a-z0-9A-Z_]{3,15}$/,
+		optional: true
+	},
+	emails: {
+		type: [Object],
+		// this must be optional if you also use other login services like facebook,
+		// but if you use only accounts-password, then it can be required
+		optional: true
+	},
+	"emails.$.address": {
+		type: String,
+		regEx: SimpleSchema.RegEx.Email
+	},
+	"emails.$.verified": {
+		type: Boolean
+	},
+	createdAt: {
+		type: Date
+	},
+	services: {
+		type: Object,
+		optional: true,
+		blackbox: true
+	},
+	roles: {
+		type: [String],
+		optional: true
+	}
 });
 
 Meteor.users.attachSchema(Schema.User);
+
+Meteor.users.allow({
+	update: function (userId, doc, fields, modifier) {
+		return userId === doc._id &&
+			fields.length === 1 &&
+			fields[0] === 'username';
+	}
+});

rpg-docs/Routes/Routes.js

@@ -5,8 +5,7 @@ Router.configure({
 
 Router.map( function () {
 	/*
-	this.route('home',
-			   {
+	this.route('home', {
 		path: '/',
 		waitOn: function(){
 			return Meteor.subscribe("characterList", Meteor.userId());
@@ -18,8 +17,7 @@ Router.map( function () {
 		}
 	});*/ //add a home route and change characterList route
 
-	this.route('characterList',
-			   {
+	this.route('characterList', {
 		path: '/',
 		waitOn: function(){
 			return Meteor.subscribe("characterList", Meteor.userId());
@@ -66,4 +64,8 @@ Router.map( function () {
 	this.route('loading', {
 		path: '/loading'
 	});
+
+	this.route('profile', {
+		path: '/account'
+	});
 });

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}});
+	}
+});

rpg-docs/server/publications/characterList.js

@@ -1,10 +1,13 @@
 Meteor.publish("characterList",function(userId){
-	if(!userId) return;
+	if(!userId) {
+		this.ready();
+		return;
+	}
 	return Characters.find({
-		$or: [ 
-			{readers: userId}, 
-			{writers: userId}, 
-			{owner: userId} 
-		] 
+		$or: [
+			{readers: userId},
+			{writers: userId},
+			{owner: userId}
+		]
 	});
 });