Implement new design for user and org settings

Fixes #1376

static/partials/org-view.html

@@ -35,14 +35,6 @@
         <span class="cor-tab" tab-title="Default Permissions" tab-target="#default" ng-show="isAdmin">
           <i class="fa ci-stamp"></i>
         </span>
-        <span class="cor-tab" tab-title="Billing" tab-target="#usage"
-              quay-show="isAdmin && Features.BILLING">
-          <i class="fa fa-credit-card"></i>
-        </span>
-        <span class="cor-tab" tab-title="Billing Invoices" tab-target="#invoices"
-              tab-init="showInvoices()" quay-show="isAdmin && Features.BILLING">
-          <i class="fa ci-invoice"></i>
-        </span>
         <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs"
               tab-init="showLogs()" ng-show="isAdmin">
           <i class="fa fa-bar-chart"></i>
@@ -52,7 +44,7 @@
           <i class="fa ci-application"></i>
         </span>
         <span class="cor-tab" tab-title="Organization Settings" tab-target="#settings"
-              ng-show="isAdmin">
+              ng-show="isAdmin" tab-init="showBilling()">
           <i class="fa fa-gears"></i>
         </span>
       </div> <!-- /cor-tabs -->
@@ -95,45 +87,60 @@
                makevisible="showApplicationsCounter"></div>
         </div>
 
-        <!-- Plan and Usage -->
-        <div id="usage" class="tab-pane" quay-require="['BILLING']">
-          <h3>Plan Usage and Billing</h3>
-          <div ng-if="isAdmin">
-            <div class="plan-manager" organization="organization.name"
-                 has-subscription="hasSubscription"></div>
-            <hr ng-show="hasSubscription">
-            <div class="billing-options" organization="organization" ng-show="hasSubscription"></div>
-          </div>
-        </div>
-
-        <!-- Billing Invoices -->
-        <div id="invoices" class="tab-pane" quay-require="['BILLING']">
-          <h3>Billing Invoices</h3>
-          <div class="billing-invoices" organization="organization"
-               makevisible="showInvoicesCounter"></div>
-        </div>
-
         <!-- Settings -->
         <div id="settings" class="tab-pane">
           <div ng-if="isAdmin">
-            <h3>Organization Settings</h3>
+            <!-- Org Settings -->
+            <div class="settings-section">
+              <h3>Organization Settings</h3>
+              <table class="co-list-table">
+                <tr>
+                  <td>Namespace:</td>
+                  <td>
+                    {{ organization.name }}
+                    <div class="help-text">Organization names cannot currently be changed. Please <a href="/contact">contact support</a> to migrate accounts.</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>Avatar:</td>
+                  <td>
+                    <span class="avatar" size="48" data="organization.avatar"></span>
+                    <div class="help-text" ng-if="Config.AVATAR_KIND == 'local'">Avatar is generated based off the organization's name.</div>
+                    <div class="help-text" ng-if="Config.AVATAR_KIND == 'gravatar'">Avatar is served by <a href="http://gravatar.com" rel="nofollow" target="_blank">Gravatar</a> based on the {{ organization.email }} e-mail address.</div>
+                  </td>
+                </tr>
+                <tr quay-show="Features.MAILING">
+                  <td>Email Address:</td>
+                  <td>
+                    <a class="co-modify-link" ng-click="showChangeEmail()">{{ organization.email }}</a>
+                  </td>
+                </tr>
+              </table>
+            </div>
 
-            <div class="panel" ng-show="!orgScope.changingOrganization">
-              <div class="panel-title">Organization's e-mail address</div>
-              <div class="panel-content" style="padding-left: 20px; margin-top: 10px;">
-                <form class="form-change" id="changeEmailForm" name="changeEmailForm" ng-submit="changeEmail()">
-                  <input type="email" class="form-control" style="max-width: 500px;"
-                         ng-model="orgScope.organizationEmail" required>
-                  <button class="btn btn-primary" type="submit"
-                          ng-disabled="changeEmailForm.$invalid || orgScope.organizationEmail == organization.email">
-                    Save
-                  </button>
-                </form>
-              </div>
+            <!-- Billing Information -->
+            <div class="settings-section">
+              <h3>Billing Information</h3>
+              <div class="billing-management-panel" organization="organization" is-enabled="showBillingCounter"></div>
             </div>
           </div>
         </div>
       </div> <!-- /cor-tab-content -->
     </div>
   </div>
+
+
+  <!-- Change email dialog -->
+  <div class="cor-confirm-dialog"
+     dialog-context="changeEmailInfo"
+     dialog-action="changeEmail(info, callback)"
+     dialog-title="Change E-mail Address"
+     dialog-action-title="Change Email"
+     dialog-form="context.emailform">
+     <form name="context.emailform" class="co-single-field-dialog">
+       Please enter a new email address.
+       <input type="email" class="form-control" placeholder="Your new e-mail address"
+              ng-model="changeEmailInfo.email" required>
+     </form>
+  </div>
 </div>