update /user/index.html (HTML and CSS).

templates/user/index.html

@@ -1,41 +1,118 @@
 {% extends "layouts/default.html" %}
 {% block title %}Users{% endblock %}
 {% block content %}
-<h1>Users</h1>
-<form action="/user/admin/create" method="post">
-    <fieldset>
-	<legend>Create New Account</legend>
-	<input type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
+<main class="be-main">
+
+    <h1>Account Management</h1>
+
+    <div class="be-quicklist">
+	<a class="be-gui-link"
+	   title="Click to view your dashboard"
+	   href="/dashboard">
+	    <img alt="View Dashboard"
+		 src="/images/icons/dashboard.png">
+	    View Dashboard
+	</a>
+	<a class="be-gui-link"
+	   title="Click to change your account settings"
+	   href="/user/edit">
+	    <img alt="View profile"
+		 src="/images/icons/profile.png">
+	    My Account
+	</a>
+    </div>
+
+    <h2>Create New Account</h2>
+    <p class="be-gui-form-hint">
+	New users can only create 'pages' and 'archive entries'. They
+	cannot edit or delete them.
+    </p>
+    <form class="be-gui-form"
+	  action="/user/admin/create"
+	  method="post">
+	<input type="hidden"
+	       name="AUTHENTICITY-TOKEN"
+	       value="{{token}}">
 	<label>Username</label>
-	<input required type="text" name="USERNAME">
+	<input required
+	       type="text"
+	       name="USERNAME">
 	<label>Display Name</label>
-	<input required type="text" name="DISPLAY-NAME">
+	<input required
+	       type="text"
+	       name="DISPLAY-NAME">
 	<label>Password</label>
-	<input required type="password" name="PASSWORD">
+	<input required
+	       type="password"
+	       name="PASSWORD">
 	<label>Password Check</label>
-	<input required type="password" name="PASSWORD-CHECK">
-	<input type="submit" value="Create Account">
-    </fieldset>
-</form>
-
-{% for account in users %}
-{% if account.username != user.username %}
-<div>
-    <p>{{account.username}}</p>
-    <p>{{account.display-name}}</p>
-    <form action="/user/admin/edit-password" method="post">
-	<input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-	<input required type="hidden" name="USERNAME" value="{{account.username}}">
-	<input required type="text" name="PASSWORD">
-	<input type="submit" value="Change Password">
-    </form>
-    <form action="/user/admin/delete" method="post">
-	<input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-	<input required type="hidden" name="USERNAME" value="{{account.username}}">
-	<input type="submit" value="Delete Account">
+	<input required
+	       type="password"
+	       name="PASSWORD-CHECK">
+	<button class="be-gui-button"
+		title="Click to create new account"
+		type="submit">
+	    <img alt="Update Account Details"
+		 src="/images/icons/create-account.png">
+	    Create Account
+	</button>
     </form>
-</div>
-{% endif %}
-{% endfor %}
 
+    <h2>User Acccounts</h2>
+    {% for account in users %}
+    {% if account.username != user.username %}
+    <div class="be-user-accounts-container">
+	<form class="be-gui-form-inline-flex"
+	      action="/user/admin/delete"
+	      method="post">
+	    <input required
+		   type="hidden"
+		   name="AUTHENTICITY-TOKEN"
+		   value="{{token}}">
+	    <input required
+		   type="hidden"
+		   name="USERNAME"
+		   value="{{account.username}}">
+	    <button class="be-gui-button-no-text"
+		    title="Click to delete account for '{{account.username}}'"
+		    type="submit">
+		<img alt="Delete account"
+		     src="/images/icons/delete-account.png">
+	    </button>
+	    <p>
+		{{account.username}}
+		<br/>
+		{{account.display-name}}
+	    </p>
+	</form>
+	
+	<form class="be-gui-form-inline-flex"
+	      action="/user/admin/edit-password"
+	      method="post">
+	    <input required
+		   type="hidden"
+		   name="AUTHENTICITY-TOKEN"
+		   value="{{token}}">
+	    <input required
+		   type="hidden"
+		   name="USERNAME"
+		   value="{{account.username}}">
+	    <label>Change Password</label>
+	    <input required
+		   type="password"
+		   placeholder="Enter new password here..."
+		   name="PASSWORD">
+	    <button class="be-gui-button-no-text"
+		    title="Click to update the password for '{{account.username}}'"
+		    type="submit">
+		<img alt="Update account passwort"
+		     src="/images/icons/save.png">
+	    </button>
+	</form>
+	
+    </div>
+
+    {% endif %}
+    {% endfor %}
+</main>
 {% endblock %}