From dd5f2f7a1215f5a19e0cd2b6f073b3fb143efa7e Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Sun, 17 Feb 2013 00:42:42 -0500
Subject: [PATCH] move more html files around

---
 views/app/avatar.html   | 161 ++++++++++++++++++++++++++++++++++++++++
 views/app/footer.html   |   2 +-
 views/app/header.html   |  40 ++--------
 views/app/index.html    |  21 +++---
 views/app/modals.html   | 158 +--------------------------------------
 views/app/party.html    |  46 ++++++++++++
 views/app/profile.html  |  92 -----------------------
 views/app/settings.html |  69 +++++++++++++++++
 8 files changed, 299 insertions(+), 290 deletions(-)
 create mode 100644 views/app/avatar.html
 create mode 100644 views/app/party.html
 delete mode 100644 views/app/profile.html
 create mode 100644 views/app/settings.html

diff --git a/views/app/avatar.html b/views/app/avatar.html
new file mode 100644
index 0000000000..978d3406d1
--- /dev/null
+++ b/views/app/avatar.html
@@ -0,0 +1,161 @@
+<modals:>
+    <app:myModal modalId="avatar-modal" header="Customize">
+        {#with _user.preferences}
+
+            <ul class="nav nav-tabs">
+                <li class="active"><a data-toggle='tab' href="#profileCustomize">Avatar</a></li>
+                <li><a data-toggle='tab' href="#profileEdit">Profile</a></li>
+            </ul>
+
+            <div class="tab-content">
+                <div class="tab-pane active" id="profileCustomize">
+
+                    <!-- user avatar preview -->
+                    <figure class="avatar-window">
+                        <app:avatar:avatar profile={_user} minimal="true" />
+                        <figcaption class="char-name">{username(_user.auth)}</figcaption>
+                    </figure>
+
+                    <!-- customization options -->
+                    <menu type="list">
+                        <!-- gender -->
+                        <li class="customize-menu">
+                            <menu label="Gender">
+                                <button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
+                                <button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
+                            </menu>
+                        </li>
+
+                        <!-- hair -->
+                        <li class="customize-menu">
+                            <menu label="Hair">
+                                <button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
+                                <button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
+                                <button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
+                                <button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
+                            </menu>
+                        </li>
+
+                        <!-- skin -->
+                        <li class="customize-menu">
+                            <menu label="Skin">
+                                <button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
+                                <button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
+                                <button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
+                                <button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
+                                <button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
+                            </menu>
+                        </li>
+                    </menu>
+
+                    {#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
+                    <menu type="list">
+                        <li class="customize-menu">
+                            <menu label="Clothing">
+                                <button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
+                                <button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
+                            </menu>
+                        </li>
+                    </menu>
+                    {/}
+                </div>
+
+                <div class="tab-pane" id="profileEdit"><app:avatar:profile user="{_user}" main="true" /></div>
+            </div>
+            {/}
+            <@footer>
+                <button data-dismiss="modal" class="btn btn-success">Ok</button>
+            </@footer>
+    </app:myModal>
+
+<avatar:>
+    <div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='modal' data-target='#avatar-modal'>
+        {#unless @minimal}{#if @profile.items.pet}<img src='img/BrowserQuest/habitrpg_mods/{@profile.items.pet.icon}' />{/}{/}
+        <div class='character-sprites'>
+            {#with @profile.preferences as :p}
+            <span class='{:p.gender}_skin_{:p.skin}'></span>
+            <span class='{:p.gender}_hair_{:p.hair}'></span>
+            <span class="{equipped(@profile, 'armor')}"></span>
+            <span class="{equipped(@profile, 'head')}"></span>
+            <span class='{:p.gender}_shield_{@profile.items.shield}'></span>
+            <span class='{:p.gender}_weapon_{@profile.items.weapon}'></span>
+            {/}
+        </div>
+        {{#unless @minimal}}
+        <div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
+        {{/}}
+    </div>
+
+<profile:>
+    <div class='row-fluid'>
+        <div class='span6'>
+            {#if _profileEditing}
+            <a class='btn btn-success' x-bind="click:profileSave">Save</a>
+            <!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
+            <div class="control-group">
+                <label class="control-label" for="profileImageUrl">Photo Url</label>
+                <div class="controls">
+                    <input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
+                </div>
+            </div>
+
+            <div class="control-group">
+                <label class="control-label" for="profileFullName">Full Name</label>
+                <div class="controls">
+                    <input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
+                </div>
+            </div>
+
+            <div class="control-group">
+                <label class="control-label" for="profileBlurb">Blurb</label>
+                <div class="controls">
+                    <textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
+                </div>
+            </div>
+
+            <div class="control-group">
+                <label class="control-label" for="profileWebsite">Websites</label>
+                <div class="controls">
+                    <form x-bind="submit:profileAddWebsite">
+                        <input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
+                    </form>
+                </div>
+                <ul>
+                    {#each _user.profile.websites as :website}
+                    <!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
+                    <li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
+                    {/}
+                </ul>
+
+            </div>
+            <a class='btn btn-success' x-bind="click:profileSave">Save</a>
+            {else}
+            <h3>
+                {#if @user.profile.name}{@user.profile.name}
+                {else}{username(@user.auth)}
+                {/}
+                {#if @main}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
+            </h3>
+            {#if @user.profile.imageUrl}
+            <img src="{@user.profile.imageUrl}" />
+            {/}
+            {#if @user.profile.blurb}
+            <p>{@user.profile.blurb}</p>
+            {/}
+            {#if @user.profile.websites}
+            <ul>
+                {#each @user.profile.websites as :website}
+                <li>{:website}</li>
+                {/}
+            </ul>
+            {/}
+
+            {/}
+        </div>
+
+        <div class='span6'>
+            <h3>Badges</h3>
+            <p>Coming Soon</p>
+        </div>
+
+    </div>
\ No newline at end of file
diff --git a/views/app/footer.html b/views/app/footer.html
index a99aaba7f1..dbe6f90aba 100644
--- a/views/app/footer.html
+++ b/views/app/footer.html
@@ -1,4 +1,4 @@
-<appFooter:>
+<footer:>
     <footer class=footer>
         <div class=container>
             {#if equal(_view.nodeEnv, 'production')}
diff --git a/views/app/header.html b/views/app/header.html
index 5acb4b472f..f3bc5f3c3a 100644
--- a/views/app/header.html
+++ b/views/app/header.html
@@ -1,19 +1,19 @@
-<mainHeader:>
+<header:>
     <div class="row-fluid">
         <div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
 
             <!-- avatar -->
             <figure class="main-avatar-wrap">
-                <app:avatar profile={_user} main="true" />
+                <app:avatar:avatar profile={_user} main="true" />
             </figure>
 
             <!-- party -->
             {#each _partyMembers as :member}
-            {#unless equal(:member.id, _userId)}
-            <figure class="party-avatar-wrap" rel="tooltip" title="{username(:member.auth)}" data-placement="bottom">
-                <app:avatar profile={:member} party="true" />
-            </figure>
-            {/}
+                {#unless equal(:member.id, _userId)}
+                    <figure class="party-avatar-wrap" rel="tooltip" title="{username(:member.auth)}" data-placement="bottom">
+                        <app:avatar:avatar profile={:member} party="true" />
+                    </figure>
+                {/}
             {/}
 
             <!-- progress bars -->
@@ -37,30 +37,4 @@
             <!-- end .char-status -->
         </div>
         <!-- end .row-fluid -->
-    </div>
-
-<userMenu:>
-    <div class='pull-right'>
-        {#unless _loggedIn}
-        <a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
-        {else}
-        <div class="btn-group">
-            <button class="btn btn-small">
-                {#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
-                {username(_user.auth)}
-            </button>
-            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu">
-                <li><a href="#" data-target="#settings-modal" data-toggle="modal">Settings</a></li>
-                {#if _user.flags.partyEnabled}
-                <li><a href="#" data-target="#party-modal" data-toggle="modal">
-                    Party{#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
-                </a></li>
-                {/}
-                <li><a href='/logout'>Logout</a></li>
-            </ul>
-        </div>
-        {/}
     </div>
\ No newline at end of file
diff --git a/views/app/index.html b/views/app/index.html
index e4c1832ef4..f304e6469e 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -1,10 +1,12 @@
 <import: src="modals" ns="">
-<import: src="profile" ns="">
-<import: src="alerts" ns="">
 <import: src="tasks" ns="">
+<import: src="header">
+<import: src="alerts" ns="">
+<import: src="avatar">
 <import: src="rewards" ns="">
-<import: src="footer" ns="">
-<import: src="header" ns="">
+<import: src="footer">
+<import: src="settings">
+<import: src="party">
 
 <Title:>
   HabitRPG | Gamify Your Life
@@ -17,8 +19,8 @@
   <app:modalDialogs />
   <ui:connectionAlert>
   <div id="head" class="container-fluid">
-    <app:userMenu />
-    <app:mainHeader />
+    <app:settings:menu />
+    <app:header:header />
   </div>
 
 <Body:>
@@ -31,10 +33,11 @@
     </div>
   </div>
   
-  <app:appFooter />
+  <app:footer:footer />
 
 <Scripts:>
-    <!--<script src="js/progress-polyfill.js"></script>-->
+    <!-- scripts go in /src/app/browser.coffee, that way we can get min/concat -->
+    <!-- only the ones that are remote and can't be done async are here -->
     <script src="https://checkout.stripe.com/v2/checkout.js"></script>
     {#if equal(_view.nodeEnv,"production")}
         <!-- Google Analytics -->
@@ -49,4 +52,4 @@
                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
             })();
         </script>
-    {/}
+    {/}
\ No newline at end of file
diff --git a/views/app/modals.html b/views/app/modals.html
index 92ee097888..30dfb12803 100644
--- a/views/app/modals.html
+++ b/views/app/modals.html
@@ -1,93 +1,9 @@
 <modalDialogs:>
-    {#if _loggedIn}
-    <app:myModal modalId="settings-modal" header="Settings">
-        <h4>API</h4>
-        <small>Copy these for use in third party applications.</small>
-        <h6>User ID</h6>
-        <pre class=prettyprint>{_user.id}</pre>
 
-        <h6>API Token</h6>
-        <pre class=prettyprint>{_user.apiToken}</pre>
+    <app:avatar:modals />
+    <app:settings:modals />
+    <app:party:modals />
 
-        <hr/>
-        <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal">Reset</a>
-
-        <@footer>
-        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-    </@footer>
-    </app:myModal>
-
-    <app:myModal modalId="reset-modal" header="Reset">
-        <p>This resets your entire account - your tasks will be deleted and your character will start over.</p>
-        <p>This is highly discouraged because you'll lose historical data, which is useful for graphing your progress over time. However, some people find it useful in the beginning after playing with the app for a while.</p>
-        <@footer>
-        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-        <button data-dismiss="modal" x-bind=click:reset class="btn btn-danger btn-large">Reset</button>
-    </@footer>
-    </app:myModal>
-
-    <app:myModal modalId="party-modal">
-        {#if _user.party.current}
-        <h2>{_party.name}</h2>
-        <table class="table table-striped">
-            {#each _partyMembers as :member}
-            <tr><td>{username(:member.auth)}</td><td>({:member.id})</td></tr>
-            {/}
-        </table>
-        <form class=form-inline x-bind="submit: partyInvite">
-            {#if _view.partyError}
-            <div class='alert alert-danger'>{_view.partyError}</div>
-            {/}
-            <div class='control-group'>
-                <input type="text" class="input-medium" placeholder="User Id" value="{_newPartyMember}">
-                <input type="submit" class="btn" value="Invite" />
-            </div>
-        </form>
-        <a class='btn btn-danger' x-bind="click: partyLeave">Leave</a>
-
-        {else if _user.party.invitation}
-        <!-- TODO show by whom -->
-        <h2>You're Invited To {_party.name}</h2>
-        <a class='btn btn-success' x-bind="click: partyAccept">Accept</a>
-        <a class='btn btn-danger' x-bind="click: partyReject">Reject</a>
-
-        {else}
-        <h2>Create A Party</h2>
-        <!-- Not in a party , no invites - create a new one -->
-        <p>You are not in a party. You can either create one and invite friends, or if you want to join an existing party, have them enter:</p>
-        <pre class=prettyprint>{_user.id}</pre>
-        <form class=form-inline x-bind="submit: partyCreate">
-            {#if _view.partyError}
-            <div class='alert alert-danger'>{_view.partyError}</div>
-            {/}
-            <div class=control-group>
-                <input type="text" class="input-medium" placeholder="Party Name" value="{_newParty}" />
-                <input type="submit" class="btn" value="Create" />
-            </div>
-        </form>
-
-        {/}
-        <@footer>
-        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-    </@footer>
-    </app:myModal>
-
-    {else}
-    <app:myModal modalId="login-modal" header="Login / Register">
-        <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
-        <h3>Or</h3>
-
-        <ul class="nav nav-tabs">
-            <li class="active"><a href="#" data-toggle="tab" data-target="#login">Login</a></li>
-            <li><a href="#" data-toggle="tab" data-target="#register">Register</a></li>
-        </ul>
-
-        <div class="tab-content">
-            <div class="tab-pane active" id="login"><derby-auth:login /></div>
-            <div class="tab-pane" id="register"><derby-auth:register /></div>
-        </div>
-    </app:myModal>
-    {/}
     <!-- Game Over Modal -->
     <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}">
         <app:myModal noDismiss=true modalId='dead-modal'>
@@ -121,75 +37,7 @@
     </@footer>
     </app:myModal>
 
-    <!-- $customizations-modal -->
-    <app:myModal modalId="customizations-modal" header="Customize">
-        {#with _user.preferences}
 
-        <ul class="nav nav-tabs">
-            <li class="active"><a data-toggle='tab' href="#profileCustomize">Avatar</a></li>
-            <li><a data-toggle='tab' href="#profileEdit">Profile</a></li>
-        </ul>
-
-        <div class="tab-content">
-            <div class="tab-pane active" id="profileCustomize">
-
-                <!-- user avatar preview -->
-                <figure class="avatar-window">
-                    <app:avatar profile={_user} minimal="true" />
-                    <figcaption class="char-name">{username(_user.auth)}</figcaption>
-                </figure>
-
-                <!-- customization options -->
-                <menu type="list">
-                    <!-- gender -->
-                    <li class="customize-menu">
-                        <menu label="Gender">
-                            <button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
-                            <button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
-                        </menu>
-                    </li>
-
-                    <!-- hair -->
-                    <li class="customize-menu">
-                        <menu label="Hair">
-                            <button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
-                            <button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
-                            <button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
-                            <button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
-                        </menu>
-                    </li>
-
-                    <!-- skin -->
-                    <li class="customize-menu">
-                        <menu label="Skin">
-                            <button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
-                            <button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
-                            <button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
-                            <button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
-                            <button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
-                        </menu>
-                    </li>
-                </menu>
-
-                {#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
-                <menu type="list">
-                    <li class="customize-menu">
-                        <menu label="Clothing">
-                            <button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
-                            <button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
-                        </menu>
-                    </li>
-                </menu>
-                {/}
-            </div>
-
-            <div class="tab-pane" id="profileEdit"><app:profile user="{_user}" main="true" /></div>
-        </div>
-        {/}
-        <@footer>
-        <button data-dismiss="modal" class="btn btn-success">Ok</button>
-    </@footer>
-    </app:myModal>
 
 <!-- $modal-template -->
 <myModal: nonvoid>
diff --git a/views/app/party.html b/views/app/party.html
new file mode 100644
index 0000000000..17097e7b6a
--- /dev/null
+++ b/views/app/party.html
@@ -0,0 +1,46 @@
+<modals:>
+    <app:myModal modalId="party-modal">
+        {#if _user.party.current}
+        <h2>{_party.name}</h2>
+        <table class="table table-striped">
+            {#each _partyMembers as :member}
+            <tr><td>{username(:member.auth)}</td><td>({:member.id})</td></tr>
+            {/}
+        </table>
+        <form class=form-inline x-bind="submit: partyInvite">
+            {#if _view.partyError}
+            <div class='alert alert-danger'>{_view.partyError}</div>
+            {/}
+            <div class='control-group'>
+                <input type="text" class="input-medium" placeholder="User Id" value="{_newPartyMember}">
+                <input type="submit" class="btn" value="Invite" />
+            </div>
+        </form>
+        <a class='btn btn-danger' x-bind="click: partyLeave">Leave</a>
+
+        {else if _user.party.invitation}
+        <!-- TODO show by whom -->
+        <h2>You're Invited To {_party.name}</h2>
+        <a class='btn btn-success' x-bind="click: partyAccept">Accept</a>
+        <a class='btn btn-danger' x-bind="click: partyReject">Reject</a>
+
+        {else}
+        <h2>Create A Party</h2>
+        <!-- Not in a party , no invites - create a new one -->
+        <p>You are not in a party. You can either create one and invite friends, or if you want to join an existing party, have them enter:</p>
+        <pre class=prettyprint>{_user.id}</pre>
+        <form class=form-inline x-bind="submit: partyCreate">
+            {#if _view.partyError}
+            <div class='alert alert-danger'>{_view.partyError}</div>
+            {/}
+            <div class=control-group>
+                <input type="text" class="input-medium" placeholder="Party Name" value="{_newParty}" />
+                <input type="submit" class="btn" value="Create" />
+            </div>
+        </form>
+
+        {/}
+        <@footer>
+            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+        </@footer>
+    </app:myModal>
\ No newline at end of file
diff --git a/views/app/profile.html b/views/app/profile.html
deleted file mode 100644
index 44ad4a84e7..0000000000
--- a/views/app/profile.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!-- $avatar-template -->
-<avatar:>
-    <div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='{{#if @main}}modal{{/}}' data-target='{{#if @main}}#customizations-modal{{/}}'>
-        {#unless @minimal}{#if @profile.items.pet}<img src='img/BrowserQuest/habitrpg_mods/{@profile.items.pet.icon}' />{/}{/}
-        <div class='character-sprites'>
-            {#with @profile.preferences as :p}
-            <span class='{:p.gender}_skin_{:p.skin}'></span>
-            <span class='{:p.gender}_hair_{:p.hair}'></span>
-            <span class="{equipped(@profile, 'armor')}"></span>
-            <span class="{equipped(@profile, 'head')}"></span>
-            <span class='{:p.gender}_shield_{@profile.items.shield}'></span>
-            <span class='{:p.gender}_weapon_{@profile.items.weapon}'></span>
-            {/}
-        </div>
-        {{#unless @minimal}}
-        <div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
-        {{/}}
-    </div>
-
-<profile:>
-    <div class='row-fluid'>
-        <div class='span6'>
-            {#if _profileEditing}
-            <a class='btn btn-success' x-bind="click:profileSave">Save</a>
-            <!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
-            <div class="control-group">
-                <label class="control-label" for="profileImageUrl">Photo Url</label>
-                <div class="controls">
-                    <input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
-                </div>
-            </div>
-
-            <div class="control-group">
-                <label class="control-label" for="profileFullName">Full Name</label>
-                <div class="controls">
-                    <input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
-                </div>
-            </div>
-
-            <div class="control-group">
-                <label class="control-label" for="profileBlurb">Blurb</label>
-                <div class="controls">
-                    <textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
-                </div>
-            </div>
-
-            <div class="control-group">
-                <label class="control-label" for="profileWebsite">Websites</label>
-                <div class="controls">
-                    <form x-bind="submit:profileAddWebsite">
-                        <input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
-                    </form>
-                </div>
-                <ul>
-                    {#each _user.profile.websites as :website}
-                    <!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
-                    <li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
-                    {/}
-                </ul>
-
-            </div>
-            <a class='btn btn-success' x-bind="click:profileSave">Save</a>
-            {else}
-            <h3>
-                {#if @user.profile.name}{@user.profile.name}
-                {else}{username(@user.auth)}
-                {/}
-                {#if @main}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
-            </h3>
-            {#if @user.profile.imageUrl}
-            <img src="{@user.profile.imageUrl}" />
-            {/}
-            {#if @user.profile.blurb}
-            <p>{@user.profile.blurb}</p>
-            {/}
-            {#if @user.profile.websites}
-            <ul>
-                {#each @user.profile.websites as :website}
-                <li>{:website}</li>
-                {/}
-            </ul>
-            {/}
-
-            {/}
-        </div>
-
-        <div class='span6'>
-            <h3>Badges</h3>
-            <p>Coming Soon</p>
-        </div>
-
-    </div>
\ No newline at end of file
diff --git a/views/app/settings.html b/views/app/settings.html
new file mode 100644
index 0000000000..adbf8aab38
--- /dev/null
+++ b/views/app/settings.html
@@ -0,0 +1,69 @@
+<modals:>
+    {{#if _loggedIn}}
+        <app:myModal modalId="settings-modal" header="Settings">
+            <h4>API</h4>
+            <small>Copy these for use in third party applications.</small>
+            <h6>User ID</h6>
+            <pre class=prettyprint>{_user.id}</pre>
+
+            <h6>API Token</h6>
+            <pre class=prettyprint>{_user.apiToken}</pre>
+
+            <hr/>
+            <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal">Reset</a>
+
+            <@footer>
+                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+            </@footer>
+        </app:myModal>
+
+        <app:myModal modalId="reset-modal" header="Reset">
+            <p>This resets your entire account - your tasks will be deleted and your character will start over.</p>
+            <p>This is highly discouraged because you'll lose historical data, which is useful for graphing your progress over time. However, some people find it useful in the beginning after playing with the app for a while.</p>
+            <@footer>
+                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+                <button data-dismiss="modal" x-bind=click:reset class="btn btn-danger btn-large">Reset</button>
+            </@footer>
+        </app:myModal>
+    {{else}}
+        <app:myModal modalId="login-modal" header="Login / Register">
+            <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
+            <h3>Or</h3>
+
+            <ul class="nav nav-tabs">
+                <li class="active"><a href="#" data-toggle="tab" data-target="#login">Login</a></li>
+                <li><a href="#" data-toggle="tab" data-target="#register">Register</a></li>
+            </ul>
+
+            <div class="tab-content">
+                <div class="tab-pane active" id="login"><derby-auth:login /></div>
+                <div class="tab-pane" id="register"><derby-auth:register /></div>
+            </div>
+        </app:myModal>
+    {{/}}
+
+<menu:>
+    <div class='pull-right'>
+        {#unless _loggedIn}
+        <a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
+        {else}
+        <div class="btn-group">
+            <button class="btn btn-small">
+                {#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
+                {username(_user.auth)}
+            </button>
+            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+                <li><a href="#" data-target="#settings-modal" data-toggle="modal">Settings</a></li>
+                {#if _user.flags.partyEnabled}
+                <li><a href="#" data-target="#party-modal" data-toggle="modal">
+                    Party{#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
+                </a></li>
+                {/}
+                <li><a href='/logout'>Logout</a></li>
+            </ul>
+        </div>
+        {/}
+    </div>
\ No newline at end of file