Finished edit source code, started robots training, fixed header macro

Edit source code training is complete
Training header macro has been changed to change image automatically
Robots.txt added and secret page
Started making robots training and added entry to db

cyber/routes.py

@@ -1,5 +1,5 @@
 import os
-from flask import render_template, url_for, request, redirect, flash, session
+from flask import render_template, url_for, request, redirect, flash, session, send_from_directory
 from cyber import app, db
 from cyber.models import *
 from cyber.forms import *
@@ -64,6 +64,12 @@ def stories():
     session['url'] = url_for('stories')   
     return render_template('stories.html', title='Choose Your Adventure')
 
+@app.route("/secret.html")
+@app.route("/secret")
+def secret():
+    session['url'] = url_for('secret')   
+    return render_template('/training/robots/secret.html', title='CyberQuest')
+
 @app.route("/training")
 def training():
     session['url'] = url_for('training')
@@ -187,7 +193,17 @@ def challenge_redirect(training_name):
                 return render_template(success_file_name, message=message) #this keeps the url at the same place!! very useful
             else:
                 flash('Invalid password.')
-
+
+    if (training_name == "editing-source"):
+        form = InspectForm2()
+        if form.validate_on_submit():
+            if (form.password.data == 'leaptovictory'):
+                #Set points in database and return success
+                message = set_points(training_name)
+                success_file_name = "/training/"+training_name+ "/" + training_name + "-success.html"
+                return render_template(success_file_name, message=message) #this keeps the url at the same place!! very useful
+            else:
+                flash('Invalid password. Note to self: I hid the password in an image')
 
     elif (training_name == "manual-cracking"):
         form = PasswordCracking1()
@@ -333,5 +349,8 @@ def internal_server_error(e):
     print(app.root_path)
     return render_template('500.html'), 500
 
-
+@app.route('/robots.txt')
+#@app.route('/sitemap.xml')
+def static_from_root():
+    return send_from_directory(app.static_folder, request.path[1:])
 

cyber/static/robots.txt

@@ -0,0 +1,7 @@
+User-agent: Googlebot-Image
+Disallow: /
+
+User-agent: *
+Disallow: /secret.html
+
+Hey! What are you doing snooping around here! I sure hope you don't visit that secret site...

cyber/templates/layout.html

@@ -174,7 +174,10 @@
                             </li>
                             <a href="{{ url_for('profile') }}">
                                 <li>
-                                    <img id="profile-icon" class="img" src="../static/img/profile-pics/{{current_user.profile_pic}}.png" />
+                                    <!--
+                                    <img id="profile-icon" class="img" src="../static/img/profile-pics/{{current_user.profile_pic}}.png" /> -->
+                                    <img id="profile-icon" class="img" src="{{ url_for('static', filename='img/profile-pics/') }}{{current_user.profile_pic}}.png" />
+
                                 </li>
                             </a>
                             <a href="{{ url_for('profile') }}">

cyber/templates/macros.html

@@ -108,14 +108,14 @@ <h2 class="mb-0">
 <!-- END CHALLENGE -->
 
 
-<!-- TRAINING HEADER (Args: Category, training name, points, image, background class=default "new-colour" so can be left empty) -->
-{% macro training_header(category, training_name, points, image, background_class="new-colour") %}
+<!-- TRAINING HEADER (Args: Category, display name, points, t_name for image, background class=default "new-colour" so can be left empty) -->
+{% macro training_header(category, training_name, points, t_name, background_class="new-colour") %}
 {{ caller() }}
 
 
 <div class="{{ background_class }} card-header card-header-primary training-header">
 
-    <img src={{ image }}>
+    <img src="../../static/img/training/{{ t_name }}.png">
 
     <div class="d-flex justify-content-center">
         <h1>{{ category }}</h1>

cyber/templates/training/editing-source/editing-source-1.html

@@ -9,8 +9,8 @@
         <div class="row">
             <div class="card training_background">
 
-                <!-- TRAINING HEADER (Args: Category, training name, points, image, background class=default "new-colour" so can be left empty) -->
-                {% call training_header("Web Hacking", training.display_name, training.points, "../../static/img/training/inspecting-source.png", "sky-blue") %}
+                <!-- TRAINING HEADER (Args: Category, training name, points, t_name for image, background class=default "new-colour" so can be left empty) -->
+                {% call training_header("Web Hacking", training.display_name, training.points, training.training_name, "sky-blue") %}
                 {% endcall %}
                 <!-- TRAINING HEADER -->
 

cyber/templates/training/editing-source/editing-source-2.html

@@ -9,8 +9,8 @@
         <div class="row">
             <div class="card training_background">
 
-                <!-- TRAINING HEADER (Args: Category, training name, points, image, background class=default "new-colour" so can be left empty) -->
-                {% call training_header("Web Hacking", training.display_name, training.points, "../../static/img/training/inspecting-source.png", "sky-blue") %}
+                <!-- TRAINING HEADER (Args: Category, training name, points, t_name for image, background class=default "new-colour" so can be left empty) -->
+                {% call training_header("Web Hacking", training.display_name, training.points, training.training_name, "sky-blue") %}
                 {% endcall %}
                 <!-- TRAINING HEADER -->
 

cyber/templates/training/editing-source/editing-source-3.html

@@ -9,41 +9,41 @@
         <div class="row">
             <div class="card training_background">
 
-                <!-- TRAINING HEADER (Args: Category, training name, points, image, background class=default "new-colour" so can be left empty) -->
-                {% call training_header("Web Hacking", training.display_name, training.points, "../../static/img/training/inspecting-source.png", "sky-blue") %}
+                <!-- TRAINING HEADER (Args: Category, training name, points, t_name for image, background class=default "new-colour" so can be left empty) -->
+                {% call training_header("Web Hacking", training.display_name, training.points, training.training_name, "sky-blue") %}
                 {% endcall %}
                 <!-- TRAINING HEADER -->
 
                 <div class="">
                     <div class="card-body training_card">
 
-                        <p>Oops, we broke the mini-challenge button! Go ahead, try and click it- it won't work</p>
-                        <p>The good news is you can fix it.</p>
-                        <img class="img-fluid mx-auto d-block" src="{{ url_for('static', filename='img/web-hacking/button-san.png') }}">
+                        <p>Good job on the last task. This time we're going to look at another attribute: <i>hidden</i>.</p>
+                        <p>On this page we've hidden the challenge button this time, sorry!</p>
+                        <img class="img-fluid mx-auto d-block" src="{{ url_for('static', filename='img/web-hacking/hidden-button.gif') }}">
 
-                        <h2>Let's learn how</h2>
-                        <p>In the previous training we learnt what a tag was, and how everything you see on a website is made up of lots of different tags. Paragraphs are made using the <code>&lt;p&gt;</code> tag, images use the <code>&lt;img&gt;</code> tag, buttons use <code>&lt;button&gt;</code>, forms use <code>&lt;form&gt;</code>, etc... If you want to learn more about HTML, <a href="https://www.w3schools.com/html/default.asp" target="_blank">w3schools is a great resource.</a></p>
+                        <h2>Ugh, fix it!</h2>
+                        <p>The <code>hidden</code> attribute is responsible for hiding whatever tag its placed in. It could be used to hide an image, form field, or in this case a button. To make a hidden tag display again, you simply need to remove the <code>hidden</code> attribute.</p>
 
-                        <h3>Attributes of a tag</h3>
-                        <p>To make a button in HTML you need an opening <code>&lt;button&gt;</code> tag, the text you want inside your button, and finally a closing &lt;/button&gt; tag. Here's an example:</p>
-
-                        <code>&lt;button &gt;I am a button that does nothing&lt;/button&gt;</code>
-                        <button>I am a button that does nothing</button>
-
-
-                        <p>There are different <i><u>attributes</u></i> that a tag can have. These are written after the element name (in this case, 'button') in the opening tag. Here's another example:</p>
-
-                        <code>&lt;button class="btn" name="mybutton" disabled&gt;I am a button with attributes&lt;/button&gt;</code>
-                        <button class="btn" name="mybutton" disabled>I am a button with attributes</button>
-
-                        <p>In this button, the attributes we have set its class, name, and disabled it. Most HTML tags have attributes, and these are very important for setting the properties of an element. For example, the width of an image is an attribute of the <code>&lt;img&gt;</code> tag</p>
+                        <p>On the last page we managed to remove the <code>disabled</code> attribute from our button by inspecting the source code, selecting the <code>disabled</code> word, and deleting it. The <code>hidden</code> attribute is no different</p>
 
                         <h3>Give it a try</h3>
-
-                        <p>Try editing the source code of the buttons to change the class to <code>class="btn-warning"</code>. You'll have to inspect the source code, double click on the <code>&lt;button&gt;</code> tag and type the new attributes you want. Watch the demo below to see how. You can also experiment with removing and adding the <code>disabled</code> attribute.</p>
-
-                        <img class="img-fluid demo-gif img-thumbnail mx-auto d-block" src="{{ url_for('static', filename='img/web-hacking/edit-button.gif') }}">
-
+                        <p>Try adding the <code>hidden</code> attribute to this paragraph tag! It should make this text disappear. You can then find the code for this paragraph and delete the attribute again to make it visible. If you delete the wrong thing, you can always refresh this page to return it back to normal.</p>
+                        <img width=10px height=10px class="img-fluid mx-auto d-block" src="{{ url_for('static', filename='img/web-hacking/cody.png') }}">
+
+                        <p>There's a secret image above this paragraph, but it's been hidden using different attributes. See if you can edit it to see the image. HINT: try changing the numbers</p>
+                        <!-- HINT -->
+                        <div class="card-header" id="headingTwo">
+                            <h2 class="mb-0">
+                                <button class="btn btn-default btn-smbtn-danger " data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                    Stuck? Here's the solution
+                                </button>
+                            </h2>
+                        </div>
+
+                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
+                            <div class="card-body"><img class="img-fluid demo-gif img-thumbnail mx-auto d-block" src="{{ url_for('static', filename='img/web-hacking/edit-attributes.gif') }}"></div>
+                        </div>
+                        <!-- END HINT -->
                     </div>
                 </div>
             </div>
@@ -59,7 +59,7 @@ <h3>Give it a try</h3>
                 </div>
                 <div class="card-body text-center">
                     <p id="mini-challenge-prompt">Ruh roh! We broke the button! Can you edit the button's source code to enable it again?</p>
-                    <button disabled type="button" position="absolute" text-align="center !important" margin="0 auto !important" class="btn btn-success" onclick="mini_challenge()"><i class="material-icons">double_arrow</i>Accept Mini-Challenge</button>
+                    <button hidden type="button" position="absolute" text-align="center !important" margin="0 auto !important" class="btn btn-success" onclick="mini_challenge()"><i class="material-icons">double_arrow</i>Accept Mini-Challenge</button>
 
                     <!-- HINT -->
                     <div class="card-header" id="headingOne">

cyber/templates/training/editing-source/editing-source-4.html

@@ -0,0 +1,97 @@
+{% extends "layout.html" %}
+<!-- this layout just goes back ../ for all the links so it doesn't break since it's in the /training/ directory -->
+<!-- may be needed for other pages too -->
+
+{% block content %}
+
+<div class="content">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="card training_background">
+                <!-- TRAINING HEADER (Args: Category, training name, points, t_name for image, background class=default "new-colour" so can be left empty) -->
+                {% call training_header("Web Hacking", training.display_name, training.points, training.training_name, "sky-blue") %}
+                {% endcall %}
+                <!-- TRAINING HEADER -->
+
+                <div class="">
+                    <div class="card-body training_card">
+
+                        <p>Here's a little bit of a summary of what we know so far:</p>
+                        <ul>
+                            <li>You can edit the source code by right clicking the part you want to edit, clicking "Inspect", then double clicking the tag you want to edit</li>
+                            <li>You can edit the text of a website</li>
+                            <li>You can disable/enable part of a website by adding/removing the <code>disabled</code> attribute</li>
+                            <li>You can hide/show part of a website by adding/removing the <code>hidden</code>attribute</li>
+                        </ul>
+                        <p>You're going to need all these skills for the final challenge, so go back and practice if you're not feeling confident.</p>
+
+
+                        <h2>Episode II: Revenge of the Frog</h2>
+                        <img class="img-fluid mx-auto d-block" src="{{ url_for('static', filename='img/web-hacking/cody-book.png') }}">
+                        <p>So Cody's done some reading about web security, and he's finally removed those password reminder comments from his code. He's still pretty forgetful though, so he wanted to come up with <i>some way</i> to get into his website even if he had forgotten the usual password</p>
+                        <p>In addition to the usual login form, there is a secret login page that accepts a different password. You'll want to find out the password, then press the login button.</p>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- CHALLENGE (Args: Points, text, hint, training name) -->
+        {% call challenge(training.points, "Log in to Cody's secret website by editing the source code. You'll need to change the attributes we've learnt before", "There is more than one element you'll need to edit on Cody's website. Have a look for a hidden image to find out the password, then enable the button that let's you submit the password. Have another go at page 2 and 3 of this training if you're still stuck", training.training_name) %}
+        {% endcall %}
+        <!-- END CHALLENGE -->
+
+        <!-- PAGE NAV (Args: Current page passed from routes.py, training name passed from routes.py, total number of pages) -->
+        {% call pagination(current_page, training.training_name, 4) %}
+        {% endcall %}
+        <!-- END PAGE NAV -->
+
+    </div>
+</div>
+
+
+<script>
+    function prompt_login() {
+
+
+        swal("Oh no, you're not logged in! Making an account lets you save your progress, AND earn points and hacker ranks.", {
+                icon: "warning",
+                buttons: {
+                    continue: {
+                        text: "Continue anyway",
+                        value: "continue",
+                        className: "grey-bg",
+                    },
+                    register: {
+                        text: "Register",
+                        value: "register",
+                    },
+                    login: {
+                        text: "Login",
+                        value: "login",
+                    },
+                },
+            })
+            .then((value) => {
+                switch (value) {
+                    case "login":
+                        window.location.href = "../../login";
+                        break;
+
+                    case "register":
+                        window.location.href = "../../register";
+                        break;
+
+                    case "continue":
+                        window.open('../editing-source/challenge', '_blank');
+                        break;
+                }
+            });
+    }
+
+</script>
+
+
+
+
+
+{% endblock content %}

cyber/templates/training/editing-source/editing-source-challenge.html

@@ -0,0 +1,35 @@
+<head>
+    <style>
+        body {
+            background-color: aquamarine;
+            text-align: center;
+        }
+
+        h1 {
+            color: white;
+        }
+
+    </style>
+</head>
+
+<body>
+    <h1>My secret club</h1>
+    <h2>If I forget my password, here is my secret login form. Don't even try it if you're not Cody- you won't know how to find the password</h2>
+    <img src="{{ url_for('static', filename='img/web-hacking/cody.png') }}">
+    <!-- There's no password hidden in the comments this time! Have a look at the attributes of the image and button" -->
+    <form method="POST" action="" autocomplete="off">
+        {{ form.hidden_tag() }}
+        <img src="{{ url_for('static', filename='img/web-hacking/password.png') }}" width=1px height=1px>
+        <label for="password">{{ form.password.label }}</label>
+        {{ form.password(class="form-control") }}
+
+        <button disabled type="submit" value="Login">Login</button>
+        {% with messages = get_flashed_messages() %}
+        {% if messages %}
+
+        <p>{{ messages[-1] }}</p>
+
+        {% endif %}
+        {% endwith %}
+    </form>
+</body>

cyber/templates/training/editing-source/editing-source-success.html

@@ -0,0 +1,35 @@
+<head>
+    <style>
+        body {
+            background-color: aquamarine;
+            text-align: center;
+        }
+
+        h1 {
+            color: white;
+        }
+
+    </style>
+</head>
+
+<body>
+    {% if message == "No Login" %}
+        <p>Congrats on completing the training! You could have earned points for this by <a href='{{ url_for("login") }}'>logging in</a> or <a href='{{ url_for("register") }}'>registering an account</a>.</p>
+    {% elif message == "Already Completed" %}
+        <p>You have already completed this challenge before, so you didn't earn any points this time!</p>
+        <h1>Hey totally real member!</h1>
+        <h2>Welcome to the secret club, now gaze upon our finest secrets</h2>
+        <p>We have managed to add to our collection of tiny bugs. Please take a look and enjoy!</p>
+        <img src="{{ url_for('static', filename='img/web-hacking/morebugs.png') }}">
+        <p>P.S. Don't tell anyone the password!</p>
+    {% elif message == "Points" %}
+        <p>Congrats on completing the training! 150 points have been added to your account</p>
+        <h1>Hey totally real member!</h1>
+        <h2>Welcome to the secret club, now gaze upon our finest secrets</h2>
+        <p>We have managed to add to our collection of tiny bugs. Please take a look and enjoy!</p>
+        <img src="{{ url_for('static', filename='img/web-hacking/morebugs.png') }}">
+        <p>P.S. Don't tell anyone the password!</p>
+    {% else %}
+        <p>You sneaky thing! You can't get points by coming to this link without completing the challenge, but nice try.</p>
+    {% endif %}
+</body>