account routes clubbed together; send email for forgot usernameHEADmain

5 files changed, 134 insertions, 6 deletions

diff --git a/templates/account/forgot.django b/templates/account/forgot.django
new file mode 100644
index 0000000..deb9d16
--- /dev/null
+++ b/templates/account/forgot.django
@@ -0,0 +1,52 @@
+{% extends 'layouts/main.django' %}
+
+{% block content %}
+  <div class="centered-main">
+    <div class="bordered-box">
+        {% if Mode == "username" %}
+            <img src="/static/images/cdcea50ffd8313b9b5418907e327be65.webp" alt="Forgot Username" class="q-img">
+        {% else %}
+            <img src="/static/images/833de6dd73cb113ff6ebc631cdb14ee3.webp" alt="Forgot Password" class="q-img">
+        {% endif %}
+        <h1>Forgot your {{ Mode|capfirst }}?</h1>
+        <p>No worries! Just enter your email address below and we'll send you an email with {% if Mode == "username" %}your username{% else %}a link to reset your password{% endif %}.</p>
+      <form method="post" action="/account/forgot" class="ibform">
+            {% if Error %}
+                <div class="error">{{ Error|safe }}</div>
+            {% endif %}
+            {% if Success %}
+            <div class="success">{{ Success|safe }}</div>
+            {% endif %}
+            {% if Mode == "password" %}
+                <div class="fgroup">
+                    <div class="fg-main">
+                        <label for="username">Username</label>
+                    </div>
+                    <div class="fg-sub">
+                        <input type="text" class="itext" id="username" name="username" required value="{{ Username }}" maxlength="72" autocomplete="username" pattern="[a-zA-Z0-9_-]+" />
+                        <small>Enter username for which you want to reset the password for. 3-72 characters, letters, numbers, underscores, and hyphens only</small>
+                    </div>
+                </div>
+            {% endif %}
+            <div class="fgroup">
+            <div class="fg-main">
+                <label for="email">Email Address</label>
+            </div>
+            <div class="fg-sub">
+                <input type="email" id="email" name="email" required value="{{ Email }}" />
+            </div>
+            </div>
+            <input type="hidden" name="mode" value="{{ Mode }}" />
+            <div class="fbtngrp">
+                <input type="submit" value="Send Email" />
+                <input type="button" value="Clear" onclick="this.form.reset();" />
+                {% if Mode == "username" %}
+                    <input type="button" value="Forgot Password?" onclick="window.location.href='/account/forgot?mode=password';" />
+                {% else %}
+                    <input type="button" value="Forgot Username?" onclick="window.location.href='/account/forgot?mode=username';" />
+                {% endif %}
+            </div>
+        </form>
+    </div>
+  </div>
+{% endblock %}
diff --git a/templates/login.django b/templates/account/login.django
index 428c260..2627012 100644
--- a/templates/login.django
+++ b/templates/account/login.django
@@ -6,7 +6,7 @@
       <img src="/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp" alt="Login Image" class="q-img" />
       <h1>Login to {{ Appname }}</h1>
       <p>Welcome back! Please enter your credentials to continue.</p>
-      <form action="/login" method="POST" class="ibform">
+      <form action="/account/login" method="POST" class="ibform">
         {% if Next %}
           <input type="hidden" name="next" value="{{ Next }}" />
         {% endif %}
@@ -33,7 +33,8 @@
         <div class="fbtngrp">
           <input type="submit" value="Login" />
           <input type="button" value="Clear" onclick="this.form.reset();" />
-          <input type="button" value="Forgot Password?" onclick="window.location.href='/account/forgot-password';" />
+          <input type="button" value="Forgot Password?" onclick="window.location.href='/account/forgot?mode=password';" />
+          <input type="button" value="Forgot Username?" onclick="window.location.href='/account/forgot?mode=username';" />
         </div>
       </form>
       <p class="text-center">
diff --git a/templates/register.django b/templates/account/register.django
index b1c344f..592ffa5 100644
--- a/templates/register.django
+++ b/templates/account/register.django
@@ -6,7 +6,7 @@
       <img src="/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp" alt="Register Image" class="q-img" />
       <h1>Join {{ Appname }}</h1>
       <p>Create your account to start sharing and exploring images!</p>
-      <form action="/register" method="POST" class="ibform">
+      <form action="/account/register" method="POST" class="ibform">
         {% if Error %}
           <div class="error">{{ Error|safe }}</div>
         {% endif %}
@@ -53,7 +53,7 @@
         </div>
       </form>
       <p>
-        Already have an account? <a href="/login">Login here</a>
+        Already have an account? <a href="/account/login">Login here</a>
       </p>
     </div>
   </div>
diff --git a/templates/email/forgot_username.html b/templates/email/forgot_username.html
new file mode 100644
index 0000000..89fa982
--- /dev/null
+++ b/templates/email/forgot_username.html
@@ -0,0 +1,75 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Verify your email</title>
+    <style>
+        body {
+            background: #000033;
+            color: #ccccff;
+            font-family: monospace;
+            margin: 0;
+            padding: 0;
+            font-size: 13px;
+            text-align: justify;
+        }
+        .container {
+            background: #0d001a;
+            border: 1px solid #ff99cc;
+            max-width: 768px;
+            margin: 40px auto;
+            padding: 16px;
+        }
+        h1 {
+            color: #ffccff;
+            margin-bottom: 8px;
+            font-size: 16px;
+        }
+        p {
+            color: #99ffcc;
+            line-height: 18px;
+        }
+        .verify-link {
+            display: inline-block;
+            background: #330066;
+            color: #ccffcc;
+            border: 1px solid #99ffcc;
+            padding: 10px 24px;
+            text-decoration: none;
+            font-weight: bold;
+            margin: 12px auto;
+        }
+        .verify-link:hover {
+            background: #ff99cc;
+            color: #1a001a;
+            border-color: #ff99cc;
+        }
+        .footer {
+            color: #ffccff;
+            margin-top: 32px;
+            font-size: 11px;
+        }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+        <h1>We heard you forgot your username?</h1>
+        <p>
+            No worries! The username(s) associated with your email on {{ .Appname }} are: <strong>{{ .Username }}</strong>
+        </p>
+        <p>
+            In case you forgot your password as well, you can reset it by clicking the link below:
+        </p>
+        <a class="verify-link" href="{{ .Link }}">Reset Password</a>
+        <p>
+            If you are unable to click the link, copy and paste it into your browser:
+        </p>
+        <p>
+            <a href="{{ .Link }}">{{ .Link }}</a>
+        </p>
+        <div class="footer">
+            If you did not request this email, you can safely ignore it.
+        </div>
+    </div>
+  </body>
+</html>
diff --git a/templates/partials/navbar.django b/templates/partials/navbar.django
index 2287302..8a30a19 100644
--- a/templates/partials/navbar.django
+++ b/templates/partials/navbar.django
@@ -16,8 +16,8 @@
       <a href="{{ LogoutURL }}">Logout</a>
     {% else %}
       <span class="user-status">Guest</span>
-      <a href="/login">Login</a>
-      <a href="/register">Register</a>
+      <a href="/account/login">Login</a>
+      <a href="/account/register">Register</a>
     {% endif %}
     <a href="/preferences">Preferences</a>
     <a href="/help">Help</a>