Commit e149db34 authored by Bo-Chun Chen's avatar Bo-Chun Chen Committed by Krish Moodbidri
Browse files

Captured username to create account.Added bootstrap template.Styling changes...

Captured username to create account.Added bootstrap template.Styling changes to footer. Altered wait message.

- Remove duplicate line
- Update URL to static files
- Instead of hard-coded it,
   use `url_for`, function provided by flask, to generate the url
- Add Bootstrap javascript support
- Move footer section into body
- Add Bootstrap modal in template
- Remove notification window
- Hide Bootstrap modal after account's ready
- Alter wait message
- Adding another field to the form to capture username to create account with
- On connecting, send emit fuction to join_roon
parent aa14e172
...@@ -3,17 +3,18 @@ ...@@ -3,17 +3,18 @@
<head> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <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://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script src="static/scripts/function.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="static/scripts/function.js"></script> <script src="{{ url_for('static', filename='scripts/function.js') }}"></script>
<script> <script>
console.info('Room ID: {{ room_id }}'); console.info('Room ID: {{ room_id }}');
var socket = io.connect('http://' + document.domain + ':' + location.port); var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on( 'connect', function() { socket.on( 'connect', function() {
socket.emit( 'user connected', { /* socket.emit( 'user connected', {
user: document.getElementById("username").innerText user: document.getElementById("username").innerText
} ) } ) */
socket.emit( 'join_room' )
socket.on( 'creating account', function( msg ) { socket.on( 'creating account', function( msg ) {
document.getElementById("error").innerText = ""; document.getElementById("error").innerText = "";
...@@ -21,11 +22,8 @@ ...@@ -21,11 +22,8 @@
}) })
socket.on( 'account ready', function( msg ) { socket.on( 'account ready', function( msg ) {
let element = document.getElementById("notification_window"); $('#myModal').modal('hide');
element.parentNode.removeChild(element); alert("Account has been created!");
element.innerHTML = " ";
alert("Account creation successful!");
}) })
socket.on( 'Account creation failed', function( msg ) { socket.on( 'Account creation failed', function( msg ) {
...@@ -39,8 +37,8 @@ ...@@ -39,8 +37,8 @@
.important { color: #336699; } .important { color: #336699; }
</style> </style>
<link rel="shortcut icon" type="image/x-icon" href="/public/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/public/favicon.ico">
<link rel="stylesheet" media="all" href="/static/style/application.css"> <link rel="stylesheet" media="all" href="{{ url_for('static', filename='style/application.css') }}">
<link rel="stylesheet" media="all" href="/static/style/app2.css"> <link rel="stylesheet" media="all" href="{{ url_for('static', filename='style/app2.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
...@@ -80,16 +78,20 @@ ...@@ -80,16 +78,20 @@
<div class="container content" role="main" style="width: 625px"> <div class="container content" role="main" style="width: 625px">
<div style="position:relative;"> <div style="position:relative;">
<img alt="logo" height="auto" width="100%" style="margin-bottom: 20px" src="/static/img/cheaha-logo-a605de0aecd3006b82a5ee30a6d0cb8cd9bf8b7e836296cc293eac746a4c2b11.png"> <img alt="logo" height="auto" width="100%" style="margin-bottom: 20px" src="{{ url_for('static', filename='img/cheaha-logo-a605de0aecd3006b82a5ee30a6d0cb8cd9bf8b7e836296cc293eac746a4c2b11.png') }}">
<a href="https://tinyurl.com/cheahaAL" target="_blank"> <a href="https://tinyurl.com/cheahaAL" target="_blank">
<div style="float:left;position:absolute;display:block;left:310px;top:-6px;padding:10px 20px;"> </div> <div style="float:left;position:absolute;display:block;left:310px;top:-6px;padding:10px 20px;"> </div>
</a> </a>
</div> </div>
<h2>Hello, <span id="username">{{ user }}</span>!</h2> <!-- <h2>Hello, <span id="username">{{ user }}</span>!</h2> -->
<h2>Hi, </h2>
<div id="test"> <div id="test">
<form action="." method="post" onsubmit=""> <form action="." method="post" onsubmit="">
<div class="signUpContainer"> <div class="signUpContainer">
<label><b><label for="username">Blazer Id: </label><br></b></label>
<input class="form-control" id="bid" name="bid" placeholder="Enter BlazerId" required="" type="text">
<label><b><label for="fullname">Full Name: </label><br></b></label> <label><b><label for="fullname">Full Name: </label><br></b></label>
<input class="form-control" id="fullname" name="fullname" placeholder="Enter Full Name" required="" type="text"> <input class="form-control" id="fullname" name="fullname" placeholder="Enter Full Name" required="" type="text">
<label><b><label for="reason">Reason for Requesting Account: </label><br></b></label> <label><b><label for="reason">Reason for Requesting Account: </label><br></b></label>
...@@ -106,5 +108,29 @@ ...@@ -106,5 +108,29 @@
</div> </div>
</form> </form>
<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">
<div class="col-md-6 col-sm-6">
<a href="https://osc.github.io/Open-OnDemand/">
<img class="footer-logo" alt="Powered by Open OnDemand" height="40" style="margin-bottom: 20px" src="{{ url_for('static', filename='img/OpenOnDemand_powered_by_RGB-cb3aad5ff5350c7994f250fb334ddcc72e343233ce99eb71fda93beddd76a847.svg') }}">
</a>
</div>
</div>
</div><!-- /.container -->
</footer>
</body> </body>
</html> </html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment