add expired.html

F-Node-Karlsruhe · Jun 26, 2021 · 06493f0 · 06493f0
1 parent d194498
commit 06493f0
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/app.py b/app.py
@@ -5,7 +5,7 @@
 from dotenv import load_dotenv
 import os
 import iota
-from datetime import timedelta
+from datetime import datetime, timedelta
 from flask_socketio import SocketIO
 from flask import (Flask,
                     render_template,
@@ -99,23 +99,23 @@ def proxy(slug):
 
         session['iota_ghost_user_token:'] = secrets.token_hex(16)       
 
-	
+
     user_token_hash = hashlib.sha256(str(session['iota_ghost_user_token:'] + slug).encode('utf-8')).hexdigest()
 
     if user_token_hash_exists(user_token_hash):
 
         if user_token_hash_valid(user_token_hash):
 
             return ghost.get_post(slug, get_exp_date(user_token_hash))
-
-        exp_date = pop_from_paid_db(user_token_hash)
 
-        return make_response('Access expired at %s' % exp_date)
+        return render_template('expired.html', exp_date = pop_from_paid_db(user_token_hash).strftime('%d.%m.%y %H:%M'))
 
     return ghost.get_post_payment(slug, render_template('pay.html',
                                                         user_token_hash = user_token_hash,
                                                         iota_address = get_iota_address(slug, iota_listener),
-                                                        price = price_per_content))
+                                                        price = price_per_content,
+                                                        exp_date =  (datetime.now() + timedelta(hours = session_lifetime))
+                                                        .strftime('%d.%m.%y %H:%M')))
 
 
 # socket endpoint to receive payment event

diff --git a/templates/expired.html b/templates/expired.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+<title>IOTA Pay-per-Content Gateway</title>
+<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+</head>
+<body style="height: 100%; display: flex; align-items: center; justify-content: center;">
+    <div style="margin: auto; text-align: center;">
+        <img src="{{ url_for('static', filename='logo.png') }}" style="max-width: 200px;"/>
+        <h2>Ghost IOTA Pay</h2>
+        <p>Pay per content gateway for <a href="https://ghost.org/">Ghost Blogs</a></p>
+        <div style="background: lightgray; border-radius: 10px; padding: 30px; text-align: center;">
+        <h3>Access expired</h3>
+        <h5>{{ exp_date }}</h5>
+        <button onClick="window.location.reload();">Purchase again</button>
+        </div>
+        <div style="margin-top: 50px;">
+            <p><a href="https://github.com/F-Node-Karlsruhe/ghost-iota-pay"><img width="16" src="{{ url_for('static', filename='github.png') }}"/></a></p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/templates/pay.html b/templates/pay.html
@@ -1,7 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
-<script type="module" src="//iota-button.org/build/iota-button.esm.js"></script> 
-<script nomodule src="//iota-button.org/build/iota-button.js"></script>
 <script>
     $(document).ready(function () {
         // start up the SocketIO connection to the server
@@ -19,6 +17,13 @@
     });
 </script>
 <style>
+    .custom-box {
+        background: white;
+        border-radius: 5px;
+        width: 100%;
+        display: inline-block;
+        padding: 5px;
+    }
     .loader {
       border: 8px solid #f3f3f3;
       border-radius: 50%;
@@ -41,42 +46,33 @@
       100% { transform: rotate(360deg); }
     }
 </style>
-<div style="background: lightgray; border-radius: 10px; padding: 30px;">
+<div style="background: lightgray; border-radius: 10px; padding: 30px; text-align: center;">
     <img src="{{ url_for('static', filename='logo.png') }}" style="max-width: 100px; margin: auto;"/>
-    <h2 style="text-align: center; margin-bottom: 50px;;">
+    <h2 style="margin-bottom: 50px;;">
         Ghost IOTA Pay
-        <a style="display: block; width: 16px; margin: 16px auto;" href="https://github.com/F-Node-Karlsruhe/ghost-iota-pay"><img width="16" src="{{ url_for('static', filename='github.png') }}"/></a>
+        <a style="display: block; width: 16px; margin: 16px auto;" href="https://github.com/F-Node-Karlsruhe/ghost-iota-pay" target=“_blank”><img width="16" src="{{ url_for('static', filename='github.png') }}"/></a>
     </h2>
-    <p>Please pay <strong>{{ price }} IOTA</strong> to the following address and attach the displayed data.</p>
-    <br>
+    <p>Please pay <strong>{{ price }} IOTA</strong> to the following address and attach the displayed data</p>
+    <div style="margin: 50px;">
+        <h5>Access until</h5>
+        <p class="custom-box" style="width: auto;"><strong>{{ exp_date }}</strong></p>
+    </div>
     <div style="margin: 10px 0;">
     <p>Address:
         <br>
         <strong 
-        style="
-        background: white;
-        border-radius: 5px; width: 100%;
-        display: inline-block;
-        padding: 5px;"
-        >
-        {{ iota_address }}</strong>
+        class="custom-box">{{ iota_address }}</strong>
     </p>
     </div>
     <div style="margin: 10px 0;">
     <p>Data:
         <br>
         <strong
-        style="
-        background: white;
-        border-radius: 5px; width: 100%;
-        display: inline-block;
-        padding: 5px;"
-        >
-        {{ user_token_hash }}</strong>
+        class="custom-box">{{ user_token_hash }}</strong>
     </p>
     </div>
     <br>
-    <div style="text-align: center;">
+    <div>
         <div class="loader"></div>
         <p style="font-size: small;">Waiting for payment ...</p>
     <h5>