setup page, multiple machines, add new btns

Author: eshaan7

.travis.yml

@@ -24,4 +24,4 @@ install:
 before_script:
   - black . --check
 script:
-  - flake8 . --count --max-line-length=88 --show-source --statistics
+  - flake8 . --count --max-line-length=88 --exclude="src/FlaskRTBCTF/utils/__init__.py" --show-source --statistics

src/FlaskRTBCTF/.gitignore

@@ -1,32 +1,43 @@
 @import url("https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600");
 
+:root {
+  --primary-color: #ce1b28;
+  --secondary-color: #2c2f36;
+  --dark-color: #101010;
+  --light-color: #C9D3E7;
+}
+
 body {
-  background: #2c2f36;
-  color: #C9D3E7 !important;
+  background: var(--secondary-color);
+  color: var(--light-color) !important;
   margin-top: 5rem;
   font-family: "Raleway", Arial, Helvetica, sans-serif;
   line-height: 1.65;
   font-size: 12pt;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: #C9D3E7;
+  color: var(--light-color);
 }
 
 hr {
-  background-color: #C9D3E7;
+  background-color: var(--light-color);
+}
+
+.bg-dark {
+  background-color: var(--dark-color) !important;
 }
 
-.bg-steel {
-  background-color: #101010;
+.bg-primary {
+  background-color: var(--primary-color) !important;
 }
 
 .site-header .navbar-nav .nav-link {
   color: #bbbbbb;
 }
 
 .site-header .navbar-nav .nav-link:hover {
-  color: #ce1b28;
+  color: var(--primary-color);
 }
 
 .site-header .navbar-nav .nav-link.active {
@@ -41,7 +52,8 @@ hr {
 }
 
 a.red-link {
-  color: #ce1b28 !important;
+  cursor: pointer;
+  color: var(--primary-color) !important;
   font-size: 17px;
 }
 
@@ -50,52 +62,60 @@ a.red-link:hover {
 }
 
 a.red-underlined-link {
-  color: #ce1b28 !important;
+  color: var(--primary-color) !important;
   text-decoration: underline;
 }
 
 a:hover, .btn-hover-red:hover {
-  color: #ce1b28 !important;
+  color: var(--primary-color) !important;
   text-decoration: none !important;
 }
 
 .title-heading {
-  color: #C9D3E7 !important;
+  color: var(--light-color) !important;
 }
 
+/* machine.html */
+
 .machine-heading {
   font-size: 2.5rem;
-  background: #101010;
+  background: var(--dark-color);
   text-align: center;
-  box-shadow: 0 7px 16px 0 #ce1b28;
+  box-shadow: 0 7px 16px 0 var(--primary-color);
   box-sizing: border-box;
 }
 
+
+.btn-sm {
+  border-radius: 10%;
+  cursor: pointer;
+}
+
 /* custom bootstrap */
 
 .table-responsive {
-  box-shadow: 0px 9px 18px 0px #101010 !important;
+  box-shadow: 0px 9px 18px 0px var(--dark-color) !important;
 }
 
 .table-row-odd {
-  background-color: #2c2f36;
+  background-color: var(--secondary-color);
   color: #fff;
 }
 
 .table-row-even {
-  background: #101010;
+  background: var(--dark-color);
   color: #fff;
   padding: 10px !important;
-  box-shadow: 69px 10px 18px 0 #ce1b28 !important;
+  box-shadow: 69px 10px 18px 0 var(--primary-color) !important;
   box-sizing: border-box;
   border-collapse: collapse;
 }
 
 .content-section, .jumbotron {
   background: rgba(35,36,39,0.95);
   padding: 10px 20px;
-  color: #C9D3E7;
-  border: 1px solid #2c2f36;
+  color: var(--light-color);
+  border: 1px solid var(--secondary-color);
   box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25);
   box-sizing: border-box;
   border-radius: 3px;
@@ -108,17 +128,17 @@ a:hover, .btn-hover-red:hover {
 }
 
 .card {
-  background: #101010;
+  background: var(--dark-color);
   padding: 10px 20px;
-  color: #C9D3E7;
-  border: 1px solid #2c2f36;
-  box-shadow: 0 5px 18px 0 #ce1b28;
+  color: var(--light-color);
+  border: 1px solid var(--secondary-color);
+  box-shadow: 0 5px 18px 0 var(--primary-color);
   box-sizing: border-box;
   margin-bottom: 20px;
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after{
-  background-color: #ce1b28 !important;
+  background-color: var(--primary-color) !important;
 }
 
 .form-control {
@@ -134,28 +154,40 @@ a:hover, .btn-hover-red:hover {
 }
 
 ul.list-group a.list-group-item {
-  background: #2c2f36;
-  color: #C9D3E7;
+  background: var(--secondary-color);
+  color: var(--light-color);
   box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25);
   box-sizing: border-box;
 }
 
 .alert-success {
-  color: #ce1b28 !important;
-  background-color: #101010 !important;
-  border: 1px solid #2c2f36 !important;
+  color: var(--primary-color) !important;
+  background-color: var(--dark-color) !important;
+  border: 1px solid var(--secondary-color) !important;
   box-sizing: border-box;
   border-radius: 3px;
   box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25) !important;
 }
 
-.alert-info, .alert-danger{
-  color: #101010 !important;
-  background-color: #ce1b28 !important;
+.alert-info, .alert-danger {
+  color: var(--dark-color) !important;
+  background-color: var(--primary-color) !important;
   opacity: 0.8;
   filter: alpha(opacity=30);
-  border: 1px solid #2c2f36 !important;
+  border: 1px solid var(--secondary-color) !important;
   box-sizing: border-box;
   border-radius: 3px;
   box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25) !important;
 }
+
+
+/* Setup.html */
+
+.line {
+  background-color: #bbbbbb !important;
+}
+
+.active .bs-stepper-circle {
+  background-color: var(--light-color) !important;
+  color: var(--dark-color) !important;
+}

src/FlaskRTBCTF/helpers.py

@@ -4,9 +4,9 @@
 {% block content %}
 
     <div class="content-section">
-        <h3>Username:</h3><span>{{ current_user.username }}</span>
+        <h4>Username:</h4><span>{{ current_user.username }}</span>
         <hr/>
-        <h3>Email: </h3>
+        <h4>Email:</h4>
         <span>{{ current_user.email }}</span>
     </div>
 

src/FlaskRTBCTF/static/main.css

@@ -4,9 +4,14 @@
 <div class="content-section">
     <div class="jumbotron jumbotron-fluid">
       <div class="container">
-            <h1 class="display-5">Welcome to {{ organization['ctfname'] }}</h1>
+            <h1 class="display-5">Welcome to {{ settings.ctf_name }}</h1>
             {% if current_user.is_authenticated %}
-                <p class="lead">If you owned the box then you can submit the hashes <a class="red-underlined-link" href="{{ url_for('ctf.machine') }}">here</a>.</p>
+                <p class="lead">
+                    If you owned the box then you can submit the hashes 
+                    <a class="red-underlined-link" href="{{ url_for('ctf.machines') }}">here
+                    </a>
+                    .
+                </p>
             {% else %}
                 <p class="lead">You need to <a class="red-underlined-link" href="{{ url_for('users.login') }}">login</a> first.</p>
             {% endif %}
@@ -18,12 +23,18 @@ <h1 class="display-5">Welcome to {{ organization['ctfname'] }}</h1>
     <h2 class="title-heading">Rules</h2>
     <hr/>
     <ul>
-        <li>Running time: <code>{{ RunningTime['from'].strftime("%Y-%m-%d %I:%M %p") }}</code> to <code>{{ RunningTime['to'].strftime("%Y-%m-%d %I:%M %p") }}</code> (All times in  <code>{{ RunningTime['TimeZone'] }}</code>)</li>
+        <li>Running time: 
+            <code>{{ RunningTime['from'].strftime("%Y-%m-%d %I:%M %p") }}</code> 
+            to 
+            <code>{{ RunningTime['to'].strftime("%Y-%m-%d %I:%M %p") }}</code> 
+            (All times in  <code>UTC</code>)
+        </li>
         <li>Needless to say: no bruteforcing (you'll never guess, anyway)</li>
-        <li>Automated vulnerability scanners will get you nowhere(we know 'cause we made the box)</li>
+        <li>Automated vulnerability scanners will get you nowhere (we know 'cause we made the box)</li>
         <li>Attacking this CTF infrastructure website is unnecessary. There are no hints.
             This website is for the sole purpose of registration, hash submission and management.</li>
-        <li>We have tested the machine multiple, I repeat multiple times so if you are receiving a status code of 404 or 301. Figure it out yourself!</li>    
+        <li>We have tested the machine multiple, I repeat multiple times so if you are receiving a status code of 404 or 301. 
+            Figure it out yourself!</li>    
         <li>Have fun! :)</li>
     </ul>
 </div>

src/FlaskRTBCTF/templates/account.html

@@ -8,24 +8,26 @@
     <!-- Favicon -->
   	<link rel='shortcut icon' type='image/x-icon' href="{{ url_for('static', filename='favicon.ico')}}"/>
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
+    <link rel="stylesheet" type="text/css"
+          href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
     <!-- local css -->
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
+    <link rel="stylesheet" type="text/css" 
+          href="{{ url_for('static', filename='main.css') }}">
     <!-- Title --> 
     {% if title %}
-        <title>{{ organization['ctfname'] }} - {{ title }}</title>
+        <title>{{ settings.ctf_name }} - {{ title }}</title>
     {% else %}
-        <title>{{ organization['ctfname'] }}</title>
+        <title>{{ settings.ctf_name }}</title>
     {% endif %}
 </head>
 <body>
 
     <header class="site-header">
-      <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
+      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
         <div class="container">
-          <a class="navbar-brand mr-4" href="/">{{ organization['ctfname'] }}</a>
+          <a class="navbar-brand mr-4" href="/">{{ settings.ctf_name }}</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
@@ -34,13 +36,14 @@
               <a class="nav-item nav-link" href="{{ url_for('main.home') }}">Home</a>
               <a class="nav-item nav-link" href="{{ url_for('main.notifications') }}">Notifications</a>
               <a class="nav-item nav-link" href="{{ url_for('ctf.scoreboard') }}">Scoreboard</a>
-              <a class="nav-item nav-link" href="{{ url_for('ctf.machine') }}">Machine</a>
+              <a class="nav-item nav-link" href="{{ url_for('ctf.machines') }}">Machines</a>
             </div>
             <!-- Navbar Right Side -->
             <div class="navbar-nav">
                 {% if current_user.is_authenticated %}
                   {% if current_user.isAdmin %}
                     <a class="nav-item nav-link" href="/admin">Admin Controls</a>
+                    <a class="nav-item nav-link" href="/setup">Setup</a>
                   {% endif %}
                   <a class="nav-item nav-link" href="{{ url_for('users.account') }}">@{{ current_user.username }}</a>
                   <a class="nav-item nav-link" href="{{ url_for('users.logout') }}">Logout</a>
@@ -74,26 +77,44 @@
               {% endfor %}
             {% endif %}
           {% endwith %}
+
+          <!-- All the main content goes here -->
           {% block content %}{% endblock %}
+
         </div>
         <div class="col-md-4">
             <div class="content-section">
-              <h3>{{ organization['name'] }}</h3>
-              <p class='text-muted'>{{ organization['tagline'] }}
+              <h3>{{ settings.organization_name }}</h3>
+              <p class="text-muted">
                 <ul class="list-group">
-                  <a target="_blank" href="{{ organization['website']['url'] }}" class="list-group-item list-group-item-action">{{ organization['website']['name'] }}</a>
-                  <a target="_blank" href="{{ organization['website_2']['url'] }}" class="list-group-item list-group-item-action">{{ organization['website_2']['name'] }}</a>
-                  <a target="_blank" href="{{ organization['website_3']['url'] }}" class="list-group-item list-group-item-action">{{ organization['website_3']['name'] }}</a>
+                  {% for w in settings.websites %}
+                    <a target="_blank" href="{{ w.url }}" class="list-group-item list-group-item-action">{{ w.name }}</a>
+                  {% endfor %}
                 </ul>
               </p>
             </div>
         </div>
       </div>
     </main>
 
-    <!-- Optional JavaScript -->
-    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <!-- jQuery and Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
+            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <!-- popper.js for popovers -->
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
+            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <!-- bootstrap.js -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
+            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <script>
+      $(document).ready(function(){
+        $('[data-toggle="tooltip"]').tooltip(
+          {
+            'delay': { show: 50, hide: 50 }
+          }
+        );   
+      });
+    </script>
 </body>
 </html>