shogun-button-react 1.5.30 → 1.5.32
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/dist/components/ShogunButton.d.ts +0 -1
- package/dist/components/ShogunButton.js +647 -13
- package/dist/dist/styles/index.css +26 -0
- package/dist/styles/index.css +26 -0
- package/package.json +2 -2
- package/src/styles/index.css +0 -454
|
@@ -1,6 +1,510 @@
|
|
|
1
1
|
import React, { useContext, useState, createContext, useEffect, useRef, } from "react";
|
|
2
2
|
import { Observable } from "rxjs";
|
|
3
|
-
|
|
3
|
+
// CSS styles embedded directly in the component
|
|
4
|
+
const styles = `
|
|
5
|
+
/* Base styles */
|
|
6
|
+
:root {
|
|
7
|
+
--shogun-primary: #3b82f6;
|
|
8
|
+
--shogun-primary-hover: #2563eb;
|
|
9
|
+
--shogun-secondary: #6b7280;
|
|
10
|
+
--shogun-success: #10b981;
|
|
11
|
+
--shogun-danger: #ef4444;
|
|
12
|
+
--shogun-warning: #f59e0b;
|
|
13
|
+
--shogun-text: #1f2937;
|
|
14
|
+
--shogun-text-secondary: #6b7280;
|
|
15
|
+
--shogun-bg: #ffffff;
|
|
16
|
+
--shogun-bg-secondary: #f3f4f6;
|
|
17
|
+
--shogun-border: #e5e7eb;
|
|
18
|
+
--shogun-border-radius: 12px;
|
|
19
|
+
--shogun-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
20
|
+
--shogun-transition: all 0.2s ease;
|
|
21
|
+
--shogun-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Dark mode support */
|
|
25
|
+
@media (prefers-color-scheme: dark) {
|
|
26
|
+
:root {
|
|
27
|
+
--shogun-text: #f3f4f6;
|
|
28
|
+
--shogun-text-secondary: #9ca3af;
|
|
29
|
+
--shogun-bg: #1f2937;
|
|
30
|
+
--shogun-bg-secondary: #374151;
|
|
31
|
+
--shogun-border: #4b5563;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Connect Button */
|
|
36
|
+
.shogun-connect-button {
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
gap: 8px;
|
|
41
|
+
background-color: var(--shogun-primary);
|
|
42
|
+
color: white;
|
|
43
|
+
border: none;
|
|
44
|
+
border-radius: var(--shogun-border-radius);
|
|
45
|
+
padding: 10px 16px;
|
|
46
|
+
font-family: var(--shogun-font);
|
|
47
|
+
font-weight: 600;
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
transition: var(--shogun-transition);
|
|
51
|
+
box-shadow: var(--shogun-shadow);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.shogun-connect-button:hover {
|
|
55
|
+
background-color: var(--shogun-primary-hover);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.shogun-connect-button:focus {
|
|
59
|
+
outline: none;
|
|
60
|
+
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Logged in state */
|
|
64
|
+
.shogun-logged-in-container {
|
|
65
|
+
position: relative;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.shogun-dropdown {
|
|
69
|
+
position: relative;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.shogun-button.shogun-logged-in {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
gap: 8px;
|
|
76
|
+
background-color: var(--shogun-bg-secondary);
|
|
77
|
+
color: var(--shogun-text);
|
|
78
|
+
border: 1px solid var(--shogun-border);
|
|
79
|
+
border-radius: var(--shogun-border-radius);
|
|
80
|
+
padding: 8px 12px;
|
|
81
|
+
font-family: var(--shogun-font);
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
transition: var(--shogun-transition);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.shogun-button.shogun-logged-in:hover {
|
|
88
|
+
background-color: var(--shogun-bg);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.shogun-avatar {
|
|
92
|
+
width: 24px;
|
|
93
|
+
height: 24px;
|
|
94
|
+
background-color: var(--shogun-primary);
|
|
95
|
+
color: white;
|
|
96
|
+
border-radius: 50%;
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.shogun-username {
|
|
105
|
+
font-weight: 500;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.shogun-dropdown-menu {
|
|
109
|
+
position: absolute;
|
|
110
|
+
top: calc(100% + 8px);
|
|
111
|
+
right: 0;
|
|
112
|
+
background-color: var(--shogun-bg);
|
|
113
|
+
border: 1px solid var(--shogun-border);
|
|
114
|
+
border-radius: var(--shogun-border-radius);
|
|
115
|
+
box-shadow: var(--shogun-shadow);
|
|
116
|
+
width: 240px;
|
|
117
|
+
z-index: 9999;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
animation: shogun-dropdown-fade 0.2s ease;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@keyframes shogun-dropdown-fade {
|
|
123
|
+
from {
|
|
124
|
+
opacity: 0;
|
|
125
|
+
transform: translateY(-8px);
|
|
126
|
+
}
|
|
127
|
+
to {
|
|
128
|
+
opacity: 1;
|
|
129
|
+
transform: translateY(0);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.shogun-dropdown-header {
|
|
134
|
+
padding: 16px;
|
|
135
|
+
border-bottom: 1px solid var(--shogun-border);
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
gap: 12px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.shogun-avatar-large {
|
|
142
|
+
width: 40px;
|
|
143
|
+
height: 40px;
|
|
144
|
+
background-color: var(--shogun-primary);
|
|
145
|
+
color: white;
|
|
146
|
+
border-radius: 50%;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
font-weight: 600;
|
|
151
|
+
font-size: 16px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.shogun-user-info {
|
|
155
|
+
display: flex;
|
|
156
|
+
flex-direction: column;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.shogun-username-full {
|
|
160
|
+
font-weight: 600;
|
|
161
|
+
color: var(--shogun-text);
|
|
162
|
+
font-size: 14px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.shogun-dropdown-item {
|
|
166
|
+
padding: 12px 16px;
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
gap: 12px;
|
|
170
|
+
color: var(--shogun-text);
|
|
171
|
+
font-size: 14px;
|
|
172
|
+
cursor: pointer;
|
|
173
|
+
transition: var(--shogun-transition);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.shogun-dropdown-item:hover {
|
|
177
|
+
background-color: var(--shogun-bg-secondary);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Modal */
|
|
181
|
+
.shogun-modal-overlay {
|
|
182
|
+
position: fixed;
|
|
183
|
+
top: 0;
|
|
184
|
+
left: 0;
|
|
185
|
+
right: 0;
|
|
186
|
+
bottom: 0;
|
|
187
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
justify-content: center;
|
|
191
|
+
z-index: 2147483647 !important;
|
|
192
|
+
animation: shogun-fade-in 0.2s ease;
|
|
193
|
+
position: fixed !important;
|
|
194
|
+
top: 0 !important;
|
|
195
|
+
left: 0 !important;
|
|
196
|
+
right: 0 !important;
|
|
197
|
+
bottom: 0 !important;
|
|
198
|
+
pointer-events: auto !important;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@keyframes shogun-fade-in {
|
|
202
|
+
from {
|
|
203
|
+
opacity: 0;
|
|
204
|
+
}
|
|
205
|
+
to {
|
|
206
|
+
opacity: 1;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.shogun-modal {
|
|
211
|
+
background-color: var(--shogun-bg);
|
|
212
|
+
border-radius: var(--shogun-border-radius);
|
|
213
|
+
box-shadow: var(--shogun-shadow);
|
|
214
|
+
width: 90%;
|
|
215
|
+
max-width: 400px;
|
|
216
|
+
max-height: 90vh;
|
|
217
|
+
overflow-y: auto;
|
|
218
|
+
animation: shogun-scale-in 0.2s ease;
|
|
219
|
+
z-index: 2147483647 !important;
|
|
220
|
+
position: relative !important;
|
|
221
|
+
pointer-events: auto !important;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* Ensure all modal content is also on top */
|
|
225
|
+
.shogun-modal * {
|
|
226
|
+
z-index: inherit !important;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@keyframes shogun-scale-in {
|
|
230
|
+
from {
|
|
231
|
+
opacity: 0;
|
|
232
|
+
transform: scale(0.95);
|
|
233
|
+
}
|
|
234
|
+
to {
|
|
235
|
+
opacity: 1;
|
|
236
|
+
transform: scale(1);
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.shogun-modal-header {
|
|
241
|
+
display: flex;
|
|
242
|
+
justify-content: space-between;
|
|
243
|
+
align-items: center;
|
|
244
|
+
padding: 16px 20px;
|
|
245
|
+
border-bottom: 1px solid var(--shogun-border);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.shogun-modal-header h2 {
|
|
249
|
+
margin: 0;
|
|
250
|
+
font-size: 1.5rem;
|
|
251
|
+
font-weight: 600;
|
|
252
|
+
color: var(--shogun-text);
|
|
253
|
+
text-align: center;
|
|
254
|
+
width: 100%;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.shogun-close-button {
|
|
258
|
+
background: none;
|
|
259
|
+
border: none;
|
|
260
|
+
cursor: pointer;
|
|
261
|
+
color: var(--shogun-text-secondary);
|
|
262
|
+
padding: 4px;
|
|
263
|
+
display: flex;
|
|
264
|
+
align-items: center;
|
|
265
|
+
justify-content: center;
|
|
266
|
+
border-radius: 50%;
|
|
267
|
+
transition: var(--shogun-transition);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.shogun-close-button:hover {
|
|
271
|
+
background-color: var(--shogun-bg-secondary);
|
|
272
|
+
color: var(--shogun-text);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.shogun-modal-content {
|
|
276
|
+
padding: 20px;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Auth options */
|
|
280
|
+
.shogun-auth-options {
|
|
281
|
+
display: flex;
|
|
282
|
+
flex-direction: column;
|
|
283
|
+
gap: 12px;
|
|
284
|
+
margin-bottom: 24px;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.shogun-auth-option-button {
|
|
288
|
+
display: flex;
|
|
289
|
+
align-items: center;
|
|
290
|
+
justify-content: center;
|
|
291
|
+
gap: 12px;
|
|
292
|
+
background-color: var(--shogun-bg);
|
|
293
|
+
color: var(--shogun-text);
|
|
294
|
+
border: 1px solid var(--shogun-border);
|
|
295
|
+
border-radius: var(--shogun-border-radius);
|
|
296
|
+
padding: 12px 16px;
|
|
297
|
+
font-family: var(--shogun-font);
|
|
298
|
+
font-weight: 500;
|
|
299
|
+
font-size: 14px;
|
|
300
|
+
cursor: pointer;
|
|
301
|
+
transition: var(--shogun-transition);
|
|
302
|
+
width: 100%;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.shogun-auth-option-button:hover {
|
|
306
|
+
background-color: var(--shogun-bg-secondary);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.shogun-auth-option-button:disabled {
|
|
310
|
+
opacity: 0.6;
|
|
311
|
+
cursor: not-allowed;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.shogun-google-button {
|
|
315
|
+
border-color: #4285F4;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/* Divider */
|
|
319
|
+
.shogun-divider {
|
|
320
|
+
display: flex;
|
|
321
|
+
align-items: center;
|
|
322
|
+
margin: 20px 0;
|
|
323
|
+
color: var(--shogun-text-secondary);
|
|
324
|
+
font-size: 14px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.shogun-divider::before,
|
|
328
|
+
.shogun-divider::after {
|
|
329
|
+
content: "";
|
|
330
|
+
flex: 1;
|
|
331
|
+
border-bottom: 1px solid var(--shogun-border);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.shogun-divider span {
|
|
335
|
+
padding: 0 10px;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
/* Form */
|
|
339
|
+
.shogun-auth-form {
|
|
340
|
+
display: flex;
|
|
341
|
+
flex-direction: column;
|
|
342
|
+
gap: 16px;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.shogun-form-group {
|
|
346
|
+
display: flex;
|
|
347
|
+
flex-direction: column;
|
|
348
|
+
gap: 8px;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.shogun-form-group label {
|
|
352
|
+
display: flex;
|
|
353
|
+
align-items: center;
|
|
354
|
+
gap: 8px;
|
|
355
|
+
font-size: 14px;
|
|
356
|
+
font-weight: 500;
|
|
357
|
+
color: var(--shogun-text);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.shogun-form-group input {
|
|
361
|
+
padding: 12px;
|
|
362
|
+
border: 1px solid var(--shogun-border);
|
|
363
|
+
border-radius: var(--shogun-border-radius);
|
|
364
|
+
background-color: var(--shogun-bg);
|
|
365
|
+
color: var(--shogun-text);
|
|
366
|
+
font-size: 14px;
|
|
367
|
+
transition: var(--shogun-transition);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.shogun-form-group input:focus {
|
|
371
|
+
outline: none;
|
|
372
|
+
border-color: var(--shogun-primary);
|
|
373
|
+
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.shogun-submit-button {
|
|
377
|
+
background-color: var(--shogun-primary);
|
|
378
|
+
color: white;
|
|
379
|
+
border: none;
|
|
380
|
+
border-radius: var(--shogun-border-radius);
|
|
381
|
+
padding: 12px 16px;
|
|
382
|
+
font-family: var(--shogun-font);
|
|
383
|
+
font-weight: 600;
|
|
384
|
+
font-size: 14px;
|
|
385
|
+
cursor: pointer;
|
|
386
|
+
transition: var(--shogun-transition);
|
|
387
|
+
margin-top: 8px;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.shogun-submit-button:hover:not(:disabled) {
|
|
391
|
+
background-color: var(--shogun-primary-hover);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.shogun-submit-button:disabled {
|
|
395
|
+
opacity: 0.6;
|
|
396
|
+
cursor: not-allowed;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/* Footer */
|
|
400
|
+
.shogun-form-footer {
|
|
401
|
+
margin-top: 20px;
|
|
402
|
+
text-align: center;
|
|
403
|
+
font-size: 14px;
|
|
404
|
+
color: var(--shogun-text-secondary);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.shogun-toggle-mode {
|
|
408
|
+
background: none;
|
|
409
|
+
border: none;
|
|
410
|
+
color: var(--shogun-primary);
|
|
411
|
+
font-weight: 600;
|
|
412
|
+
cursor: pointer;
|
|
413
|
+
padding: 0;
|
|
414
|
+
margin-left: 4px;
|
|
415
|
+
transition: var(--shogun-transition);
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.shogun-toggle-mode:hover {
|
|
419
|
+
text-decoration: underline;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.shogun-toggle-mode:disabled {
|
|
423
|
+
opacity: 0.6;
|
|
424
|
+
cursor: not-allowed;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* Error message */
|
|
428
|
+
.shogun-error-message {
|
|
429
|
+
background-color: rgba(239, 68, 68, 0.1);
|
|
430
|
+
color: var(--shogun-danger);
|
|
431
|
+
padding: 12px;
|
|
432
|
+
border-radius: var(--shogun-border-radius);
|
|
433
|
+
margin-bottom: 16px;
|
|
434
|
+
font-size: 14px;
|
|
435
|
+
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.shogun-back-button {
|
|
439
|
+
background: none;
|
|
440
|
+
border: none;
|
|
441
|
+
color: var(--shogun-text-secondary);
|
|
442
|
+
cursor: pointer;
|
|
443
|
+
font-size: 14px;
|
|
444
|
+
margin-bottom: 16px;
|
|
445
|
+
padding: 4px;
|
|
446
|
+
display: flex;
|
|
447
|
+
align-items: center;
|
|
448
|
+
gap: 4px;
|
|
449
|
+
font-weight: 500;
|
|
450
|
+
transition: color 0.2s ease;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.shogun-back-button:hover {
|
|
454
|
+
color: var(--shogun-text);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.shogun-prominent-toggle {
|
|
458
|
+
font-weight: 600;
|
|
459
|
+
color: var(--shogun-primary);
|
|
460
|
+
padding: 8px 16px;
|
|
461
|
+
margin-top: 16px;
|
|
462
|
+
border: none;
|
|
463
|
+
border-radius: 6px;
|
|
464
|
+
background-color: transparent;
|
|
465
|
+
transition: all 0.2s ease;
|
|
466
|
+
cursor: pointer;
|
|
467
|
+
display: inline-block;
|
|
468
|
+
text-decoration: none;
|
|
469
|
+
font-size: 14px;
|
|
470
|
+
line-height: 1.4;
|
|
471
|
+
min-height: 44px;
|
|
472
|
+
display: flex;
|
|
473
|
+
align-items: center;
|
|
474
|
+
justify-content: center;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.shogun-prominent-toggle:hover {
|
|
478
|
+
text-decoration: underline;
|
|
479
|
+
background-color: rgba(59, 130, 246, 0.1);
|
|
480
|
+
transform: translateY(-1px);
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.shogun-prominent-toggle:active {
|
|
484
|
+
transform: translateY(0);
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.shogun-prominent-toggle:disabled {
|
|
488
|
+
opacity: 0.5;
|
|
489
|
+
cursor: not-allowed;
|
|
490
|
+
pointer-events: none;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.shogun-prominent-toggle:focus {
|
|
494
|
+
outline: 2px solid var(--shogun-primary);
|
|
495
|
+
outline-offset: 2px;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
/* Global styles to ensure modal is always on top */
|
|
499
|
+
body.shogun-modal-open {
|
|
500
|
+
overflow: hidden;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
/* Prevent any other elements from being above the modal */
|
|
504
|
+
*:not(.shogun-modal-overlay):not(.shogun-modal):not(.shogun-modal *) {
|
|
505
|
+
z-index: auto !important;
|
|
506
|
+
}
|
|
507
|
+
`;
|
|
4
508
|
// Default context
|
|
5
509
|
const defaultShogunContext = {
|
|
6
510
|
sdk: null,
|
|
@@ -31,18 +535,52 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
31
535
|
// Effetto per gestire l'inizializzazione e pulizia
|
|
32
536
|
useEffect(() => {
|
|
33
537
|
var _a, _b;
|
|
538
|
+
console.log(`🔧 ShogunButtonProvider useEffect - SDK available:`, !!sdk);
|
|
34
539
|
if (!sdk)
|
|
35
540
|
return;
|
|
541
|
+
// Check for existing session data
|
|
542
|
+
const sessionData = sessionStorage.getItem("gunSessionData");
|
|
543
|
+
const pairData = sessionStorage.getItem("gun/pair") || sessionStorage.getItem("pair");
|
|
544
|
+
console.log(`🔧 Session data available:`, {
|
|
545
|
+
hasSessionData: !!sessionData,
|
|
546
|
+
hasPairData: !!pairData,
|
|
547
|
+
});
|
|
36
548
|
// Verifichiamo se l'utente è già loggato all'inizializzazione
|
|
37
549
|
// Aggiungiamo un controllo di sicurezza per verificare se il metodo esiste
|
|
38
|
-
if (sdk && typeof sdk.isLoggedIn === "function"
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
550
|
+
if (sdk && typeof sdk.isLoggedIn === "function") {
|
|
551
|
+
const isLoggedIn = sdk.isLoggedIn();
|
|
552
|
+
console.log(`🔧 SDK isLoggedIn(): ${isLoggedIn}`);
|
|
553
|
+
if (isLoggedIn) {
|
|
554
|
+
const pub = (_b = (_a = sdk.gun.user()) === null || _a === void 0 ? void 0 : _a.is) === null || _b === void 0 ? void 0 : _b.pub;
|
|
555
|
+
console.log(`🔧 User already logged in with pub: ${pub === null || pub === void 0 ? void 0 : pub.slice(0, 8)}...`);
|
|
556
|
+
if (pub) {
|
|
557
|
+
console.log(`🔧 Setting user state from existing session`);
|
|
558
|
+
setIsLoggedIn(true);
|
|
559
|
+
setUserPub(pub);
|
|
560
|
+
setUsername(pub.slice(0, 8) + "...");
|
|
561
|
+
}
|
|
562
|
+
}
|
|
563
|
+
else {
|
|
564
|
+
console.log(`🔧 User not logged in`);
|
|
565
|
+
// Try to restore session if we have pair data
|
|
566
|
+
if (pairData && !isLoggedIn) {
|
|
567
|
+
console.log(`🔧 Attempting to restore session from pair data`);
|
|
568
|
+
try {
|
|
569
|
+
const pair = JSON.parse(pairData);
|
|
570
|
+
if (pair.pub) {
|
|
571
|
+
console.log(`🔧 Found pair with pub: ${pair.pub.slice(0, 8)}...`);
|
|
572
|
+
// Don't auto-login, just log the available data
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
catch (error) {
|
|
576
|
+
console.error(`🔧 Error parsing pair data:`, error);
|
|
577
|
+
}
|
|
578
|
+
}
|
|
44
579
|
}
|
|
45
580
|
}
|
|
581
|
+
else {
|
|
582
|
+
console.log(`🔧 SDK isLoggedIn method not available`);
|
|
583
|
+
}
|
|
46
584
|
// Poiché il metodo 'on' non esiste su ShogunCore,
|
|
47
585
|
// gestiamo gli stati direttamente nei metodi di login/logout
|
|
48
586
|
}, [sdk, onLoginSuccess]);
|
|
@@ -55,7 +593,8 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
55
593
|
};
|
|
56
594
|
// Unified login
|
|
57
595
|
const login = async (method, ...args) => {
|
|
58
|
-
var _a, _b;
|
|
596
|
+
var _a, _b, _c;
|
|
597
|
+
console.log(`🔧 ShogunButtonProvider.login called with method: ${method}`, args);
|
|
59
598
|
try {
|
|
60
599
|
if (!sdk) {
|
|
61
600
|
throw new Error("SDK not initialized");
|
|
@@ -63,9 +602,11 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
63
602
|
let result;
|
|
64
603
|
let authMethod = method;
|
|
65
604
|
let username;
|
|
605
|
+
console.log(`🔧 Processing login method: ${method}`);
|
|
66
606
|
switch (method) {
|
|
67
607
|
case "password":
|
|
68
608
|
username = args[0];
|
|
609
|
+
console.log(`🔧 Password login for username: ${username}`);
|
|
69
610
|
result = await sdk.login(args[0], args[1]);
|
|
70
611
|
break;
|
|
71
612
|
case "pair":
|
|
@@ -74,6 +615,7 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
74
615
|
if (!pair || typeof pair !== "object") {
|
|
75
616
|
throw new Error("Invalid pair data provided");
|
|
76
617
|
}
|
|
618
|
+
console.log(`🔧 Pair login with pub: ${(_a = pair.pub) === null || _a === void 0 ? void 0 : _a.slice(0, 8)}...`);
|
|
77
619
|
result = await new Promise((resolve, reject) => {
|
|
78
620
|
sdk.gun.user().auth(pair, (ack) => {
|
|
79
621
|
if (ack.err) {
|
|
@@ -95,6 +637,7 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
95
637
|
break;
|
|
96
638
|
case "webauthn":
|
|
97
639
|
username = args[0];
|
|
640
|
+
console.log(`🔧 WebAuthn login for username: ${username}`);
|
|
98
641
|
const webauthn = sdk.getPlugin("webauthn");
|
|
99
642
|
if (!webauthn)
|
|
100
643
|
throw new Error("WebAuthn plugin not available");
|
|
@@ -102,6 +645,7 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
102
645
|
authMethod = "webauthn";
|
|
103
646
|
break;
|
|
104
647
|
case "web3":
|
|
648
|
+
console.log(`🔧 Web3 login initiated`);
|
|
105
649
|
const web3 = sdk.getPlugin("web3");
|
|
106
650
|
if (!web3)
|
|
107
651
|
throw new Error("Web3 plugin not available");
|
|
@@ -110,10 +654,12 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
110
654
|
throw new Error(connectionResult.error || "Failed to connect wallet.");
|
|
111
655
|
}
|
|
112
656
|
username = connectionResult.address;
|
|
657
|
+
console.log(`🔧 Web3 connected to address: ${username}`);
|
|
113
658
|
result = await web3.login(connectionResult.address);
|
|
114
659
|
authMethod = "web3";
|
|
115
660
|
break;
|
|
116
661
|
case "nostr":
|
|
662
|
+
console.log(`🔧 Nostr login initiated`);
|
|
117
663
|
const nostr = sdk.getPlugin("nostr");
|
|
118
664
|
if (!nostr)
|
|
119
665
|
throw new Error("Nostr plugin not available");
|
|
@@ -125,10 +671,12 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
125
671
|
if (!pubkey)
|
|
126
672
|
throw new Error("Nessuna chiave pubblica ottenuta");
|
|
127
673
|
username = pubkey;
|
|
674
|
+
console.log(`🔧 Nostr connected to pubkey: ${username}`);
|
|
128
675
|
result = await nostr.login(pubkey);
|
|
129
676
|
authMethod = "nostr";
|
|
130
677
|
break;
|
|
131
678
|
case "oauth":
|
|
679
|
+
console.log(`🔧 OAuth login initiated`);
|
|
132
680
|
const oauth = sdk.getPlugin("oauth");
|
|
133
681
|
if (!oauth)
|
|
134
682
|
throw new Error("OAuth plugin not available");
|
|
@@ -151,9 +699,15 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
151
699
|
default:
|
|
152
700
|
throw new Error("Unsupported login method");
|
|
153
701
|
}
|
|
702
|
+
console.log(`🔧 Login result:`, result);
|
|
154
703
|
if (result.success) {
|
|
155
|
-
const userPub = result.userPub || ((
|
|
704
|
+
const userPub = result.userPub || ((_c = (_b = sdk.gun.user()) === null || _b === void 0 ? void 0 : _b.is) === null || _c === void 0 ? void 0 : _c.pub) || "";
|
|
156
705
|
const displayName = result.alias || username || userPub.slice(0, 8) + "...";
|
|
706
|
+
console.log(`🔧 Login successful! Setting user state:`, {
|
|
707
|
+
userPub: userPub.slice(0, 8) + "...",
|
|
708
|
+
displayName,
|
|
709
|
+
authMethod,
|
|
710
|
+
});
|
|
157
711
|
setIsLoggedIn(true);
|
|
158
712
|
setUserPub(userPub);
|
|
159
713
|
setUsername(displayName);
|
|
@@ -164,11 +718,13 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
|
|
|
164
718
|
});
|
|
165
719
|
}
|
|
166
720
|
else {
|
|
721
|
+
console.error(`🔧 Login failed:`, result.error);
|
|
167
722
|
onError === null || onError === void 0 ? void 0 : onError(result.error || "Login failed");
|
|
168
723
|
}
|
|
169
724
|
return result;
|
|
170
725
|
}
|
|
171
726
|
catch (error) {
|
|
727
|
+
console.error(`🔧 Login error:`, error);
|
|
172
728
|
onError === null || onError === void 0 ? void 0 : onError(error.message || "Error during login");
|
|
173
729
|
return { success: false, error: error.message };
|
|
174
730
|
}
|
|
@@ -453,6 +1009,52 @@ export const ShogunButton = (() => {
|
|
|
453
1009
|
};
|
|
454
1010
|
}
|
|
455
1011
|
}, [dropdownOpen]);
|
|
1012
|
+
// Debug event listener
|
|
1013
|
+
useEffect(() => {
|
|
1014
|
+
const handleDebugLogin = (event) => {
|
|
1015
|
+
var _a;
|
|
1016
|
+
console.log("🔧 Debug login event received:", event.detail);
|
|
1017
|
+
if ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.method) {
|
|
1018
|
+
console.log("🔧 Attempting debug login with method:", event.detail.method);
|
|
1019
|
+
handleAuth(event.detail.method);
|
|
1020
|
+
}
|
|
1021
|
+
};
|
|
1022
|
+
window.addEventListener("shogun-debug-login", handleDebugLogin);
|
|
1023
|
+
return () => {
|
|
1024
|
+
window.removeEventListener("shogun-debug-login", handleDebugLogin);
|
|
1025
|
+
};
|
|
1026
|
+
}, []);
|
|
1027
|
+
// Auto-close modal when user becomes logged in
|
|
1028
|
+
useEffect(() => {
|
|
1029
|
+
if (isLoggedIn && modalIsOpen) {
|
|
1030
|
+
console.log("🔧 User logged in, auto-closing modal");
|
|
1031
|
+
setModalIsOpen(false);
|
|
1032
|
+
}
|
|
1033
|
+
}, [isLoggedIn, modalIsOpen]);
|
|
1034
|
+
// Log error state changes
|
|
1035
|
+
useEffect(() => {
|
|
1036
|
+
if (error) {
|
|
1037
|
+
console.error("🔧 Modal error state:", error);
|
|
1038
|
+
}
|
|
1039
|
+
}, [error]);
|
|
1040
|
+
// Log loading state changes
|
|
1041
|
+
useEffect(() => {
|
|
1042
|
+
console.log("🔧 Modal loading state:", loading);
|
|
1043
|
+
}, [loading]);
|
|
1044
|
+
// Add/remove body class when modal is open
|
|
1045
|
+
useEffect(() => {
|
|
1046
|
+
if (modalIsOpen) {
|
|
1047
|
+
document.body.classList.add("shogun-modal-open");
|
|
1048
|
+
console.log("🔧 Modal opened, added body class");
|
|
1049
|
+
}
|
|
1050
|
+
else {
|
|
1051
|
+
document.body.classList.remove("shogun-modal-open");
|
|
1052
|
+
console.log("🔧 Modal closed, removed body class");
|
|
1053
|
+
}
|
|
1054
|
+
return () => {
|
|
1055
|
+
document.body.classList.remove("shogun-modal-open");
|
|
1056
|
+
};
|
|
1057
|
+
}, [modalIsOpen]);
|
|
456
1058
|
// If already logged in, show only logout button
|
|
457
1059
|
if (isLoggedIn && username && !modalIsOpen) {
|
|
458
1060
|
return (React.createElement("div", { className: "shogun-logged-in-container" },
|
|
@@ -482,26 +1084,39 @@ export const ShogunButton = (() => {
|
|
|
482
1084
|
}
|
|
483
1085
|
// Event handlers
|
|
484
1086
|
const handleAuth = async (method, ...args) => {
|
|
1087
|
+
console.log(`🔧 handleAuth called with method: ${method}`, args);
|
|
485
1088
|
setError("");
|
|
486
1089
|
setLoading(true);
|
|
487
1090
|
try {
|
|
488
1091
|
// Use formMode to determine whether to call login or signUp
|
|
489
1092
|
const action = formMode === "login" ? login : signUp;
|
|
1093
|
+
console.log(`🔧 Using action: ${formMode === "login" ? "login" : "signUp"}`);
|
|
1094
|
+
console.log(`🔧 Calling ${action.name} with method: ${method}`);
|
|
490
1095
|
const result = await action(method, ...args);
|
|
1096
|
+
console.log(`🔧 ${action.name} result:`, result);
|
|
491
1097
|
if (result && !result.success && result.error) {
|
|
1098
|
+
console.error(`🔧 ${action.name} failed with error:`, result.error);
|
|
492
1099
|
setError(result.error);
|
|
493
1100
|
}
|
|
494
1101
|
else if (result && result.redirectUrl) {
|
|
1102
|
+
console.log(`🔧 Redirecting to: ${result.redirectUrl}`);
|
|
495
1103
|
window.location.href = result.redirectUrl;
|
|
496
1104
|
}
|
|
1105
|
+
else if (result && result.success) {
|
|
1106
|
+
console.log(`🔧 ${action.name} successful, closing modal`);
|
|
1107
|
+
setModalIsOpen(false);
|
|
1108
|
+
}
|
|
497
1109
|
else {
|
|
1110
|
+
console.warn(`🔧 Unexpected result:`, result);
|
|
498
1111
|
setModalIsOpen(false);
|
|
499
1112
|
}
|
|
500
1113
|
}
|
|
501
1114
|
catch (e) {
|
|
1115
|
+
console.error(`🔧 handleAuth error:`, e);
|
|
502
1116
|
setError(e.message || "An unexpected error occurred.");
|
|
503
1117
|
}
|
|
504
1118
|
finally {
|
|
1119
|
+
console.log(`🔧 handleAuth completed, setting loading to false`);
|
|
505
1120
|
setLoading(false);
|
|
506
1121
|
}
|
|
507
1122
|
};
|
|
@@ -639,9 +1254,15 @@ export const ShogunButton = (() => {
|
|
|
639
1254
|
setModalIsOpen(false);
|
|
640
1255
|
};
|
|
641
1256
|
const toggleMode = () => {
|
|
1257
|
+
console.log("🔧 toggleMode called - current formMode:", formMode);
|
|
1258
|
+
console.log("🔧 loading state:", loading);
|
|
642
1259
|
resetForm();
|
|
643
1260
|
setAuthView("options"); // Porta alla selezione dei metodi invece che direttamente al form password
|
|
644
|
-
setFormMode((prev) =>
|
|
1261
|
+
setFormMode((prev) => {
|
|
1262
|
+
const newMode = prev === "login" ? "signup" : "login";
|
|
1263
|
+
console.log("🔧 Switching from", prev, "to", newMode);
|
|
1264
|
+
return newMode;
|
|
1265
|
+
});
|
|
645
1266
|
};
|
|
646
1267
|
// Add buttons for both login and signup for alternative auth methods
|
|
647
1268
|
const renderAuthOptions = () => (React.createElement("div", { className: "shogun-auth-options" },
|
|
@@ -706,7 +1327,7 @@ export const ShogunButton = (() => {
|
|
|
706
1327
|
React.createElement("input", { type: "text", id: "securityQuestion", value: formSecurityQuestion, disabled: true })),
|
|
707
1328
|
React.createElement("div", { className: "shogun-form-group" },
|
|
708
1329
|
React.createElement("label", { htmlFor: "securityAnswer" },
|
|
709
|
-
React.createElement(
|
|
1330
|
+
React.createElement(KeyIcon, null),
|
|
710
1331
|
React.createElement("span", null, "Security Answer")),
|
|
711
1332
|
React.createElement("input", { type: "text", id: "securityAnswer", value: formSecurityAnswer, onChange: (e) => setFormSecurityAnswer(e.target.value), disabled: loading, required: true, placeholder: "Enter your security answer" })))),
|
|
712
1333
|
React.createElement("button", { type: "submit", className: "shogun-submit-button", disabled: loading }, loading
|
|
@@ -715,7 +1336,13 @@ export const ShogunButton = (() => {
|
|
|
715
1336
|
? "Sign In"
|
|
716
1337
|
: "Create Account"),
|
|
717
1338
|
React.createElement("div", { className: "shogun-form-footer" },
|
|
718
|
-
React.createElement("button", { type: "button", className: "shogun-toggle-mode shogun-prominent-toggle", onClick:
|
|
1339
|
+
React.createElement("button", { type: "button", className: "shogun-toggle-mode shogun-prominent-toggle", onClick: () => {
|
|
1340
|
+
console.log("🔧 Signup button clicked!");
|
|
1341
|
+
console.log("🔧 Current formMode:", formMode);
|
|
1342
|
+
console.log("🔧 Current loading:", loading);
|
|
1343
|
+
console.log("🔧 Current authView:", authView);
|
|
1344
|
+
toggleMode();
|
|
1345
|
+
}, disabled: loading }, formMode === "login"
|
|
719
1346
|
? "Don't have an account? Sign up"
|
|
720
1347
|
: "Already have an account? Log in"),
|
|
721
1348
|
formMode === "login" && (React.createElement("button", { type: "button", className: "shogun-toggle-mode", onClick: () => setAuthView("recover"), disabled: loading }, "Forgot password?")))));
|
|
@@ -886,6 +1513,7 @@ export const ShogunButton = (() => {
|
|
|
886
1513
|
}, disabled: loading }, "Back to Login Options"))));
|
|
887
1514
|
// Render logic
|
|
888
1515
|
return (React.createElement(React.Fragment, null,
|
|
1516
|
+
React.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }),
|
|
889
1517
|
React.createElement("button", { className: "shogun-connect-button", onClick: openModal },
|
|
890
1518
|
React.createElement(WalletIcon, null),
|
|
891
1519
|
React.createElement("span", null, "Login / Sign Up")),
|
|
@@ -912,7 +1540,13 @@ export const ShogunButton = (() => {
|
|
|
912
1540
|
authView === "options" && (React.createElement(React.Fragment, null,
|
|
913
1541
|
renderAuthOptions(),
|
|
914
1542
|
React.createElement("div", { className: "shogun-form-footer" },
|
|
915
|
-
React.createElement("button", { type: "button", className: "shogun-toggle-mode shogun-prominent-toggle", onClick:
|
|
1543
|
+
React.createElement("button", { type: "button", className: "shogun-toggle-mode shogun-prominent-toggle", onClick: () => {
|
|
1544
|
+
console.log("🔧 Signup button clicked!");
|
|
1545
|
+
console.log("🔧 Current formMode:", formMode);
|
|
1546
|
+
console.log("🔧 Current loading:", loading);
|
|
1547
|
+
console.log("🔧 Current authView:", authView);
|
|
1548
|
+
toggleMode();
|
|
1549
|
+
}, disabled: loading }, formMode === "login"
|
|
916
1550
|
? "Don't have an account? Sign up"
|
|
917
1551
|
: "Already have an account? Log in")))),
|
|
918
1552
|
authView === "password" && (React.createElement(React.Fragment, null,
|
|
@@ -445,10 +445,36 @@
|
|
|
445
445
|
border-radius: 6px;
|
|
446
446
|
background-color: transparent;
|
|
447
447
|
transition: all 0.2s ease;
|
|
448
|
+
cursor: pointer;
|
|
449
|
+
display: inline-block;
|
|
450
|
+
text-decoration: none;
|
|
451
|
+
font-size: 14px;
|
|
452
|
+
line-height: 1.4;
|
|
453
|
+
min-height: 44px;
|
|
454
|
+
display: flex;
|
|
455
|
+
align-items: center;
|
|
456
|
+
justify-content: center;
|
|
448
457
|
}
|
|
449
458
|
|
|
450
459
|
.shogun-prominent-toggle:hover {
|
|
451
460
|
text-decoration: underline;
|
|
461
|
+
background-color: rgba(59, 130, 246, 0.1);
|
|
462
|
+
transform: translateY(-1px);
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.shogun-prominent-toggle:active {
|
|
466
|
+
transform: translateY(0);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.shogun-prominent-toggle:disabled {
|
|
470
|
+
opacity: 0.5;
|
|
471
|
+
cursor: not-allowed;
|
|
472
|
+
pointer-events: none;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.shogun-prominent-toggle:focus {
|
|
476
|
+
outline: 2px solid var(--shogun-primary);
|
|
477
|
+
outline-offset: 2px;
|
|
452
478
|
}
|
|
453
479
|
|
|
454
480
|
/* Redundant dark theme styles removed */
|
package/dist/styles/index.css
CHANGED
|
@@ -445,10 +445,36 @@
|
|
|
445
445
|
border-radius: 6px;
|
|
446
446
|
background-color: transparent;
|
|
447
447
|
transition: all 0.2s ease;
|
|
448
|
+
cursor: pointer;
|
|
449
|
+
display: inline-block;
|
|
450
|
+
text-decoration: none;
|
|
451
|
+
font-size: 14px;
|
|
452
|
+
line-height: 1.4;
|
|
453
|
+
min-height: 44px;
|
|
454
|
+
display: flex;
|
|
455
|
+
align-items: center;
|
|
456
|
+
justify-content: center;
|
|
448
457
|
}
|
|
449
458
|
|
|
450
459
|
.shogun-prominent-toggle:hover {
|
|
451
460
|
text-decoration: underline;
|
|
461
|
+
background-color: rgba(59, 130, 246, 0.1);
|
|
462
|
+
transform: translateY(-1px);
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.shogun-prominent-toggle:active {
|
|
466
|
+
transform: translateY(0);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.shogun-prominent-toggle:disabled {
|
|
470
|
+
opacity: 0.5;
|
|
471
|
+
cursor: not-allowed;
|
|
472
|
+
pointer-events: none;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.shogun-prominent-toggle:focus {
|
|
476
|
+
outline: 2px solid var(--shogun-primary);
|
|
477
|
+
outline-offset: 2px;
|
|
452
478
|
}
|
|
453
479
|
|
|
454
480
|
/* Redundant dark theme styles removed */
|
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.5.
|
|
4
|
+
"version": "1.5.32",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"src/styles/index.css"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"main": "./dist/index.js",
|
|
26
26
|
"types": "./dist/index.d.ts",
|
|
27
27
|
"scripts": {
|
|
28
|
-
"build": "tsc
|
|
28
|
+
"build": "tsc",
|
|
29
29
|
"dev": "tsc --watch",
|
|
30
30
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
31
31
|
"prepare": "npm run build"
|
package/src/styles/index.css
DELETED
|
@@ -1,454 +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: 9999;
|
|
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: var(--shogun-text);
|
|
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-back-button {
|
|
421
|
-
background: none;
|
|
422
|
-
border: none;
|
|
423
|
-
color: var(--shogun-text-secondary);
|
|
424
|
-
cursor: pointer;
|
|
425
|
-
font-size: 14px;
|
|
426
|
-
margin-bottom: 16px;
|
|
427
|
-
padding: 4px;
|
|
428
|
-
display: flex;
|
|
429
|
-
align-items: center;
|
|
430
|
-
gap: 4px;
|
|
431
|
-
font-weight: 500;
|
|
432
|
-
transition: color 0.2s ease;
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
.shogun-back-button:hover {
|
|
436
|
-
color: var(--shogun-text);
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.shogun-prominent-toggle {
|
|
440
|
-
font-weight: 600;
|
|
441
|
-
color: var(--shogun-primary);
|
|
442
|
-
padding: 8px 16px;
|
|
443
|
-
margin-top: 16px;
|
|
444
|
-
border: none;
|
|
445
|
-
border-radius: 6px;
|
|
446
|
-
background-color: transparent;
|
|
447
|
-
transition: all 0.2s ease;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
.shogun-prominent-toggle:hover {
|
|
451
|
-
text-decoration: underline;
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
/* Redundant dark theme styles removed */
|