Skip to content

Commit 4fe4125

Browse files
BlankllBlankll
authored
Merge pull request #49 from geek-fun/chore/ssl-and-code-style
fix: auto-reconnect when table view loads with stale connection
2 parents 92fccb3 + 5764b3c commit 4fe4125

35 files changed

Lines changed: 2469 additions & 935 deletions

‎AGENTS.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,12 @@ state.tabs = tabs
8787

8888
**Module Boundaries**: Each module should export only via its `index.ts`; avoid deep imports.
8989
```typescript
90-
import { Button } from '@/components/ui/button'
91-
import { Button } from '@/components/ui/button/Button.vue'
92-
9390
// ✅ Correct
91+
import { Button } from '@/components/ui/button'
9492
import { useTabStore } from '@/store/tabStore'
93+
9594
// ❌ Avoid
95+
import { Button } from '@/components/ui/button/Button.vue'
9696
import { useTabStore } from '../store/tabStore'
9797
```
9898

‎docs/SSL_UI_DESIGN.md‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
# SSL/TLS Configuration UI Design
2+
3+
## Overview
4+
5+
Database-specific SSL configuration with dropdown selector + conditional fields.
6+
7+
---
8+
9+
## Shared Components
10+
11+
### SSL Mode Dropdown (All Databases)
12+
13+
```
14+
┌─────────────────────────────────────────────────────┐
15+
│ SSL/TLS Mode: [▼ Disable SSL ] │
16+
│ ├─ Disable SSL │
17+
│ ├─ Prefer SSL (try encryption) │
18+
│ ├─ Require SSL (always encrypt) │
19+
│ ├─ Verify CA (verify certificate) │
20+
│ └─ Verify Full (verify all) │
21+
└─────────────────────────────────────────────────────┘
22+
```
23+
24+
### Backend Value Mapping
25+
26+
| UI Label | Backend Value | Description |
27+
|----------|---------------|-------------|
28+
| Disable SSL | `disable` | No SSL/TLS encryption |
29+
| Prefer SSL | `prefer` | Try SSL, fallback to plain if unavailable |
30+
| Require SSL | `require` | SSL required, skip cert validation (self-signed OK) |
31+
| Verify CA | `verify-ca` | SSL required, verify server certificate |
32+
| Verify Full | `verify-full` | SSL required, verify certificate + hostname |
33+
34+
---
35+
36+
## PostgreSQL
37+
38+
### UI Layout
39+
40+
```
41+
┌───────────────────────────────────────────────────────────────┐
42+
│ SSL/TLS Mode: [▼ Require SSL (always encrypt) ] │
43+
└───────────────────────────────────────────────────────────────┘
44+
45+
▼ When "Verify CA" or "Verify Full" selected:
46+
47+
┌───────────────────────────────────────────────────────────────┐
48+
│ ┌─ Certificate Settings ─────────────────────────────────────┐│
49+
│ │ ││
50+
│ │ CA Certificate [________________] [Browse...] ││
51+
│ │ Client Certificate [________________] [Browse...] ││
52+
│ │ Client Private Key [________________] [Browse...] ││
53+
│ │ ││
54+
│ └────────────────────────────────────────────────────────────┘│
55+
└───────────────────────────────────────────────────────────────┘
56+
```
57+
58+
### Fields
59+
60+
| Field | Type | Shown When | Required |
61+
|-------|------|------------|----------|
62+
| SSL Mode | Select | Always | Yes |
63+
| CA Certificate | File path | `verify-ca` or `verify-full` | No (uses system trust store if empty) |
64+
| Client Certificate | File path | `verify-ca` or `verify-full` | No (for client auth) |
65+
| Client Private Key | File path | `verify-ca` or `verify-full` | No (for client auth) |
66+
67+
### Backend Properties
68+
69+
```typescript
70+
{
71+
sslMode: 'disable' | 'prefer' | 'require' | 'verify-ca' | 'verify-full',
72+
sslCaCert?: string, // Path to CA certificate
73+
sslClientCert?: string, // Path to client certificate
74+
sslClientKey?: string, // Path to client private key
75+
}
76+
```
77+
78+
---
79+
80+
## MySQL
81+
82+
### UI Layout
83+
84+
```
85+
┌───────────────────────────────────────────────────────────────┐
86+
│ SSL/TLS Mode: [▼ Require SSL (always encrypt) ] │
87+
└───────────────────────────────────────────────────────────────┘
88+
89+
▼ When "Verify CA" or "Verify Full" selected:
90+
91+
┌───────────────────────────────────────────────────────────────┐
92+
│ ┌─ Certificate Settings ─────────────────────────────────────┐│
93+
│ │ ││
94+
│ │ CA Certificate [________________] [Browse...] ││
95+
│ │ Client Certificate [________________] [Browse...] ││
96+
│ │ Client Private Key [________________] [Browse...] ││
97+
│ │ ││
98+
│ └────────────────────────────────────────────────────────────┘│
99+
└───────────────────────────────────────────────────────────────┘
100+
```
101+
102+
### Fields
103+
104+
Same as PostgreSQL (MySQL 8.0+ supports similar SSL modes)
105+
106+
---
107+
108+
## SQL Server
109+
110+
### UI Layout
111+
112+
```
113+
┌───────────────────────────────────────────────────────────────┐
114+
│ SSL/TLS Mode: [▼ Require SSL (always encrypt) ] │
115+
└───────────────────────────────────────────────────────────────┘
116+
117+
▼ When NOT "Disable SSL" selected:
118+
119+
┌───────────────────────────────────────────────────────────────┐
120+
│ ┌─ SSL Options ──────────────────────────────────────────────┐│
121+
│ │ ││
122+
│ │ ☐ Trust server certificate ││
123+
│ │ (Accept self-signed certificates) ││
124+
│ │ ││
125+
│ └────────────────────────────────────────────────────────────┘│
126+
└───────────────────────────────────────────────────────────────┘
127+
```
128+
129+
### Fields
130+
131+
| Field | Type | Shown When | Default |
132+
|-------|------|------------|---------|
133+
| SSL Mode | Select | Always | `prefer` |
134+
| Trust server certificate | Checkbox | `prefer`, `require` | unchecked |
135+
136+
### Backend Properties
137+
138+
```typescript
139+
{
140+
sslMode: 'disable' | 'prefer' | 'require' | 'verify-ca' | 'verify-full',
141+
trustServerCertificate?: boolean,
142+
}
143+
```
144+
145+
---
146+
147+
## SQLite
148+
149+
### UI Layout
150+
151+
```
152+
(No SSL configuration - SQLite is a local file database)
153+
```
154+
155+
**Note:** SQLite databases are local files, no network encryption needed.
156+
157+
---
158+
159+
## MariaDB
160+
161+
Same as MySQL.
162+
163+
---
164+
165+
## Implementation Plan
166+
167+
### Phase 1: Type Definitions
168+
169+
```typescript
170+
// src/types/connection.ts
171+
172+
export type SslMode = 'disable' | 'prefer' | 'require' | 'verify-ca' | 'verify-full'
173+
174+
export interface SslConfig {
175+
mode: SslMode
176+
// PostgreSQL / MySQL / MariaDB
177+
caCertPath?: string
178+
clientCertPath?: string
179+
clientKeyPath?: string
180+
// SQL Server
181+
trustServerCertificate?: boolean
182+
}
183+
184+
export interface ConnectionFormData {
185+
// ... existing fields
186+
ssl: SslConfig
187+
}
188+
```
189+
190+
### Phase 2: UI Components
191+
192+
```
193+
src/components/connections/
194+
├── ssl/
195+
│ ├── SslModeSelect.vue # Dropdown selector
196+
│ ├── SslCertFields.vue # Certificate file inputs (PG, MySQL)
197+
│ ├── SslSqlServerOptions.vue # Trust server cert checkbox
198+
│ └── SslConfigSection.vue # Composes based on DB type
199+
```
200+
201+
### Phase 3: Store Updates
202+
203+
- Replace `ssl: boolean` with `ssl: SslConfig`
204+
- Update `connectionStore.ts` to handle new structure
205+
- Update API calls to send `ssl_mode` + additional fields
206+
207+
### Phase 4: Backend Updates
208+
209+
- Update Rust `ConnectionConfig` to accept new SSL fields
210+
- Update database adapters to use certificate paths
211+
212+
---
213+
214+
## UI Behavior Matrix
215+
216+
| Database | Mode Selector | Cert Fields | Additional Options |
217+
|----------|---------------|-------------|-------------------|
218+
| PostgreSQL | ✅ All 5 modes | CA, Client Cert, Client Key | None |
219+
| MySQL | ✅ All 5 modes | CA, Client Cert, Client Key | None |
220+
| MariaDB | ✅ All 5 modes | CA, Client Cert, Client Key | None |
221+
| SQL Server | ✅ All 5 modes | None | Trust server cert |
222+
| SQLite | ❌ Hidden | None | None |
223+
224+
---
225+
226+
## Conditional Field Display Logic
227+
228+
```typescript
229+
const showCertFields = computed(() => {
230+
return ['verify-ca', 'verify-full'].includes(formData.ssl.mode)
231+
&& ['PostgreSQL', 'MySQL', 'MariaDB'].includes(formData.type)
232+
})
233+
234+
const showSqlServerOptions = computed(() => {
235+
return formData.ssl.mode !== 'disable'
236+
&& formData.type === 'SQLServer'
237+
})
238+
239+
const showSslSection = computed(() => {
240+
return formData.type !== 'SQLite'
241+
})
242+
```
243+
244+
---
245+
246+
## Default Values
247+
248+
| Database | Default SSL Mode | Reasoning |
249+
|----------|------------------|-----------|
250+
| PostgreSQL | `prefer` | Works with most servers, tries encryption |
251+
| MySQL | `prefer` | Same as PostgreSQL |
252+
| MariaDB | `prefer` | Same as MySQL |
253+
| SQL Server | `prefer` | Same approach |
254+
| SQLite | (hidden) | Local file, no SSL |
255+
256+
---
257+
258+
## i18n Labels
259+
260+
```json
261+
{
262+
"ssl.mode.disable": "Disable SSL",
263+
"ssl.mode.prefer": "Prefer SSL (try encryption)",
264+
"ssl.mode.require": "Require SSL (always encrypt)",
265+
"ssl.mode.verifyCa": "Verify CA (verify certificate)",
266+
"ssl.mode.verifyFull": "Verify Full (verify all)",
267+
268+
"ssl.caCert": "CA Certificate",
269+
"ssl.clientCert": "Client Certificate",
270+
"ssl.clientKey": "Client Private Key",
271+
"ssl.trustServerCert": "Trust server certificate",
272+
"ssl.trustServerCertHint": "Accept self-signed certificates"
273+
}
274+
```
275+
276+
---
277+
278+
## Questions for Consideration
279+
280+
1. **File browser**: Use native Tauri file dialog for certificate selection?
281+
2. **Certificate preview**: Show certificate details after selection?
282+
3. **Test connection**: Should test SSL connection during setup?
283+
4. **Migration**: How to migrate existing `ssl: boolean` connections?

‎eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default antfu({
2424
'**/node_modules/**',
2525
'**/.tauri/**',
2626
'AGENTS.md',
27+
'docs/**',
2728
],
2829
rules: {
2930
'no-console': 'warn',

0 commit comments

Comments
 (0)