rename /rpg-docs to /app

app/client/views/user/profile/profile.css

@@ -0,0 +1,3 @@
+.profile paper-button, .profile a, .profile #at-nav-button {
+	color: #d13b2e;
+}

app/client/views/user/profile/profile.html

@@ -0,0 +1,74 @@
+<template name="profile">
+	{{#with currentUser}}
+		<app-header-layout has-scrolling-region fullbleed class="profile">
+			<app-header class="app-grey white-text" fixed effects="waterfall">
+				<app-toolbar class="app-grey white-text">
+					<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
+					<div flex>Account</div>
+				</app-toolbar>
+			</app-header>
+			<div class="layout vertical center">
+				<paper-material style="margin-top: 8px; padding: 16px; background: #fff;">
+					<table>
+						<tr>
+							<td>Username</td>
+							<td>{{profileName}}</td>
+							<td>
+								<paper-icon-button icon="create"  class="username-edit" style="background: #fff;">
+								</paper-icon-button>
+							</td>
+						</tr>
+						<tr>
+							<td>Email</td>
+							<td class="layout vertical">
+								{{#each emails}}
+									<div>
+										{{address}}
+										{{#if verified}}
+											<span>
+												<iron-icon icon="check"></iron-icon>
+												{{#simpleTooltip}}Verified{{/simpleTooltip}}
+											</span>
+										{{/if}}
+									</div>
+								{{/each}}
+							</td>
+							<td></td>
+						</tr>
+						<tr>
+							<td colspan="2">
+								<a href="/change-password">
+									<paper-button>Change password</paper-button>
+								</a>
+							</td>
+						</tr>
+						<tr>
+							<td>
+								API Key
+							</td>
+							<td class="apiKey">
+								{{#if apiKey}}
+									{{#unless showApiKey}}
+										<paper-button class="showApiKey">
+											Show
+										</paper-button>
+									{{else}}
+										{{apiKey}}
+									{{/unless}}
+								{{else}}
+									<paper-button class="generateMyApiKey">
+										Generate
+									</paper-button>
+								{{/if}}
+							</td>
+						</tr>
+					</table>
+					<div style="max-width: 250px">
+						{{> atForm state="signIn"}}
+					</div>
+					{{> atNavButton }}
+				</paper-material>
+			</div>
+		</app-header-layout>
+	{{/with}}
+</template>

app/client/views/user/profile/profile.js

@@ -0,0 +1,42 @@
+Template.profile.onCreated(function(){
+	this.showApiKey = new ReactiveVar(false);
+});
+
+Template.profile.helpers({
+	profileName: function() {
+		var user = Meteor.user();
+		return user.profile && user.profile.username ||
+			user.username ||
+			"Tap to set username";
+	},
+	showApiKey: function(){
+		return Template.instance().showApiKey.get();
+	},
+});
+
+Template.profile.events({
+	"click .username-edit": function(event, instance){
+		if (this._id === Meteor.userId()){
+			pushDialogStack({
+				template: "usernameDialog",
+				element: event.currentTarget,
+			});
+		}
+	},
+	"click #at-resend-verification-email": function(event, instance){
+		if (!Meteor.user()) return;
+		Accounts.sendVerificationEmail(Meteor.userId(), this.address);
+		GlobalUI.toast({
+			text: "Email verification sent to " + this.address,
+			template: "",
+			data: {},
+		});
+	},
+	"click .showApiKey": function(event, instance){
+		instance.showApiKey.set(!instance.showApiKey.get());
+	},
+	"click .generateMyApiKey": function(event, instance){
+		Meteor.call("generateMyApiKey");
+		instance.showApiKey.set(true);
+	},
+});

app/client/views/user/profile/userNameDialog/usernameDialog.html

@@ -0,0 +1,24 @@
+<template name="usernameDialog">
+	<div class="fit layout vertical">
+		<app-header-layout has-scrolling-region class="feedback flex">
+			<app-header fixed effects="waterfall">
+				<app-toolbar>
+				  <div main-title>Change Username</div>
+				</app-toolbar>
+			</app-header>
+			<div class="form flex">
+				<div>
+					<paper-input id="usernameInput" label="Username" value={{profileName}} invalid={{errorMessage}} error-message={{errorMessage}}></paper-input>
+				</div>
+			</div>
+		</app-header-layout>
+		<div class="buttons layout horizontal end-justified">
+			<paper-button id="cancelButton">
+				Cancel
+			</paper-button>
+			<paper-button id="changeButton" disabled={{invalid}}>
+				Change Username
+			</paper-button>
+		</div>
+	</div>
+</template>

app/client/views/user/profile/userNameDialog/usernameDialog.js

@@ -0,0 +1,53 @@
+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();
+			});
+		}
+	},
+	"click #changeButton": function(event, instance){
+		var username = instance.find("#usernameInput").value;
+		popDialogStack();
+		username = username.trim().replace(/\s+/gm, " ");
+		var profileName = username;
+		username = username.toLowerCase().replace(/\s+/gm, "");
+		Meteor.users.update(
+			Meteor.userId(),
+			{$set: {username: username, "profile.username": profileName}}
+		);
+	},
+	"click #cancelButton": function(event, instance){
+		popDialogStack();
+	},
+});