Implement new design for user and org settings

Fixes #1376

static/css/core-ui.css

@@ -866,6 +866,14 @@ a:focus {
   margin-right: 6px;
 }
 
+.co-dialog .co-single-field-dialog {
+  padding: 10px;
+}
+
+.co-dialog .co-single-field-dialog input {
+  margin-top: 10px;
+}
+
 .co-step-bar .co-step-element {
   cursor: default;
   display: inline-block;
@@ -1370,3 +1378,46 @@ a:focus {
     float: none;
   }
 }
+
+.co-list-table tr td:first-child {
+  font-weight: bold;
+  padding-right: 10px;
+  vertical-align: top;
+  width: 120px;
+  padding-left: 0px;
+}
+
+.co-list-table tr td {
+  padding: 10px;
+  font-size: 15px;
+}
+
+.co-list-table .help-text {
+  margin-top: 6px;
+  font-size: 14px;
+  color: #aaa;
+}
+
+.co-modify-link:after {
+  font-family: FontAwesome;
+  content: "\f054";
+  color: #ccc;
+  vertical-align: middle;
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.co-option-table tr td:first-child {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0px;
+  vertical-align: top;
+}
+
+.co-option-table tr td:last-child {
+  padding-bottom: 10px;
+}
+
+

static/css/directives/ui/billing-management-panel.css

@@ -0,0 +1,32 @@
+.billing-management-panel-element .credit-card-image {
+    width: 33px;
+    margin-right: 10px;
+}
+
+.billing-management-panel-element .credit-card-number {
+    display: inline-block;
+    font-size: 16px;
+    margin-right: 10px;
+}
+
+.billing-management-panel-element .receipt-form {
+    padding-top: 20px;
+    padding-bottom: 12px;
+}
+
+.billing-management-panel-element .sub-usage {
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+
+.billing-management-panel-element .sub-usage .fa {
+    margin-right: 4px;
+}
+
+.billing-management-panel-element .sub-usage .red {
+    color: #D64456;
+}
+
+.billing-management-panel-element .sub-usage .yellow {
+    color: #FCA657;
+}

static/css/directives/ui/billing-options.css

@@ -1,15 +0,0 @@
-.billing-options .settings-option {
-  padding: 4px;
-  font-size: 18px;
-  margin-bottom: 10px;
-}
-
-.billing-options .settings-option label {
-  margin-left: 6px;
-}
-
-.billing-options .settings-option .settings-description {
-  font-size: 16px;
-  color: #888;
-  padding-left: 26px;
-}

static/css/directives/ui/convert-user-to-org.css

@@ -2,6 +2,10 @@
   padding: 10px;
 }
 
+.convert-user-to-org .convert-form {
+  padding: 20px;
+}
+
 .convert-user-to-org .convert-form h3 {
   margin-bottom: 20px;
 }
@@ -67,3 +71,7 @@
 .convert-user-to-org .form-group-content .co-table {
   margin: 0px;
 }
+
+.convert-user-to-org .co-option-table {
+  margin-top: 12px;
+}

static/css/pages/billing.css

@@ -0,0 +1,3 @@
+.billing-page .co-main-content-panel {
+    padding: 40px;
+}

static/css/pages/org-view.css

@@ -7,3 +7,8 @@
   margin-bottom: 20px;
   margin-top: 0px;
 }
+
+.org-view .settings-section {
+  margin-bottom: 50px;
+}
+

static/css/pages/user-view.css

@@ -8,27 +8,15 @@
 }
 
 .user-view h3 {
-  margin-bottom: 20px;
   margin-top: 0px;
 }
 
 .user-view .section-description-header {
-  padding-left: 40px;
   position: relative;
   margin-bottom: 20px;
   min-height: 50px;
 }
 
-.user-view .section-description-header:before {
-  font-family: FontAwesome;
-  content: "\f05a";
-  position: absolute;
-  top: -4px;
-  left: 6px;
-  font-size: 27px;
-  color: #888;
-}
-
 .user-view .user-settings-form .row {
   padding: 10px;
   margin: 0px;
@@ -53,3 +41,6 @@
   box-shadow: none;
 }
 
+.user-view .settings-section {
+  margin-bottom: 50px;
+}

static/css/quay.css

@@ -449,48 +449,6 @@ i.toggle-icon:hover {
   visibility: hidden;
 }
 
-
-.billing-options-element .current-card {
-  font-size: 16px;
-  margin-bottom: 20px;
-}
-
-
-.billing-options-element .current-card .no-card-outline {
-  display: inline-block;
-  width: 73px;
-  height: 44px;
-  vertical-align: middle;
-  margin-right: 10px;
-  border: 1px dashed #aaa;
-  border-radius: 4px;
-}
-
-.billing-options-element .current-card .last4 {
-  color: #aaa;
-}
-
-.billing-options-element .current-card .last4 b {
-  color: black;
-}
-
-.billing-options-element .current-card .expires:before {
-  content: "Expires:";
-  color: #aaa;
-  font-size: 12px;
-}
-
-
-.billing-options-element .current-card .expires {
-  margin-left: 20px;
-  font-size: 12px;
-}
-
-.billing-options-element .current-card img {
-  margin-right: 10px;
-  vertical-align: middle;
-}
-
 .organization-header-element {
   padding: 20px;
   margin-bottom: 20px;
@@ -4077,24 +4035,12 @@ i.rocket-icon {
 }
 
  .section-description-header {
-  padding-left: 40px;
   position: relative;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   min-height: 50px;
-  border-bottom: 1px solid #eee;
   padding-bottom: 10px;
 }
 
-.section-description-header:before {
-  font-family: FontAwesome;
-  content: "\f05a";
-  position: absolute;
-  top: -4px;
-  left: 6px;
-  font-size: 27px;
-  color: #888;
-}
-
 .nvtooltip h3 {
   margin: 0;
   padding: 4px 14px;

static/directives/billing-management-panel.html

@@ -0,0 +1,80 @@
+<div class="billing-management-panel-element">
+  <div class="cor-loader-inline" ng-show="updating"></div>
+  <div ng-show="!updating">
+    <table class="co-list-table">
+      <tr>
+        <td>Current Plan:</td>
+        <td>
+          <div class="sub-usage" ng-if="subscription.usedPrivateRepos > currentPlan.privateRepos">
+            <i class="fa fa-exclamation-triangle red"></i> <strong>{{ subscription.usedPrivateRepos }}</strong> private repositories exceeds the amount allowed by your plan. Upgrade your plan to avoid service disruptions.
+          </div>
+
+          <div class="sub-usage" ng-if="subscription.usedPrivateRepos == currentPlan.privateRepos">
+            <i class="fa fa-exclamation-triangle yellow"></i> <strong>{{ subscription.usedPrivateRepos }}</strong> private repositories is the maximum allowed by your plan. Upgrade your plan to create more private repositories.
+          </div>
+
+          <a class="co-modify-link" ng-href="{{ getEntityPrefix() }}/billing">{{ currentPlan.privateRepos }} private repositories</a>
+          <div class="help-text">Up to {{ currentPlan.privateRepos }} private repositories, unlimited public repositories</div>
+        </td>
+      </tr>
+      <tr ng-show="currentCard">
+        <td>Credit Card:</td>
+        <td>
+          <img class="credit-card-image" ng-src="/static/img/creditcards/{{ getCreditImage(currentCard) }}">
+          <span class="credit-card-number">
+            &#8226;&#8226;&#8226;&#8226;&nbsp;
+            &#8226;&#8226;&#8226;&#8226;&nbsp;
+            &#8226;&#8226;&#8226;&#8226;&nbsp;
+            {{ currentCard.last4 }}
+          </span>
+          <a class="co-modify-link" ng-click="changeCreditCard()">Change card</a>
+          <div class="help-text">Expires {{ currentCard.exp_month }}/{{ currentCard.exp_year }}</div>
+        </td>
+      </tr>
+      <tr>
+        <td>Invoices:</td>
+        <td>
+          <a ng-href="{{ getEntityPrefix() }}/billing/invoices">View Invoices</a>
+        </td>
+      </tr>
+      <tr>
+        <td>Receipts:</td>
+        <td>
+          <a class="co-modify-link" ng-click="showChangeReceipts()" ng-show="!invoice_email">Do not email after successful charges</a>
+          <a class="co-modify-link" ng-click="showChangeReceipts()" ng-show="invoice_email">Email receipts to {{ invoice_email_address }}</a>
+        </td>
+      </tr>
+    </table>
+  </div>
+
+  <!-- Change receipts dialog -->
+  <div class="cor-confirm-dialog"
+     dialog-context="changeReceiptsInfo"
+     dialog-action="changeReceipts(info, callback)"
+     dialog-title="Receipts Settings"
+     dialog-action-title="Update Setting"
+     dialog-form="context.receiptform">
+    <form class="receipt-form" name="context.receiptform">
+      <table class="co-option-table">
+        <tr>
+          <td><input type="radio" id="emailReceiptNo" ng-model="changeReceiptsInfo.sendOption" ng-value="false"></td>
+          <td>
+            <label for="emailReceiptNo">Do not send email receipts</label>
+            <div class="help-text">Log into your account to view invoices</div>
+          </td>
+        </tr>
+        <tr>
+          <td><input type="radio" id="emailReceiptYes" ng-model="changeReceiptsInfo.sendOption" ng-value="true"></td>
+          <td>
+             <label for="emailReceiptYes">Send receipts via email</label>
+            <div class="help-text">
+              After every successful charge send an email to:
+              <div style="margin-top: 6px;"><input type="email" class="form-control" ng-model="changeReceiptsInfo.address" required></div>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </form>
+  </div>
+
+</div>

static/directives/billing-options.html

@@ -1,65 +0,0 @@
-<div class="billing-options-element">
-  <!-- Credit Card -->
-  <div style="margin-bottom: 20px">
-    <div class="panel-title">
-      Credit Card
-    </div>
-    <div class="panel-body">
-      <div class="cor-loader-inline" ng-show="!currentCard || changingCard"></div>
-      <div class="current-card" ng-show="currentCard && !changingCard">
-        <div class="alert alert-warning" ng-if="currentCard.last4 && isExpiringSoon(currentCard)">
-          Your current credit card is expiring soon!
-        </div>
-
-        <img ng-src="{{ '/static/img/creditcards/' + getCreditImage(currentCard) }}" ng-show="currentCard.last4">
-        <span class="no-card-outline" ng-show="!currentCard.last4"></span>
-
-        <span class="last4" ng-show="currentCard.last4">****-****-****-<b>{{ currentCard.last4 }}</b></span>
-        <span class="expires" ng-show="currentCard.last4">
-          {{ currentCard.exp_month }} / {{ currentCard.exp_year }}
-        </span>
-
-        <span class="not-found" ng-show="!currentCard.last4">No credit card found</span>
-      </div>
-
-      <button class="btn btn-primary" ng-show="currentCard && !changingCard" ng-click="changeCard()">
-        Change Credit Card
-      </button>
-    </div>
-  </div>
-
-  <!-- Options -->
-  <div style="margin-bottom: 20px">
-    <div class="panel-title">
-      Billing Receipts
-      <div class="cor-loader-inline" ng-show="working"></div>
-    </div>
-    <div class="panel-body">
-      <div class="settings-option">
-        <input id="invoiceEmail" type="checkbox" ng-model="invoice_email">
-        <label for="invoiceEmail">Send Receipt Emails</label>
-        <div class="settings-description">
-          If checked, a receipt email will be sent to <a ng-click="changeInvoiceEmailAddress()">{{ obj.invoice_email_address || obj.email }}</a> on every successful charge
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Modal message dialog -->
-  <div class="modal fade" id="cannotchangecardModal">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title">Cannot change credit card</h4>
-        </div>
-        <div class="modal-body">
-          Your credit card could not be changed
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        </div>
-      </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
-  </div><!-- /.modal -->
-</div>

static/directives/convert-user-to-org.html

@@ -1,8 +1,16 @@
 <div class="convert-user-to-org-element">
+  <div class="co-dialog modal fade" id="convertAccountModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h4 class="modal-title">Change Account Type</h4>
+        </div>
+        <div class="modal-body">
           <!-- Step 0 -->
           <div ng-show="convertStep == 0">
             <div ng-show="user.organizations.length > 0">
-      Cannot convert this account into an organization, as it is a member of {{user.organizations.length}} other
+              This account cannot be converted into an organization, as it is a member of {{user.organizations.length}} other
               organization{{user.organizations.length > 1 ? 's' : ''}}.
               <br><br>
               Please leave the following organizations first:
@@ -15,7 +23,22 @@
             </div>
 
             <div ng-show="user.organizations.length == 0">
-      <button class="btn btn-primary" ng-click="showConvertForm()">Start conversion process <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></button>
+              <table class="co-option-table">
+                <tr>
+                  <td><input type="radio" id="accountTypeI" ng-model="accountType" value="user"></td>
+                  <td>
+                    <label for="accountTypeI">Individual account (current)</label>
+                    <div class="help-text">Single account with multiple repositories</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><input type="radio" id="accountTypeO" ng-model="accountType" value="organization"></td>
+                  <td>
+                     <label for="accountTypeO">Organization</label>
+                    <div class="help-text">Multiple users and teams that share access and billing under a single namespace</div>
+                  </td>
+                </tr>
+              </table>
             </div>
           </div>
 
@@ -24,7 +47,7 @@
             Fill out the form below to convert your current user account into an organization. Your existing repositories will be maintained under the
             namespace. All <strong>direct</strong> permissions delegated to {{ user.username }} will be deleted.
 
-    <form method="post" name="convertForm" id="convertForm" ng-submit="convertToOrg()">
+            <form method="post" name="convertForm" id="convertForm" ng-submit="nextStep()">
               <div class="form-group">
                 <label for="orgName">Organization Name</label>
                 <div class="form-group-content">
@@ -50,63 +73,36 @@
                   </span>
                 </div>
               </div>
-
-      <!-- Plans Table -->
-      <div class="form-group plan-group" quay-require="['BILLING']">
-        <label>Organization Plan</label>
-        <div class="form-group-content">
-          <div class="plans-table" plans="orgPlans" current-plan="org.plan"></div>
-          <span class="description">The billing plan for the new organization. If private repositories are unneeded, select "Open Source".</span>
-        </div>
-      </div>
-
-      <div class="button-bar">
-        <button class="btn btn-large btn-danger" type="submit"
-                ng-disabled="convertForm.$invalid || (Features.BILLING && !org.plan)"
-                analytics-on analytics-event="convert_to_organization">
-          Convert To Organization
-        </button>
-      </div>
             </form>
           </div>
 
-  <!-- Modal message dialog -->
+          <!-- Step 2 -->
-  <div class="modal fade" id="cannotconvertModal">
+          <div class="convert-form" ng-show="convertStep == 2">
-    <div class="modal-dialog co-dialog">
+            Please select the billing plan to use for the new organization. Select "Open Source" to create an organization without
-      <div class="modal-content">
+            private repositories.
-        <div class="modal-header">
+            <div class="plans-table" plans="orgPlans" current-plan="org.plan"></div>
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title">Cannot convert account</h4>
           </div>
-        <div class="modal-body">
+
-          Your account could not be converted. Please try again in a moment.
+          <!-- Step 3 (conversion) -->
+          <div class="convert-form" ng-show="convertStep == 3">
+            <div class="cor-loader"></div>
           </div>
-        <div class="modal-footer">
+
-          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+        <div class="modal-footer" ng-show="convertStep < 3">
+          <button class="btn btn-default" ng-show="convertStep == 0 && accountType == 'user'" data-dismiss="modal">Close</button>
+          <button class="btn btn-primary" ng-show="convertStep == 0 && accountType == 'organization'" ng-click="showConvertForm()">Convert Account</button>
+          <button class="btn btn-primary" ng-show="convertStep == 1"  ng-disabled="convertForm.$invalid" ng-click="nextStep()">
+            <span ng-if="Features.BILLING">Choose billing</span>
+            <span ng-if="!Features.BILLING">Convert Account</span>
+          </button>
+          <button class="btn btn-primary" ng-show="convertStep == 2"  ng-disabled="!org.plan" ng-click="performConversion()">
+            Convert Account
+          </button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
 
 
-  <!-- Modal message dialog -->
-  <div class="modal co-modal fade" id="reallyconvertModal">
-    <div class="modal-dialog co-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title">Convert to organization?</h4>
-        </div>
-        <div class="modal-body">
-          <div class="co-alert co-alert-danger">You will not be able to login to this account once converted!</div>
-          <div>Are you <b>absolutely sure</b> you would like to convert this account to an organization? Once done, there is no going back.</div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="reallyConvert()">Absolutely: Convert Now</button>
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        </div>
-      </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
-  </div><!-- /.modal -->
-
 </div>

static/directives/cor-confirm-dialog.html

@@ -14,7 +14,7 @@
           <span ng-transclude/>
         </div>
         <div class="modal-footer" ng-show="!working">
-          <button type="button" class="btn btn-primary" ng-click="performAction()">
+          <button type="button" class="btn btn-primary" ng-click="performAction()" ng-disabled="dialogForm && dialogForm.$invalid">
             {{ dialogActionTitle }}
           </button>
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

static/js/app.js

@@ -121,9 +121,21 @@ quayApp.config(['$routeProvider', '$locationProvider', 'pages', function($routeP
     // Organization View Application
     .route('/organization/:orgname/application/:clientid', 'manage-application')
 
+    // View Organization Billing
+    .route('/organization/:orgname/billing', 'billing')
+
+    // View Organization Billing Invoices
+    .route('/organization/:orgname/billing/invoices', 'invoices')
+
     // View User
     .route('/user/:username', 'user-view')
 
+    // View User Billing
+    .route('/user/:username/billing', 'billing')
+
+    // View User Billing Invoices
+    .route('/user/:username/billing/invoices', 'invoices')
+
     // Sign In
     .route('/signin/', 'signin')
 

static/js/core-ui.js

@@ -172,10 +172,12 @@ angular.module("core-ui", [])
       scope: {
         'dialogTitle': '@dialogTitle',
         'dialogActionTitle': '@dialogActionTitle',
+        'dialogForm': '=dialogForm',
 
         'dialogContext': '=dialogContext',
         'dialogAction': '&dialogAction'
       },
+
       controller: function($rootScope, $scope, $element) {
         $scope.working = false;
 
@@ -195,6 +197,10 @@ angular.module("core-ui", [])
         };
 
         $scope.show = function() {
+          if ($scope.dialogForm) {
+            $scope.dialogForm.$setPristine();
+          }
+
           $scope.working = false;
           $element.find('.modal').modal({});
         };

static/js/directives/ui/billing-management-panel.js

@@ -0,0 +1,140 @@
+/**
+ * An element which displays the billing options for a user or an organization.
+ */
+angular.module('quay').directive('billingManagementPanel', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/billing-management-panel.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'user': '=user',
+      'organization': '=organization',
+      'isEnabled': '=isEnabled'
+    },
+    controller: function($scope, $element, PlanService, ApiService) {
+      $scope.currentCard = null;
+      $scope.subscription = null;
+      $scope.updating = true;
+      $scope.changeReceiptsInfo = null;
+      $scope.context = {};
+
+      var setSubscription = function(sub) {
+        $scope.subscription = sub;
+
+        // Load the plan info.
+        PlanService.getPlan(sub['plan'], function(plan) {
+          $scope.currentPlan = plan;
+
+          if (!sub.hasSubscription) {
+            $scope.updating = false;
+            return;
+          }
+
+          // Load credit card information.
+          PlanService.getCardInfo($scope.organization ? $scope.organization.name : null, function(card) {
+            $scope.currentCard = card;
+            $scope.updating = false;
+          });
+        });
+      };
+
+      var update = function() {
+        if (!$scope.isEnabled || !($scope.user || $scope.organization)) {
+          return;
+        }
+
+        $scope.entity = $scope.user ? $scope.user : $scope.organization;
+        $scope.invoice_email = $scope.entity.invoice_email;
+        $scope.invoice_email_address = $scope.entity.invoice_email_address || $scope.entity.email;
+
+        $scope.updating = true;
+
+        // Load plan information.
+        PlanService.getSubscription($scope.organization, setSubscription, function() {
+          setSubscription({ 'plan': PlanService.getFreePlan() });
+        });
+      };
+
+      // Listen to plan changes.
+      PlanService.registerListener(this, function(plan) {
+        if (plan && plan.price > 0) {
+          update();
+        }
+      });
+
+      $scope.$on('$destroy', function() {
+        PlanService.unregisterListener(this);
+      });
+
+      $scope.$watch('isEnabled', update);
+      $scope.$watch('organization', update);
+      $scope.$watch('user', update);
+
+      $scope.getEntityPrefix = function() {
+        if ($scope.organization) {
+          return '/organization/' + $scope.organization.name;
+        } else {
+          return '/user/' + $scope.user.username;
+        }
+      };
+
+      $scope.changeCreditCard = function() {
+        var callbacks = {
+          'opened': function() {  },
+          'closed': function() {  },
+          'started': function() {  },
+          'success': function(resp) {
+             $scope.currentCard = resp.card;
+             update();
+          },
+          'failure': function(resp) {
+             if (!PlanService.isCardError(resp)) {
+               bootbox.alert('Could not change credit card. Please try again later.');
+             }
+          }
+        };
+
+        PlanService.changeCreditCard($scope, $scope.organization ? $scope.organization.name : null, callbacks);
+      };
+
+      $scope.getCreditImage = function(creditInfo) {
+        if (!creditInfo || !creditInfo.type) { return 'credit.png'; }
+
+        var kind = creditInfo.type.toLowerCase() || 'credit';
+        var supported = {
+          'american express': 'amex',
+          'credit': 'credit',
+          'diners club': 'diners',
+          'discover': 'discover',
+          'jcb': 'jcb',
+          'mastercard': 'mastercard',
+          'visa': 'visa'
+        };
+
+        kind = supported[kind] || 'credit';
+        return kind + '.png';
+      };
+
+      $scope.changeReceipts = function(info, callback) {
+        $scope.entity['invoice_email'] = info['sendOption'] || false;
+        $scope.entity['invoice_email_address'] = info['address'] || $scope.entity.email;
+
+        var errorHandler = ApiService.errorDisplay('Could not change billing options', callback);
+        ApiService.changeDetails($scope.organization, $scope.entity).then(function(resp) {
+          callback(true);
+          update();
+        }, errorHandler);
+      };
+
+      $scope.showChangeReceipts = function() {
+        $scope.changeReceiptsInfo = {
+          'sendOption': $scope.invoice_email,
+          'address': $scope.invoice_email_address
+        };
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/billing-options.js

@@ -1,130 +0,0 @@
-/**
- * An element which displays the billing options for a user or an organization.
- */
-angular.module('quay').directive('billingOptions', function () {
-  var directiveDefinitionObject = {
-    priority: 0,
-    templateUrl: '/static/directives/billing-options.html',
-    replace: false,
-    transclude: false,
-    restrict: 'C',
-    scope: {
-      'user': '=user',
-      'organization': '=organization'
-    },
-    controller: function($scope, $element, PlanService, ApiService) {
-      $scope.invoice_email = false;
-      $scope.currentCard = null;
-
-      // Listen to plan changes.
-      PlanService.registerListener(this, function(plan) {
-        if (plan && plan.price > 0) {
-          update();
-        }
-      });
-
-      $scope.$on('$destroy', function() {
-        PlanService.unregisterListener(this);
-      });
-
-      $scope.isExpiringSoon = function(cardInfo) {
-        var current = new Date();
-        var expires = new Date(cardInfo.exp_year, cardInfo.exp_month, 1);
-        var difference = expires - current;
-        return difference < (60 * 60 * 24 * 60 * 1000 /* 60 days */);
-      };
-
-      $scope.changeInvoiceEmailAddress = function() {
-        bootbox.prompt('Enter the email address for receiving receipts', function(email) {
-          // Copied from Angular.
-          var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i;
-          if (!email || !EMAIL_REGEXP.test(email)) {
-            return;
-          }
-
-          $scope.obj['invoice_email_address'] = email;
-
-          var errorHandler = ApiService.errorDisplay('Could not change user details');
-          ApiService.changeDetails($scope.organization, $scope.obj).then(function(resp) {
-            $scope.working = false;
-          }, errorHandler);
-        });
-      };
-
-      $scope.changeCard = function() {
-        var previousCard = $scope.currentCard;
-        $scope.changingCard = true;
-        var callbacks = {
-          'opened': function() { $scope.changingCard = true; },
-          'closed': function() { $scope.changingCard = false; },
-          'started': function() { $scope.currentCard = null; },
-          'success': function(resp) {
-             $scope.currentCard = resp.card;
-             $scope.changingCard = false;
-          },
-          'failure': function(resp) {
-             $scope.changingCard = false;
-             $scope.currentCard = previousCard;
-
-             if (!PlanService.isCardError(resp)) {
-               $('#cannotchangecardModal').modal({});
-             }
-          }
-        };
-
-        PlanService.changeCreditCard($scope, $scope.organization ? $scope.organization.name : null, callbacks);
-      };
-
-      $scope.getCreditImage = function(creditInfo) {
-        if (!creditInfo || !creditInfo.type) { return 'credit.png'; }
-
-        var kind = creditInfo.type.toLowerCase() || 'credit';
-        var supported = {
-          'american express': 'amex',
-          'credit': 'credit',
-          'diners club': 'diners',
-          'discover': 'discover',
-          'jcb': 'jcb',
-          'mastercard': 'mastercard',
-          'visa': 'visa'
-        };
-
-        kind = supported[kind] || 'credit';
-        return kind + '.png';
-      };
-
-      var update = function() {
-        if (!$scope.user && !$scope.organization) { return; }
-        $scope.obj = $scope.user ? $scope.user : $scope.organization;
-        $scope.invoice_email = $scope.obj.invoice_email;
-
-        // Load the credit card information.
-        PlanService.getCardInfo($scope.organization ? $scope.organization.name : null, function(card) {
-          $scope.currentCard = card;
-        });
-      };
-
-      var save = function() {
-        $scope.working = true;
-
-        var errorHandler = ApiService.errorDisplay('Could not change user details');
-        ApiService.changeDetails($scope.organization, $scope.obj).then(function(resp) {
-          $scope.working = false;
-        }, errorHandler);
-      };
-
-      var checkSave = function() {
-        if (!$scope.obj) { return; }
-        if ($scope.obj.invoice_email != $scope.invoice_email) {
-          $scope.obj.invoice_email = $scope.invoice_email;
-          save();
-        }
-      };
-
-      $scope.$watch('invoice_email', checkSave);
-      $scope.$watch('organization', update);
-      $scope.$watch('user', update);
-    }
-  };
-  return directiveDefinitionObject;
-});

static/js/directives/ui/convert-user-to-org.js

@@ -9,14 +9,29 @@ angular.module('quay').directive('convertUserToOrg', function () {
     transclude: true,
     restrict: 'C',
     scope: {
-      'user': '=user'
+      'info': '=info'
     },
     controller: function($scope, $element, $location, Features, PlanService, Config, ApiService, CookieService, UserService) {
       $scope.convertStep = 0;
       $scope.org = {};
       $scope.loading = false;
+      $scope.user = null;
+      $scope.Features = Features;
+
+      $scope.$watch('info', function(info) {
+        if (info && info.user) {
+          $scope.user = info.user;
+          $scope.accountType = 'user';
+          $scope.convertStep = 0;
+          $('#convertAccountModal').modal({});
+        }
+      });
 
       $scope.showConvertForm = function() {
+        $scope.convertStep = 1;
+      };
+
+      $scope.nextStep = function() {
         if (Features.BILLING) {
           PlanService.getMatchingBusinessPlan(function(plan) {
             $scope.org.plan = plan;
@@ -25,22 +40,19 @@ angular.module('quay').directive('convertUserToOrg', function () {
           PlanService.getPlans(function(plans) {
             $scope.orgPlans = plans;
           });
+
+           $scope.convertStep = 2;
+        } else {
+          $scope.performConversion();
         }
-
-        $scope.convertStep = 1;
       };
 
-      $scope.convertToOrg = function() {
+      $scope.performConversion = function() {
-        $('#reallyconvertModal').modal({});
-      };
-
-      $scope.reallyConvert = function() {
         if (Config.AUTHENTICATION_TYPE != 'Database') { return; }
-
+        $scope.convertStep = 3;
-        $scope.loading = true;
 
         var errorHandler = ApiService.errorDisplay(function() {
-          $scope.loading = false;
+          $('#convertAccountModal').modal('hide');
         });
 
         var data = {
@@ -52,6 +64,7 @@ angular.module('quay').directive('convertUserToOrg', function () {
         ApiService.convertUserToOrganization(data).then(function(resp) {
           CookieService.putPermanent('quay.namespace', $scope.user.username);
           UserService.load();
+          $('#convertAccountModal').modal('hide');
           $location.path('/');
         }, errorHandler);
       };

static/js/pages/billing.js

@@ -0,0 +1,44 @@
+(function() {
+  /**
+   * Billing plans page.
+   */
+  angular.module('quayPages').config(['pages', function(pages) {
+    pages.create('billing', 'billing.html', BillingCtrl, {
+      'title': 'Billing',
+      'description': 'Billing',
+      'newLayout': true
+    });
+  }]);
+
+  /**
+   * Billing invoices page.
+   */
+  angular.module('quayPages').config(['pages', function(pages) {
+    pages.create('invoices', 'invoices.html', BillingCtrl, {
+      'title': 'Billing Invoices',
+      'description': 'Billing Invoices',
+      'newLayout': true
+    });
+  }]);
+
+
+  function BillingCtrl($scope, ApiService, $routeParams) {
+    $scope.orgname = $routeParams['orgname'];
+    $scope.username = $routeParams['username'];
+
+    var loadEntity = function() {
+      if ($scope.orgname) {
+        $scope.entityResource = ApiService.getOrganizationAsResource({'orgname': $scope.orgname}).get(function(org) {
+          $scope.organization = org;
+        });
+      } else {
+        $scope.entityResource = ApiService.getUserInformationAsResource({'username': $scope.username}).get(function(user) {
+          $scope.viewuser = user;
+        });
+      }
+    };
+
+    // Load the user or organization.
+    loadEntity();
+  }
+}());

static/js/pages/org-view.js

@@ -16,9 +16,10 @@
     $scope.namespace = orgname;
     $scope.showLogsCounter = 0;
     $scope.showApplicationsCounter = 0;
-    $scope.showInvoicesCounter = 0;
+    $scope.showBillingCounter = 0;
     $scope.showRobotsCounter = 0;
     $scope.showTeamsCounter = 0;
+    $scope.changeEmailInfo = null;
 
     $scope.orgScope = {
       'changingOrganization': false,
@@ -67,8 +68,8 @@
       $scope.showTeamsCounter++;
     };
 
-    $scope.showInvoices = function() {
+    $scope.showBilling = function() {
-      $scope.showInvoicesCounter++;
+      $scope.showBillingCounter = true;
     };
 
     $scope.showApplications = function() {
@@ -79,25 +80,27 @@
       $scope.showLogsCounter++;
     };
 
-    $scope.changeEmail = function() {
+    $scope.showChangeEmail = function() {
-      UIService.hidePopover('#changeEmailForm input');
+      $scope.changeEmailInfo = {
+        'email': $scope.organization.email
+      };
+    };
 
-      $scope.orgScope.changingOrganization = true;
+    $scope.changeEmail = function(info, callback) {
       var params = {
         'orgname': orgname
       };
 
-      var data = {
+      var details = {
-        'email': $scope.orgScope.organizationEmail
+        'email': $scope.changeEmailInfo.email
       };
 
-      ApiService.changeOrganizationDetails(data, params).then(function(org) {
+      var errorDisplay = ApiService.errorDisplay('Could not change email address', callback);
-        $scope.orgScope.changingOrganization = false;
+
-        $scope.organization = org;
+      ApiService.changeOrganizationDetails(details, params).then(function() {
-      }, function(result) {
+        $scope.organization.email = $scope.changeEmailInfo.email;
-        $scope.orgScope.changingOrganization = false;
+        callback(true);
-        UIService.showFormError('#changeEmailForm input', result, 'right');
+      }, errorDisplay);
-      });
     };
   }
 })();

static/js/pages/user-view.js

@@ -13,11 +13,13 @@
   function UserViewCtrl($scope, $routeParams, $timeout, ApiService, UserService, UIService, AvatarService, Config, ExternalLoginService) {
     var username = $routeParams.username;
 
-    $scope.showInvoicesCounter = 0;
     $scope.showAppsCounter = 0;
     $scope.showRobotsCounter = 0;
-    $scope.changeEmailInfo = {};
+    $scope.showBillingCounter = 0;
-    $scope.changePasswordInfo = {};
+    $scope.showLogsCounter = 0;
+
+    $scope.changeEmailInfo = null;
+    $scope.changePasswordInfo = null;
     $scope.hasSingleSignin = ExternalLoginService.hasSingleSignin();
     $scope.context = {};
 
@@ -54,37 +56,32 @@
       $scope.showRobotsCounter++;
     };
 
-    $scope.showInvoices = function() {
+    $scope.showLogs = function() {
-      $scope.showInvoicesCounter++;
+      $scope.showLogsCounter++;
     };
 
     $scope.showApplications = function() {
       $scope.showAppsCounter++;
     };
 
-    $scope.changePassword = function() {
+    $scope.showChangePassword = function() {
-      if (Config.AUTHENTICATION_TYPE != 'Database') { return; }
+      $scope.changePasswordInfo = {};
+    };
 
-      UIService.hidePopover('#changePasswordForm');
+    $scope.changePassword = function(info, callback) {
-      $scope.changePasswordInfo.state = 'changing';
+      if (Config.AUTHENTICATION_TYPE != 'Database') { return; }
 
       var data = {
         'password': $scope.changePasswordInfo.password
       };
 
+      var errorDisplay = ApiService.errorDisplay('Could not change password', callback);
+
       ApiService.changeUserDetails(data).then(function(resp) {
-        $scope.changePasswordInfo.state = 'changed';
-
-        // Reset the form
-        delete $scope.changePasswordInfo['password']
-        delete $scope.changePasswordInfo['repeatPassword']
-
         // Reload the user.
         UserService.load();
-      }, function(result) {
+        callback(true);
-        $scope.changePasswordInfo.state = 'change-error';
+      }, errorDisplay);
-        UIService.showFormError('#changePasswordForm', result);
-      });
     };
 
     $scope.generateClientToken = function() {
@@ -102,21 +99,32 @@
       UIService.showPasswordDialog('Enter your password to generate an encrypted version:', generateToken);
     };
 
-    $scope.changeEmail = function() {
+    $scope.showChangeEmail = function() {
-      UIService.hidePopover('#changeEmailForm');
+      $scope.changeEmailInfo = {
+        'email': $scope.context.viewuser.email
+      };
+    };
 
+    $scope.changeEmail = function(info, callback) {
       var details = {
         'email': $scope.changeEmailInfo.email
       };
 
-      $scope.changeEmailInfo.state = 'sending';
+      var errorDisplay = ApiService.errorDisplay('Could not change email address', callback);
+
       ApiService.changeUserDetails(details).then(function() {
-        $scope.changeEmailInfo.state = 'sent';
+        callback(true);
-        delete $scope.changeEmailInfo['email'];
+      }, errorDisplay);
-      }, function(result) {
+    };
-        $scope.changeEmailInfo.state = 'send-error';
+
-        UIService.showFormError('#changeEmailForm', result);
+    $scope.showChangeAccount = function() {
-      });
+      $scope.convertAccountInfo = {
+        'user': $scope.context.viewuser
+      };
+    };
+
+    $scope.showBilling = function() {
+      $scope.showBillingCounter++;
     };
   }
 })();

static/js/services/api-service.js

@@ -313,7 +313,6 @@ angular.module('quay').factory('ApiService', ['Restangular', '$q', 'UtilService'
       }
 
       message = UtilService.stringToHTML(message);
-
       bootbox.dialog({
         "message": message,
         "title": defaultMessage || 'Request Failure',

static/partials/billing.html

@@ -0,0 +1,32 @@
+<div class="billing-page page-content">
+  <div class="resource-view" resource="entityResource"  error-message="'Could not load entity'">
+    <div class="cor-title" ng-if="organization">
+      <span class="cor-title-link">
+        <a class="back-link" href="/organization/{{ organization.name }}?tab=settings">
+          <span class="avatar" size="24" data="organization.avatar"></span>
+          {{ organization.name }}
+        </a>
+      </span>
+      <span class="cor-title-content">
+        Account Plan
+      </span>
+    </div>
+
+    <div class="cor-title" ng-if="viewuser">
+      <span class="cor-title-link">
+        <a class="back-link" href="/user/{{ viewuser.username }}?tab=settings">
+          <span class="avatar" size="24" data="viewuser.avatar"></span>
+          {{ viewuser.username }}
+        </a>
+      </span>
+      <span class="cor-title-content">
+        Account Plan
+      </span>
+    </div>
+
+    <div class="co-main-content-panel" style="min-height: 500px;">
+      <div class="plan-manager" organization="organization.name" has-subscription="hasSubscription"  ng-if="organization"></div>
+      <div class="plan-manager" user="viewuser" has-subscription="hasSubscription" ng-if="!organization"></div>
+    </div>
+  </div>
+</div>

static/partials/invoices.html

@@ -0,0 +1,32 @@
+<div class="billing-page page-content">
+  <div class="resource-view" resource="entityResource"  error-message="'Could not load entity'">
+    <div class="cor-title" ng-if="organization">
+      <span class="cor-title-link">
+        <a class="back-link" href="/organization/{{ organization.name }}?tab=settings">
+          <span class="avatar" size="24" data="organization.avatar"></span>
+          {{ organization.name }}
+        </a>
+      </span>
+      <span class="cor-title-content">
+        Billing Invoices
+      </span>
+    </div>
+
+    <div class="cor-title" ng-if="viewuser">
+      <span class="cor-title-link">
+        <a class="back-link" href="/user/{{ viewuser.username }}?tab=settings">
+          <span class="avatar" size="24" data="viewuser.avatar"></span>
+          {{ viewuser.username }}
+        </a>
+      </span>
+      <span class="cor-title-content">
+        Billing Invoices
+      </span>
+    </div>
+
+    <div class="co-main-content-panel" style="min-height: 500px;">
+      <div class="billing-invoices" user="viewuser" makevisible="true" ng-if="!organization"></div>
+      <div class="billing-invoices" organization="organization" makevisible="true" ng-if="organization"></div>
+    </div>
+  </div>
+</div>

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">
+            <!-- Org Settings -->
+            <div class="settings-section">
               <h3>Organization Settings</h3>
-
+              <table class="co-list-table">
-            <div class="panel" ng-show="!orgScope.changingOrganization">
+                <tr>
-              <div class="panel-title">Organization's e-mail address</div>
+                  <td>Namespace:</td>
-              <div class="panel-content" style="padding-left: 20px; margin-top: 10px;">
+                  <td>
-                <form class="form-change" id="changeEmailForm" name="changeEmailForm" ng-submit="changeEmail()">
+                    {{ organization.name }}
-                  <input type="email" class="form-control" style="max-width: 500px;"
+                    <div class="help-text">Organization names cannot currently be changed. Please <a href="/contact">contact support</a> to migrate accounts.</div>
-                         ng-model="orgScope.organizationEmail" required>
+                  </td>
-                  <button class="btn btn-primary" type="submit"
+                </tr>
-                          ng-disabled="changeEmailForm.$invalid || orgScope.organizationEmail == organization.email">
+                <tr>
-                    Save
+                  <td>Avatar:</td>
-                  </button>
+                  <td>
-                </form>
+                    <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>
+
+            <!-- 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>

static/partials/user-view.html

@@ -28,24 +28,16 @@
         <span class="cor-tab" tab-title="Robot Accounts" tab-init="showRobots()" tab-target="#robots">
           <i class="fa ci-robot"></i>
         </span>
-        <span class="cor-tab" tab-title="User Settings" tab-target="#settings">
+        <span class="cor-tab" tab-title="External Logins And Applications" tab-target="#external"
-          <i class="fa fa-gears"></i>
+              tab-init="showApplications()">
-        </span>
-        <span class="cor-tab" tab-title="Billing" tab-target="#usage"
-              quay-show="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="Features.BILLING">
-          <i class="fa ci-invoice"></i>
-        </span>
-        <span class="cor-tab" tab-title="External Logins" tab-target="#external"
-              quay-show="!hasSingleSignin">
           <i class="fa fa-external-link-square"></i>
         </span>
-        <span class="cor-tab" tab-title="Authorized Applications" tab-target="#applications"
+        <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
-              tab-init="showApplications()">
+              quay-show="Features.USER_LOG_ACCESS">
-          <i class="fa ci-application"></i>
+          <i class="fa fa-bar-chart"></i>
+        </span>
+        <span class="cor-tab" tab-title="User Settings" tab-target="#settings" tab-init="showBilling()">
+          <i class="fa fa-gears"></i>
         </span>
       </div> <!-- /cor-tabs -->
 
@@ -60,149 +52,129 @@
           <div class="robots-manager" user="viewuser" is-enabled="showRobotsCounter"></div>
         </div>
 
-        <!-- External Logins -->
+        <!-- Usage Logs -->
+        <div id="logs" class="tab-pane">
+          <div class="logs-view" user="viewuser" makevisible="showLogsCounter"></div>
+        </div>
+
+        <!-- External Logins And Applications -->
         <div id="external" class="tab-pane" quay-show="!hasSingleSignin">
-          <div class="external-logins-manager" user="viewuser"></div>
+          <div class="external-logins-manager" user="viewuser"
+               quay-show="!hasSingleSignin"></div>
+          <div style="margin: 50px" quay-show="!hasSingleSignin">
           </div>
-
-        <!-- Applications -->
-        <div id="applications" class="tab-pane">
           <div class="authorized-apps-manager" user="viewuser" is-enabled="showAppsCounter"></div>
         </div>
 
-        <!-- Plan and Usage -->
-        <div id="usage" class="tab-pane" quay-require="['BILLING']">
-          <h3>Plan Usage and Billing</h3>
-          <div class="plan-manager" user="viewuser" has-subscription="hasSubscription"></div>
-          <hr ng-show="hasSubscription">
-          <div class="billing-options" user="viewuser" ng-show="hasSubscription"></div>
-        </div>
-
-        <!-- Billing Invoices -->
-        <div id="invoices" class="tab-pane" quay-require="['BILLING']">
-          <h3>Billing Invoices</h3>
-          <div class="billing-invoices" user="viewuser"
-               makevisible="showInvoicesCounter"></div>
-        </div>
-
         <!-- Settings -->
         <div id="settings" class="tab-pane">
-          <h3>User Settings</h3>
+          <!-- Encrypted Password -->
-
+          <div class="settings-section">
-          <!-- E-mail address -->
+            <h3>Docker CLI Password</h3>
-          <div class="co-panel" quay-show="Features.MAILING">
+            <div ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
-            <div class="co-panel-heading"><i class="fa fa-envelope-o"></i> E-mail Address</div>
+              The Docker CLI stores passwords entered on the command line in <strong>plaintext</strong>. It is therefore highly recommended to generate an an encrypted version of your password to use for <code>docker login</code>.
-            <div class="panel-body" style="padding-top: 5px;">
-
-              <div class="co-alert co-alert-success" ng-show="changeEmailInfo.state == 'sent'">
-                An e-mail has been sent to {{ sentEmail }} to verify the change.
             </div>
 
-              <div class="cor-loader" ng-show="changeEmailInfo.state == 'sending'"></div>
+            <div ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
-              <div ng-show="changeEmailInfo.state != 'sending'">
+              This installation is set to <strong>require</strong> encrypted passwords when
-                <form class="form-change user-settings-form"
+              using the Docker command line interface.
-                      id="changeEmailForm" name="changeEmailForm"
+            </div>
-                      ng-submit="changeEmail(); changeEmailForm.$setPristine()"
-                      ng-show="!awaitingConfirmation && !registering">
 
-                  <div class="row">
+            <table class="co-list-table" style="margin-top: 10px;">
-                    <table class="col-md-6">
               <tr>
-                        <td>Current E-mail Address:</td>
+                <td>CLI Password:</td>
-                        <td>{{ context.viewuser.email }}</td>
-                      </tr>
-                      <tr>
-                        <td>New E-mail Address:</td>
                 <td>
-                          <input type="email" class="form-control"
+                  <a ng-click="generateClientToken()">Generate Encrypted Password</a>
-                                 placeholder="Your new e-mail address"
-                                 ng-model="changeEmailInfo.email" required>
                 </td>
               </tr>
             </table>
           </div>
 
-                  <button class="btn btn-primary"
+          <!-- User Settings -->
-                        ng-disabled="changeEmailForm.$invalid || changeEmail.email == context.viewuser.email"
+          <div class="settings-section">
-                        type="submit">
+            <h3>User Settings</h3>
-                    Change E-mail Address
+            <table class="co-list-table">
-                 </button>
+              <tr>
-                </form>
+                <td>Username:</td>
-              </div>
+                <td>
-            </div>
+                  {{ context.viewuser.username }}
-          </div> <!-- /E-mail -->
+                  <div class="help-text">Usernames cannot currently be changed. Please <a href="/contact">contact support</a> to migrate accounts.</div>
-
+                </td>
-          <!-- Password -->
+              </tr>
-          <div class="co-panel" style="margin-bottom: 0px">
+              <tr>
-            <div class="co-panel-heading"><i class="fa fa-lock"></i> Password</div>
+                <td>Avatar:</td>
-            <div class="panel-body" style="padding-top: 5px;">
+                <td>
-              <div class="cor-loader" ng-show="changePasswordInfo.state == 'changing'"></div>
+                  <span class="avatar" size="48" data="context.viewuser.avatar"></span>
-
+                  <div class="help-text" ng-if="Config.AVATAR_KIND == 'local'">Avatar is generated based off of your username.</div>
-              <!-- Encrypted Password -->
+                  <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 {{ context.viewuser.email }} e-mail address.</div>
-              <div class="row" ng-show="changePasswordInfo.state !='changing'">
+                </td>
-                <div class="panel">
+              </tr>
-                  <div class="panel-title">Generate Encrypted Password</div>
+              <tr quay-show="Features.MAILING">
-
+                <td>Email Address:</td>
-                  <div class="panel-body">
+                <td>
-                    <div class="co-alert co-alert-info" ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
+                  <a class="co-modify-link" ng-click="showChangeEmail()">{{ context.viewuser.email }}</a>
-                      Due to Docker storing passwords entered on the command line in <strong>plaintext</strong>, it is highly recommended to use the button below to generate an an encrypted version of your password.
+                </td>
+              </tr>
+              <tr quay-show="Config.AUTHENTICATION_TYPE == 'Database'">
+                <td>Password:</td>
+                <td>
+                  <a class="co-modify-link" ng-click="showChangePassword()">Change password</a>
+                </td>
+              </tr>
+              <tr quay-show="Config.AUTHENTICATION_TYPE == 'Database'">
+                <td>Account Type:</td>
+                <td>
+                  <a class="co-modify-link" ng-click="showChangeAccount()">Individual account</a>
+                </td>
+              </tr>
+            </table>
           </div>
 
-                    <div class="co-alert co-alert-warning" ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
+          <!-- Billing Information -->
-                      This installation is set to <strong>require</strong> encrypted passwords when
+          <div class="settings-section">
-                      using the Docker command line interface. To generate an encrypted password, click the button below.
+            <h3>Billing Information</h3>
+            <div class="billing-management-panel" user="context.viewuser" is-enabled="showBillingCounter"></div>
           </div>
 
-                    <button class="btn btn-primary" ng-click="generateClientToken()">
-                      <i class="fa fa-key" style="margin-right: 6px;"></i>Generate Encrypted Password
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Change Password -->
-              <div class="row" quay-show="Config.AUTHENTICATION_TYPE == 'Database' && changePasswordInfo.state !='changing'">
-                <div class="panel">
-                  <div class="panel-title">Change Password</div>
-
-                  <span class="help-block" ng-show="changePasswordInfo.state == 'changed'">
-                    Password changed successfully
-                  </span>
-
-                  <div class="panel-body">
-                    <div class="co-alert co-alert-warning">Note: Changing your password will also invalidate any generated encrypted passwords.</div>
-
-
-                    <form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword(); changePasswordForm.$setPristine()"
-                          ng-show="!awaitingConfirmation && !registering">
-                      <input type="password" class="form-control" placeholder="Your new password" ng-model="changePasswordInfo.password" required
-                             ng-pattern="/^.{8,}$/">
-                      <input type="password" class="form-control" placeholder="Verify your new password" ng-model="changePasswordInfo.repeatPassword"
-                             match="changePasswordInfo.password" required ng-pattern="/^.{8,}$/">
-                      <button class="btn btn-danger" ng-disabled="changePasswordForm.$invalid" type="submit"
-                              analytics-on analytics-event="change_pass">Change Password</button>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div> <!-- /Password -->
-
-          <!-- Convert -->
-          <div class="co-panel" quay-show="Config.AUTHENTICATION_TYPE == 'Database'">
-            <div class="co-panel-heading"><i class="fa fa-group"></i> Convert to organization</div>
-            <div class="panel-body" style="padding-top: 5px;">
-              <div class="convert-user-to-org" user="viewuser"></div>
-            </div>
-          </div>
-        </div> <!-- /Convert -->
-
         </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. A verification email will be sent before being applied.
+       <input type="email" class="form-control" placeholder="Your new e-mail address"
+              ng-model="changeEmailInfo.email" required>
+     </form>
+  </div>
+
+  <!-- Change password dialog -->
+  <div class="cor-confirm-dialog"
+     dialog-context="changePasswordInfo"
+     dialog-action="changePassword(info, callback)"
+     dialog-title="Change Password"
+     dialog-action-title="Change Password"
+     dialog-form="context.passwordform">
+     <form name="context.passwordform" class="co-single-field-dialog">
+      Enter a new password. Passwords must be at least 8 characters in length.
+      <input type="password" class="form-control" placeholder="Your new password" ng-model="changePasswordInfo.password" required
+             ng-pattern="/^.{8,}$/">
+      <input type="password" class="form-control" placeholder="Verify your new password" ng-model="changePasswordInfo.repeatPassword"
+             match="changePasswordInfo.password" required ng-pattern="/^.{8,}$/">
+     </form>
+  </div>
+
+  <!-- Convert account dialog -->
+  <div class="convert-user-to-org" info="convertAccountInfo"></div>
+
   <!-- Modal message dialog -->
-  <div class="modal fade" id="clientTokenModal">
+  <div class="co-dialog modal fade" id="clientTokenModal">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">