Add feature to use Real name on journals

templates/admin_users.html

@@ -7,7 +7,7 @@
     <div class="account-row account-head" role="row"><span>HANDLE / EMAIL</span><span>REGISTERED</span><span>MFA</span><span>STATUS</span></div>
     {% for user in users %}
     <div class="account-row" role="row">
-      <strong>{{ user.username }}{% if user.role == 'admin' %} <small>ADMIN</small>{% endif %}<small class="email">{{ user.email or 'NO EMAIL' }}{% if user.email %} / {{ 'VERIFIED' if user.email_verified else 'UNVERIFIED' }}{% endif %}</small></strong>
+      <strong>{{ user.real_name or user.username }}{% if user.role == 'admin' %} <small>ADMIN</small>{% endif %}<small class="email">@{{ user.username }} / {{ user.email or 'NO EMAIL' }}{% if user.email %} / {{ 'VERIFIED' if user.email_verified else 'UNVERIFIED' }}{% endif %}</small></strong>
       <span>{{ user.created_at[:10] }}</span>
       <span>{{ 'ENABLED' if user.mfa_enabled else 'PENDING' }}</span>
       <span>{% if user.is_approved and user.role == 'member' %}<form method="post" action="{{ url_for('admin_password_reset', user_id=user.id) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="button compact" type="submit">Reset password</button></form>{% elif user.is_approved %}APPROVED{% else %}<form method="post" action="{{ url_for('approve_user', user_id=user.id) }}"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="button compact" type="submit">Approve</button></form>{% endif %}</span>

templates/auth.html

@@ -6,6 +6,7 @@
   <form class="auth-form" method="post">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
     <label>Handle<input name="username" autocomplete="username" required pattern="[a-z0-9_-]{3,32}" placeholder="your-handle"></label>
+    {% if mode == 'register' %}<label>Real name<input name="real_name" autocomplete="name" required minlength="2" maxlength="100" placeholder="Your name"></label>{% endif %}
     {% if mode == 'register' %}<label>Email<input name="email" type="email" autocomplete="email" required placeholder="you@example.com"></label>{% endif %}
     <label>Password<input name="password" type="password" autocomplete="{{ 'new-password' if mode == 'register' else 'current-password' }}" required {% if mode == 'register' %}minlength="10" placeholder="10+ characters"{% else %}placeholder="Your password"{% endif %}></label>
     <button class="button" type="submit">{% if mode == 'register' %}Create account{% elif mode == 'resend' %}Resend verification{% else %}Sign in{% endif %} <span aria-hidden="true">→</span></button>

templates/base.html

@@ -21,9 +21,10 @@
       {% if current_user %}
         <a href="{{ url_for('write') }}">Write</a>
         {% if current_user.role == 'admin' %}<a href="{{ url_for('admin_users') }}">Accounts</a>{% endif %}
+        <a href="{{ url_for('change_profile') }}">Profile</a>
         <a href="{{ url_for('change_email') }}">Email</a>
         <a href="{{ url_for('change_password') }}">Password</a>
-        <span class="user-chip">{{ current_user.username }}</span>
+        <span class="user-chip">{{ current_user.real_name or current_user.username }}</span>
         <form action="{{ url_for('logout') }}" method="post"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="text-button" type="submit">Log out</button></form>
       {% else %}
         <a href="{{ url_for('login') }}">Sign in</a>

templates/index.html

@@ -16,7 +16,7 @@
       <div class="post-meta"><span>{{ post.category }}</span><time datetime="{{ post.created_at }}">{{ post.created_at[:10] }}</time></div>
       <h2><a href="{{ url_for('post', slug=post.slug) }}">{{ post.title }}</a></h2>
       <p>{{ post.excerpt }}</p>
-      <div class="post-foot"><span>BY {{ post.username }}</span><a href="{{ url_for('post', slug=post.slug) }}" aria-label="Read {{ post.title }}">→</a></div>
+      <div class="post-foot"><span>BY {{ post.real_name or post.username }}</span><a href="{{ url_for('post', slug=post.slug) }}" aria-label="Read {{ post.title }}">→</a></div>
     </article>
     {% endfor %}
   </div>

templates/post.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 {% block title %}{{ post.title }} | Eternity Project{% endblock %}
 {% block content %}
-<article class="article"><div class="post-meta"><span>{{ post.category }}</span><time datetime="{{ post.created_at }}">{{ post.created_at[:10] }}</time></div><h1>{{ post.title }}</h1><p class="article-lead">{{ post.excerpt }}</p><div class="byline">WRITTEN BY {{ post.username }}{% if post.updated_at != post.created_at %} / UPDATED {{ post.updated_at[:10] }}{% endif %}</div>{% if post.image_filename %}<button class="article-image-button" type="button" data-image="{{ url_for('uploaded_image', filename=post.image_filename) }}" data-alt="Image for {{ post.title }}"><img class="article-image" src="{{ url_for('uploaded_image', filename=post.image_filename) }}" alt="Image for {{ post.title }}"></button>{% endif %}<div class="article-body">{% for kind, content in blocks %}{% if kind == 'text' %}<div class="article-text">{{ content }}</div>{% else %}<figure class="inline-image"><button class="article-image-button" type="button" data-image="{{ url_for('uploaded_image', filename=content.filename) }}" data-alt="{{ content.caption or 'Article step image' }}"><img class="article-image" src="{{ url_for('uploaded_image', filename=content.filename) }}" alt="{{ content.caption or 'Article step image' }}"></button>{% if content.caption %}<figcaption>{{ content.caption }}</figcaption>{% endif %}</figure>{% endif %}{% endfor %}</div>{% if current_user and current_user.id == post.author_id %}<a class="button compact" href="{{ url_for('edit_post', slug=post.slug) }}">Edit post</a>{% endif %}</article>
+<article class="article"><div class="post-meta"><span>{{ post.category }}</span><time datetime="{{ post.created_at }}">{{ post.created_at[:10] }}</time></div><h1>{{ post.title }}</h1><p class="article-lead">{{ post.excerpt }}</p><div class="byline">WRITTEN BY {{ post.real_name or post.username }}{% if post.updated_at != post.created_at %} / UPDATED {{ post.updated_at[:10] }}{% endif %}</div>{% if post.image_filename %}<button class="article-image-button" type="button" data-image="{{ url_for('uploaded_image', filename=post.image_filename) }}" data-alt="Image for {{ post.title }}"><img class="article-image" src="{{ url_for('uploaded_image', filename=post.image_filename) }}" alt="Image for {{ post.title }}"></button>{% endif %}<div class="article-body">{% for kind, content in blocks %}{% if kind == 'text' %}<div class="article-text">{{ content }}</div>{% else %}<figure class="inline-image"><button class="article-image-button" type="button" data-image="{{ url_for('uploaded_image', filename=content.filename) }}" data-alt="{{ content.caption or 'Article step image' }}"><img class="article-image" src="{{ url_for('uploaded_image', filename=content.filename) }}" alt="{{ content.caption or 'Article step image' }}"></button>{% if content.caption %}<figcaption>{{ content.caption }}</figcaption>{% endif %}</figure>{% endif %}{% endfor %}</div>{% if current_user and current_user.id == post.author_id %}<a class="button compact" href="{{ url_for('edit_post', slug=post.slug) }}">Edit post</a>{% endif %}</article>
 <dialog class="image-dialog"><button class="dialog-close" type="button" aria-label="Close full-size image">Close</button><img alt=""></dialog>
 <script>const imageDialog=document.querySelector('.image-dialog'),dialogImage=imageDialog.querySelector('img');document.querySelectorAll('.article-image-button').forEach(button=>button.addEventListener('click',()=>{dialogImage.src=button.dataset.image;dialogImage.alt=button.dataset.alt;imageDialog.showModal()}));imageDialog.querySelector('.dialog-close').addEventListener('click',()=>imageDialog.close());imageDialog.addEventListener('click',event=>{if(event.target===imageDialog)imageDialog.close()});</script>
 {% endblock %}

templates/profile_form.html

@@ -0,0 +1,12 @@
+{% extends 'base.html' %}
+{% block title %}Profile | Eternity Project{% endblock %}
+{% block content %}
+<section class="auth-layout">
+  <div class="auth-copy"><span class="signal-label">PROFILE</span><h1>Set your<br>byline.</h1><p>Your real name appears as the published-by name on your posts.</p></div>
+  <form class="auth-form" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    <label>Real name<input name="real_name" value="{{ real_name }}" autocomplete="name" required minlength="2" maxlength="100" placeholder="Your name"></label>
+    <button class="button" type="submit">Save profile <span aria-hidden="true">→</span></button>
+  </form>
+</section>
+{% endblock %}