1 files changed, 62 insertions, 0 deletions
diff --git a/templates/account.html b/templates/account.html
new file mode 100644
index 0000000..68b1abf
--- /dev/null
+++ b/templates/account.html
@@ -0,0 +1,62 @@
+{% extends "layout.html"%}
+
+{% block title %}
+    Account
+{% endblock %}
+
+{% block main %}
+<div class="row row-cols-2">
+  <!-- Username -->
+  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 float-start">
+    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
+    <div class="card-header">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-person" viewBox="0 0 16 16">
+        <path d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"/>
+        <path d="M8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+      </svg>   Username</div>
+    <div class="card-body">
+      <h5 class="card-title">{{ name }}</h5>
+    </div>
+    </div>
+
+    <!-- Budget -->
+    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
+    <div class="card-header">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
+        <path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
+        <path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
+      </svg>   Budget</div>
+    <div class="card-body">
+      <h5 class="card-title">{{ budget | usd }}</h5>
+    </div>
+    </div>
+
+    <!-- Choose new password -->
+    <div class="card text-white bg-success mb-3 float-start w-100" style="max-width: 18rem;">
+    <div class="card-header">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
+        <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+      </svg>   Reset Password</div>
+    <div class="card-body">
+        <form action="/account" method="post">
+          <label for="pw_old">Current Password</label>
+          <input name="pw_old" autocomplete="off" class="form-control" placeholder="Current Password" type="password" required>
+
+          <label for="pw_new">New Password</label><br>
+          <input name="pw_new" autocomplete="off" class="form-control" placeholder="New Password" type="password" required>
+          <p class="footnote">* Password must be between 6-25 characters long and contain at least one number and one letter</p>
+
+          <label for="confirmation">Confirm New Password</label>
+          <input class="form-control" autocomplete="off" name="confirmation" placeholder="Confirm New Password" type="password" required>
+          <p class="footnote">* Your input must match the password above</p>
+          <button class="btn btn-dark" type="submit">Change Password</button>
+        </form>
+    </div>
+    </div>
+  </div>
+
+  <div class="col float-end" style="margin-top: 20px;">
+    <img src="/static/piggy_laptop.png" class="float-end">
+  </div>
+</div>
+{% endblock %}