vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

organization signup plan details

This commit is contained in:
Kyle Spearrin 2017-04-04 12:57:31 -04:00
parent ebb1044c43
commit 8098ab50e8
2 changed files with 438 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/settings/settingsCreateOrganizationController.js
View File

@ -1,37 +1,65 @@
angular angular
.module('bit.settings') .module('bit.settings')
.controller('settingsCreateOrganizationController', function($scope, $state, apiService, $uibModalInstance, cryptoService, .controller('settingsCreateOrganizationController', function ($scope, $state, apiService, $uibModalInstance, cryptoService,
toastr, $analytics, authService, stripe) { toastr, $analytics, authService, stripe) {
$analytics.eventTrack('settingsCreateOrganizationController', { category: 'Modal' }); $analytics.eventTrack('settingsCreateOrganizationController', { category: 'Modal' });
$scope.model = { $scope.plans = {
plan: 'Personal' free: {
basePrice: 0
},
personal: {
basePrice: 1,
annualBasePrice: 12,
baseUsers: 3,
userPrice: 1,
annualUserPrice: 12
},
teams: {
basePrice: 5,
annualBasePrice: 60,
monthlyBasePrice: 8,
baseUsers: 5,
userPrice: 2,
annualUserPrice: 24,
monthlyUserPrice: 2.5
}
}; };
$scope.submit = function(model) { $scope.model = {
$scope.submitPromise = stripe.card.createToken(model.card).then(function(response) { plan: 'personal',
additionalUsers: 0,
interval: 'annually'
};
$scope.submit = function (model) {
$scope.submitPromise = stripe.card.createToken(model.card).then(function (response) {
var request = { var request = {
name: model.name, name: model.name,
planType: model.plan, planType: model.plan,
key: cryptoService.makeShareKey(), key: cryptoService.makeShareKey(),
cardToken: response.id cardToken: response.id,
additionalUsers: model.additionalUsers,
billingEmail: model.billingEmail,
businessName: model.ownedBusiness ? model.businessName : null,
monthly: model.interval === 'monthly'
}; };
return apiService.organizations.post(request).$promise; return apiService.organizations.post(request).$promise;
}).then(function(result) { }).then(function (result) {
$scope.model.card = null; $scope.model.card = null;
$uibModalInstance.dismiss('cancel'); $uibModalInstance.dismiss('cancel');
$analytics.eventTrack('Created Organization'); $analytics.eventTrack('Created Organization');
authService.addProfileOrganization(result); authService.addProfileOrganization(result);
$state.go('backend.org.dashboard', { orgId: result.Id }).then(function() { $state.go('backend.org.dashboard', { orgId: result.Id }).then(function () {
toastr.success('Your new organization is ready to go!', 'Organization Created'); toastr.success('Your new organization is ready to go!', 'Organization Created');
}); });
}); });
}; };
$scope.close = function() { $scope.close = function () {
$uibModalInstance.dismiss('cancel'); $uibModalInstance.dismiss('cancel');
}; };
}); });

98
src/app/settings/views/settingsCreateOrganization.html
View File

@ -15,27 +15,94 @@
<input type="text" id="name" name="Name" ng-model="model.name" class="form-control" <input type="text" id="name" name="Name" ng-model="model.name" class="form-control"
required api-field /> required api-field />
</div> </div>
<div class="form-group"> <div class="form-group" show-errors>
<div class="radio"> <label for="billingEmail">Billing Email</label>
<label> <input type="email" id="billingEmail" name="BillingEmail" ng-model="model.billingEmail" class="form-control"
<input type="radio" ng-model="model.plan" name="PlanType" value="Personal"> required api-field />
Personal ($1 /month)
</label>
<p class="help-block">Share with up to 5 users.</p>
</div> </div>
<div class="radio"> <div class="checkbox">
<label> <label>
<input type="radio" ng-model="model.plan" name="PlanType" value="Teams"> <input type="checkbox" ng-model="model.ownedBusiness"> This account is owned by a business.
Teams ($2 /user per month)
</label> </label>
<p class="help-block">Share with as many users as you need.</p>
</div> </div>
<div class="form-group" ng-show="model.ownedBusiness" show-errors>
<label for="businessName">Business Name</label>
<input type="text" id="businessName" name="BusinessName" ng-model="model.businessName" class="form-control"
api-field />
</div> </div>
<hr /> <hr />
<h4>Choose Your Plan</h4>
<div class="form-group">
<div class="radio" ng-show="!model.ownedBusiness">
<label>
<input type="radio" ng-model="model.plan" name="PlanType" value="free">
Free
</label>
<p class="help-block">Share with 1 other user.</p>
</div>
<div class="radio" ng-show="!model.ownedBusiness">
<label>
<input type="radio" ng-model="model.plan" name="PlanType" value="personal">
Personal - ${{plans.personal.basePrice}} /month for {{plans.personal.baseUsers}} users,
additional users ${{plans.personal.userPrice}} /month
</label>
<p class="help-block">For personal users such as families &amp; friends.</p>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="model.plan" name="PlanType" value="teams">
Teams - ${{plans.teams.basePrice}} /month for {{plans.teams.baseUsers}} users,
additional users ${{plans.teams.userPrice}} /month
</label>
<p class="help-block">For businesses and other large teams.</p>
</div>
</div>
<div ng-show="model.plan !== 'free'">
<hr />
<h4>Additional Users</h4>
<p>
Your plan comes with {{plans[model.plan].baseUsers}} users. You can add additional users to your plan
for ${{plans[model.plan].userPrice}} /month.
</p>
<div class="form-group" show-errors>
<label for="additionalUsers">Additional Users</label>
<input type="number" id="additionalUsers" name="AdditionalUsers" ng-model="model.additionalUsers" min="0"
class="form-control" api-field />
</div>
</div>
<div ng-show="model.plan !== 'free'">
<hr />
<h4>Billing Totals</h4>
<div class="radio">
<label>
<input type="radio" ng-model="model.interval" name="BillingInterval" value="annually">
Bill me annually
</label>
<p class="help-block">
Base price: {{plans[model.plan].basePrice | currency:"$":2}} &times;12 mo. = {{plans[model.plan].annualBasePrice | currency:"$":2}} /year<br />
Additional users: {{model.additionalUsers || 0}} &times;{{plans[model.plan].userPrice | currency:"$":2}} &times;12 mo. = {{(model.additionalUsers * plans[model.plan].annualUserPrice) | currency:"$":2}} /year<br />
<b>Total:</b> {{((model.additionalUsers || 0) * plans[model.plan].annualUserPrice + plans[model.plan].annualBasePrice) | currency:"USD $":2}} /year
</p>
</div>
<div class="radio" ng-show="model.plan !== 'personal'">
<label>
<input type="radio" ng-model="model.interval" name="BillingInterval" value="monthly">
Bill me monthly
</label>
<p class="help-block">
Base price: {{plans[model.plan].monthlyBasePrice | currency:"$":2}} /month<br />
Additional users: {{model.additionalUsers || 0}} &times;{{plans[model.plan].monthlyUserPrice | currency:"$":2}} = {{(model.additionalUsers * plans[model.plan].monthlyUserPrice) | currency:"$":2}} /month<br />
<b>Total:</b> {{((model.additionalUsers || 0) * plans[model.plan].monthlyUserPrice + plans[model.plan].monthlyBasePrice) | currency:"USD $":2}} /month
</p>
</div>
</div>
<div ng-show="model.plan !== 'free'">
<hr />
<h4>Payment Information</h4>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="card_number">Card number</label> <label for="card_number">Card Number</label>
<input type="text" id="card_number" name="card_number" ng-model="model.card.number" class="form-control" <input type="text" id="card_number" name="card_number" ng-model="model.card.number" class="form-control"
cc-number cc-eager-type required /> cc-number cc-eager-type required />
</div> </div>
@ -52,7 +119,7 @@
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="form-group"> <div class="form-group">
<label for="exp_month">Expiration month</label> <label for="exp_month">Expiration Month</label>
<select id="exp_month" class="form-control" ng-model="model.card.exp_month" required cc-exp-month> <select id="exp_month" class="form-control" ng-model="model.card.exp_month" required cc-exp-month>
<option value="">-- Select --</option> <option value="">-- Select --</option>
<option value="01">01 - January</option> <option value="01">01 - January</option>
@ -72,7 +139,7 @@
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="form-group"> <div class="form-group">
<label for="exp_year">Expiration year</label> <label for="exp_year">Expiration Year</label>
<select id="exp_year" class="form-control" ng-model="model.card.exp_year" required cc-exp-year> <select id="exp_year" class="form-control" ng-model="model.card.exp_year" required cc-exp-year>
<option value="">-- Select --</option> <option value="">-- Select --</option>
<option value="17">2017</option> <option value="17">2017</option>
@ -354,12 +421,13 @@
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="form-group"> <div class="form-group">
<label for="address_zip" ng-bind="model.card.address_country === 'US' ? 'Zip code' : 'Postal code'"></label> <label for="address_zip" ng-bind="model.card.address_country === 'US' ? 'Zip Code' : 'Postal Code'"></label>
<input type="text" id="address_zip" ng-model="model.card.address_zip" class="form-control" required /> <input type="text" id="address_zip" ng-model="model.card.address_zip" class="form-control" required />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="submit" class="btn btn-primary btn-flat" ng-disabled="createOrgForm.$loading"> <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 <i class="fa fa-refresh fa-spin loading-icon" ng-show="createOrgForm.$loading"></i>Submit