app passwords: add ui

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

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>