From ea4520e7d4c96fe6bdbb82d0ffde9903d4215bae Mon Sep 17 00:00:00 2001
From: Craig Oates <craig@craigoates.net>
Date: Sat, 8 Oct 2022 12:04:32 +0100
Subject: [PATCH] update /user/edit.html template (CSS and 'delete account'
 form).

---
 templates/user/edit.html | 71 ++++++++++++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 18 deletions(-)

diff --git a/templates/user/edit.html b/templates/user/edit.html
index 5a365c9..eaa5572 100644
--- a/templates/user/edit.html
+++ b/templates/user/edit.html
@@ -1,24 +1,59 @@
 {% extends "layouts/default.html" %}
 {% block title%}Edit your accout settings.{%endblock%}
 {% block content %}
-<h2>Edit Account</h2>
+<div class="be-main">
+    <h2>Edit Account</h2>
+
+
+    <form class="be-gui-form"
+	  action="/user/edit"
+	  method="post">
+	<input type="hidden"
+	       name="AUTHENTICITY-TOKEN"
+	       value="{{token}}">
+	<label>Display Name</label>
+	<input type="text"
+	       name="DISPLAY-NAME"
+	       value="{{user.display-name}}">
+	<label>New Password</label>
+	<input type="password"
+	       name="NEW-PASSWORD">
+	<label>New Password Check</label>
+	<input type="password"
+	       name="PASSWORD-CHECK">
+	<button class="be-gui-button"
+		title="Click to update your account details"
+		type="submit">
+	    <img alt="Update Account Details"
+		 src="/images/icons/save.png">
+	    Save Changes
+	</button>
+    </form>
+
+    <h2>Delete Account</h2>
+    <p class="be-gui-form-hint">
+	Warning: This cannot be undone. Enter '{{user.username}}' in
+	the text box before clicking 'Delete Account' to confirm deletion.
+    </p>
+    <form class="be-gui-form"
+	  action="/user/delete"
+	  method="post">
+	<input required
+	       type="hidden"
+	       name="AUTHENTICITY-TOKEN"
+	       value="{{token}}">
+	<input required
+	       type="text"
+	       name="DELETE-ACCOUNT-CHECK"
+	       placeholder="Enter your '{{user.username}}' here to confirm deletion...">
+	<button class="be-gui-button"
+		title="Click to update your account details"
+		type="submit">
+	    <img alt="Update Account Details"
+		 src="/images/icons/delete-account.png">
+	    Delete Account
+	</button>
+    </form>
 
-<div>
-  <p>Note: Username cannot be changed.</p>
-  
-  <form action="/user/edit" method="post">
-    <input type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <label>Display Name</label>
-    <input type="text" name="DISPLAY-NAME" value="{{user.display-name}}">
-    <label>New Password</label>
-    <input type="password" name="NEW-PASSWORD">
-    <label>New Password Check</label>
-    <input type="password" name="PASSWORD-CHECK">
-    <input type="submit" value="Update Account">
-  </form>
-  <form action="/user/delete" method="post">
-    <input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-    <input type="submit" value="Delete Account">
-  </form>
 </div>
 {% endblock %}