shogun-button-react 1.3.43 → 1.3.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -33
- package/dist/index.d.ts +2 -0
- package/dist/index.js +3 -0
- package/package.json +2 -2
- package/dist/index.css +0 -756
package/README.md
CHANGED
|
@@ -8,7 +8,8 @@ A React component library for seamless integration of Shogun authentication into
|
|
|
8
8
|
- 🎨 Customizable UI components
|
|
9
9
|
- 🔒 Secure authentication flow
|
|
10
10
|
- 🌓 Dark mode support
|
|
11
|
-
- 🔌 Multiple authentication methods (Username/Password, MetaMask, WebAuthn)
|
|
11
|
+
- 🔌 Multiple authentication methods (Username/Password, MetaMask, WebAuthn, Nostr, OAuth)
|
|
12
|
+
- 🔑 Account backup and recovery (Gun pair export/import)
|
|
12
13
|
- 📱 Responsive design
|
|
13
14
|
- 🌍 TypeScript support
|
|
14
15
|
|
|
@@ -20,8 +21,8 @@ import {
|
|
|
20
21
|
ShogunButton,
|
|
21
22
|
ShogunButtonProvider,
|
|
22
23
|
shogunConnector,
|
|
23
|
-
} from "
|
|
24
|
-
import "
|
|
24
|
+
} from "shogun-button-react";
|
|
25
|
+
import "shogun-button-react/styles.css";
|
|
25
26
|
|
|
26
27
|
function App() {
|
|
27
28
|
const { sdk, options, setProvider } = shogunConnector({
|
|
@@ -66,62 +67,113 @@ The provider component that supplies Shogun context to your application.
|
|
|
66
67
|
|
|
67
68
|
| Name | Type | Description |
|
|
68
69
|
| --------------- | ------------------------ | ---------------------------------------------- |
|
|
69
|
-
| sdk |
|
|
70
|
+
| sdk | ShogunCore | Shogun SDK instance created by shogunConnector |
|
|
70
71
|
| options | Object | Configuration options |
|
|
71
|
-
| onLoginSuccess | (data:
|
|
72
|
-
| onSignupSuccess | (data:
|
|
72
|
+
| onLoginSuccess | (data: { userPub: string; username: string; password?: string; authMethod?: string }) => void | Callback fired on successful login |
|
|
73
|
+
| onSignupSuccess | (data: { userPub: string; username: string; password?: string; authMethod?: string }) => void | Callback fired on successful signup |
|
|
73
74
|
| onError | (error: Error) => void | Callback fired when an error occurs |
|
|
74
75
|
|
|
75
76
|
### ShogunButton
|
|
76
77
|
|
|
77
|
-
The main button component for triggering Shogun authentication.
|
|
78
|
-
|
|
79
|
-
#### Custom Button
|
|
80
|
-
|
|
81
|
-
You can customize the button appearance using `ShogunButton.Custom`:
|
|
82
|
-
|
|
83
|
-
```tsx
|
|
84
|
-
<ShogunButton.Custom>
|
|
85
|
-
{({ ready, authenticate }) => (
|
|
86
|
-
<button
|
|
87
|
-
className="my-custom-button"
|
|
88
|
-
disabled={!ready}
|
|
89
|
-
onClick={authenticate}
|
|
90
|
-
>
|
|
91
|
-
Connect with Shogun
|
|
92
|
-
</button>
|
|
93
|
-
)}
|
|
94
|
-
</ShogunButton.Custom>
|
|
95
|
-
```
|
|
78
|
+
The main button component for triggering Shogun authentication. The component provides a complete authentication UI with modal dialogs for login and signup.
|
|
96
79
|
|
|
97
80
|
### useShogun Hook
|
|
98
81
|
|
|
99
82
|
A hook to access Shogun authentication state and functions.
|
|
100
83
|
|
|
101
84
|
```tsx
|
|
102
|
-
import {
|
|
85
|
+
import React, { useEffect } from "react";
|
|
86
|
+
import { useShogun } from "shogun-button-react";
|
|
103
87
|
|
|
104
88
|
function Profile() {
|
|
105
89
|
const {
|
|
106
|
-
|
|
107
|
-
|
|
90
|
+
isLoggedIn,
|
|
91
|
+
userPub,
|
|
92
|
+
username,
|
|
108
93
|
login,
|
|
109
94
|
signup,
|
|
110
95
|
logout,
|
|
111
|
-
connectWithMetaMask,
|
|
112
|
-
connectWithWebAuthn,
|
|
113
96
|
setProvider,
|
|
97
|
+
hasPlugin,
|
|
98
|
+
getPlugin,
|
|
99
|
+
exportGunPair,
|
|
100
|
+
importGunPair,
|
|
101
|
+
observe,
|
|
114
102
|
} = useShogun();
|
|
115
103
|
|
|
104
|
+
const handleLogin = async () => {
|
|
105
|
+
// Login with username/password
|
|
106
|
+
await login("password", "username", "password");
|
|
107
|
+
|
|
108
|
+
// Or login with MetaMask
|
|
109
|
+
await login("web3");
|
|
110
|
+
|
|
111
|
+
// Or login with WebAuthn
|
|
112
|
+
await login("webauthn", "username");
|
|
113
|
+
|
|
114
|
+
// Or login with Nostr
|
|
115
|
+
await login("nostr");
|
|
116
|
+
|
|
117
|
+
// Or login with OAuth
|
|
118
|
+
await login("oauth", "google");
|
|
119
|
+
|
|
120
|
+
// Or login with Gun pair (for account recovery)
|
|
121
|
+
const pairData = { /* Gun pair object */ };
|
|
122
|
+
await login("pair", pairData);
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
const handleSignUp = async () => {
|
|
126
|
+
// Sign up with username/password
|
|
127
|
+
await signup("password", "newusername", "newpassword");
|
|
128
|
+
|
|
129
|
+
// Or sign up with other methods (similar to login)
|
|
130
|
+
await signup("web3");
|
|
131
|
+
await signup("webauthn", "newusername");
|
|
132
|
+
};
|
|
133
|
+
|
|
116
134
|
const switchToCustomNetwork = () => {
|
|
117
135
|
setProvider('https://my-custom-rpc.example.com');
|
|
118
136
|
};
|
|
119
137
|
|
|
120
|
-
|
|
138
|
+
const handleExportPair = async () => {
|
|
139
|
+
try {
|
|
140
|
+
const pairData = await exportGunPair("optional-encryption-password");
|
|
141
|
+
console.log("Exported pair:", pairData);
|
|
142
|
+
// Save this data securely for account recovery
|
|
143
|
+
} catch (error) {
|
|
144
|
+
console.error("Export failed:", error);
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
const handleImportPair = async () => {
|
|
149
|
+
try {
|
|
150
|
+
const success = await importGunPair(savedPairData, "optional-password");
|
|
151
|
+
if (success) {
|
|
152
|
+
console.log("Pair imported successfully");
|
|
153
|
+
}
|
|
154
|
+
} catch (error) {
|
|
155
|
+
console.error("Import failed:", error);
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
// Observe reactive data changes
|
|
160
|
+
useEffect(() => {
|
|
161
|
+
if (isLoggedIn) {
|
|
162
|
+
const subscription = observe<any>('user/profile').subscribe(data => {
|
|
163
|
+
console.log('Profile data updated:', data);
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
return () => subscription.unsubscribe();
|
|
167
|
+
}
|
|
168
|
+
}, [isLoggedIn, observe]);
|
|
169
|
+
|
|
170
|
+
return isLoggedIn ? (
|
|
121
171
|
<div>
|
|
122
|
-
<h2>Welcome, {
|
|
172
|
+
<h2>Welcome, {username}!</h2>
|
|
173
|
+
<p>User Public Key: {userPub}</p>
|
|
123
174
|
<button onClick={logout}>Logout</button>
|
|
124
175
|
<button onClick={switchToCustomNetwork}>Switch Network</button>
|
|
176
|
+
<button onClick={handleExportPair}>Export Account</button>
|
|
125
177
|
</div>
|
|
126
178
|
) : (
|
|
127
179
|
<div>Please login to continue</div>
|
|
@@ -135,17 +187,43 @@ The `shogunConnector` accepts the following options:
|
|
|
135
187
|
|
|
136
188
|
```typescript
|
|
137
189
|
interface ShogunConnectorOptions {
|
|
190
|
+
// App information
|
|
138
191
|
appName: string;
|
|
139
192
|
appDescription?: string;
|
|
140
193
|
appUrl?: string;
|
|
141
194
|
appIcon?: string;
|
|
195
|
+
|
|
196
|
+
// Feature toggles
|
|
142
197
|
showMetamask?: boolean;
|
|
143
198
|
showWebauthn?: boolean;
|
|
199
|
+
showNostr?: boolean;
|
|
200
|
+
showOauth?: boolean;
|
|
144
201
|
darkMode?: boolean;
|
|
202
|
+
|
|
203
|
+
// Network configuration
|
|
145
204
|
websocketSecure?: boolean;
|
|
146
|
-
didRegistryAddress?: string | null;
|
|
147
205
|
providerUrl?: string | null;
|
|
148
206
|
peers?: string[];
|
|
207
|
+
authToken?: string;
|
|
208
|
+
gunInstance?: IGunInstance<any>;
|
|
209
|
+
|
|
210
|
+
// Advanced options
|
|
211
|
+
logging?: {
|
|
212
|
+
enabled: boolean;
|
|
213
|
+
level: "error" | "warning" | "info" | "debug";
|
|
214
|
+
};
|
|
215
|
+
timeouts?: {
|
|
216
|
+
login?: number;
|
|
217
|
+
signup?: number;
|
|
218
|
+
operation?: number;
|
|
219
|
+
};
|
|
220
|
+
oauth?: {
|
|
221
|
+
providers: Record<string, {
|
|
222
|
+
clientId: string;
|
|
223
|
+
clientSecret?: string;
|
|
224
|
+
redirectUri?: string;
|
|
225
|
+
}>
|
|
226
|
+
}
|
|
149
227
|
}
|
|
150
228
|
```
|
|
151
229
|
|
|
@@ -157,6 +235,8 @@ interface ShogunConnectorResult {
|
|
|
157
235
|
options: ShogunConnectorOptions;
|
|
158
236
|
setProvider: (provider: string | EthersProvider) => boolean;
|
|
159
237
|
getCurrentProviderUrl: () => string | null;
|
|
238
|
+
registerPlugin: (plugin: any) => boolean;
|
|
239
|
+
hasPlugin: (name: string) => boolean;
|
|
160
240
|
}
|
|
161
241
|
```
|
|
162
242
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { ShogunButton, ShogunButtonProvider, useShogun } from './components/ShogunButton.js';
|
|
2
2
|
import { ShogunConnectorOptions, ShogunConnectorResult } from './types/connector-options.js';
|
|
3
|
+
import { shogunConnector } from './connector.js';
|
|
3
4
|
export { ShogunButton, ShogunButtonProvider, useShogun };
|
|
5
|
+
export { shogunConnector };
|
|
4
6
|
export * from './types/index.js';
|
|
5
7
|
export { ShogunConnectorOptions, ShogunConnectorResult };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { ShogunButton, ShogunButtonProvider, useShogun } from './components/ShogunButton.js';
|
|
2
|
+
import { shogunConnector } from './connector.js';
|
|
2
3
|
// Export components
|
|
3
4
|
export { ShogunButton, ShogunButtonProvider, useShogun };
|
|
5
|
+
// Export connector function
|
|
6
|
+
export { shogunConnector };
|
|
4
7
|
// Export all types
|
|
5
8
|
export * from './types/index.js';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "shogun-button-react",
|
|
3
3
|
"description": "Shogun connector button",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.90",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"src/styles/index.css"
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"ethers": "^6.13.5",
|
|
35
35
|
"prettier": "^3.5.3",
|
|
36
36
|
"rxjs": "^7.8.1",
|
|
37
|
-
"shogun-core": "
|
|
37
|
+
"shogun-core": "^1.3.9"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"react": "^18.0.0",
|
package/dist/index.css
DELETED
|
@@ -1,756 +0,0 @@
|
|
|
1
|
-
/* Base styles */
|
|
2
|
-
:root {
|
|
3
|
-
--shogun-primary: #3b82f6;
|
|
4
|
-
--shogun-primary-hover: #2563eb;
|
|
5
|
-
--shogun-secondary: #6b7280;
|
|
6
|
-
--shogun-success: #10b981;
|
|
7
|
-
--shogun-danger: #ef4444;
|
|
8
|
-
--shogun-warning: #f59e0b;
|
|
9
|
-
--shogun-text: #1f2937;
|
|
10
|
-
--shogun-text-secondary: #6b7280;
|
|
11
|
-
--shogun-bg: #ffffff;
|
|
12
|
-
--shogun-bg-secondary: #f3f4f6;
|
|
13
|
-
--shogun-border: #e5e7eb;
|
|
14
|
-
--shogun-border-radius: 12px;
|
|
15
|
-
--shogun-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
16
|
-
--shogun-transition: all 0.2s ease;
|
|
17
|
-
--shogun-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/* Dark mode support */
|
|
21
|
-
@media (prefers-color-scheme: dark) {
|
|
22
|
-
:root {
|
|
23
|
-
--shogun-text: #f3f4f6;
|
|
24
|
-
--shogun-text-secondary: #9ca3af;
|
|
25
|
-
--shogun-bg: #1f2937;
|
|
26
|
-
--shogun-bg-secondary: #374151;
|
|
27
|
-
--shogun-border: #4b5563;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* Connect Button */
|
|
32
|
-
.shogun-connect-button {
|
|
33
|
-
display: flex;
|
|
34
|
-
align-items: center;
|
|
35
|
-
justify-content: center;
|
|
36
|
-
gap: 8px;
|
|
37
|
-
background-color: var(--shogun-primary);
|
|
38
|
-
color: white;
|
|
39
|
-
border: none;
|
|
40
|
-
border-radius: var(--shogun-border-radius);
|
|
41
|
-
padding: 10px 16px;
|
|
42
|
-
font-family: var(--shogun-font);
|
|
43
|
-
font-weight: 600;
|
|
44
|
-
font-size: 14px;
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
transition: var(--shogun-transition);
|
|
47
|
-
box-shadow: var(--shogun-shadow);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.shogun-connect-button:hover {
|
|
51
|
-
background-color: var(--shogun-primary-hover);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.shogun-connect-button:focus {
|
|
55
|
-
outline: none;
|
|
56
|
-
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* Logged in state */
|
|
60
|
-
.shogun-logged-in-container {
|
|
61
|
-
position: relative;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.shogun-dropdown {
|
|
65
|
-
position: relative;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.shogun-button.shogun-logged-in {
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: center;
|
|
71
|
-
gap: 8px;
|
|
72
|
-
background-color: var(--shogun-bg-secondary);
|
|
73
|
-
color: var(--shogun-text);
|
|
74
|
-
border: 1px solid var(--shogun-border);
|
|
75
|
-
border-radius: var(--shogun-border-radius);
|
|
76
|
-
padding: 8px 12px;
|
|
77
|
-
font-family: var(--shogun-font);
|
|
78
|
-
font-size: 14px;
|
|
79
|
-
cursor: pointer;
|
|
80
|
-
transition: var(--shogun-transition);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.shogun-button.shogun-logged-in:hover {
|
|
84
|
-
background-color: var(--shogun-bg);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.shogun-avatar {
|
|
88
|
-
width: 24px;
|
|
89
|
-
height: 24px;
|
|
90
|
-
background-color: var(--shogun-primary);
|
|
91
|
-
color: white;
|
|
92
|
-
border-radius: 50%;
|
|
93
|
-
display: flex;
|
|
94
|
-
align-items: center;
|
|
95
|
-
justify-content: center;
|
|
96
|
-
font-weight: 600;
|
|
97
|
-
font-size: 12px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.shogun-username {
|
|
101
|
-
font-weight: 500;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.shogun-dropdown-menu {
|
|
105
|
-
position: absolute;
|
|
106
|
-
top: calc(100% + 8px);
|
|
107
|
-
right: 0;
|
|
108
|
-
background-color: var(--shogun-bg);
|
|
109
|
-
border: 1px solid var(--shogun-border);
|
|
110
|
-
border-radius: var(--shogun-border-radius);
|
|
111
|
-
box-shadow: var(--shogun-shadow);
|
|
112
|
-
width: 240px;
|
|
113
|
-
z-index: 100;
|
|
114
|
-
overflow: hidden;
|
|
115
|
-
animation: shogun-dropdown-fade 0.2s ease;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
@keyframes shogun-dropdown-fade {
|
|
119
|
-
from {
|
|
120
|
-
opacity: 0;
|
|
121
|
-
transform: translateY(-8px);
|
|
122
|
-
}
|
|
123
|
-
to {
|
|
124
|
-
opacity: 1;
|
|
125
|
-
transform: translateY(0);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.shogun-dropdown-header {
|
|
130
|
-
padding: 16px;
|
|
131
|
-
border-bottom: 1px solid var(--shogun-border);
|
|
132
|
-
display: flex;
|
|
133
|
-
align-items: center;
|
|
134
|
-
gap: 12px;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.shogun-avatar-large {
|
|
138
|
-
width: 40px;
|
|
139
|
-
height: 40px;
|
|
140
|
-
background-color: var(--shogun-primary);
|
|
141
|
-
color: white;
|
|
142
|
-
border-radius: 50%;
|
|
143
|
-
display: flex;
|
|
144
|
-
align-items: center;
|
|
145
|
-
justify-content: center;
|
|
146
|
-
font-weight: 600;
|
|
147
|
-
font-size: 16px;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.shogun-user-info {
|
|
151
|
-
display: flex;
|
|
152
|
-
flex-direction: column;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.shogun-username-full {
|
|
156
|
-
font-weight: 600;
|
|
157
|
-
color: var(--shogun-text);
|
|
158
|
-
font-size: 14px;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.shogun-dropdown-item {
|
|
162
|
-
padding: 12px 16px;
|
|
163
|
-
display: flex;
|
|
164
|
-
align-items: center;
|
|
165
|
-
gap: 12px;
|
|
166
|
-
color: var(--shogun-text);
|
|
167
|
-
font-size: 14px;
|
|
168
|
-
cursor: pointer;
|
|
169
|
-
transition: var(--shogun-transition);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.shogun-dropdown-item:hover {
|
|
173
|
-
background-color: var(--shogun-bg-secondary);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
/* Modal */
|
|
177
|
-
.shogun-modal-overlay {
|
|
178
|
-
position: fixed;
|
|
179
|
-
top: 0;
|
|
180
|
-
left: 0;
|
|
181
|
-
right: 0;
|
|
182
|
-
bottom: 0;
|
|
183
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
184
|
-
display: flex;
|
|
185
|
-
align-items: center;
|
|
186
|
-
justify-content: center;
|
|
187
|
-
z-index: 1000;
|
|
188
|
-
animation: shogun-fade-in 0.2s ease;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
@keyframes shogun-fade-in {
|
|
192
|
-
from {
|
|
193
|
-
opacity: 0;
|
|
194
|
-
}
|
|
195
|
-
to {
|
|
196
|
-
opacity: 1;
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.shogun-modal {
|
|
201
|
-
background-color: var(--shogun-bg);
|
|
202
|
-
border-radius: var(--shogun-border-radius);
|
|
203
|
-
box-shadow: var(--shogun-shadow);
|
|
204
|
-
width: 90%;
|
|
205
|
-
max-width: 400px;
|
|
206
|
-
max-height: 90vh;
|
|
207
|
-
overflow-y: auto;
|
|
208
|
-
animation: shogun-scale-in 0.2s ease;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
@keyframes shogun-scale-in {
|
|
212
|
-
from {
|
|
213
|
-
opacity: 0;
|
|
214
|
-
transform: scale(0.95);
|
|
215
|
-
}
|
|
216
|
-
to {
|
|
217
|
-
opacity: 1;
|
|
218
|
-
transform: scale(1);
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.shogun-modal-header {
|
|
223
|
-
display: flex;
|
|
224
|
-
justify-content: space-between;
|
|
225
|
-
align-items: center;
|
|
226
|
-
padding: 16px 20px;
|
|
227
|
-
border-bottom: 1px solid var(--shogun-border);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.shogun-modal-header h2 {
|
|
231
|
-
margin: 0;
|
|
232
|
-
font-size: 1.5rem;
|
|
233
|
-
font-weight: 600;
|
|
234
|
-
color: #111827;
|
|
235
|
-
text-align: center;
|
|
236
|
-
width: 100%;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.shogun-close-button {
|
|
240
|
-
background: none;
|
|
241
|
-
border: none;
|
|
242
|
-
cursor: pointer;
|
|
243
|
-
color: var(--shogun-text-secondary);
|
|
244
|
-
padding: 4px;
|
|
245
|
-
display: flex;
|
|
246
|
-
align-items: center;
|
|
247
|
-
justify-content: center;
|
|
248
|
-
border-radius: 50%;
|
|
249
|
-
transition: var(--shogun-transition);
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.shogun-close-button:hover {
|
|
253
|
-
background-color: var(--shogun-bg-secondary);
|
|
254
|
-
color: var(--shogun-text);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.shogun-modal-content {
|
|
258
|
-
padding: 20px;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
/* Auth options */
|
|
262
|
-
.shogun-auth-options {
|
|
263
|
-
display: flex;
|
|
264
|
-
flex-direction: column;
|
|
265
|
-
gap: 12px;
|
|
266
|
-
margin-bottom: 24px;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.shogun-auth-option-button {
|
|
270
|
-
display: flex;
|
|
271
|
-
align-items: center;
|
|
272
|
-
justify-content: center;
|
|
273
|
-
gap: 12px;
|
|
274
|
-
background-color: var(--shogun-bg);
|
|
275
|
-
color: var(--shogun-text);
|
|
276
|
-
border: 1px solid var(--shogun-border);
|
|
277
|
-
border-radius: var(--shogun-border-radius);
|
|
278
|
-
padding: 12px 16px;
|
|
279
|
-
font-family: var(--shogun-font);
|
|
280
|
-
font-weight: 500;
|
|
281
|
-
font-size: 14px;
|
|
282
|
-
cursor: pointer;
|
|
283
|
-
transition: var(--shogun-transition);
|
|
284
|
-
width: 100%;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
.shogun-auth-option-button:hover {
|
|
288
|
-
background-color: var(--shogun-bg-secondary);
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.shogun-auth-option-button:disabled {
|
|
292
|
-
opacity: 0.6;
|
|
293
|
-
cursor: not-allowed;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.shogun-google-button {
|
|
297
|
-
border-color: #4285F4;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
/* Divider */
|
|
301
|
-
.shogun-divider {
|
|
302
|
-
display: flex;
|
|
303
|
-
align-items: center;
|
|
304
|
-
margin: 20px 0;
|
|
305
|
-
color: var(--shogun-text-secondary);
|
|
306
|
-
font-size: 14px;
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
.shogun-divider::before,
|
|
310
|
-
.shogun-divider::after {
|
|
311
|
-
content: "";
|
|
312
|
-
flex: 1;
|
|
313
|
-
border-bottom: 1px solid var(--shogun-border);
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
.shogun-divider span {
|
|
317
|
-
padding: 0 10px;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
/* Form */
|
|
321
|
-
.shogun-auth-form {
|
|
322
|
-
display: flex;
|
|
323
|
-
flex-direction: column;
|
|
324
|
-
gap: 16px;
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
.shogun-form-group {
|
|
328
|
-
display: flex;
|
|
329
|
-
flex-direction: column;
|
|
330
|
-
gap: 8px;
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
.shogun-form-group label {
|
|
334
|
-
display: flex;
|
|
335
|
-
align-items: center;
|
|
336
|
-
gap: 8px;
|
|
337
|
-
font-size: 14px;
|
|
338
|
-
font-weight: 500;
|
|
339
|
-
color: var(--shogun-text);
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
.shogun-form-group input {
|
|
343
|
-
padding: 12px;
|
|
344
|
-
border: 1px solid var(--shogun-border);
|
|
345
|
-
border-radius: var(--shogun-border-radius);
|
|
346
|
-
background-color: var(--shogun-bg);
|
|
347
|
-
color: var(--shogun-text);
|
|
348
|
-
font-size: 14px;
|
|
349
|
-
transition: var(--shogun-transition);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.shogun-form-group input:focus {
|
|
353
|
-
outline: none;
|
|
354
|
-
border-color: var(--shogun-primary);
|
|
355
|
-
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.shogun-submit-button {
|
|
359
|
-
background-color: var(--shogun-primary);
|
|
360
|
-
color: white;
|
|
361
|
-
border: none;
|
|
362
|
-
border-radius: var(--shogun-border-radius);
|
|
363
|
-
padding: 12px 16px;
|
|
364
|
-
font-family: var(--shogun-font);
|
|
365
|
-
font-weight: 600;
|
|
366
|
-
font-size: 14px;
|
|
367
|
-
cursor: pointer;
|
|
368
|
-
transition: var(--shogun-transition);
|
|
369
|
-
margin-top: 8px;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.shogun-submit-button:hover:not(:disabled) {
|
|
373
|
-
background-color: var(--shogun-primary-hover);
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
.shogun-submit-button:disabled {
|
|
377
|
-
opacity: 0.6;
|
|
378
|
-
cursor: not-allowed;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
/* Footer */
|
|
382
|
-
.shogun-form-footer {
|
|
383
|
-
margin-top: 20px;
|
|
384
|
-
text-align: center;
|
|
385
|
-
font-size: 14px;
|
|
386
|
-
color: var(--shogun-text-secondary);
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
.shogun-toggle-mode {
|
|
390
|
-
background: none;
|
|
391
|
-
border: none;
|
|
392
|
-
color: var(--shogun-primary);
|
|
393
|
-
font-weight: 600;
|
|
394
|
-
cursor: pointer;
|
|
395
|
-
padding: 0;
|
|
396
|
-
margin-left: 4px;
|
|
397
|
-
transition: var(--shogun-transition);
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.shogun-toggle-mode:hover {
|
|
401
|
-
text-decoration: underline;
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
.shogun-toggle-mode:disabled {
|
|
405
|
-
opacity: 0.6;
|
|
406
|
-
cursor: not-allowed;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
/* Error message */
|
|
410
|
-
.shogun-error-message {
|
|
411
|
-
background-color: rgba(239, 68, 68, 0.1);
|
|
412
|
-
color: var(--shogun-danger);
|
|
413
|
-
padding: 12px;
|
|
414
|
-
border-radius: var(--shogun-border-radius);
|
|
415
|
-
margin-bottom: 16px;
|
|
416
|
-
font-size: 14px;
|
|
417
|
-
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
/* Shogun Button Styles */
|
|
421
|
-
|
|
422
|
-
.shogun-button {
|
|
423
|
-
display: flex;
|
|
424
|
-
align-items: center;
|
|
425
|
-
justify-content: center;
|
|
426
|
-
padding: 12px 20px;
|
|
427
|
-
background-color: #3861fb;
|
|
428
|
-
color: white;
|
|
429
|
-
border: none;
|
|
430
|
-
border-radius: 8px;
|
|
431
|
-
font-size: 16px;
|
|
432
|
-
font-weight: 600;
|
|
433
|
-
cursor: pointer;
|
|
434
|
-
transition: all 0.2s ease;
|
|
435
|
-
min-width: 150px;
|
|
436
|
-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.shogun-button:hover {
|
|
440
|
-
background-color: #2d4fd6;
|
|
441
|
-
transform: translateY(-1px);
|
|
442
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
.shogun-button:active {
|
|
446
|
-
transform: translateY(0);
|
|
447
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
.shogun-button.shogun-logged-in {
|
|
451
|
-
background-color: #4CAF50;
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
.shogun-button.shogun-logged-in:hover {
|
|
455
|
-
background-color: #43a047;
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
.shogun-button-custom {
|
|
459
|
-
cursor: pointer;
|
|
460
|
-
display: inline-flex;
|
|
461
|
-
align-items: center;
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
/* Tema scuro */
|
|
465
|
-
[data-shogun-theme="dark"] .shogun-button {
|
|
466
|
-
background-color: #4a5568;
|
|
467
|
-
color: white;
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
[data-shogun-theme="dark"] .shogun-button:hover {
|
|
471
|
-
background-color: #2d3748;
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
[data-shogun-theme="dark"] .shogun-button.shogun-logged-in {
|
|
475
|
-
background-color: #38a169;
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
[data-shogun-theme="dark"] .shogun-button.shogun-logged-in:hover {
|
|
479
|
-
background-color: #2f855a;
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
/* Stili per il modale di login/registrazione */
|
|
483
|
-
.shogun-modal-overlay {
|
|
484
|
-
position: fixed;
|
|
485
|
-
top: 0;
|
|
486
|
-
left: 0;
|
|
487
|
-
width: 100%;
|
|
488
|
-
height: 100%;
|
|
489
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
490
|
-
display: flex;
|
|
491
|
-
justify-content: center;
|
|
492
|
-
align-items: center;
|
|
493
|
-
z-index: 1000;
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
.shogun-modal {
|
|
497
|
-
background-color: white;
|
|
498
|
-
border-radius: 8px;
|
|
499
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
500
|
-
width: 100%;
|
|
501
|
-
max-width: 420px;
|
|
502
|
-
overflow: hidden;
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
.shogun-modal-header {
|
|
506
|
-
display: flex;
|
|
507
|
-
justify-content: space-between;
|
|
508
|
-
align-items: center;
|
|
509
|
-
padding: 16px 20px;
|
|
510
|
-
border-bottom: 1px solid #e0e0e0;
|
|
511
|
-
}
|
|
512
|
-
|
|
513
|
-
.shogun-modal-header h2 {
|
|
514
|
-
margin: 0;
|
|
515
|
-
font-size: 20px;
|
|
516
|
-
font-weight: 600;
|
|
517
|
-
color: #333;
|
|
518
|
-
}
|
|
519
|
-
|
|
520
|
-
.shogun-close-button {
|
|
521
|
-
background: none;
|
|
522
|
-
border: none;
|
|
523
|
-
font-size: 24px;
|
|
524
|
-
color: #666;
|
|
525
|
-
cursor: pointer;
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
.shogun-modal-content {
|
|
529
|
-
padding: 20px;
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
.shogun-error-message {
|
|
533
|
-
background-color: #ffebee;
|
|
534
|
-
color: #d32f2f;
|
|
535
|
-
border-radius: 4px;
|
|
536
|
-
padding: 10px;
|
|
537
|
-
margin-bottom: 16px;
|
|
538
|
-
font-size: 14px;
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
.shogun-form-group {
|
|
542
|
-
margin-bottom: 16px;
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
.shogun-form-group label {
|
|
546
|
-
display: block;
|
|
547
|
-
margin-bottom: 6px;
|
|
548
|
-
font-size: 14px;
|
|
549
|
-
font-weight: 500;
|
|
550
|
-
color: #333;
|
|
551
|
-
}
|
|
552
|
-
|
|
553
|
-
.shogun-form-group input {
|
|
554
|
-
width: 100%;
|
|
555
|
-
padding: 10px 12px;
|
|
556
|
-
border: 1px solid #ccc;
|
|
557
|
-
border-radius: 4px;
|
|
558
|
-
font-size: 14px;
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
.shogun-submit-button {
|
|
562
|
-
width: 100%;
|
|
563
|
-
background-color: #4a2afd;
|
|
564
|
-
color: white;
|
|
565
|
-
border: none;
|
|
566
|
-
border-radius: 4px;
|
|
567
|
-
padding: 12px;
|
|
568
|
-
font-size: 16px;
|
|
569
|
-
font-weight: 600;
|
|
570
|
-
cursor: pointer;
|
|
571
|
-
transition: background-color 0.2s;
|
|
572
|
-
margin-top: 8px;
|
|
573
|
-
}
|
|
574
|
-
|
|
575
|
-
.shogun-submit-button:hover {
|
|
576
|
-
background-color: #3115d6;
|
|
577
|
-
}
|
|
578
|
-
|
|
579
|
-
.shogun-submit-button:disabled {
|
|
580
|
-
background-color: #a9a9a9;
|
|
581
|
-
cursor: not-allowed;
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
.shogun-divider {
|
|
585
|
-
display: flex;
|
|
586
|
-
align-items: center;
|
|
587
|
-
text-align: center;
|
|
588
|
-
margin: 16px 0;
|
|
589
|
-
color: #666;
|
|
590
|
-
font-size: 14px;
|
|
591
|
-
}
|
|
592
|
-
|
|
593
|
-
.shogun-divider::before,
|
|
594
|
-
.shogun-divider::after {
|
|
595
|
-
content: '';
|
|
596
|
-
flex: 1;
|
|
597
|
-
border-bottom: 1px solid #e0e0e0;
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
.shogun-divider::before {
|
|
601
|
-
margin-right: 10px;
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
.shogun-divider::after {
|
|
605
|
-
margin-left: 10px;
|
|
606
|
-
}
|
|
607
|
-
|
|
608
|
-
.shogun-metamask-button,
|
|
609
|
-
.shogun-webauthn-button,
|
|
610
|
-
.shogun-nostr-button,
|
|
611
|
-
.shogun-oauth-button {
|
|
612
|
-
width: 100%;
|
|
613
|
-
background-color: #fff;
|
|
614
|
-
color: #333;
|
|
615
|
-
border: 1px solid #ccc;
|
|
616
|
-
border-radius: 4px;
|
|
617
|
-
padding: 12px;
|
|
618
|
-
font-size: 14px;
|
|
619
|
-
font-weight: 500;
|
|
620
|
-
cursor: pointer;
|
|
621
|
-
transition: background-color 0.2s;
|
|
622
|
-
margin-bottom: 8px;
|
|
623
|
-
display: flex;
|
|
624
|
-
align-items: center;
|
|
625
|
-
justify-content: center;
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
.shogun-metamask-button:hover,
|
|
629
|
-
.shogun-webauthn-button:hover,
|
|
630
|
-
.shogun-nostr-button:hover,
|
|
631
|
-
.shogun-oauth-button:hover {
|
|
632
|
-
background-color: #f5f5f5;
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
.shogun-metamask-button:disabled,
|
|
636
|
-
.shogun-webauthn-button:disabled,
|
|
637
|
-
.shogun-nostr-button:disabled,
|
|
638
|
-
.shogun-oauth-button:disabled {
|
|
639
|
-
background-color: #f5f5f5;
|
|
640
|
-
color: #a9a9a9;
|
|
641
|
-
cursor: not-allowed;
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
.shogun-form-footer {
|
|
645
|
-
text-align: center;
|
|
646
|
-
margin-top: 16px;
|
|
647
|
-
font-size: 14px;
|
|
648
|
-
color: #666;
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
.shogun-toggle-mode {
|
|
652
|
-
background: none;
|
|
653
|
-
border: none;
|
|
654
|
-
color: #4a2afd;
|
|
655
|
-
font-weight: 600;
|
|
656
|
-
cursor: pointer;
|
|
657
|
-
padding: 0;
|
|
658
|
-
margin-left: 4px;
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
.shogun-toggle-mode:disabled {
|
|
662
|
-
color: #a9a9a9;
|
|
663
|
-
cursor: not-allowed;
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
/* Stili per i container DID */
|
|
667
|
-
.shogun-logged-in-container {
|
|
668
|
-
display: flex;
|
|
669
|
-
flex-direction: column;
|
|
670
|
-
align-items: center;
|
|
671
|
-
gap: 10px;
|
|
672
|
-
}
|
|
673
|
-
|
|
674
|
-
.shogun-did-container {
|
|
675
|
-
max-width: 100%;
|
|
676
|
-
padding: 10px;
|
|
677
|
-
background-color: #f5f5f5;
|
|
678
|
-
border-radius: 5px;
|
|
679
|
-
margin-top: 5px;
|
|
680
|
-
word-break: break-all;
|
|
681
|
-
text-align: center;
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
.shogun-did-text {
|
|
685
|
-
font-size: 12px;
|
|
686
|
-
color: #555;
|
|
687
|
-
margin: 0 0 10px 0;
|
|
688
|
-
word-break: break-all;
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
.shogun-register-did-button {
|
|
692
|
-
padding: 6px 12px;
|
|
693
|
-
background-color: #4a56e2;
|
|
694
|
-
color: white;
|
|
695
|
-
border: none;
|
|
696
|
-
border-radius: 4px;
|
|
697
|
-
cursor: pointer;
|
|
698
|
-
font-size: 13px;
|
|
699
|
-
transition: background-color 0.3s;
|
|
700
|
-
}
|
|
701
|
-
|
|
702
|
-
.shogun-register-did-button:hover {
|
|
703
|
-
background-color: #3a46c2;
|
|
704
|
-
}
|
|
705
|
-
|
|
706
|
-
.shogun-register-did-button:disabled {
|
|
707
|
-
background-color: #a0a0a0;
|
|
708
|
-
cursor: not-allowed;
|
|
709
|
-
}
|
|
710
|
-
|
|
711
|
-
.shogun-logout-button {
|
|
712
|
-
padding: 6px 12px;
|
|
713
|
-
background-color: #e74c3c;
|
|
714
|
-
color: white;
|
|
715
|
-
border: none;
|
|
716
|
-
border-radius: 4px;
|
|
717
|
-
cursor: pointer;
|
|
718
|
-
font-size: 13px;
|
|
719
|
-
margin-top: 5px;
|
|
720
|
-
transition: background-color 0.3s;
|
|
721
|
-
}
|
|
722
|
-
|
|
723
|
-
.shogun-logout-button:hover {
|
|
724
|
-
background-color: #c0392b;
|
|
725
|
-
}
|
|
726
|
-
|
|
727
|
-
.shogun-prominent-toggle {
|
|
728
|
-
font-weight: 600;
|
|
729
|
-
color: #3b82f6;
|
|
730
|
-
padding: 8px 16px;
|
|
731
|
-
margin-top: 16px;
|
|
732
|
-
border: 1px solid #e5e7eb;
|
|
733
|
-
border-radius: 6px;
|
|
734
|
-
background-color: #f9fafb;
|
|
735
|
-
transition: all 0.2s ease;
|
|
736
|
-
}
|
|
737
|
-
|
|
738
|
-
.shogun-prominent-toggle:hover {
|
|
739
|
-
background-color: #f3f4f6;
|
|
740
|
-
border-color: #d1d5db;
|
|
741
|
-
}
|
|
742
|
-
|
|
743
|
-
[data-shogun-theme="dark"] .shogun-prominent-toggle {
|
|
744
|
-
background-color: #1f2937;
|
|
745
|
-
border-color: #374151;
|
|
746
|
-
color: #60a5fa;
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
[data-shogun-theme="dark"] .shogun-prominent-toggle:hover {
|
|
750
|
-
background-color: #111827;
|
|
751
|
-
border-color: #4b5563;
|
|
752
|
-
}
|
|
753
|
-
|
|
754
|
-
[data-shogun-theme="dark"] .shogun-modal-header h2 {
|
|
755
|
-
color: #f9fafb;
|
|
756
|
-
}
|