Files
DocumentationVaultWarden/index.html
2026-04-02 10:57:35 -04:00

150 lines
8.7 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documentation - Vault Warden</title>
<meta name="description" content="How to sign up and sign into Vault Warden using Bitwarden." />
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="container">
<h1>Sign up & sign in — Vault Warden (Bitwarden-compatible)</h1>
<p class="subtitle">Your vault URL: <a id="vault-link" href="https://vault.depressionslair.com">https://vault.depressionslair.com</a> <button id="copy-url">Copy</button></p>
</div>
</header>
<main>
<div class="container">
<section class="hero">
<h2>Welcome to your Vault Warden documentation</h2>
<p>Follow the quick steps below to create an account, sign in, and connect Bitwarden clients and browser extensions to Vault Warden.</p>
</section>
<section class="card">
<h3>1. Sign up (first time)</h3>
<ol>
<li>Open the vault URL in your browser: <a href="https://vault.depressionslair.com">https://vault.depressionslair.com</a></li>
<li>Choose <strong>Create Account</strong> (or similar) on the web UI.</li>
<li>Enter your email, a strong master password, and any required information. Save a secure backup of your recovery code if shown.</li>
</ol>
</section>
<section class="card">
<h3>2. Sign in</h3>
<ol>
<li>Open the vault URL and click <strong>Log in</strong>.</li>
<li>Enter your email and master password.</li>
<li>If your server requires it, enter a 2FA code (TOTP) or use your configured second factor.</li>
</ol>
</section>
<section class="card">
<h3>3. Browser Extensions</h3>
<p>Install official Bitwarden extensions and point them to your vault.</p>
<ul>
<li><a href="https://bitwarden.com/download/">Chrome / Edge / Firefox / Safari extensions (official)</a></li>
<li>After install: open extension &gt; Accessing: &gt; self hosted &mdash; set to <code>https://vault.depressionslair.com</code>.</li>
<li>Sign in using your vault credentials from step 1.</li>
</ul>
</section>
<section class="card">
<h3>Browser extension — step-by-step</h3>
<p>Below are step-by-step instructions for common browsers.</p>
<h4>Chrome / Edge</h4>
<ol>
<li>Install the Bitwarden extension from the Chrome Web Store / Edge Add-ons.</li>
<li>Click the Bitwarden icon in your toolbar.</li>
<li>Open <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
<li>Find <strong>Server URL</strong> or <strong>Server</strong> field and enter <code>https://vault.depressionslair.com</code>.</li>
<li>Save and sign in with your account.</li>
</ol>
<figure>
<img src="images/bitwardenextension.svg" alt="Bitwarden browser extension settings showing Server URL field" />
<img src="images/extension-settings.svg" alt="Extension settings showing Server URL field" />
<figcaption>Example: Change the Server URL inside the extension settings.</figcaption>
</figure>
<h4>Firefox</h4>
<ol>
<li>Install the Bitwarden add-on from Mozilla Add-ons.</li>
<li>Go to <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
<li>Set the <strong>Server URL</strong> to <code>https://vault.depressionslair.com</code>, save, then sign in.</li>
</ol>
</section>
<section class="card">
<h3>Desktop apps — step-by-step</h3>
<ol>
<li>Download and install the Bitwarden desktop app for your OS from <a href="https://bitwarden.com/download/">Bitwarden Downloads</a>.</li>
<li>Open the app, go to <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
<li>Enter the <strong>Server URL</strong>: <code>https://vault.depressionslair.com</code>.</li>
<li>Save and sign in using your email and master password.</li>
</ol>
<figure>
<img src="images/bitwardenapp.svg" alt="Bitwarden desktop app login screen showing Server URL field" />
<img src="images/desktop-settings.svg" alt="Desktop app settings showing Server URL field" />
<figcaption>Example: Desktop app Advanced settings with Server URL highlighted.</figcaption>
</figure>
</section>
<section class="card">
<h3>Mobile apps — step-by-step (iOS & Android)</h3>
<ol>
<li>Install the Bitwarden app from the App Store (iOS) or Google Play (Android).</li>
<li>Open the app, go to <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
<li>Set the <strong>Server URL</strong> to <code>https://vault.depressionslair.com</code> and save.</li>
<li>Sign in with your credentials and enable biometrics if desired.</li>
</ol>
<figure>
<img src="images/bitwardeniosapp.svg" alt="Bitwarden mobile app login screen showing Server URL field" />
<img src="images/mobile-settings.svg" alt="Mobile app settings showing Server URL field" />
<figcaption>Example: Mobile settings where you set the Server URL.</figcaption>
</figure>
</section>
<section class="grid">
<div class="card">
<h3>Desktop Apps</h3>
<p>Windows, macOS, Linux</p>
<ul>
<li>Download from <a href="https://bitwarden.com/download/">Bitwarden Downloads</a>.</li>
<li>Open app &gt; <strong>Accessing: </strong> &gt; <strong>self hosted</strong> &gt; <strong>Server URL</strong> set to <code>https://vault.depressionslair.com</code>.</li>
</ul>
<figure>
<img src="images/bitwardenapp.svg" alt="Bitwarden desktop app login screen showing Server URL field" />
<img src="images/desktop-settings.svg" alt="Desktop app settings showing Server URL field" />
<figcaption>Example: Desktop app Advanced settings with Server URL highlighted.</figcaption>
</figure>
</div>
<div class="card">
<h3>Mobile Apps</h3>
<p>iOS & Android</p>
<ul>
<li>Install from the App Store or Google Play via <a href="https://bitwarden.com/download/">Bitwarden Downloads</a>.</li>
<li>Open app &gt; <strong>Accessing: </strong> &gt; <strong>self hosted</strong> &gt; <strong>Server URL</strong> &mdash; enter <code>https://vault.depressionslair.com</code> and sign in.</li>
</ul>
</div>
</section>
<section class="card">
<h3>Troubleshooting & Tips</h3>
<ul>
<li>If the extension/app cannot connect, double-check the server URL and firewall rules.</li>
<li>Use a strong, unique master password and enable 2FA for extra security.</li>
</ul>
</section>
<footer class="card muted">
<p>Need help? Contact your server administrator (EhChad).</p>
</footer>
</div>
</main>
<script src="index.js"></script>
</body>
</html>