From 04b104cbfc6ee92732da51c29a74c38eaedd47fd Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Sat, 3 May 2025 12:26:26 -0400
Subject: [PATCH] Redesign account management pages

Now they look *so much* nicer and has a proper sidebar now.
---
 resources/templates/account.html        | 19 ++++++------
 resources/templates/account_base.html   | 41 +++++++++++++++++++++++++
 resources/templates/changepassword.html |  5 +--
 resources/templates/layout.html         |  2 +-
 src/bin/kawari-login.rs                 |  6 ++++
 5 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 resources/templates/account_base.html

diff --git a/resources/templates/account.html b/resources/templates/account.html
index 5ff1e9c..fe4348f 100644
--- a/resources/templates/account.html
+++ b/resources/templates/account.html
@@ -1,17 +1,16 @@
-{% extends "layout.html" %}
+{% extends "account_base.html" %}
 
 {% block title %}Manage Account{% endblock %}
+{% set current_page = "home" %}
 
-{% block body %}
-<p>Managing account {{ username }}</p>
-<a href="/account/app/svc/logout">Logout</a>
-<a href="/account/app/svc/mbrPasswd">Change Password</a>
-<a href="/account/app/svc/mbrCancel">Cancel Account</a>
-
+{% block accountbody %}
 <!-- TODO: Move to it's own page. -->
+<h2>Upload Character Backup</h2>
 <form method='post' enctype="multipart/form-data">
-    <label for="charbak">Upload character backup:</label>
-    <input type="file" id="charbak" name="charbak" accept="application/zip" />
-    <button type='submit'>Upload</button>
+    <div class="mb-3">
+        <label for="charbak" class="form-label">Backup file</label>
+        <input type="file" id="charbak" name="charbak" accept="application/zip" class="form-control"/>
+    </div>
+    <button type='submit' class="btn btn-primary">Upload</button>
 </form>
 {% endblock %}
diff --git a/resources/templates/account_base.html b/resources/templates/account_base.html
new file mode 100644
index 0000000..9cbebdf
--- /dev/null
+++ b/resources/templates/account_base.html
@@ -0,0 +1,41 @@
+{% extends "layout.html" %}
+
+{% block body %}
+<main class="d-flex" style="height: 100vh">
+    <div class="d-flex flex-column p-3 text-bg-dark" style="width: 280px;">
+        <a href="/account/app/svc/manage" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
+            <span class="fs-4">Manage Account</span>
+        </a>
+        <hr>
+        <ul class="nav nav-pills flex-column mb-auto">
+            <li class="nav-item">
+                <a href="/account/app/svc/manage" class="nav-link {% if current_page == 'home' %}active{% endif %}" >
+                    Home
+                </a>
+            </li>
+            <li>
+                <a href="/account/app/svc/mbrPasswd" class="nav-link {% if current_page == 'changepassword' %}active{% endif %}">
+                    Change Password
+                </a>
+            </li>
+            <li>
+                <a href="/account/app/svc/mbrCancel" class="nav-link {% if current_page == 'cancel' %}active{% endif %}">
+                    Cancel Account
+                </a>
+            </li>
+            <li>
+                <a href="/account/app/svc/logout" class="nav-link">
+                    Log Out
+                </a>
+            </li>
+        </ul>
+        <hr>
+        <div>
+            <strong> {{ username }}</strong>
+        </div>
+    </div>
+    <div class="d-flex flex-column flex-fill p-3">
+        {% block accountbody %}{% endblock %}
+    </div>
+</main>
+{% endblock %}
diff --git a/resources/templates/changepassword.html b/resources/templates/changepassword.html
index f2f55d8..3874900 100644
--- a/resources/templates/changepassword.html
+++ b/resources/templates/changepassword.html
@@ -1,8 +1,9 @@
-{% extends "layout.html" %}
+{% extends "account_base.html" %}
 
 {% block title %}Kawari - Change Password{% endblock %}
+{% set current_page = "changepassword" %}
 
-{% block body %}
+{% block accountbody %}
 <form method='post'>
     <label for="old_password">Old Password:</label><br>
     <input type='text' id='old_password' name='old_password'/><br>
diff --git a/resources/templates/layout.html b/resources/templates/layout.html
index 23d6cf8..27a6758 100644
--- a/resources/templates/layout.html
+++ b/resources/templates/layout.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/src/bin/kawari-login.rs b/src/bin/kawari-login.rs
index 39edc7c..400bca8 100644
--- a/src/bin/kawari-login.rs
+++ b/src/bin/kawari-login.rs
@@ -22,6 +22,12 @@ fn setup_default_environment() -> Environment<'static> {
             .expect("Failed to find template!"),
     )
     .unwrap();
+    env.add_template_owned(
+        "account_base.html",
+        std::fs::read_to_string("resources/templates/account_base.html")
+            .expect("Failed to find template!"),
+    )
+    .unwrap();
     env.add_template_owned(
         "login.html",
         std::fs::read_to_string("resources/templates/login.html")