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>