remove caas plan change UI
This commit is contained in:
Girish Ramakrishnan
@@ -91,45 +91,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal plan change -->
|
||||
<div class="modal fade" id="planChangeModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Cloudron Change Plan</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This will change your plan from <b>{{ currentPlan.name }}</b> to <b>{{ planChange.requestedPlan.name }}</b>.
|
||||
<br/>
|
||||
<br/>
|
||||
Your apps and data will be migrated to the new Cloudron and will take around 15 minutes.
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<form name="planChangeForm" role="form" novalidate ng-submit="planChange.doChangePlan(planChangeForm)" autocomplete="off">
|
||||
<fieldset>
|
||||
<input type="password" style="display: none;">
|
||||
<div class="form-group" ng-class="{ 'has-error': (!planChangeForm.password.$dirty && planChange.error.password) || (planChangeForm.password.$dirty && planChangeForm.password.$invalid) }">
|
||||
<label class="control-label">Give your password to verify that you are performing that action</label>
|
||||
<div class="control-label" ng-show="(!planChangeForm.password.$dirty && planChange.error.password) || (planChangeForm.password.$dirty && planChangeForm.password.$invalid)">
|
||||
<small ng-show=" planChangeForm.password.$dirty && planChangeForm.password.$invalid">A password is required</small>
|
||||
<small ng-show="!planChangeForm.password.$dirty && planChange.error.password">Wrong password</small>
|
||||
</div>
|
||||
<input type="password" class="form-control" ng-model="planChange.password" id="inputPlanChangePassword" name="password" required autofocus>
|
||||
</div>
|
||||
<input class="ng-hide" type="submit" ng-disabled="planChangeForm.$invalid"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success" ng-click="planChange.doChangePlan()" ng-disabled="planChange.busy"><i class="fa fa-circle-notch fa-spin" ng-show="planChange.busy"></i> Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="text-left">
|
||||
@@ -153,10 +114,6 @@
|
||||
<td class="text-muted" style="vertical-align: top;">Name</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.cloudronName }} <a href="" ng-click="cloudronNameChange.show()"><i class="fa fa-edit text-small"></i></a></td>
|
||||
</tr>
|
||||
<tr ng-show="config.provider === 'caas'">
|
||||
<td class="text-muted" style="vertical-align: top;">Model</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ caasConfig.size }} - {{ caasConfig.region }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;">Version</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.version }}</td>
|
||||
@@ -192,38 +149,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-left" ng-show="config.provider === 'caas'">
|
||||
<h3>Plans</h3>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom: 15px;" ng-show="config.provider === 'caas'">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-right">
|
||||
<a href="{{ config.webServerOrigin }}/console.html#/userprofile?view=credit_card" target="_blank">Change payment method</a>
|
||||
or
|
||||
<a href="{{ config.webServerOrigin }}/console.html" target="_blank">Cancel this Cloudron</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-10 plans" style="margin-left: 20px">
|
||||
<div ng-repeat="plan in availablePlans">
|
||||
<label>
|
||||
<input type="radio" ng-model="planChange.requestedPlan" ng-value="plan">
|
||||
{{ plan.name }} ({{ plan.slug | uppercase }}) - {{ plan.price/100 }}{{ currency }}/month
|
||||
<span ng-show="currentPlan.name === plan.name" style="font-weight: bold"> (current plan)
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<button class="btn btn-primary pull-right" ng-disabled="planChange.requestedPlan.name === currentPlan.name" ng-click="planChange.showChangePlan()">Change Plan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-left" ng-show="!config.managed">
|
||||
<h3>Cloudron.io Account</h3>
|
||||
</div>
|
||||
|
||||
@@ -6,16 +6,9 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
$scope.client = Client;
|
||||
$scope.user = Client.getUserInfo();
|
||||
$scope.config = Client.getConfig();
|
||||
$scope.caasConfig = {};
|
||||
$scope.appstoreConfig = {};
|
||||
$scope.installedApps = Client.getInstalledApps();
|
||||
|
||||
$scope.currency = null;
|
||||
$scope.availableRegions = [];
|
||||
$scope.currentRegionSlug = null;
|
||||
$scope.availablePlans = [];
|
||||
$scope.currentPlan = null;
|
||||
|
||||
$scope.subscription = null;
|
||||
|
||||
$scope.prettyProviderName = function (provider) {
|
||||
@@ -123,59 +116,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
}
|
||||
};
|
||||
|
||||
$scope.planChange = {
|
||||
busy: false,
|
||||
error: {},
|
||||
password: '',
|
||||
requestedPlan: null,
|
||||
|
||||
showChangePlan: function () {
|
||||
$('#planChangeModal').modal('show');
|
||||
},
|
||||
|
||||
planChangeReset: function () {
|
||||
$scope.planChange.error.password = null;
|
||||
$scope.planChange.password = '';
|
||||
|
||||
$scope.planChangeForm.$setPristine();
|
||||
$scope.planChangeForm.$setUntouched();
|
||||
},
|
||||
|
||||
doChangePlan: function () {
|
||||
$scope.planChange.busy = true;
|
||||
|
||||
var options = {
|
||||
size: $scope.planChange.requestedPlan.slug,
|
||||
name: $scope.planChange.requestedPlan.name,
|
||||
price: $scope.planChange.requestedPlan.price,
|
||||
region: $scope.currentRegionSlug
|
||||
};
|
||||
|
||||
Client.changePlan(options, $scope.planChange.password, function (error) {
|
||||
$scope.planChange.busy = false;
|
||||
|
||||
if (error) {
|
||||
if (error.statusCode === 403) {
|
||||
$scope.planChange.error.password = true;
|
||||
$scope.planChange.password = '';
|
||||
$scope.planChangeForm.password.$setPristine();
|
||||
$('#inputPlanChangePassword').focus();
|
||||
} else {
|
||||
console.error('Unable to change plan.', error);
|
||||
}
|
||||
} else {
|
||||
$scope.planChange.planChangeReset();
|
||||
|
||||
$('#planChangeModal').modal('hide');
|
||||
|
||||
window.location.href = '/update.html';
|
||||
}
|
||||
|
||||
$scope.planChange.busy = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.avatarChange = {
|
||||
busy: false,
|
||||
error: {},
|
||||
@@ -369,35 +309,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
});
|
||||
}
|
||||
|
||||
function getPlans() {
|
||||
AppStore.getSizes(function (error, result) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
var found = false;
|
||||
var SIZE_SLUGS = [ '512mb', '1gb', '2gb', '4gb', '8gb', '16gb', '32gb', '48gb', '64gb' ];
|
||||
result = result.filter(function (size) {
|
||||
// only show plans bigger than the current size
|
||||
if (found) return true;
|
||||
found = SIZE_SLUGS.indexOf(size.slug) > SIZE_SLUGS.indexOf($scope.caasConfig.plan.slug);
|
||||
return found;
|
||||
});
|
||||
angular.copy(result, $scope.availablePlans);
|
||||
|
||||
// prepend the current plan
|
||||
$scope.availablePlans.unshift($scope.caasConfig.plan);
|
||||
|
||||
$scope.planChange.requestedPlan = $scope.availablePlans[0]; // need the reference to preselect
|
||||
|
||||
AppStore.getRegions(function (error, result) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
angular.copy(result, $scope.availableRegions);
|
||||
|
||||
$scope.currentRegionSlug = $scope.caasConfig.region;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('#avatarFileInput').get(0).onchange = function (event) {
|
||||
var fr = new FileReader();
|
||||
fr.onload = function () {
|
||||
@@ -467,18 +378,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
|
||||
$scope.update.checkStatus();
|
||||
|
||||
if ($scope.config.provider === 'caas') {
|
||||
Client.getCaasConfig(function (error, caasConfig) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
$scope.caasConfig = caasConfig;
|
||||
|
||||
getPlans();
|
||||
|
||||
$scope.currentPlan = caasConfig.plan;
|
||||
$scope.currency = caasConfig.currency === 'eur' ? '€' : '$';
|
||||
});
|
||||
} else if (!$scope.config.managed) {
|
||||
if (!$scope.config.managed) {
|
||||
Client.getAppstoreConfig(function (error, appstoreConfig) {
|
||||
if (error) return console.error(error);
|
||||
if (!appstoreConfig.token) return;
|
||||
|
||||
Reference in New Issue
Block a user