Merge pull request #18 from Aquaveo/html-and-style-fixes
Addresses several structure and style issues with TOTP and Email dialogs
This commit is contained in:
Mohamed El-Kalioby
GitHub
@@ -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