From 633397ce712723d4ccfc65a0640757f19e6c7dcf Mon Sep 17 00:00:00 2001
From: Bo-Chun Louis Chen <louistw@uab.edu>
Date: Fri, 6 Mar 2020 18:09:31 +0000
Subject: [PATCH] Added Bootstrap javascript support, made changes to the UI,
altered wait message
- Add Bootstrap javascript support
- Move footer section into body
- Add Bootstrap modal in template
- Call modal show in displayloading function
- Remove notification window
- Hide Bootstrap modal after account's ready
- Alter wait message
---
app/static/scripts/function.js | 16 +---------------
app/templates/auth/SignUp.html | 29 +++++++++++++++++------------
2 files changed, 18 insertions(+), 27 deletions(-)
diff --git a/app/static/scripts/function.js b/app/static/scripts/function.js
index 3517c02..694ff19 100644
--- a/app/static/scripts/function.js
+++ b/app/static/scripts/function.js
@@ -1,19 +1,5 @@
function displayloading() {
- document.getElementById("notification_window").innerHTML = "" +
- "<div class=\"joyride-tip-guide\" data-index=\"0\" style=\"visibility: visible; display: block; top: 77.5px; left: 570px;\"><span class=\"joyride-nub\" style=\"display: none;\"></span><div class=\"joyride-content-wrapper\" role=\"dialog\"><ol>\n" +
- " <h4>\n" +
- "\n" +
- " Your account is pending creation...\n" +
- "\n" +
- " </h4>\n" +
- " <br><p>\n" +
- " This can take between 5-10 min.\n" +
- " </p>\n" +
- " </ol>\n" +
- " <img src=\"/static/img/loading.gif\" style=\"width: 35px; height: auto\"> Pending...\n" +
- " </div></div>\n" +
- "\n" +
- " <div class=\"joyride-modal-bg\" style=\"display: block;\"></div>"
+ $('#myModal').modal('show');
}
function request_account() {
diff --git a/app/templates/auth/SignUp.html b/app/templates/auth/SignUp.html
index b8358f8..27e2f4f 100644
--- a/app/templates/auth/SignUp.html
+++ b/app/templates/auth/SignUp.html
@@ -3,6 +3,7 @@
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='scripts/function.js') }}"></script>
<script>
@@ -18,11 +19,8 @@
})
socket.on( 'account ready', function( msg ) {
- let element = document.getElementById("notification_window");
- element.parentNode.removeChild(element);
- element.innerHTML = " ";
- alert("Account creation successful!");
-
+ $('#myModal').modal('hide');
+ alert("Account has been created!");
})
socket.on( 'Account creation failed', function( msg ) {
@@ -106,12 +104,19 @@
</div>
</div>
-
-<div id="notification_window" >
-</div>
-
- <div id ="testo"></div>
-</body>
+ <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
+ <div class="modal-dialog modal-sm" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="myModalLabel">Account Request Received!</h4>
+ </div>
+ <div class="modal-body">
+ <span>Please wait while we create your account. This may take up to 5-10 minutes.</span>
+ <img src="{{ url_for('static', filename='img/loading.gif') }}" width="40px">
+ </div>
+ </div>
+ </div>
+ </div>
<footer>
<div class="container-fluid">
<div class="row">
@@ -122,7 +127,7 @@
</div>
</div>
</div><!-- /.container -->
-
</footer>
+</body>
</html>
--
GitLab