Add 2fa enabling flow to accounts view

This commit is contained in:
Johannes Zellner
2018-04-26 15:12:29 +02:00
parent 3f082ccace
commit 7a24d5fdfa
3 changed files with 150 additions and 4 deletions

View File

@@ -128,6 +128,41 @@
</div>
</div>
<!-- Modal enable twofactor authentication -->
<div class="modal fade" id="twoFactorAuthenticationEnableModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Enable Two-Factor Authentication</h4>
</div>
<div class="modal-body text-center" ng-hide="twoFactorAuthentication.secret">
<h2><i class="fa fa-circle-o-notch fa-spin"></i></h2>
</div>
<div class="modal-body" ng-show="twoFactorAuthentication.secret">
<center>
<img ng-src="{{ twoFactorAuthentication.qrcode }}"/>
<p>{{ twoFactorAuthentication.secret }}</p>
</center>
<br/>
<form name="twoFactorAuthenticationEnableForm" role="form" novalidate ng-submit="twoFactorAuthentication.enable()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (!twoFactorAuthenticationEnableForm.totpToken.$dirty && twoFactorAuthentication.error) || (twoFactorAuthenticationEnableForm.totpToken.$dirty && twoFactorAuthenticationEnableForm.totpToken.$invalid) }">
<label class="control-label">Token</label>
<div class="control-label" ng-show="(!twoFactorAuthenticationEnableForm.totpToken.$dirty && twoFactorAuthentication.error) || (twoFactorAuthenticationEnableForm.totpToken.$dirty && twoFactorAuthenticationEnableForm.totpToken.$invalid)">
<small>{{ twoFactorAuthentication.error }}</small>
</div>
<input type="text" class="form-control" ng-model="twoFactorAuthentication.totpToken" id="twoFactorAuthenticationTotpTokenInput" name="totpToken" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="twoFactorAuthenticationEnableForm.$invalid"/>
</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="twoFactorAuthentication.enable()" ng-disabled="twoFactorAuthenticationEnableForm.$invalid || twoFactorAuthentication.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="twoFactorAuthentication.busy"></i> Enable</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="text-left">
@@ -158,6 +193,10 @@
<td class="text-muted" style="vertical-align: top;">Password recovery email</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ user.fallbackEmail }} <a href="" ng-click="fallbackEmailChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;">Two-Factor Authentication</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;">not enabled <a href="" ng-click="twoFactorAuthentication.show()"><i class="fa fa-pencil text-small"></i></a></td>
</tr>
<tr>
<td class="text-right" colspan="2" style="vertical-align: top;">
<br/>
@@ -192,4 +231,4 @@
</div>
</div>
</div>
</div>
</div>