Skip to content

Commit 8d0b49d

Browse files
mytherapy-codingmytherapy-coding
committed
Standardize button order and styling across Password and User ID tabs
- Change Password tab buttons: Generate → Share → Reset Settings - Update User ID tab button text: 'Generate User IDs' → 'Generate' - Add dark color styling (btn-secondary) to Reset Settings buttons - Update TypeScript handlers: clearBtn → resetPasswordSettingsBtn - Add cache-busting meta tags to prevent browser caching issues - Both tabs now have identical button order, names, and styling
1 parent 92c54db commit 8d0b49d

8 files changed

Lines changed: 333 additions & 14 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎CLI_USAGE.md‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
# CLI Tool Usage Guide
2+
3+
## Prerequisites
4+
5+
1. **Build the project first**:
6+
```bash
7+
npm run build
8+
```
9+
10+
This creates `dist/cli/index.js` from the TypeScript source.
11+
12+
## Running the CLI
13+
14+
### Method 1: Direct Node Execution (Recommended)
15+
16+
Run the built CLI directly with Node:
17+
18+
```bash
19+
node dist/cli/index.js <command> [options]
20+
```
21+
22+
### Method 2: Using npm link (Global Command)
23+
24+
1. **Link the package**:
25+
```bash
26+
npm link
27+
```
28+
29+
2. **Run using the command name**:
30+
```bash
31+
securegen <command> [options]
32+
```
33+
34+
## Available Commands
35+
36+
### 1. Generate Password (`pwd`)
37+
38+
**Basic usage:**
39+
```bash
40+
node dist/cli/index.js pwd --len 16
41+
```
42+
43+
**With options:**
44+
```bash
45+
node dist/cli/index.js pwd --len 20 --mode strong --lowercase --uppercase --digits --symbols
46+
```
47+
48+
**Options:**
49+
- `--len <number>` - Password length (required)
50+
- `--mode <mode>` - Mode: `strong`, `icloud`, `easyWrite`, `easySay`, `passphrase`
51+
- `--lowercase` - Include lowercase letters
52+
- `--uppercase` - Include uppercase letters
53+
- `--digits` - Include digits
54+
- `--symbols` - Include symbols
55+
- `--symbols-set <string>` - Custom symbol set
56+
- `--json` - Output in JSON format
57+
58+
**Examples:**
59+
```bash
60+
# Strong password
61+
node dist/cli/index.js pwd --len 16 --mode strong --lowercase --uppercase --digits --symbols
62+
63+
# iCloud-style password
64+
node dist/cli/index.js pwd --mode icloud
65+
66+
# Easy to write password
67+
node dist/cli/index.js pwd --mode easyWrite --len 12
68+
69+
# Easy to say password
70+
node dist/cli/index.js pwd --mode easySay --syllables 3
71+
```
72+
73+
### 2. Generate Passphrase (`passphrase`)
74+
75+
**Usage:**
76+
```bash
77+
node dist/cli/index.js passphrase --words 6 --sep "-"
78+
```
79+
80+
**Options:**
81+
- `--words <number>` - Number of words (default: 6)
82+
- `--sep <string>` - Separator (default: " ")
83+
- `--capitalize` - Capitalize first letter of each word
84+
- `--add-digits` - Add digits at the end
85+
- `--json` - Output in JSON format
86+
87+
**Examples:**
88+
```bash
89+
# Basic passphrase
90+
node dist/cli/index.js passphrase --words 6
91+
92+
# With separator and capitalization
93+
node dist/cli/index.js passphrase --words 6 --sep "-" --capitalize
94+
95+
# With digits
96+
node dist/cli/index.js passphrase --words 6 --add-digits
97+
```
98+
99+
### 3. Generate iCloud Password (`icloud`)
100+
101+
**Usage:**
102+
```bash
103+
node dist/cli/index.js icloud --count 5
104+
```
105+
106+
**Options:**
107+
- `--count <number>` - Number of passwords to generate (default: 1)
108+
- `--json` - Output in JSON format
109+
110+
**Example:**
111+
```bash
112+
node dist/cli/index.js icloud --count 5
113+
```
114+
115+
### 4. Generate User ID (`userid`)
116+
117+
**CVC Mode:**
118+
```bash
119+
node dist/cli/index.js userid --mode cvc --syllables 2 --count 10
120+
```
121+
122+
**Words Mode:**
123+
```bash
124+
node dist/cli/index.js userid --mode words --words-count 2 --count 10
125+
```
126+
127+
**Options:**
128+
- `--mode <mode>` - Mode: `cvc` or `words` (required)
129+
- `--syllables <number>` - Number of syllables (CVC mode, default: 2)
130+
- `--words-count <number>` - Number of words (Words mode, default: 2)
131+
- `--add-digits` - Add digits
132+
- `--digits-count <number>` - Number of digits (default: 2)
133+
- `--add-suffix` - Add suffix
134+
- `--suffix <string>` - Suffix text
135+
- `--max-length <number>` - Maximum length (default: 20)
136+
- `--count <number>` - Number of IDs to generate (default: 10)
137+
- `--json` - Output in JSON format
138+
139+
**Examples:**
140+
```bash
141+
# CVC user IDs
142+
node dist/cli/index.js userid --mode cvc --syllables 2 --count 10
143+
144+
# Words user IDs
145+
node dist/cli/index.js userid --mode words --words-count 2 --count 10
146+
147+
# With digits and suffix
148+
node dist/cli/index.js userid --mode cvc --syllables 2 --add-digits --digits-count 3 --add-suffix --suffix "dev" --count 5
149+
```
150+
151+
## JSON Output
152+
153+
Add `--json` flag to any command for machine-readable output:
154+
155+
```bash
156+
node dist/cli/index.js pwd --len 16 --json
157+
```
158+
159+
Output:
160+
```json
161+
{
162+
"value": "xK9#mP2$vL8@nQ4",
163+
"entropy": 95.3,
164+
"crackTime": {
165+
"cpu": 1234567890,
166+
"rtx4090": 123456,
167+
"rig8x4090": 12345,
168+
"datacenter": 1234
169+
}
170+
}
171+
```
172+
173+
## Hardware Profile for Crack Time
174+
175+
The CLI uses the default hardware profile for crack time estimation. The output shows crack time for:
176+
- CPU
177+
- RTX 4090
178+
- Rig (8x RTX 4090)
179+
- Datacenter
180+
181+
## Quick Test
182+
183+
After building, test the CLI:
184+
185+
```bash
186+
# Test password generation
187+
node dist/cli/index.js pwd --len 16
188+
189+
# Test passphrase
190+
node dist/cli/index.js passphrase --words 6
191+
192+
# Test iCloud
193+
node dist/cli/index.js icloud
194+
195+
# Test user ID
196+
node dist/cli/index.js userid --mode cvc --count 5
197+
```
198+
199+
## Troubleshooting
200+
201+
### "Cannot find module" error
202+
- Make sure you've run `npm run build` first
203+
- Check that `dist/cli/index.js` exists
204+
205+
### "Permission denied" error
206+
- The CLI file should have execute permissions (added by build script)
207+
- If not, run: `chmod +x dist/cli/index.js`
208+
209+
### "Command not found" (when using securegen)
210+
- Make sure you've run `npm link` first
211+
- Or use `node dist/cli/index.js` directly
212+
213+
## Examples
214+
215+
```bash
216+
# Generate a strong 20-character password
217+
node dist/cli/index.js pwd --len 20 --mode strong --lowercase --uppercase --digits --symbols
218+
219+
# Generate 5 passphrases with dashes
220+
node dist/cli/index.js passphrase --words 6 --sep "-" --count 5
221+
222+
# Generate 10 CVC user IDs with 3 digits
223+
node dist/cli/index.js userid --mode cvc --syllables 2 --add-digits --digits-count 3 --count 10
224+
225+
# Get JSON output
226+
node dist/cli/index.js pwd --len 16 --json
227+
```

‎FIX_CACHE.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Fix Browser Cache Issue
2+
3+
## The Problem
4+
Your browser is showing the old "Clear" button instead of "Reset Settings" because it's caching the old HTML/JS files.
5+
6+
## Solution 1: Hard Refresh (Try This First)
7+
8+
**Mac:**
9+
- `Cmd + Shift + R`
10+
- Or `Cmd + Option + R`
11+
12+
**Windows/Linux:**
13+
- `Ctrl + Shift + R`
14+
- Or `Ctrl + F5`
15+
16+
## Solution 2: Clear Browser Cache Completely
17+
18+
### Chrome/Edge:
19+
1. Press `F12` to open DevTools
20+
2. Right-click the refresh button (next to address bar)
21+
3. Select "Empty Cache and Hard Reload"
22+
23+
### Firefox:
24+
1. Press `F12` to open DevTools
25+
2. Go to Network tab
26+
3. Check "Disable cache"
27+
4. Refresh the page
28+
29+
### Safari:
30+
1. Press `Cmd + Option + E` to empty cache
31+
2. Then refresh
32+
33+
## Solution 3: Clear Site Data
34+
35+
1. Open DevTools (F12)
36+
2. Go to **Application** tab (Chrome) or **Storage** tab (Firefox)
37+
3. Click **Clear site data** or **Clear storage**
38+
4. Refresh the page
39+
40+
## Solution 4: Use Incognito/Private Mode
41+
42+
1. Open a new incognito/private window
43+
2. Navigate to your local server URL
44+
3. This bypasses all cache
45+
46+
## Solution 5: Verify You're Viewing the Right File
47+
48+
Make sure you're serving from `dist/`:
49+
50+
```bash
51+
npm run serve:dist
52+
```
53+
54+
Then open: `http://localhost:3000` (or the URL shown)
55+
56+
**DO NOT** open `index.html` directly from the file system (file://) - always use a local server.
57+
58+
## Verify the Fix
59+
60+
After clearing cache, you should see:
61+
- ✅ **Generate** (light gray button)
62+
- ✅ **Share** (light gray button)
63+
- ✅ **Reset Settings** (dark gray/blue button)
64+
65+
Both Password and User ID tabs should have the same button order.
66+
67+
## If Still Not Working
68+
69+
1. Close the browser completely
70+
2. Reopen it
71+
3. Navigate to your local server
72+
4. Do a hard refresh
73+
74+
The files are correct - this is 100% a browser cache issue.

‎index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7+
<meta http-equiv="Pragma" content="no-cache" />
8+
<meta http-equiv="Expires" content="0" />
69
<link rel="stylesheet" href="./styles.css" />
710
<title>Password Generator</title>
811
</head>
@@ -100,8 +103,8 @@ <h2>Password Generator</h2>
100103
</div>
101104

102105
<button type="button" id="generate">Generate</button>
103-
<button type="button" id="clear">Clear</button>
104106
<button type="button" id="share">Share</button>
107+
<button type="button" id="resetPasswordSettings" class="btn-secondary">Reset Settings</button>
105108

106109
<input type="text" id="password" readonly />
107110
<button type="button" id="copy">Copy</button>
@@ -219,12 +222,9 @@ <h2>User ID Generator</h2>
219222

220223
<div id="uidError" class="error"></div>
221224

222-
<button type="button" id="uidGenerateBtn">Generate User IDs</button>
225+
<button type="button" id="uidGenerateBtn">Generate</button>
223226
<button type="button" id="uidShare">Share</button>
224-
225-
<button type="button" id="resetUserIdSettings" class="btn-secondary">
226-
Reset Settings
227-
</button>
227+
<button type="button" id="resetUserIdSettings" class="btn-secondary">Reset Settings</button>
228228

229229
<div id="uidResults"></div>
230230
</div>

‎rebuild-now.sh‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#!/bin/bash
2+
cd /Users/alena/Password-Generator
3+
4+
echo "🔨 Rebuilding project..."
5+
npm run build
6+
7+
echo ""
8+
echo "✅ Build complete!"
9+
echo ""
10+
echo "Now refresh your browser with:"
11+
echo " Mac: Cmd + Shift + R"
12+
echo " Windows: Ctrl + Shift + R"
13+
echo ""
14+
echo "Or run: npm run serve:dist"

‎src/web/main.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function initElements(): AppElements {
4646

4747
// Buttons
4848
generateBtn: document.getElementById("generate") as HTMLButtonElement | null,
49-
clearBtn: document.getElementById("clear") as HTMLButtonElement | null,
49+
resetPasswordSettingsBtn: document.getElementById("resetPasswordSettings") as HTMLButtonElement | null,
5050
copyBtn: document.getElementById("copy") as HTMLButtonElement | null,
5151
shareBtn: document.getElementById("share") as HTMLButtonElement | null,
5252

@@ -150,14 +150,14 @@ function setupEventListeners(elements: AppElements, wordLists: WordLists): void
150150
console.error("Generate button not found!");
151151
}
152152

153-
if (elements.clearBtn) {
154-
elements.clearBtn.addEventListener("click", (e) => {
153+
if (elements.resetPasswordSettingsBtn) {
154+
elements.resetPasswordSettingsBtn.addEventListener("click", (e) => {
155155
e.preventDefault();
156156
e.stopPropagation();
157157
clearPasswordUI(elements);
158158
});
159159
} else {
160-
console.error("Clear button not found!");
160+
console.error("Reset Settings button not found!");
161161
}
162162

163163
if (elements.copyBtn) {

‎src/web/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export interface AppElements {
3535

3636
// Buttons
3737
generateBtn?: HTMLButtonElement | null;
38-
clearBtn?: HTMLButtonElement | null;
38+
resetPasswordSettingsBtn?: HTMLButtonElement | null;
3939
copyBtn?: HTMLButtonElement | null;
4040
shareBtn?: HTMLButtonElement | null;
4141

0 commit comments

Comments
 (0)