Finished implementing useraccounts

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

@@ -1,13 +1,13 @@
 <template name="layout">
-
 	<core-drawer-panel>
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
 			<div id="accountSummary">
-				{{> loginButtons}}
 				{{#if currentUser}}
 					<div id="profileLink" style="text-decoration: underline; cursor: pointer;">
-						My account
+						{{profileLink}}
 					</div>
+				{{else}}
+					<a href="/sign-in" style="color: white;">Sign in</a>
 				{{/if}}
 			</div>
 			<div id="navPanel">

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

@@ -9,7 +9,11 @@ Template.layout.destroyed = function() {
 Template.layout.helpers({
 	notSelected: function(){
 		return Session.get("global.ui.detailShow") ? "not-selected" : null;
-	}
+	},
+	profileLink: function() {
+		var user = Meteor.user();
+		return user.profile && user.profile.username || user.username || "My Account";
+	},
 });
 
 Template.layout.events({

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

@@ -3,11 +3,7 @@
 		<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}}
+				{{profileName}}
 			</div>
 		</core-toolbar>
 		<div id="userProfile" class="padded">
@@ -20,5 +16,7 @@
 				{{/each}}
 			</div>
 		</div>
+		{{> atForm}}
+		{{> atNavButton }}
 	{{/with}}
 </template>

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

@@ -1,3 +1,12 @@
+Template.profile.helpers({
+	profileName: function() {
+		var user = Meteor.user();
+		return user.profile && user.profile.username ||
+			user.username ||
+			"Tap to set username";
+	}
+});
+
 Template.profile.events({
 	"tap #username": function(){
 		if (this._id === Meteor.userId()){

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

@@ -1,9 +1,8 @@
 <template name="usernameDialog">
-	{{#with currentUser}}
-		<div>
-			<paper-input id="usernameInput" label="Username" value={{username}}></paper-input>
-		</div>
-	{{/with}}
+	<div>
+		<paper-input id="usernameInput" label="Username" value={{profileName}}></paper-input>
+	</div>
+	<div style="color: red;" class="vertMargin">{{errorMessage}}</div>
 	<paper-button id="cancelButton" affirmative>    Cancel          </paper-button>
-	<paper-button id="changeButton"    affirmative> Change Username </paper-button>
+	<paper-button id="changeButton" disabled={{invalid}} affirmative> Change Username </paper-button>
 </template>

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

@@ -1,8 +1,49 @@
+var getUsername = function() {
+	var user = Meteor.user();
+	return user.profile && user.profile.username || user.username;
+};
+
+Template.usernameDialog.onCreated(function() {
+	this.errorMessage = new ReactiveVar("");
+	this.username = new ReactiveVar(getUsername());
+});
+
+Template.usernameDialog.helpers({
+	profileName: function() {
+		return getUsername();
+	},
+	invalid: function() {
+		return !!Template.instance().errorMessage.get();
+	},
+	errorMessage: function() {
+		return Template.instance().errorMessage.get();
+	},
+});
+
 Template.usernameDialog.events({
+	"change #usernameInput, input #usernameInput": function(event, instance) {
+		var username = instance.find("#usernameInput").value;
+		username = username.trim().toLowerCase().replace(/\s+/gm, "");
+		if (username.length < 3){
+			instance.errorMessage.set("Username too short");
+		} else {
+			instance.errorMessage.set("Validating...");
+			Meteor.call("getUserId", username, function(err, userId){
+				if (userId && userId !== Meteor.userId())
+					instance.errorMessage.set("This username is taken");
+				else
+					instance.errorMessage.set("");
+			});
+		}
+	},
 	"tap #changeButton": function(event, instance){
+		var username = instance.find("#usernameInput").value;
+		username = username.trim().replace(/\s+/gm, " ");
+		var profileName = username;
+		username = username.toLowerCase().replace(/\s+/gm, "");
 		Meteor.users.update(
 			Meteor.userId(),
-			{$set: {username: instance.find("#usernameInput").value}}
+			{$set: {username: username, "profile.username": profileName}}
 		);
-	}
+	},
 });

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

@@ -0,0 +1,13 @@
+<template name="titledAtForm">
+	<core-toolbar class="blue-grey white-text">
+		<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
+		<div flex>
+			
+		</div>
+	</core-toolbar>
+	<div class="scroll-y padded" fit layout vertical center center-justified>
+		<paper-shadow class="white" style="max-width: 400px;">
+			{{> atForm}}
+		</paper-shadow>
+	</div>
+</template>