4 files changed, 50 insertions, 24 deletions
diff --git a/src/ssh_node5_net.py b/src/ssh_node5_net.py
index 0b1d37a..0615147 100644
--- a/src/ssh_node5_net.py
+++ b/src/ssh_node5_net.py
@@ -58,14 +58,7 @@ def format_time(input: datetime.datetime) -> str:
 '''
 
 
-@app.route("/")
-def index():
-    latest_loging_attempts = db_handler.get_latest_login_attempts()
-    for login_attempt in latest_loging_attempts[0]:
-        login_attempt['timestamp'] = format_time(login_attempt['timestamp'])
-    top_usernames = db_handler.get_top('username')
-    top_passwords = db_handler.get_top('password')
-
+def get_chart():
     histogram = db_handler.get_histogram_detailed()
     all_dates = sorted(list({d['date'] for d in histogram}))
     by_ip = {}
@@ -77,11 +70,34 @@ def index():
     histogram_chartjs = json.dumps([{
         'label': str(ip),
         'data': data,
-        'backgroundColor': f'hsl({random.randrange(0,360)}, 50%, 50%)',
+        'backgroundColor': f'hsl({random.randrange(0, 360)}, 50%, 50%)',
         'fill': 'start'
     } for index, (ip, data) in enumerate(by_ip.items())])
 
     histogram_labels = [str(a) for a in all_dates]
+    return histogram_chartjs, histogram_labels
+
+
+@app.route('/chart')
+def chart_page():
+    histogram_chartjs, histogram_labels = get_chart()
+    return flask.render_template(
+        'chart_page.html',
+        histogram_data=histogram_chartjs,
+        histogram_labels=histogram_labels
+    )
+
+
+@app.route("/")
+def index():
+    latest_loging_attempts = db_handler.get_latest_login_attempts()
+    for login_attempt in latest_loging_attempts[0]:
+        login_attempt['timestamp'] = format_time(login_attempt['timestamp'])
+
+    top_usernames = db_handler.get_top('username')
+    top_passwords = db_handler.get_top('password')
+
+    histogram_chartjs, histogram_labels = get_chart()
 
     return flask.render_template(
         'index.html',
diff --git a/src/templates/base.html b/src/templates/base.html
new file mode 100644
index 0000000..93bd5e2
--- /dev/null
+++ b/src/templates/base.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>SSH login attempts</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap.min.css">
+    <script src="/chartjs/chart.umd.js" defer></script>
+    <script type="module" src="/histogram.js" defer></script>
+</head>
+<body>
+
+{% block content %}
+{% endblock %}
+
+</body>
+</html>
diff --git a/src/templates/chart_page.html b/src/templates/chart_page.html
new file mode 100644
index 0000000..0fb3028
--- /dev/null
+++ b/src/templates/chart_page.html
@@ -0,0 +1,4 @@
+{% extends 'base.html' %}
+{% block content %}
+{% include 'chart.html' %}
+{% endblock %}
+\ No newline at end of file
diff --git a/src/templates/index.html b/src/templates/index.html
index 8b2d0c0..698ca6b 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -1,17 +1,6 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>SSH login attempts</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap.min.css">
-    <script src="/chartjs/chart.umd.js" defer></script>
-    <script type="module" src="/histogram.js" defer></script>
-</head>
-<body>
-
+{% extends 'base.html' %}
 
+{% block content %}
 <div class="container">
     <h1>SSH bots login attempts</h1>
 
@@ -55,5 +44,4 @@
         as your next password</p>
 </div>
 
-</body>
-</html>
-\ No newline at end of file
+{% endblock %}
+\ No newline at end of file