chad/DocumentationVaultWarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Chad Doty
2026-04-02 10:57:35 -04:00
commit eb2e78c7cc
10 changed files with 345 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
README.md Normal file
View File

@@ -0,0 +1,39 @@
# Documentation — Vault Warden (Bitwarden-compatible)
Brief docs and quick-start for connecting Bitwarden clients and extensions to a self-hosted Vault Warden instance.
**Live vault URL:** https://vault.depressionslair.com
**Contents**
- What this repo provides
- How to preview locally
- How to configure clients and extensions
- Notes for contributors
**What this repo provides**
- A simple documentation web page (index.html) with step-by-step instructions for signing up, signing in, and pointing Bitwarden clients/extensions at your Vault Warden server.
- Small illustrative SVG screenshots in `images/` used to show where to set the Server URL.
**Preview locally**
1. Open a terminal in this repository root.
2. Start a quick HTTP server (Python 3):
```bash
python -m http.server 8000
```
3. Open http://localhost:8000 in your browser and view `index.html`.
**Configure clients & extensions**
- Browser extensions: install Bitwarden extension, open extension → Settings → set Server URL to `https://vault.depressionslair.com`, then sign in.
- Desktop apps: open Bitwarden app → Settings → Advanced (or during login) set Server URL to `https://vault.depressionslair.com`.
- Mobile apps: open Bitwarden app → Settings → Server (or Sync) → set Server URL and sign in.
If you want to change the default vault URL shown on the page, edit `index.html` and update the `href` / displayed URL near the top.
**Contributing**
- Fix typos, improve instructions, or replace illustrative SVGs with real screenshots via pull requests.
- Images live in `images/`.
**License**
This repository contains documentation and images; add a license file if you wish to apply one (e.g., MIT).

13
images/bitwardenapp.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

8
images/bitwardenextension.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

8
images/bitwardeniosapp.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

19
images/desktop-settings.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="420" viewBox="0 0 900 420">
<style>
.bg{fill:#071026}
.window{fill:#071a2a;stroke:#173447;stroke-width:2}
.panel{fill:#0b1220}
.highlight{fill:#072033;stroke:#6dd3f5;stroke-width:3}
.text{fill:#dff6ff;font-family:Arial, sans-serif;font-size:14px}
.muted{fill:#9aa4b2}
</style>
<rect width="100%" height="100%" class="bg"/>
<g transform="translate(40,30)">
<rect width="820" height="360" rx="10" class="window" />
<rect x="40" y="40" width="760" height="64" rx="6" class="panel" />
<text x="60" y="82" class="text">Settings › Advanced</text>
<rect x="60" y="120" width="640" height="48" rx="6" class="highlight" />
<text x="80" y="150" class="text">Server URL: https://vault.depressionslair.com</text>
<text x="60" y="200" class="muted">Desktop app &gt; Settings &gt; Advanced &gt; Server URL</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 931 B

20
images/extension-settings.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="420" viewBox="0 0 900 420">
<style>
.bg{fill:#071026}
.window{fill:#071a2a;stroke:#173447;stroke-width:2}
.panel{fill:#0b1220}
.highlight{fill:#072033;stroke:#6dd3f5;stroke-width:3}
.text{fill:#dff6ff;font-family:Arial, sans-serif;font-size:14px}
.muted{fill:#9aa4b2}
</style>
<rect width="100%" height="100%" class="bg"/>
<g transform="translate(40,30)">
<rect width="820" height="360" rx="10" class="window" />
<rect x="18" y="18" width="240" height="320" rx="8" class="panel" />
<rect x="280" y="40" width="500" height="60" rx="6" class="highlight" />
<text x="300" y="75" class="text">Server URL</text>
<rect x="300" y="90" width="420" height="34" rx="6" fill="#091826" stroke="#23424f" />
<text x="310" y="112" class="text">https://vault.depressionslair.com</text>
<text x="300" y="150" class="muted">Open the extension &gt; Settings &gt; Server URL</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 996 B

19
images/mobile-settings.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="760" viewBox="0 0 420 760">
<style>
.bg{fill:#071026}
.phone{fill:#071a2a;stroke:#173447;stroke-width:2}
.screen{fill:#0b1220}
.highlight{fill:#072033;stroke:#6dd3f5;stroke-width:3}
.text{fill:#dff6ff;font-family:Arial, sans-serif;font-size:12px}
.muted{fill:#9aa4b2}
</style>
<rect width="100%" height="100%" class="bg"/>
<g transform="translate(30,20)">
<rect x="0" y="0" width="360" height="720" rx="24" class="phone" />
<rect x="14" y="28" width="332" height="664" rx="12" class="screen" />
<rect x="40" y="80" width="260" height="36" rx="6" class="highlight" />
<text x="52" y="104" class="text">Server URL</text>
<text x="52" y="130" class="text">https://vault.depressionslair.com</text>
<text x="40" y="180" class="muted">Mobile app › Settings › Server</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 901 B

150
index.html Normal file
View File

@@ -0,0 +1,150 @@
<!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>

19
index.js Normal file
View File

@@ -0,0 +1,19 @@
document.addEventListener('DOMContentLoaded', function(){
const copyBtn = document.getElementById('copy-url');
const vaultLink = document.getElementById('vault-link');
if(copyBtn && vaultLink){
copyBtn.addEventListener('click', async ()=>{
try{
await navigator.clipboard.writeText(vaultLink.href);
copyBtn.textContent = 'Copied!';
setTimeout(()=> copyBtn.textContent = 'Copy', 1800);
}catch(e){
const ta = document.createElement('textarea');
ta.value = vaultLink.href; document.body.appendChild(ta); ta.select();
try{ document.execCommand('copy'); copyBtn.textContent='Copied!'}catch(err){alert('Copy failed; please copy manually.')}
ta.remove(); setTimeout(()=> copyBtn.textContent = 'Copy',1800);
}
});
}
});

50
style.css Normal file
View File

@@ -0,0 +1,50 @@
:root{
--bg:#0f1724;
--card:#0b1220;
--accent:#6dd3f5;
--muted:#9aa4b2;
--glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
background:linear-gradient(180deg,#071026 0%, #071a2a 60%);
color:#e6eef6;
-webkit-font-smoothing:antialiased;
}
.container{max-width:980px;margin:28px auto;padding:0 20px}
header{padding:28px 0}
header h1{margin:0;font-size:1.5rem}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:0.95rem}
.subtitle a{color:var(--accent);text-decoration:underline}
#copy-url{margin-left:10px;padding:6px 8px;border-radius:6px;border:0;background:var(--accent);color:#072033;cursor:pointer}
.hero{background:linear-gradient(90deg, rgba(109,211,245,0.06), rgba(109,211,245,0.02));padding:18px;border-radius:10px;margin-bottom:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);padding:16px;border-radius:10px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}
h2{margin:0 0 8px}
h3{margin:0 0 8px}
ol,ul{margin:8px 0 0 20px;color:var(--muted)}
code{background:var(--glass);padding:2px 6px;border-radius:6px;color:var(--accent)}
.muted{opacity:0.95;font-size:0.95rem}
footer.card{background:transparent;border:0;padding-top:6px}
button{font:inherit}
/* small utilities */
.subtitle button{font-weight:600}
/* link styles */
a{color:var(--accent)}
/* responsive tweaks */
@media(max-width:520px){header h1{font-size:1.2rem}.container{padding:0 14px}}
figure{margin:12px 0 0;border-radius:8px;overflow:hidden}
figure img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,0.04)}
figcaption{font-size:0.9rem;color:var(--muted);margin-top:8px}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}