add new guides, add example env, update routes, add vscode to gitignore, add images for guides, cleanup old content

.env.example

@@ -0,0 +1 @@
+INTERNAL_PORT=3000

.gitignore

@@ -6,4 +6,5 @@ donations.json
 .idea/
 db/
 .env
-config/
+config/
+.vscode/

app.js

@@ -90,8 +90,24 @@ app.get('/guides/user', (req, res) => {
   res.render('guides/user/index', { currentPage: 'guides' });
 });
 
-app.get('/guides/webmail', (req, res) => {
+app.get('/guides/user/password-change', (req, res) => {
-  res.render('guides/webmail/index', { currentPage: 'guides' });
+  res.render('guides/user/password-change', { currentPage: 'guides' });
+});
+
+app.get('/guides/user/external-accounts', (req, res) => {
+  res.render('guides/user/external-accounts', { currentPage: 'guides' });
+});
+
+app.get('/guides/user/create-account', (req, res) => {
+  res.render('guides/user/create-account', { currentPage: 'guides' });
+});
+
+app.get('/guides/email', (req, res) => {
+  res.render('guides/email/index', { currentPage: 'guides' });
+});
+
+app.get('/guides/email/thunderbird', (req, res) => {
+  res.render('guides/email/thunderbird', { currentPage: 'guides' });
 });
 
 app.get('/guides/vaultwarden/android', (req, res) => {

src/guides.ejs

@@ -5,21 +5,43 @@
         <i class="il mt-5">Vaultwarden</i>
         <hr>
         <ul class="list-group text-start">
-            <li class="list-group-item"><a href="/guides/vaultwarden/chrome">Using Vaultwarden on Chrome</a></li>
+            <li class="list-group-item">
-            <li class="list-group-item"><a href="/guides/vaultwarden/firefox">Using Vaultwarden on Firefox</a></li>
+                <a href="/guides/vaultwarden/android">Using Vaultwarden on Android</a>
-            <li class="list-group-item"><a href="/guides/vaultwarden/android">Using Vaultwarden on Android</a></li>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/vaultwarden/firefox">Using Vaultwarden on Firefox</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/vaultwarden/chrome">Using Vaultwarden on Chrome</a>
+            </li>
         </ul>
 
-        <i class="il mt-5">Webmail</i>
+        <i class="il mt-5">Email</i>
         <hr>
         <ul class="list-group text-start">
-            <li class="list-group-item"><a href="/guides/webmail">Using the Webmail</a></li>
+            <li class="list-group-item">
+                <a href="/guides/email">Using the Webmail</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/email/thunderbird">Setting up Thunderbird</a>
+            </li>
         </ul>
 
         <i class="il mt-5">User Dashboard</i>
         <hr>
         <ul class="list-group text-start">
-            <li class="list-group-item"><a href="/guides/user">Using the User Dashboard</a></li>
+            <li class="list-group-item">
+                <a href="/guides/user">Using the User Dashboard</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/password-change">Changing your password</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/external-accounts">Adding external accounts</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/create-account">Creating an account</a>
+            </li>
         </ul>
     </div>
 <%- include('shards/footer') %>

src/guides/email/index.ejs

@@ -0,0 +1,35 @@
+<%- include('../../shards/header', { title: 'Using the Webmail - p0ntus mail' }) %>
+<div class="container">
+    <%- include('../../shards/nav', { currentPage: 'guides' }) %>
+    <i class="il mt-5">Using the Webmail</i>
+    <hr>
+    <div class="text-start">
+        <h4 class="mb-3">Signing in</h4>
+        <a href="/img/webmail_signin.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/webmail_signin.png" class="img-fluid img-thumbnail" alt="Webmail Login">
+        </a>
+        <p class="mt-3">Signing in is extremely simple. Just input the email and password you signed up for (or <a href="https://user.pontusmail.org/admin/user/signup">sign up for an account</a>), and click which application you would like to sign in to.</p>
+        <p class="mt-3">This can either be the "Admin," which is your account settings or "Webmail" which takes you to Roundcube, our webmail provider.</p>
+        <h4 class="mt-3 mb-3">Using the Webmail</h4>
+        <a href="/img/webmail_inbox.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/webmail_inbox.png" class="img-fluid img-thumbnail" alt="Webmail Inbox">
+        </a>
+        <p class="mt-2">Once you are signed in, you can use the webmail to send and receive emails. You can also use the contacts feature included with Roundcube and gain quick access to your user control panel on the sidebar.</p>
+        <p class="mt-2">You can use the image as a reference guide to perform a variety of actions.</p>
+        <h4>Logging out</h4>
+        <p class="mt-3">When you are done, click the "Logout" icon in the bottom left corner of the UI.</p>
+        <h4>See also</h4>
+        <ul class="list-group text-start">
+            <li class="list-group-item">
+                <a href="/guides/user">Using the User Dashboard</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/email/thunderbird">Setting up Thunderbird</a>
+            </li>
+        </ul>
+        <a href="/guides" class="btn btn-dark mt-3">
+            <i class="fa-solid fa-arrow-left"></i> Back to Guides
+        </a>
+    </div>
+</div>
+<%- include('../../shards/footer') %>

src/guides/email/thunderbird.ejs

@@ -0,0 +1,40 @@
+<%- include('../../shards/header', { title: 'Setting up Thunderbird - p0ntus mail' }) %>
+<div class="container">
+    <%- include('../../shards/nav', { currentPage: 'guides' }) %>
+    <i class="il mt-5">Setting up Thunderbird</i>
+    <hr>
+    <div class="text-start">
+        <h4 class="mb-3">Adding your account</h4>
+        <a href="/img/thunderbird_step_1.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/thunderbird_step_1.png" class="img-fluid img-thumbnail" alt="Thunderbird Add Account Screen">
+        </a>
+        <p class="mt-3">This screenshot was taken on Gentoo Linux, however should reflect the UI and flow of other systems.</p>
+        <p class="mt-3">To add your account, simply type in your desired name (this goes in the headers), your email, and your password. Next, click "Configure manually" and see the next screenshot.</p>
+        <a href="/img/thunderbird_step_2.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/thunderbird_step_2.png" class="img-fluid img-thumbnail" alt="Thunderbird Manual Config Screen">
+        </a>
+        <p class="mt-3">Next, fill in the details according to the <a href="https://user.pontusmail.org/admin/client">client setup page</a> or from the screenshot. Make sure your email is inputted, not the sample one.</p>
+        <p class="mt-3">After filling in the details, you can click "Advanced config" to use the details you just filled in. <b>Do not click the other buttons.</b></p>
+        <a href="/img/thunderbird_confirm_advanced_config.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/thunderbird_confirm_advanced_config.png" class="img-fluid img-thumbnail" alt="Thunderbird Confirm Advanced Config Popup">
+        </a>
+        <p class="mt-3">You should hit "Ok" on the next popup, as we are sure we want to use the config you filled in.</p>
+        <a href="/img/thunderbird_add_security_exception.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/thunderbird_add_security_exception.png" class="img-fluid img-thumbnail" alt="Thunderbird Confirm Advanced Config Popup">
+        </a>
+        <p class="mt-3">You may also be asked to add a security exception. Simply ignore the other buttons and click "Confirm Security Exception." This is because my mail server uses many domains, but only one SSL certificate. Your email will still be secure.</p>
+        <h4>See also</h4>
+        <ul class="list-group text-start">
+            <li class="list-group-item">
+                <a href="/guides/email">Using the Webmail</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user">Using the User Dashboard</a>
+            </li>
+        </ul>
+        <a href="/guides" class="btn btn-dark mt-3">
+            <i class="fa-solid fa-arrow-left"></i> Back to Guides
+        </a>
+    </div>
+</div>
+<%- include('../../shards/footer') %>

src/guides/user/create-account.ejs

@@ -0,0 +1,39 @@
+<%- include('../../shards/header', { title: 'Creating an Account - p0ntus mail' }) %>
+<div class="container">
+    <%- include('../../shards/nav', { currentPage: 'guides' }) %>
+    <i class="il mt-5">Creating an Account</i>
+    <hr>
+    <div class="text-start">
+        <h4 class="mb-3">Signing in</h4>
+        <a href="/img/webmail_signin.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/webmail_signin.png" class="img-fluid img-thumbnail" alt="Webmail/User Control Panel Login">
+        </a>
+        <p class="mt-2">Signing in is extremely simple. Just input the email and password you signed up for (or <a href="https://user.pontusmail.org/admin/user/signup">sign up for an account</a>), and click which application you would like to sign in to.</p>
+        <p class="mt-3">This can either be the "Admin," which is your account settings or "Webmail" which takes you to Roundcube, our webmail provider.</p>
+        <p class="mt-3">Since you're interested in the user dashboard, click on "Sign in Admin" to continue.</p>
+        <h4 class="mb-3">Using the User Dashboard</h4>
+        <a href="/img/mail_home.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/mail_home.png" class="img-fluid img-thumbnail" alt="Webmail Login">
+        </a>
+        <p class="mt-2">Once you are signed in, you can use the user dashboard to manage your account. You can change your password and do other account actions on the sidebar. There are also links to Mailu help, their website, a link to logout, and more.
+        <p class="mt-2">You can also view and change account information on the home page such as your name and anti-spam configuration.</p>
+        <h4>Logging out</h4>
+        <p>When you are done, click the "Sign out" link on the sidebar.</p>
+        <h4>See also</h4>
+        <ul class="list-group">
+            <li class="list-group-item">
+                <a href="/guides/user/password-change">Changing your password</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/external-accounts">Adding external accounts</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user">Using the User Dashboard</a>
+            </li>
+        </ul>
+        <a href="/guides" class="btn btn-dark mt-3">
+            <i class="fa-solid fa-arrow-left"></i> Back to Guides
+        </a>
+    </div>
+</div>
+<%- include('../../shards/footer') %>

src/guides/user/external-accounts.ejs

@@ -0,0 +1,40 @@
+<%- include('../../shards/header', { title: 'Adding External Accounts - p0ntus mail' }) %>
+<div class="container">
+    <%- include('../../shards/nav', { currentPage: 'guides' }) %>
+    <i class="il mt-5">Adding External Accounts</i>
+    <hr>
+    <div class="text-start">
+        <h4 class="mb-3">Navigate to the User Dashboard</h4>
+        <p class="mt-2">First, go to your <a href="https://user.pontusmail.org/admin/user/settings">user dashboard</a>, and click on the "Fetched accounts" option on the sidebar of the page.</p>
+        <h4 class="mb-3">External Accounts</h4>
+        <a href="/img/mail_fetched_accounts.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/mail_fetched_accounts.png" class="img-fluid img-thumbnail" alt="Fetched/External Accounts Listing Screen">
+        </a>
+        <p class="mt-2">Once you have navigated to this page, you will now be able to view all of your current external/fetched accounts.</p>
+        <p class="mt-2">External accounts, also known as "fetched accounts," offers you a way to check other emails you might own <i>from your p0ntus mail</i>. This can be done by configuring a fetched account in your user dashboard.</p>
+        <p class="mt-2">To add a new fetched account, click the "Add an account" button and continue on to the next section.</p>
+        <h4>Adding an External Account</h4>
+        <a href="/img/mail_fetched_accounts_add.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/mail_fetched_accounts_add.png" class="img-fluid img-thumbnail" alt="Fetched/External Accounts Listing Screen">
+        </a>
+        <p class="mt-2">Next, input your email account details. You can get most of the required fields from your email service provider. Some "generally good" options have been provided in the screenshot above.</p>
+        <p class="mt-2">Once you are done configuring the fetched/external account settings, you can click "Submit" to add it to your account.</p>
+        <p class="mt-2">If you are interested in our privacy guidelines surrounding fetched/external email accounts, please see <a href="https://pontusmail.org/privacy">our human-readable page on privacy</a> for more details!</p>
+        <h4>See also</h4>
+        <ul class="list-group">
+            <li class="list-group-item">
+                <a href="/guides/user/password-change">Changing your password</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user">Using the User Dashboard</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/create-account">Creating an account</a>
+            </li>
+        </ul>
+        <a href="/guides" class="btn btn-dark mt-3">
+            <i class="fa-solid fa-arrow-left"></i> Back to Guides
+        </a>
+    </div>
+</div>
+<%- include('../../shards/footer') %>

src/guides/user/index.ejs

@@ -5,25 +5,30 @@
     <hr>
     <div class="text-start">
         <h4 class="mb-3">Signing in</h4>
-        <a href="/img/user_dashboard_login.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+        <a href="/img/webmail_signin.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
-            <img src="/img/user_dashboard_login.png" class="img-fluid img-thumbnail" alt="Webmail Login">
+            <img src="/img/webmail_signin.png" class="img-fluid img-thumbnail" alt="Webmail/User Control Panel Login">
         </a>
-        <p class="mt-2">If you just signed up, use the default password with your requested email, and input that into <a href="https://user.p0ntus.com/">user.p0ntus.com</a>. Change your password in the interface, and follow the next steps using your email and password.</p>
+        <p class="mt-2">Signing in is extremely simple. Just input the email and password you signed up for (or <a href="https://user.pontusmail.org/admin/user/signup">sign up for an account</a>), and click which application you would like to sign in to.</p>
-        <p>Even if you didn't just sign up, use your <i>email</i> and password to login.</p>
+        <p class="mt-3">This can either be the "Admin," which is your account settings or "Webmail" which takes you to Roundcube, our webmail provider.</p>
+        <p class="mt-3">Since you're interested in the user dashboard, click on "Sign in Admin" to continue.</p>
         <h4 class="mb-3">Using the User Dashboard</h4>
-        <a href="/img/user_dashboard_home.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+        <a href="/img/mail_home.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
-            <img src="/img/user_dashboard_home.png" class="img-fluid img-thumbnail" alt="Webmail Login">
+            <img src="/img/mail_home.png" class="img-fluid img-thumbnail" alt="Webmail Login">
         </a>
-        <p class="mt-2">Once you are signed in, you can use the user dashboard to manage your account. You can change your password and view account information. Everything is highly organized for ease of access :)</p>
+        <p class="mt-2">Once you are signed in, you can use the user dashboard to manage your account. You can change your password and do other account actions on the sidebar. There are also links to Mailu help, their website, a link to logout, and more.
-        <h4>Enabling Two-Factor Authentication</h4>
+        <p class="mt-2">You can also view and change account information on the home page such as your name and anti-spam configuration.</p>
-        <p>On the main page, for traditional Google Authenticator/authenticator app setup, click the "Please select" dropdown under the "Set two-factor authentication method" section. Click Time-Based OTP, and scan the QR code to continue.</p>
-        <p>On the main page, for a FIDO device, select the "Register FIDO Device" button, and doing the normal process with your authenticator to sign in and register. Once done, it will be usable on the <a href="https://user.p0ntus.com">user.p0ntus.com</a> dashboard. You must setup traditional 2FA (or store it on your FIDO device, if supported) for SOGo webmail.</p>
         <h4>Logging out</h4>
-        <p>When you are done, click the "Exit" icon in the top right corner of the UI.</p>
+        <p>When you are done, click the "Sign out" link on the sidebar.</p>
         <h4>See also</h4>
         <ul class="list-group">
             <li class="list-group-item">
-                <a href="/guides/webmail">Using the Webmail</a>
+                <a href="/guides/user/password-change">Changing your password</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/external-accounts">Adding external accounts</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/create-account">Creating an account</a>
             </li>
         </ul>
         <a href="/guides" class="btn btn-dark mt-3">

src/guides/user/password-change.ejs

@@ -0,0 +1,34 @@
+<%- include('../../shards/header', { title: 'Changing your Password - p0ntus mail' }) %>
+<div class="container">
+    <%- include('../../shards/nav', { currentPage: 'guides' }) %>
+    <i class="il mt-5">Changing your Password</i>
+    <hr>
+    <div class="text-start">
+        <h4 class="mb-3">Navigate to the User Dashboard</h4>
+        <p class="mt-2">First, go to your <a href="https://user.pontusmail.org/admin/user/settings">user dashboard</a>, and click on the "Update Password" option on the sidebar of the page.</p>
+        <h4 class="mb-3">Updating the Password</h4>
+        <a href="/img/mail_update_password.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
+            <img src="/img/mail_update_password.png" class="img-fluid img-thumbnail" alt="Update Password Screen">
+        </a>
+        <p class="mt-2">Next, simply fill in the fields with your existing password and your desired new password. The password will be updated for you system-wide.</p>
+        <h4>I don't know my old password!</h4>
+        <p class="mb-3">You may submit a password reset request to <a href="mailto:aidan@p0ntus.com">aidan[at]p0ntus.com</a>, and your request will be reviewed. Please provide as much proof as possible you are the account owner.</p>
+        <p class="mb-3">Some requests will have a hold placed on them which can take additional time. Please know this time is being well spent to determine the rightful account owner.</p>
+        <h4>See also</h4>
+        <ul class="list-group">
+            <li class="list-group-item">
+                <a href="/guides/user">Using the User Dashboard</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/external-accounts">Adding external accounts</a>
+            </li>
+            <li class="list-group-item">
+                <a href="/guides/user/create-account">Creating an account</a>
+            </li>
+        </ul>
+        <a href="/guides" class="btn btn-dark mt-3">
+            <i class="fa-solid fa-arrow-left"></i> Back to Guides
+        </a>
+    </div>
+</div>
+<%- include('../../shards/footer') %>

src/guides/webmail/index.ejs

@@ -1,35 +0,0 @@
-<%- include('../../shards/header', { title: 'Using the Webmail - p0ntus mail' }) %>
-<div class="container">
-    <%- include('../../shards/nav', { currentPage: 'guides' }) %>
-    <i class="il mt-5">Using the Webmail</i>
-    <hr>
-    <div class="text-start">
-        <h4 class="mb-3">Signing in</h4>
-        <a href="/img/webmail_login.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
-            <img src="/img/webmail_login.png" class="img-fluid img-thumbnail" alt="Webmail Login">
-        </a>
-        <p class="mt-3">If you just signed up, use the default password with your requested email, and input that into <a href="https://mail.p0ntus.com/">mail.p0ntus.com</a>. Change your password in the interface, and follow the next steps using your email and password.</p>
-        <p>To sign in, use <a href="https://user.p0ntus.com/">user.p0ntus.com</a> either on the login page with the "Webmail" button, or in the signed-in interface, with the "Sign in to webmail" button.</p>
-        <p>You also may have to enter your 2FA code:</p>
-        <a href="/img/webmail_2fa.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
-            <img src="/img/webmail_2fa.png" class="img-fluid img-thumbnail" alt="Webmail 2FA Screen">
-        </a>
-        <h4 class="mt-3 mb-3">Using the Webmail</h4>
-        <a href="/img/webmail_home.png" data-bs-toggle="lightbox" data-bs-max-width="100%">
-            <img src="/img/webmail_home.png" class="img-fluid img-thumbnail" alt="Webmail Home Page">
-        </a>
-        <p class="mt-2">Once you are signed in, you can use the webmail to send and receive emails. You can also use the calendar and contacts features.</p>
-        <h4>Logging out</h4>
-        <p>When you are done, click the "Exit" icon in the top right corner of the UI.</p>
-        <h4>See also</h4>
-        <ul class="list-group text-start">
-            <li class="list-group-item">
-                <a href="/guides/user">Using the User Dashboard</a>
-            </li>
-        </ul>
-        <a href="/guides" class="btn btn-dark mt-3">
-            <i class="fa-solid fa-arrow-left"></i> Back to Guides
-        </a>
-    </div>
-</div>
-<%- include('../../shards/footer') %>