add images to guides

src/guides/user/index.ejs

@@ -4,11 +4,17 @@
     <i class="il mt-5">Using the User Dashboard</i>
     <hr>
     <div class="text-start">
-        <h4>Signing in</h4>
+        <h4 class="mb-3">Signing in</h4>
-        <p>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>
+        <a href="/img/user_dashboard_login.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">
+        </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>Even if you didn't just sign up, use your <i>email</i> and password to login.</p>
-        <h4>Using the User Dashboard</h4>
+        <h4 class="mb-3">Using the User Dashboard</h4>
-        <p>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>
+        <a href="/img/user_dashboard_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">
+        </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>
         <h4>Enabling Two-Factor Authentication</h4>
         <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>

src/guides/webmail/index.ejs

@@ -4,11 +4,21 @@
     <i class="il mt-5">Using the Webmail</i>
     <hr>
     <div class="text-start">
-        <h4>Signing in</h4>
+        <h4 class="mb-3">Signing in</h4>
-        <p>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>
+        <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>
-        <h4>Using the Webmail</h4>
+        <p>You also may have to enter your 2FA code:</p>
-        <p>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>
+        <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>