Addresses several structure and style issues with TOTP and Email dialogs.
Added missing div tags that were causing style problems. Reformatted HTML to make it easier to read. Added whitespace above buttons on TOTP Add dialog. Changed "6-digit" to "code" on email dialogs because number of digits varies.
This commit is contained in:
nswain
@@ -2,54 +2,50 @@
|
|||||||
{% block head %}
|
{% block head %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
|
<div class="container">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<strong> Activate Token by email</strong>
|
<strong> Activate Token by email</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
|
|
||||||
<FORM METHOD="POST" ACTION="{% url 'start_email' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
|
<FORM METHOD="POST" ACTION="{% url 'start_email' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
|
||||||
|
{% csrf_token %}
|
||||||
|
{% if invalid %}
|
||||||
{% csrf_token %}
|
<div class="alert alert-danger">
|
||||||
{% if invalid %}
|
Sorry, The provided token is not valid.
|
||||||
<div class="alert alert-danger">
|
</div>
|
||||||
Sorry, The provided token is not valid.
|
{% endif %}
|
||||||
|
{% if quota %}
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
{{ quota }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<fieldset>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-md-12">
|
||||||
|
<p>Enter the code sent to your email.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div class="row">
|
||||||
{% if quota %}
|
<div class="col-sm-12 col-md-12">
|
||||||
<div class="alert alert-warning">
|
<div class="form-group">
|
||||||
{{ quota }}
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon">
|
||||||
|
<i class="glyphicon glyphicon-lock"></i>
|
||||||
|
</span>
|
||||||
|
<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="submit" class="btn btn-lg btn-success btn-block" value="Verify">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
</fieldset>
|
||||||
<fieldset>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-12 col-md-12">
|
|
||||||
<p>Enter the 6-digits sent to your email.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-12 col-md-12">
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-addon">
|
|
||||||
<i class="glyphicon glyphicon-lock"></i>
|
|
||||||
</span>
|
|
||||||
<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
|
|
||||||
<input type="submit" class="btn btn-lg btn-success btn-block" value="Verify">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</FORM>
|
</FORM>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
<fieldset>
|
<fieldset>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-12 col-md-12">
|
<div class="col-sm-12 col-md-12">
|
||||||
<p>Enter the 6-digits sent to your email.</p>
|
<p>Enter the code sent to your email.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
<table class="table table-striped">
|
<table class="table table-striped">
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<style>
|
<style>
|
||||||
#two-factor-steps {
|
#two-factor-steps {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
@@ -12,8 +12,8 @@
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
|
<script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var key="";
|
var key="";
|
||||||
$(document).ready(function addToken() {
|
$(document).ready(function addToken() {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@@ -61,49 +61,49 @@
|
|||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="col-md-6 col-md-offset-3" id="two-factor-steps">
|
<div class="col-md-6 col-md-offset-3" id="two-factor-steps">
|
||||||
<div class="row" align="center">
|
<div class="row" align="center">
|
||||||
<h4>Adding Authenticator</h4>
|
<h4>Adding Authenticator</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a> phone/PC. If you can’t use a barcode,
|
<p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a>. If you can’t use a barcode,
|
||||||
<a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
|
<a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div align="center" style="display: none" id="second_step">
|
<div align="center" style="display: none" id="second_step">
|
||||||
|
|
||||||
<img id="qr"/>
|
<img id="qr"/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<p><b>Enter the six-digit code from the application</b></p>
|
<p><b>Enter the six-digit code from the application</b></p>
|
||||||
<p style="color: #333333;font-size: 10px">After scanning the barcode image, the app will display a six-digit code that you can enter below. </p>
|
<p style="color: #333333;font-size: 10px">After scanning the barcode image, the app will display a six-digit code that you can enter below. </p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
|
|
||||||
<input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
|
<input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6" style="padding-left: 0px">
|
|
||||||
<button class="btn btn-success" onclick="verify()">Enable</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6" align="right" style="padding-right: 30px">
|
<div class="row" style="padding-top: 10px;">
|
||||||
<a href="{% url 'mfa_home' %}"><button class="btn btn-default">Cancel</button></a>
|
<div class="col-md-6" style="padding-left: 0px">
|
||||||
|
<button class="btn btn-success" onclick="verify()">Enable</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6" align="right" style="padding-right: 30px">
|
||||||
|
<a href="{% url 'mfa_home' %}"><button class="btn btn-default">Cancel</button></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% include "modal.html" %}
|
{% include "modal.html" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user