add login, signup, settings, delete confirm markup

views/common/topnav.etlua

@@ -1,10 +1,11 @@
 <nav id="topnav">
   <span>
-    <h1 class="site-title">Porom</h1>
-    <a href="<%= url_for("all_topics") %>">All topics</a>
+    <% local topics_url = url_for("all_topics") %>
+    <a class="site-title" href="<%= topics_url %>">Porom</a>
+    <a href="<%= topics_url %>">All topics</a>
   </span>
   <span>
-    <% if me:is_logged_in() then -%>
+    <% if me and me:is_logged_in() then -%>
       Welcome, <a href="<%= url_for("user", {username = me.username}) %>"><%= me.username %></a>
     <% else -%>
       Welcome, guest. Please <a href="<%= url_for("user_signup") %>">sign up</a> or <a href="<%= url_for("user_login") %>">log in</a>

views/user/delete_confirm.etlua

@@ -1,12 +1,15 @@
-<h1>Are you sure you want to delete your account, <%= me.username %>?</h1>
-<p>This cannot be undone. This will not delete your posts, only anonymize them.</p>
-<p>If you are sure, please type your password below.</p>
+<% render("views.common.topnav") -%>
+<div class="darkbg settings-container">
+  <h1>Are you sure you want to delete your account, <%= me.username %>?</h1>
+  <p>This cannot be undone. This will not delete your posts, only anonymize them.</p>
+  <p>If you are sure, please type your password below.</p>
 
-<% if err then %>
-  <h2><%= err %></h2>
-<% end %>
+  <% if err then %>
+    <h2><%= err %></h2>
+  <% end %>
 
-<form method="post" action="<%= url_for("user_delete", {username = me.username}) %>">
-  <input type="password" name="password" id="password" autocomplete="current-password" placeholder="Password" required><br>
-  <input class="critical" type="submit" value="Delete my account (NO UNDO)">
-</form>
+  <form method="post" action="<%= url_for("user_delete", {username = me.username}) %>">
+    <input type="password" name="password" id="password" autocomplete="current-password" placeholder="Password" required><br>
+    <input class="critical" type="submit" value="Delete my account (NO UNDO)">
+  </form>
+</div>

views/user/login.etlua

@@ -1,12 +1,14 @@
-<h1>Log In</h1>
-
-<% if err then %>
-<h2><%= err %></h2>
-<% end %>
-<form method="post" action="<%= url_for('user_login') %>" enctype="multipart/form-data">
-  <label for="username">Username</label><br>
-  <input type="text" id="username" name="username" required autocomplete="username"><br>
-  <label for="password">Password</label><br>
-  <input type="password" id="password" name="password" required autocomplete="current-password"><br>
-  <input type="submit" value="Log in">
-</form>
+<% render("views.common.topnav") -%>
+<div class="darkbg login-container">
+  <h1>Log In</h1>
+  <% if err then %>
+    <h2><%= err %></h2>
+  <% end %>
+  <form method="post" action="<%= url_for('user_login') %>" enctype="multipart/form-data">
+    <label for="username">Username</label><br>
+    <input type="text" id="username" name="username" required autocomplete="username"><br>
+    <label for="password">Password</label><br>
+    <input type="password" id="password" name="password" required autocomplete="current-password"><br>
+    <input type="submit" value="Log in">
+  </form>
+</div>

views/user/settings.etlua

@@ -1,20 +1,25 @@
-<h1>User settings</h1>
-<% if flash_msg then %>
-  <h2><%= flash_msg %></h2>
-<% end %>
-<form method="post" action="<%= url_for("user_set_avatar", {username = me.username}) %>" enctype="multipart/form-data">
-  <img src="<%= avatar_url(me) %>"><br>
-  <input id="file" type="file" name="avatar" accept="image/*">
-  <input type="submit" value="Update avatar">
-<% if not me:is_default_avatar() then %>
-  <input type="submit" value="Clear avatar" formaction="<%= url_for("user_clear_avatar", {username = me.username}) %>">
-<% end %>
-<br>
-</form>
-<form method="post" action="">
-  <label for="status">Status</label>
-  <input type="text" id="status" name="status" value="<%= me.status %>" maxlength="30"><br>
-  <input type="submit" value="Save status">
-</form>
-<br>
-<a class="linkbutton critical" href="<%= url_for("user_delete_confirm", {username = me.username}) %>">Delete account</a>
+<% render("views.common.topnav") -%>
+<div class="darkbg settings-container">
+  <h1>User settings</h1>
+  <% if flash_msg then %>
+    <h2><%= flash_msg %></h2>
+  <% end %>
+  <form class="avatar-form" method="post" action="<%= url_for("user_set_avatar", {username = me.username}) %>" enctype="multipart/form-data">
+    <img src="<%= avatar_url(me) %>">
+    <input id="file" type="file" name="avatar" accept="image/*" required>
+    <div>
+    <input type="submit" value="Update avatar">
+  <% if not me:is_default_avatar() then %>
+    <input type="submit" value="Clear avatar" formaction="<%= url_for("user_clear_avatar", {username = me.username}) %>">
+  <% end %>
+  </div>
+  </form>
+  <form method="post" action="">
+    <label for="status">Status</label>
+    <input type="text" id="status" name="status" value="<%= me.status %>" maxlength="30">
+    <input type="submit" value="Save status">
+  </form>
+  <div>
+  <a class="linkbutton critical" href="<%= url_for("user_delete_confirm", {username = me.username}) %>">Delete account</a>
+  </div>
+</div>

views/user/signup.etlua

@@ -1,15 +1,17 @@
-<h1>Sign up</h1>
-
-<% if err then %>
-<h2><%= err %></h2>
-<% end %>
-<form method="post" action="<%= url_for('user_signup') %>" enctype="multipart/form-data">
-  <label for="username">Username</label><br>
-  <input type="text" id="username" name="username" pattern="[\w\-]{3,20}" title="3-20 characters. Only upper and lowercase letters, hyphens, and underscores" required autocomplete="username"><br>
-  <label for="password">Password</label><br>
-  <input type="password" id="password" name="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
-  <label for="password2">Confirm Password</label><br>
-  <input type="password" id="password2" name="password2" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
-  <input type="submit" value="Sign up">
-</form>
-<p>After you sign up, a moderator will need to confirm your account before you will be allowed to post.</p>
+<% render("views.common.topnav") -%>
+<div class="darkbg login-container">
+  <h1>Sign up</h1>
+  <% if err then %>
+    <h2><%= err %></h2>
+  <% end %>
+  <form method="post" action="<%= url_for('user_signup') %>" enctype="multipart/form-data">
+    <label for="username">Username</label><br>
+    <input type="text" id="username" name="username" pattern="[\w\-]{3,20}" title="3-20 characters. Only upper and lowercase letters, hyphens, and underscores" required autocomplete="username"><br>
+    <label for="password">Password</label><br>
+    <input type="password" id="password" name="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <label for="password2">Confirm Password</label><br>
+    <input type="password" id="password2" name="password2" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <input type="submit" value="Sign up">
+  </form>
+  <p>After you sign up, a moderator will need to confirm your account before you will be allowed to post.</p>
+</div>