Organization profile

src/app/settings/settingsController.js

@@ -18,6 +18,18 @@
                 email: user.Email,
                 twoFactorEnabled: user.TwoFactorEnabled
             };
+
+            if (user.Organizations) {
+                var orgs = [];
+                for (var i = 0; i < user.Organizations.length; i++) {
+                    orgs.push({
+                        id: user.Organizations[i].Id,
+                        name: user.Organizations[i].Name
+                    });
+                }
+
+                $scope.model.organizations = orgs;
+            }
         });
 
         $scope.generalSave = function () {
@@ -50,6 +62,14 @@
             });
         };
 
+        $scope.createOrganization = function () {
+            $uibModal.open({
+                animation: true,
+                templateUrl: 'app/settings/views/settingsCreateOrganization.html',
+                controller: 'settingsCreateOrganizationController'
+            });
+        };
+
         $scope.twoFactor = function () {
             var twoFactorModal = $uibModal.open({
                 animation: true,

src/app/settings/settingsCreateOrganizationController.js

@@ -0,0 +1,21 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsCreateOrganizationController', function ($scope, apiService, $uibModalInstance, cryptoService,
+        authService, toastr, $analytics) {
+        $analytics.eventTrack('settingsCreateOrganizationController', { category: 'Modal' });
+        $scope.submit = function (model) {
+            var request = {
+                masterPasswordHash: cryptoService.hashPassword(model.masterPassword)
+            };
+
+            $scope.submitPromise = apiService.organizations.post(request, function () {
+                $uibModalInstance.dismiss('cancel');
+                $analytics.eventTrack('Created Organization');
+            }).$promise;
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/settings/views/settings.html

@@ -113,26 +113,32 @@
         <div class="box-header with-border">
             <h3 class="box-title">Organizations</h3>
         </div>
-        <div class="box-body no-padding">
-            <div class="table-responsive">
+        <div class="box-body" ng-class="{'no-padding': model.organizations && model.organizations.length}">
+            <div ng-show="!model.organizations || !model.organizations.length">
+                No organizations yet for your account.
+            </div>
+            <div class="table-responsive" ng-show="model.organizations && model.organizations.length">
                 <table class="table table-striped table-hover">
                     <thead>
                         <tr>
                             <th style="width: 75px; min-width: 75px;"></th>
                             <th>Name</th>
-                            <th style="width: 200px;">Plan</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <tr>
+                        <tr ng-repeat="org in model.organizations | orderBy: ['name']">
                             <td></td>
-                            <td>sdfsdf</td>
-                            <td>dfd</td>
+                            <td>{{org.Name}}</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
+        <div class="box-footer" ng-show="!model.organizations || !model.organizations.length">
+            <button type="button" ng-click="createOrganization()" class="btn btn-default btn-flat">
+                Create an Organization
+            </button>
+        </div>
     </div>
     <div class="box box-danger">
         <div class="box-header with-border">

src/app/settings/views/settingsCreateOrganization.html

@@ -0,0 +1,26 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h4 class="modal-title"><i class="fa fa-sitemap"></i> Create Organization</h4>
+</div>
+<form name="createOrgForm" ng-submit="createOrgForm.$valid && submit(model)" api-form="submitPromise">
+    <div class="modal-body">
+        <p>Create an organization.</p>
+        <div class="callout callout-danger validation-errors" ng-show="createOrgForm.$errors">
+            <h4>Errors have occured</h4>
+            <ul>
+                <li ng-repeat="e in createOrgForm.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <label for="name">Organization Name</label>
+            <input type="text" id="name" name="Name" ng-model="model.name" class="form-control"
+                   required api-field />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="createOrgForm.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="createOrgForm.$loading"></i>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/index.html

@@ -132,6 +132,7 @@
     <script src="app/settings/settingsDomainsController.js"></script>
     <script src="app/settings/settingsAddEditEquivalentDomainController.js"></script>
     <script src="app/settings/settingsDeleteController.js"></script>
+    <script src="app/settings/settingsCreateOrganizationController.js"></script>
 
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>