Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-19 02:51:14 +02:00
Code Issues Projects Releases Wiki Activity

Two-step login UI tweaks

Browse Source
This commit is contained in:
Kyle Spearrin 2017-04-28 21:31:57 -04:00
parent cc62237ab5
commit 31f67d412b
1 changed files with 56 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/settings/views/settingsTwoFactor.html
View File

@ -2,9 +2,13 @@
<button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="twoFactorModelLabel"><i class="fa fa-key"></i> Two-step Log In</h4> <h4 class="modal-title" id="twoFactorModelLabel"><i class="fa fa-key"></i> Two-step Log In</h4>
</div> </div>
<form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise" ng-if="!twoFactorModel"> <form name="authTwoStepForm" ng-submit="authTwoStepForm.$valid && auth(authModel)" api-form="authPromise"
ng-if="!twoFactorModel">
<div class="modal-body"> <div class="modal-body">
<p ng-show="enabled()">Two-step log in is already enabled on your account. To access your two-step settings enter your master password below.</p> <p ng-show="enabled()">
Two-step log in is already enabled on your account. To access your two-step
settings enter your master password below.
</p>
<p ng-show="!enabled()">To get started with two-step log in enter your master password below.</p> <p ng-show="!enabled()">To get started with two-step log in enter your master password below.</p>
<div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors"> <div class="callout callout-danger validation-errors" ng-show="authTwoStepForm.$errors">
<h4>Errors have occured</h4> <h4>Errors have occured</h4>
@ -14,7 +18,8 @@
</div> </div>
<div class="form-group" show-errors> <div class="form-group" show-errors>
<label for="masterPassword">Master Password</label> <label for="masterPassword">Master Password</label>
<input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword" class="form-control" required api-field /> <input type="password" id="masterPassword" name="MasterPasswordHash" ng-model="authModel.masterPassword"
class="form-control" required api-field />
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -24,10 +29,17 @@
<button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button> <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
</div> </div>
</form> </form>
<form name="updateTwoStepForm" ng-submit="updateTwoStepForm.$valid && update(updateModel)" api-form="updatePromise" ng-if="twoFactorModel"> <form name="updateTwoStepForm" ng-submit="updateTwoStepForm.$valid && update(updateModel)" api-form="updatePromise"
ng-if="twoFactorModel">
<div class="modal-body"> <div class="modal-body">
<div ng-show="enabled()"> <div ng-show="enabled()">
<p>Two-step log in is <strong class="text-green">enabled</strong> on your account. Below is the code required by your verification app.</p> <div class="callout callout-success">
<h4><i class="fa fa-check-circle"></i> Enabled</h4>
<p>
Two-step log in is enabled on your account. Incase you need to add it to another device, below is the QR
code (or key) required by your verification app.
</p>
</div>
<p>Need a two-step verification app? Download one of the following:</p> <p>Need a two-step verification app? Download one of the following:</p>
</div> </div>
<div ng-show="!enabled()"> <div ng-show="!enabled()">
@ -35,10 +47,29 @@
<h4>1. Download a two-step verification app</h4> <h4>1. Download a two-step verification app</h4>
</div> </div>
<ul class="fa-ul"> <ul class="fa-ul">
<li><i class="fa-li fa fa-apple"></i> iOS devices: <a href="https://itunes.apple.com/us/app/authy/id494168017?mt=8" target="_blank">Authy for iOS</a></li> <li>
<li><i class="fa-li fa fa-android"></i> Android devices: <a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">Authy for Android</a></li> <i class="fa-li fa fa-apple fa-lg"></i>
<li><i class="fa-li fa fa-windows"></i> Windows devices: <a href="https://www.microsoft.com/en-us/store/apps/authenticator/9wzdncrfj3rj" target="_blank">Microsoft Authenticator </a></li> iOS devices:
<a href="https://itunes.apple.com/us/app/authy/id494168017?mt=8" target="_blank">
Authy for iOS
</a>
</li>
<li>
<i class="fa-li fa fa-android fa-lg"></i>
Android devices:
<a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">
Authy for Android
</a>
</li>
<li>
<i class="fa-li fa fa-windows fa-lg"></i>
Windows devices:
<a href="https://www.microsoft.com/en-us/store/apps/authenticator/9wzdncrfj3rj" target="_blank">
Microsoft Authenticator
</a>
</li>
</ul> </ul>
<p>These apps are recommended, however, other authenticator apps will also work.</p>
<hr ng-show="enabled()" /> <hr ng-show="enabled()" />
<h4 ng-show="!enabled()" style="margin-top: 30px;">2. Scan this QR code with your verification app</h4> <h4 ng-show="!enabled()" style="margin-top: 30px;">2. Scan this QR code with your verification app</h4>
<div class="row"> <div class="row">
@ -46,7 +77,10 @@
<p><img ng-src="{{twoFactorModel.qr}}" alt="QR" class="img-thumbnail" /></p> <p><img ng-src="{{twoFactorModel.qr}}" alt="QR" class="img-thumbnail" /></p>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<p><strong>Can't scan the code?</strong> You can add the code to your application manually using the following details:</p> <p>
<strong>Can't scan the code?</strong> You can add the code to your application manually using the
following details:
</p>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><strong>Key:</strong> <code>{{twoFactorModel.key}}</code></li> <li><strong>Key:</strong> <code>{{twoFactorModel.key}}</code></li>
<li><strong>Account:</strong> {{account}}</li> <li><strong>Account:</strong> {{account}}</li>
@ -60,8 +94,8 @@
<h4><i class="fa fa-warning"></i> Recovery Code <i class="fa fa-warning"></i></h4> <h4><i class="fa fa-warning"></i> Recovery Code <i class="fa fa-warning"></i></h4>
<p> <p>
The recovery code allows you to access your account in the event that you lose your authenticator app. The recovery code allows you to access your account in the event that you lose your authenticator app.
bitwarden support won't be able to assist you if you lose access to your account. We recommend you write down or bitwarden support won't be able to assist you if you lose access to your account. We recommend
print the recovery code below and keep it in a safe place. you write down or print the recovery code below and keep it in a safe place.
</p> </p>
<p><strong>Recovery Code:</strong> <code>{{twoFactorModel.recovery}}</code></p> <p><strong>Recovery Code:</strong> <code>{{twoFactorModel.recovery}}</code></p>
<button type="button" class="btn btn-default" ng-click="print(twoFactorModel.recovery)"> <button type="button" class="btn btn-default" ng-click="print(twoFactorModel.recovery)">
@ -69,19 +103,26 @@
</button> </button>
</div> </div>
</div> </div>
<hr ng-show="enabled()" />
<div class="callout callout-danger validation-errors" ng-show="updateTwoStepForm.$errors"> <div class="callout callout-danger validation-errors" ng-show="updateTwoStepForm.$errors">
<h4>Errors have occured</h4> <h4>Errors have occured</h4>
<ul> <ul>
<li ng-repeat="e in updateTwoStepForm.$errors">{{e}}</li> <li ng-repeat="e in updateTwoStepForm.$errors">{{e}}</li>
</ul> </ul>
</div> </div>
<hr ng-show="enabled()" /> <h4 style="margin-top: 30px;">
<h4 style="margin-top: 30px;"><span ng-show="enabled()">Want to disable? </span><span ng-show="!enabled()">3. </span>Enter the resulting verification code from the app</h4> <span ng-show="enabled()">Want to disable? </span><span ng-show="!enabled()">3. </span>
Enter the resulting verification code from the app
</h4>
<div class="form-group" show-errors> <div class="form-group" show-errors>
<label for="token" class="sr-only">Verification Code</label> <label for="token" class="sr-only">Verification Code</label>
<input type="text" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token" class="form-control" required api-field /> <input type="text" id="token" name="Token" placeholder="Verification Code" ng-model="updateModel.token"
class="form-control" required api-field />
</div> </div>
<p ng-show="!enabled()">NOTE: After enabling two-step log in, you will be required to enter the current code generated by your verification app each time you log in.</p> <p ng-show="!enabled()">
NOTE: After enabling two-step log in, you will be required to enter the current code
generated by your verification app each time you log in.
</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="submit" class="btn btn-primary btn-flat" ng-disabled="updateTwoStepForm.$loading"> <button type="submit" class="btn btn-primary btn-flat" ng-disabled="updateTwoStepForm.$loading">