Merge pull request #416 from scidsg/407-fix-templates

Update templates to use url_for()
scidsg · Jul 17, 2024 · fdad178 · fdad178
2 parents ed20c8f + be5648f
commit fdad178
Show file tree

Hide file tree

Showing 13 changed files with 307 additions and 278 deletions.
diff --git a/hushline/static/js/directory.js b/hushline/static/js/directory.js
@@ -102,7 +102,7 @@ document.addEventListener('DOMContentLoaded', function () {
  <div class="badgeContainer">${badgeContainer}</div>
  ${bioHighlighted ? `<p class="bio">${bioHighlighted}</p>` : ''}
  <div class="user-actions">
- <a href="/submit_message/${user.primary_username}">Send a Message</a>
+ <a href="${pathPrefix}/submit_message/${user.primary_username}">Send a Message</a>
  ${isSessionUser ? `<a href="#" class="report-link" data-username="${user.primary_username}" data-display-name="${user.display_name || user.primary_username}" data-bio="${user.bio ?? "No bio"}">Report Account</a>` : ``}
  </div>
  `;

diff --git a/hushline/templates/base.html b/hushline/templates/base.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <meta name="theme-color" content="#7D25C1">
@@ -14,24 +15,30 @@
  <meta name="twitter:description" content="A lightweight, secure, and anonymous tip line platform.">
  <meta name="twitter:image" content="https://hushline.app/design-system/images/social/social.png">
  <title>{% block title %}{% endblock %} - Hushline</title>
- <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/favicon/apple-touch-icon.png') }}">
- <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-16x16.png') }}" sizes="16x16">
- <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-32x32.png') }}" sizes="32x32">
- <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-192x192.png') }}" sizes="192x192">
- <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-512x512.png') }}" sizes="512x512">
+ <link rel="apple-touch-icon" sizes="180x180"
+ href="{{ url_for('static', filename='img/favicon/apple-touch-icon.png') }}">
+ <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-16x16.png') }}"
+ sizes="16x16">
+ <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/favicon-32x32.png') }}"
+ sizes="32x32">
+ <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-192x192.png') }}"
+ sizes="192x192">
+ <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon/android-chrome-512x512.png') }}"
+ sizes="512x512">
  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon/favicon.ico') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 </head>
+
 <body>
 
  {% with messages = get_flashed_messages() %}
-  {% if messages %}
-  <div class="flash-messages">
-  {% for message in messages %}
-  <div class="flash-message">{{ message }}</div>
-  {% endfor %}
-  </div>
-  {% endif %}
+ {% if messages %}
+ <div class="flash-messages">
+ {% for message in messages %}
+ <div class="flash-message">{{ message }}</div>
+ {% endfor %}
+ </div>
+ {% endif %}
  {% endwith %}
 
  <header>
@@ -42,21 +49,23 @@ <h1>🤫 Hush Line</h1>
  <a class="mobileNav btnIcon" aria-label="Navigation menu">Menu</a>
  <ul>
  <li><a href="{{ url_for('directory') }}">Directory</a></li>
- {% if 'user_id' in session and (('2fa_required' not in session or not session['2fa_required']) or ('2fa_verified' in session and session['2fa_verified'])) %}
- <li><a href="{{ url_for('inbox', username=session.username) }}">Inbox</a></li>
- <li><a href="{{ url_for('submit_message', username=session.username) }}">Submit Message</a></li>
- <li class="dropdown">
- <a href="#" class="dropbtn">@{{ session['username'] }} <img class="dropdown-icon" src="{{ url_for('static', filename='img/app/dropdown.png') }}" alt="Dropdown"></a>
- <div class="dropdown-content">
- <ul>
- <li><a href="{{ url_for('settings.index') }}">Settings</a></li>
- <li><a href="{{ url_for('logout') }}">Logout</a></li>
- </ul>
- </div>
- </li>
+ {% if 'user_id' in session and (('2fa_required' not in session or not session['2fa_required']) or
+ ('2fa_verified' in session and session['2fa_verified'])) %}
+ <li><a href="{{ url_for('inbox', username=session.username) }}">Inbox</a></li>
+ <li><a href="{{ url_for('submit_message', username=session.username) }}">Submit Message</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropbtn">@{{ session['username'] }} <img class="dropdown-icon"
+ src="{{ url_for('static', filename='img/app/dropdown.png') }}" alt="Dropdown"></a>
+ <div class="dropdown-content">
+ <ul>
+ <li><a href="{{ url_for('settings.index') }}">Settings</a></li>
+ <li><a href="{{ url_for('logout') }}">Logout</a></li>
+ </ul>
+ </div>
+ </li>
  {% else %}
-  <li><a href="{{ url_for('login') }}">Login</a></li>
-  <li><a href="{{ url_for('register') }}">Register</a></li>
+ <li><a href="{{ url_for('login') }}">Login</a></li>
+ <li><a href="{{ url_for('register') }}">Register</a></li>
  {% endif %}
  </ul>
  <a class="btn" href="https://opencollective.com/scidsg/"><span class="emoji">❤️</span> Donate</a>
@@ -76,13 +85,16 @@ <h1>🤫 Hush Line</h1>
 
  <footer>
  <p>
- <a href="https://github.com/scidsg/hushline/blob/main/docs/PRIVACY.md" target="_blank" rel="noopener noreferrer">Privacy Policy</a> |
- <a href="https://github.com/scidsg/hushline/blob/main/docs/TERMS.md" target="_blank" rel="noopener noreferrer">Terms of Service</a>
+ <a href="https://github.com/scidsg/hushline/blob/main/docs/PRIVACY.md" target="_blank"
+ rel="noopener noreferrer">Privacy Policy</a> |
+ <a href="https://github.com/scidsg/hushline/blob/main/docs/TERMS.md" target="_blank"
+ rel="noopener noreferrer">Terms of Service</a>
  </p>
  </footer>
  {% block scripts %}
  {% endblock %}
  <script src="{{ url_for('static', filename='js/nav.js') }}"></script>
 
 </body>
-</html>
+
+</html>
diff --git a/hushline/templates/confirm_disable_2fa.html b/hushline/templates/confirm_disable_2fa.html
@@ -2,10 +2,10 @@
 {% block title %}Settings{% endblock %}
 
 {% block content %}
- <h2>Disable Two-Factor Authentication</h2>
- <p>Are you sure you want to disable 2FA?</p>
- <form method="POST" action="{{ url_for('settings.disable_2fa') }}">
-  <button type="submit">Yes, Disable 2FA</button>
- </form>
- <a href="{{ url_for('settings.index') }}">Cancel</a>
-{% endblock %}
+<h2>Disable Two-Factor Authentication</h2>
+<p>Are you sure you want to disable 2FA?</p>
+<form method="POST" action="{{ url_for('settings.disable_2fa') }}">
+ <button type="submit">Yes, Disable 2FA</button>
+</form>
+<a href="{{ url_for('settings.index') }}">Cancel</a>
+{% endblock %}
diff --git a/hushline/templates/directory.html b/hushline/templates/directory.html
@@ -3,15 +3,15 @@
 {% block content %}
 <h2>User Directory</h2>
 {% if not logged_in %}
- <p class="helper">👋 Welcome to Hush Line! Find users who've opted into being listed below.</p>
+<p class="helper">👋 Welcome to Hush Line! Find users who've opted into being listed below.</p>
 {% endif %}
 <div class="directory-tabs">
  <ul class="tab-list">
  <li>
- <button class="tab active" data-tab="verified" type="button">Verified</button>
+  <button class="tab active" data-tab="verified" type="button">Verified</button>
  </li>
  <li>
- <button class="tab" data-tab="all"type="button">All</button>
+  <button class="tab" data-tab="all" type="button">All</button>
  </li>
  </ul>
 </div>
@@ -21,73 +21,80 @@ <h2>User Directory</h2>
 </div>
 <div id="verified" class="tab-content active">
  {% if not logged_in %}
- <p class="meta dirMeta">⭐️ Verified accounts are offered to journalists, businesses, and other public figures and have manually verified their identities with a member of our staff. <a href="https://github.com/scidsg/hushline/blob/main/docs/3-managed-service.md#verified-accounts" target="_blank" rel="noopener noreferrer">Learn more about our verification process</a>.</p>
+ <p class="meta dirMeta">⭐️ Verified accounts are offered to journalists, businesses, and other public figures and
+ have manually verified their identities with a member of our staff. <a
+ href="https://github.com/scidsg/hushline/blob/main/docs/3-managed-service.md#verified-accounts"
+ target="_blank" rel="noopener noreferrer">Learn more about our verification process</a>.</p>
  {% endif %}
  <div class="user-list">
  {% for user in users %}
- {% if user.is_verified and user.show_in_directory %}
- <div class="user">
- <h3>{{ user.display_name or user.primary_username }}</h3>
- {% if user.primary_username %}
- <p class="meta">@{{ user.primary_username }}</p>
- {% endif %}
- {% if user.is_admin %}
- <div class="badgeContainer">
- <p class="badge">⚙️ Admin</p>
- </div>
- {% endif %}
- {% if user.bio %}
- <p class="bio">{{ user.bio }}</p>
- {% endif %}
- <div class="user-actions">
- <a href="/submit_message/{{ user.primary_username }}">Send a Message</a>
- {% if logged_in %}
- <a href="#" class="report-link" data-username="{{ user.primary_username }}" data-display-name="{{ user.display_name or user.primary_username }}" data-bio="{{ user.bio }}">Report Account</a>
- {% endif %}
- </div>
- </div>
+ {% if user.is_verified and user.show_in_directory %}
+ <div class="user">
+ <h3>{{ user.display_name or user.primary_username }}</h3>
+ {% if user.primary_username %}
+ <p class="meta">@{{ user.primary_username }}</p>
  {% endif %}
+ {% if user.is_admin %}
+ <div class="badgeContainer">
+ <p class="badge">⚙️ Admin</p>
+ </div>
+ {% endif %}
+ {% if user.bio %}
+ <p class="bio">{{ user.bio }}</p>
+ {% endif %}
+ <div class="user-actions">
+ <a href="{{ url_for('submit_message', username=user.primary_username) }}">Send a Message</a>
+ {% if logged_in %}
+ <a href="#" class="report-link" data-username="{{ user.primary_username }}"
+ data-display-name="{{ user.display_name or user.primary_username }}"
+ data-bio="{{ user.bio }}">Report Account</a>
+ {% endif %}
+ </div>
+ </div>
+ {% endif %}
  {% else %}
-  <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
+ <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
  {% endfor %}
  </div>
 </div>
 <div id="all" class="tab-content">
  <div class="user-list">
  {% for user in users %}
- {% if user.show_in_directory %}
- <div class="user">
- <h3>{{ user.display_name or user.primary_username }}</h3>
- {% if user.primary_username %}
- <p class="meta">@{{ user.primary_username }}</p>
- {% endif %}
- {% if user.is_verified or user.is_admin %}
- <div class="badgeContainer">
- {% if user.is_verified %}
- <p class="badge">⭐️ Verified</p>
- {% endif %}
- {% if user.is_admin %}
- <p class="badge">⚙️ Admin</p>
- {% endif %}
- </div>
- {% endif %}
- {% if user.bio %}
- <p class="bio">{{ user.bio }}</p>
- {% endif %}
- <div class="user-actions">
- <a href="/submit_message/{{ user.primary_username }}">Send a Message</a>
- {% if logged_in %}
- <a href="#" class="report-link" data-username="{{ user.primary_username }}" data-display-name="{{ user.display_name or user.primary_username }}" data-bio="{{ user.bio }}">Report Account</a>
- {% endif %}
- </div>
- </div>
+ {% if user.show_in_directory %}
+ <div class="user">
+ <h3>{{ user.display_name or user.primary_username }}</h3>
+ {% if user.primary_username %}
+ <p class="meta">@{{ user.primary_username }}</p>
+ {% endif %}
+ {% if user.is_verified or user.is_admin %}
+ <div class="badgeContainer">
+ {% if user.is_verified %}
+ <p class="badge">⭐️ Verified</p>
+ {% endif %}
+ {% if user.is_admin %}
+ <p class="badge">⚙️ Admin</p>
+ {% endif %}
+ </div>
  {% endif %}
+ {% if user.bio %}
+ <p class="bio">{{ user.bio }}</p>
+ {% endif %}
+ <div class="user-actions">
+ <a href="{{ url_for('submit_message', username=user.primary_username) }}">Send a Message</a>
+ {% if logged_in %}
+ <a href="#" class="report-link" data-username="{{ user.primary_username }}"
+ data-display-name="{{ user.display_name or user.primary_username }}"
+ data-bio="{{ user.bio }}">Report Account</a>
+ {% endif %}
+ </div>
+ </div>
+ {% endif %}
  {% else %}
-  <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
+ <p class="empty-message"><span class="emoji-message">🙈</span><br>Nothing to see here...</p>
  {% endfor %}
  </div>
 </div>
 {% endblock %}
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/directory.js') }}"></script>
-{% endblock %}
+{% endblock %}
diff --git a/hushline/templates/inbox.html b/hushline/templates/inbox.html
@@ -2,35 +2,36 @@
 {% block title %}Inbox{% endblock %}
 
 {% block content %}
- {% if messages %}
- <h2>Inbox for {{ user.display_name or user.primary_username }}</h2>
- {% for message in messages %}
- <div class="message{% if 'BEGIN PGP MESSAGE' in message.content %} encrypted{% endif %}" data-encrypted-content="{{ message.content }}">
- {% if not is_secondary %}
- {% if message.secondary_user_id %}
- {% set sender_info = secondary_usernames[message.secondary_user_id] %}
- <p class="message-label">📥 {{ sender_info.display_name or sender_info.username }}</p>
- {% elif secondary_usernames|length > 0 %}
- <p class="message-label">📥 {{ user.display_name or user.primary_username }}</p>
- {% endif %}
- {% endif %}
- <p class="decrypted-content">{{ message.content }}</p>
- <div class="mailvelope-decryption-container" id="decryption-container-{{ message.id }}"></div>
- <form action="{{ url_for('delete_message', message_id=message.id) }}" method="POST">
- <button type="submit" class="btn btn-danger" id="deleteMessageButton">Delete</button>
- </form>
- </div>
- {% endfor %}
- {% else %}
- <div class="emptyState">
- <img class="empty" src="{{ url_for('static', filename='img/app/empty.png') }}" alt="Empty Inbox">
- <h1>Nothing to see here...</h1>
- <p>No messages yet.</p>
- </div>
+{% if messages %}
+<h2>Inbox for {{ user.display_name or user.primary_username }}</h2>
+{% for message in messages %}
+<div class="message{% if 'BEGIN PGP MESSAGE' in message.content %} encrypted{% endif %}"
+ data-encrypted-content="{{ message.content }}">
+ {% if not is_secondary %}
+ {% if message.secondary_user_id %}
+ {% set sender_info = secondary_usernames[message.secondary_user_id] %}
+ <p class="message-label">📥 {{ sender_info.display_name or sender_info.username }}</p>
+ {% elif secondary_usernames|length > 0 %}
+ <p class="message-label">📥 {{ user.display_name or user.primary_username }}</p>
  {% endif %}
+ {% endif %}
+ <p class="decrypted-content">{{ message.content }}</p>
+ <div class="mailvelope-decryption-container" id="decryption-container-{{ message.id }}"></div>
+ <form action="{{ url_for('delete_message', message_id=message.id) }}" method="POST">
+ <button type="submit" class="btn btn-danger" id="deleteMessageButton">Delete</button>
+ </form>
+</div>
+{% endfor %}
+{% else %}
+<div class="emptyState">
+ <img class="empty" src="{{ url_for('static', filename='img/app/empty.png') }}" alt="Empty Inbox">
+ <h1>Nothing to see here...</h1>
+ <p>No messages yet.</p>
+</div>
+{% endif %}
 {% endblock %}
 
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/mailvelope.js') }}"></script>
 <script src="{{ url_for('static', filename='js/inbox.js') }}"></script>
-{% endblock %}
+{% endblock %}
diff --git a/hushline/templates/login.html b/hushline/templates/login.html
@@ -2,18 +2,18 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
- <h2>Login</h2>
- <form method="POST" action="/login">
-  {{ form.hidden_tag() }}
-  <div>
-  {{ form.username.label(for="username") }}
-  {{ form.username(id="username", required=True) }}
-  </div>
-  <div>
-  {{ form.password.label(for="password") }}
-  {{ form.password(id="password", required=True) }}
-  </div>
-  <button type="submit">Login</button>
- </form>
- <p>Don't have an account? <a href="/register">Register here</a></p>
-{% endblock %}
+<h2>Login</h2>
+<form method="POST" action="{{ url_for('login') }}">
+ {{ form.hidden_tag() }}
+ <div>
+ {{ form.username.label(for="username") }}
+ {{ form.username(id="username", required=True) }}
+ </div>
+ <div>
+ {{ form.password.label(for="password") }}
+ {{ form.password(id="password", required=True) }}
+ </div>
+ <button type="submit">Login</button>
+</form>
+<p>Don't have an account? <a href="{{ url_for('register') }}">Register here</a></p>
+{% endblock %}
diff --git a/hushline/templates/rate_limit_exceeded.html b/hushline/templates/rate_limit_exceeded.html
@@ -5,7 +5,7 @@
  <img class="empty" src="{{ url_for('static', filename='img/app/rate-limit.png') }}" alt="Rate Limit Exceeded">
  <h2>Rate Limit Exceeded</h2>
  <p>Light pierces shadows,<br>
- Brave voice sparks hope's resurgence,<br>
- New dawn from truth's stand.</p>
+  Brave voice sparks hope's resurgence,<br>
+  New dawn from truth's stand.</p>
 </div>
-{% endblock %}
+{% endblock %}