jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

app passwords: add ui

Browse Source
This commit is contained in:
Girish Ramakrishnan
2020-02-01 10:04:09 -08:00
parent c9e43ed295
commit d5e4453f15
3 changed files with 220 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/profile.html
View File

@@ -228,6 +228,53 @@
</div>
</div>
<!-- Modal add app password -->
<div class="modal fade" id="appPasswordAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Create App Password</h4>
</div>
<div class="modal-body">
<div ng-hide="appPasswordAdd.password">
<form name="appPasswordAddForm" role="form" novalidate ng-submit="appPasswordAdd.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (appPasswordAddForm.name.$dirty && appPasswordAddForm.name.$invalid) || (!appPasswordAddForm.name.$dirty && appPasswordAdd.error.name)}">
<label class="control-label">App Password Name</label>
<div class="control-label" ng-show="(!appPasswordAddForm.name.$dirty && appPasswordAdd.error.name) || (appPasswordAddForm.name.$dirty && appPasswordAddForm.name.$invalid)">
<small ng-show="appPasswordAddForm.name.$error.required">A name is required</small>
<small ng-show="appPasswordAdd.error.name">{{ appPasswordAdd.error.name }}</small>
</div>
<input type="text" class="form-control" ng-model="appPasswordAdd.name" id="inputAppPasswordAddName" name="name" required autofocus>
</div>
<div class="form-group" ng-class="{ 'has-error': (appPasswordAddForm.identifier.$dirty && appPasswordAddForm.identifier.$invalid) || (!appPasswordAddForm.identifier.$dirty && appPasswordAdd.error.identifier)}">
<label class="control-label">App</label>
<select class="form-control" ng-model="appPasswordAdd.identifier" ng-options="a.id as a.label for a in appPassword.identifiers" required></select>
</div>
<input class="ng-hide" type="submit" ng-disabled="appPasswordAddForm.$invalid"/>
</form>
</div>
<div ng-show="appPasswordAdd.password">
Use the following password to authenticate against the app:
<br/>
<b ng-click-select>{{ appPasswordAdd.password.password }}</b>
<br/>
<br/>
<p>Please copy the password now. It won't be shown again for security purposes.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="appPasswordAdd.submit()" ng-hide="appPasswordAdd.password" ng-disabled="appPasswordAddForm.$invalid || appPasswordAdd.busy">
<i class="fa fa-circle-notch fa-spin" ng-show="appPasswordAdd.busy"></i> Generate Password
</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="text-left">
@@ -281,6 +328,44 @@
</div>
</div>
<br>
<div class="text-left">
<h3>App Passwords<button class="btn btn-primary btn-sm pull-right" ng-click="appPasswordAdd.show()"><i class="fa fa-plus"></i> New Password</button></h3>
</div>
<div class="card">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12">
<p>These passwords can be used as a security measure in mobile apps.</p>
<table class="table table-hover">
<thead>
<tr>
<th style="width:35%">Name</th>
<th style="width:35%">App</th>
<th style="width: 5%" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="password in appPassword.passwords">
<td class="text-left elide-table-cell">
<span uib-tooltip="{{ password.creationTime | prettyLongDate }}" class="arrow">{{ password.name }}</span>
</td>
<td class="text-left elide-table-cell">
<span class="arrow">{{ password.prettyIdentifier }}</span>
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-danger pull-right" ng-click="appPassword.del(password.id)" title="Delete Password"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="text-left" ng-show="user.admin">
<h3>Sessions and API Tokens</h3>
</div>

104
src/views/profile.js
View File

@@ -7,6 +7,7 @@
angular.module('Application').controller('ProfileController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
$scope.user = Client.getUserInfo();
$scope.config = Client.getConfig();
$scope.apps = Client.getInstalledApps();
$scope.activeClients = [];
$scope.webadminClient = {};
@@ -342,6 +343,105 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
}
};
$scope.appPasswordAdd = {
password: null,
name: '',
identifier: '',
busy: false,
error: {},
reset: function () {
$scope.appPasswordAdd.busy = false;
$scope.appPasswordAdd.password = null;
$scope.appPasswordAdd.error.name = null;
$scope.appPasswordAdd.name = '';
$scope.appPasswordAdd.identifier = '';
$scope.appPasswordAddForm.$setUntouched();
$scope.appPasswordAddForm.$setPristine();
},
show: function () {
$scope.appPasswordAdd.reset();
$('#appPasswordAddModal').modal('show');
},
submit: function () {
$scope.appPasswordAdd.busy = true;
$scope.appPasswordAdd.password = {};
Client.addAppPassword($scope.appPasswordAdd.identifier, $scope.appPasswordAdd.name, function (error, result) {
if (error) {
if (error.statusCode === 400) {
$scope.appPasswordAdd.error.name = error.message;
$scope.appPasswordAddForm.name.$setPristine();
$('#inputAppPasswordName').focus();
} else {
console.error('Unable to create password.', error);
}
return;
}
$scope.appPasswordAdd.busy = false;
$scope.appPasswordAdd.password = result;
console.log(result);
$scope.appPassword.refresh();
});
}
};
$scope.appPassword = {
busy: false,
error: {},
passwords: [],
identifiers: [],
refresh: function () {
Client.getAppPasswords(function (error, result) {
if (error) console.error(error);
$scope.appPassword.passwords = result.appPasswords || [];
$scope.appPassword.identifiers = [
{ id: 'mail', label: 'Email' },
// { id: 'webadmin', label: 'Web Admin'}
];
var appsById = {};
$scope.apps.forEach(function (app) {
if (!app.manifest.addons || !app.manifest.addons.ldap) return;
appsById[app.id] = app;
if (app.label) {
$scope.appPassword.identifiers.push({ id: app.id, label: app.label + ' (' + app.fqdn + ')' });
} else {
$scope.appPassword.identifiers.push({ id: app.id, label: app.fqdn });
}
});
// setup prettyIdentifier for the UI
$scope.appPassword.passwords.forEach(function (password) {
if (password.identifier === 'mail') return password.prettyIdentifier = password.identifier;
var app = appsById[password.identifier];
if (!app) return password.prettyIdentifier = password.identifier + ' (App not found)';
if (app.label) {
password.prettyIdentifier = app.label + ' (' + app.fqdn + ')';
} else {
password.prettyIdentifier = app.fqdn;
}
});
});
},
del: function (id) {
Client.delAppPassword(id, function (error) {
if (error) console.error(error);
$scope.appPassword.refresh();
});
}
};
$scope.displayNameChange = {
busy: false,
error: {},
@@ -427,6 +527,8 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
Client.getOAuthClients(function (error, activeClients) {
if (error) return console.error(error);
$scope.appPassword.refresh();
asyncForEach(activeClients, refreshClientTokens, function () {
$scope.webadminClient = activeClients.filter(function (c) { return c.id === 'cid-webadmin'; })[0];
$scope.apiClient = activeClients.filter(function (c) { return c.id === 'cid-sdk'; })[0];
@@ -455,7 +557,7 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
};
// setup all the dialog focus handling
['passwordChangeModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
['passwordChangeModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});