This repository has no description
fixes
author
damedotblog
date
(Apr 22, 2025, 2:02 PM -0400)
commit
4743301f
4743301ff228ae2912cb989d5ff4e979714140b8
parent
03ce191b
03ce191b0764a56786322254c5d25c266053096d
+162
-165
+3
-1
src/App.jsx
+3
-1
src/App.jsx
···
56
56
<Route path="/zen" element={<ZenPage />} />
57
57
<Route path="/methodology" element={<ScoringMethodology />} />
58
58
59
-
{/* Omnifeed Routes - Now Public */}
59
+
{/* Omnifeed Routes - Temporarily Commented Out */}
60
+
{/*
60
61
<Route
61
62
path="/omnifeed/:username"
62
63
element={<CollectionsFeed />}
···
65
66
path="/omnifeed"
66
67
element={<CollectionsFeed />}
67
68
/>
69
+
*/}
68
70
69
71
{/* Handle both DIDs and regular usernames */}
70
72
<Route path="/:username" element={<UserProfile />} />
+92
-21
src/components/Login/Login.css
+92
-21
src/components/Login/Login.css
···
1
1
.login-container {
2
2
display: flex;
3
+
flex-direction: column;
3
4
justify-content: center;
4
5
align-items: center;
5
-
min-height: 70vh;
6
+
min-height: calc(100vh - 150px);
6
7
padding: 2rem;
8
+
box-sizing: border-box;
7
9
}
8
10
9
11
.login-card {
10
12
background-color: var(--navbar-bg);
11
-
border: 5px solid var(--card-border);
13
+
border: 1px solid var(--card-border);
12
14
border-radius: 12px;
13
-
box-shadow: none;
14
-
padding: 40px;
15
+
box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.1));
16
+
padding: 30px 40px;
15
17
width: 100%;
16
18
max-width: 450px;
17
19
text-align: center;
18
20
display: flex;
19
21
flex-direction: column;
22
+
gap: 15px;
20
23
transition: background-color 0.3s ease, border-color 0.3s ease;
21
24
}
22
25
23
-
.login-card h2 {
24
-
color: var(--text-color);
25
-
margin-bottom: 1.5rem;
26
-
font-size: 1.8rem;
27
-
gap: 15px;
28
-
align-items: center;
26
+
.login-card h1 {
27
+
color: var(--button-bg);
28
+
font-size: 2em;
29
+
margin-bottom: 10px;
30
+
text-align: center;
29
31
}
30
32
31
33
.login-card p {
32
-
color: var(--secondary-text-color);
33
-
margin-bottom: 1.5rem;
34
+
color: var(--text);
35
+
margin-bottom: 20px;
36
+
line-height: 1.5;
37
+
text-align: center;
34
38
}
35
39
36
40
.login-error {
···
44
48
.login-form {
45
49
display: flex;
46
50
flex-direction: column;
47
-
gap: 1.5rem;
48
-
margin-bottom: 1.5rem;
51
+
gap: 15px;
52
+
width: 100%;
53
+
}
54
+
55
+
.login-input-field {
56
+
border: 2px solid var(--card-border);
57
+
border-radius: 6px;
58
+
padding: 10px 12px;
59
+
font-size: 1em;
60
+
background-color: var(--navbar-bg);
61
+
color: var(--text);
62
+
transition: all 0.3s ease;
63
+
font-family: inherit;
64
+
text-align: center;
65
+
width: auto;
66
+
max-width: 100%;
67
+
}
68
+
69
+
.login-input-field:hover,
70
+
.login-input-field:focus {
71
+
border-color: var(--button-bg);
72
+
background-color: var(--background);
73
+
outline: none;
74
+
}
75
+
76
+
.login-submit-button {
77
+
background: var(--button-bg);
78
+
color: var(--button-text);
79
+
border: none;
80
+
border-radius: 6px;
81
+
padding: 10px 20px;
82
+
font-weight: 700;
83
+
font-size: 1em;
84
+
cursor: pointer;
85
+
transition: background-color 0.3s ease;
86
+
width: fit-content;
87
+
margin: 10px auto 0;
49
88
}
50
89
51
-
.login-info {
52
-
border-top: 1px solid var(--border-color);
53
-
padding-top: 1.5rem;
54
-
margin-top: 1rem;
90
+
.login-submit-button:hover {
91
+
background: var(--button-hover-bg, #0056b3);
55
92
}
56
93
57
-
.login-info p {
58
-
font-size: 0.9rem;
59
-
color: var(--secondary-text-color);
94
+
.login-submit-button:disabled {
95
+
background-color: var(--button-disabled-bg, #cccccc);
96
+
cursor: not-allowed;
97
+
opacity: 0.7;
98
+
}
99
+
100
+
.login-status-message,
101
+
.login-error-message {
102
+
text-align: center;
103
+
margin-top: 10px;
104
+
font-size: 0.9em;
105
+
}
106
+
107
+
.login-error-message {
108
+
color: var(--error-text, #721c24);
109
+
background-color: var(--error-bg, #f8d7da);
110
+
padding: 10px;
111
+
border-radius: 4px;
112
+
border: 1px solid var(--error-border, #f5c6cb);
113
+
}
114
+
115
+
.dark-mode .login-error-message {
116
+
color: var(--error-text-dark, #f5c6cb);
117
+
background-color: var(--error-bg-dark, #4d1f24);
118
+
border-color: var(--error-border-dark, #721c24);
119
+
}
120
+
121
+
.login-privacy-note {
122
+
font-size: 0.85em;
123
+
color: var(--text-muted, #6c757d);
124
+
margin-top: 20px;
125
+
text-align: center;
126
+
}
127
+
128
+
.login-status p {
129
+
font-size: 1.1em;
130
+
color: var(--text-muted, var(--text));
60
131
}
+34
-22
src/components/Login/Login.js
+34
-22
src/components/Login/Login.js
···
10
10
const location = useLocation();
11
11
12
12
const queryParams = new URLSearchParams(location.search);
13
-
const returnUrl = queryParams.get('returnUrl') || '/';
13
+
const returnUrl = queryParams.get('returnUrl') || '/verifier';
14
14
15
15
useEffect(() => {
16
16
if (isAuthenticated) {
17
17
console.log('Already authenticated, redirecting from Login page to:', returnUrl);
18
-
navigate(returnUrl);
18
+
navigate(returnUrl, { replace: true });
19
19
}
20
20
}, [isAuthenticated, navigate, returnUrl]);
21
21
···
30
30
};
31
31
32
32
if (isAuthenticated) {
33
-
return <div>Redirecting...</div>;
33
+
return (
34
+
<div className="login-container login-status">
35
+
<p>Already logged in. Redirecting...</p>
36
+
</div>
37
+
);
34
38
}
35
39
36
40
return (
37
41
<div className="login-container">
38
-
<h1>Login to Cred Blue</h1>
39
-
<p>Enter your Bluesky handle (e.g., yourname.bsky.social) or leave blank to use bsky.social.</p>
40
-
<form onSubmit={handleSubmit}>
41
-
<input
42
-
type="text"
43
-
value={handle}
44
-
onChange={handleInputChange}
45
-
placeholder="yourname.bsky.social (optional)"
46
-
aria-label="Bluesky Handle (optional)"
47
-
/>
48
-
{loading && <p>Processing...</p>}
49
-
{error && <p className="error-message">Login failed: {error}</p>}
50
-
<button type="submit" disabled={loading}>
51
-
{loading ? 'Processing...' : 'Login with Bluesky'}
52
-
</button>
53
-
</form>
54
-
<p className="privacy-note">
55
-
We use official Bluesky authentication. We don't see or store your password.
56
-
</p>
42
+
<div className="login-card">
43
+
<h1>Login to Cred Blue</h1>
44
+
<p>Enter your Bluesky handle (e.g., yourname.bsky.social) or leave blank to use bsky.social.</p>
45
+
<form onSubmit={handleSubmit} className="login-form">
46
+
<input
47
+
type="text"
48
+
value={handle}
49
+
onChange={handleInputChange}
50
+
placeholder="yourname.bsky.social (optional)"
51
+
aria-label="Bluesky Handle (optional)"
52
+
className="login-input-field"
53
+
disabled={loading}
54
+
/>
55
+
{loading && <p className="login-status-message">Processing...</p>}
56
+
{error && <p className="login-error-message">Login failed: {error}</p>}
57
+
<button
58
+
type="submit"
59
+
disabled={loading}
60
+
className="login-submit-button"
61
+
>
62
+
{loading ? 'Processing...' : 'Login with Bluesky'}
63
+
</button>
64
+
</form>
65
+
<p className="login-privacy-note">
66
+
We use official Bluesky authentication. We don't see or store your password.
67
+
</p>
68
+
</div>
57
69
</div>
58
70
);
59
71
};
+2
-2
src/components/Login/LoginCallback.js
+2
-2
src/components/Login/LoginCallback.js
···
19
19
if (isAuthenticated) {
20
20
console.log('(LoginCallback) Authentication successful, redirecting...');
21
21
// TODO: Implement state parsing for returnUrl if needed
22
-
const returnUrl = '/'; // Default redirect
23
-
navigate(returnUrl);
22
+
const returnUrl = '/verifier'; // Changed redirect target
23
+
navigate(returnUrl, { replace: true }); // Use replace to avoid callback in history
24
24
} else {
25
25
// If not authenticated after loading, something went wrong
26
26
console.error('(LoginCallback) Authentication failed after loading.');
+20
-109
src/components/Verifier/Verifier.css
+20
-109
src/components/Verifier/Verifier.css
···
24
24
margin-bottom: 20px;
25
25
}
26
26
27
-
.verifier-container h2 {
28
-
font-size: 1.5em; /* Adjust */
29
-
margin-top: 0px; /* Space between sections */
30
-
border-bottom: 1px solid var(--card-border); /* Separator */
27
+
/* Apply consistent styles ONLY to h2 elements within verifier sections */
28
+
.verifier-section h2 {
29
+
color: var(--button-bg);
30
+
font-size: 1.5em;
31
+
text-align: left;
32
+
margin-top: 0;
33
+
margin-bottom: 15px;
31
34
padding-bottom: 10px;
32
-
}
33
-
34
-
.verifier-intro-text,
35
-
.verifier-section p {
36
-
color: var(--text);
37
-
line-height: 1.6;
38
-
margin-bottom: 0px;
39
-
text-align: left;
35
+
border-bottom: 1px solid var(--card-border);
40
36
}
41
37
42
38
.verifier-page-header {
···
90
86
/* Form Styles */
91
87
.verifier-section {
92
88
background: var(--navbar-bg);
93
-
border: 1px solid var(--card-border);
89
+
/* border: 1px solid var(--card-border); */ /* Remove border to match alt-card */
94
90
border-radius: 12px;
95
-
padding: 20px;
91
+
padding: 40px 30px; /* Increase padding to match alt-card */
96
92
margin-bottom: 20px;
97
93
}
98
94
···
245
241
}
246
242
.verifier-list-header h2 {
247
243
margin: 0;
248
-
border: none; /* Remove border inherited from h2 general style */
249
244
padding: 0;
245
+
border-bottom: none; /* Explicitly remove border here */
250
246
}
251
247
252
248
.verifier-list,
···
346
342
font-weight: bold;
347
343
}
348
344
349
-
350
345
/* Official Verifier Status */
346
+
/*
351
347
.verifier-official-verifier-tooltip {
352
-
/* Remove old styles for this if they existed, or repurpose if needed */
348
+
...
353
349
}
350
+
*/
354
351
355
-
/* New Tooltip Styles */
356
-
.verifier-tooltip-container {
357
-
position: relative;
358
-
display: inline-block;
359
-
margin-left: 5px; /* Keep spacing */
360
-
}
361
-
362
-
.verifier-tooltip-icon {
363
-
display: inline-block;
364
-
background-color: var(--card-border); /* Use a subtle background */
365
-
color: var(--text-muted, var(--text));
366
-
border-radius: 50%;
367
-
width: 1.4em; /* Adjust size */
368
-
height: 1.4em;
369
-
line-height: 1.4em; /* Center text vertically */
370
-
text-align: center;
371
-
font-size: 0.8em;
372
-
font-weight: bold;
373
-
cursor: help;
374
-
transition: background-color 0.3s ease, color 0.3s ease;
375
-
}
376
-
377
-
.verifier-tooltip-icon:hover {
378
-
background-color: var(--button-bg); /* Use button color on hover */
379
-
color: var(--button-text);
380
-
}
381
-
382
-
.verifier-tooltip-text {
383
-
visibility: hidden;
384
-
opacity: 0;
385
-
width: auto; /* Allow content to determine width */
386
-
max-width: 250px; /* Keep a max width */
387
-
background-color: var(--tooltip-bg, #333);
388
-
color: var(--tooltip-text, #fff);
389
-
text-align: center;
390
-
border-radius: 6px;
391
-
padding: 8px 12px;
392
-
position: absolute;
393
-
z-index: 10;
394
-
bottom: 135%;
395
-
left: 50%; /* Position the left edge at the center */
396
-
transform: translateX(-50%); /* Shift element left by half its own width */
397
-
transition: opacity 0.3s ease, visibility 0.3s ease;
398
-
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
352
+
/* Add Style for Description Paragraph */
353
+
.verifier-section-description {
399
354
font-size: 0.9em;
400
-
line-height: 1.4;
401
-
}
402
-
403
-
/* Tooltip arrow */
404
-
.verifier-tooltip-text::after {
405
-
content: "";
406
-
position: absolute;
407
-
top: 100%;
408
-
left: 50%;
409
-
transform: translateX(-50%); /* Center the arrow */
410
-
border-width: 5px;
411
-
border-style: solid;
412
-
border-color: var(--tooltip-bg, #333) transparent transparent transparent;
413
-
}
414
-
415
-
/* Media Query for smaller screens */
416
-
@media (max-width: 480px) {
417
-
.verifier-tooltip-text {
418
-
max-width: 85vw; /* Limit width relative to viewport */
419
-
left: 50%; /* Keep centered relative to icon */
420
-
transform: translateX(-50%); /* Keep centering transform */
421
-
}
422
-
.verifier-tooltip-text::after {
423
-
left: 50%; /* Keep arrow centered */
424
-
transform: translateX(-50%); /* Keep centering transform */
425
-
}
426
-
}
427
-
428
-
.verifier-tooltip-container:hover .verifier-tooltip-text {
429
-
visibility: visible;
430
-
opacity: 1;
431
-
}
432
-
433
-
/* Dark mode tooltip adjustments */
434
-
.dark-mode .verifier-tooltip-icon {
435
-
background-color: var(--card-border-dark, #555); /* Adjust dark variable */
436
-
color: var(--text-muted-dark, var(--text));
437
-
}
438
-
.dark-mode .verifier-tooltip-icon:hover {
439
-
background-color: var(--button-bg); /* Keep button colors */
440
-
color: var(--button-text);
441
-
}
442
-
.dark-mode .verifier-tooltip-text {
443
-
background-color: var(--tooltip-bg-dark, #eee);
444
-
color: var(--tooltip-text-dark, #333);
445
-
}
446
-
.dark-mode .verifier-tooltip-text::after {
447
-
border-top-color: var(--tooltip-bg-dark, #eee); /* Match dark background */
355
+
color: var(--text-muted, #6c757d);
356
+
margin-top: -5px; /* Adjust to position nicely below header */
357
+
margin-bottom: 15px; /* Space before the list */
358
+
text-align: left;
448
359
}
449
360
450
361
.verifier-official-verifier-note {
+10
-9
src/components/Verifier/Verifier.js
+10
-9
src/components/Verifier/Verifier.js
···
714
714
715
715
<div className="verifier-section">
716
716
<div style={{display: 'flex', alignItems: 'center', marginBottom: '10px'}}>
717
-
<h2 style={{ display: 'inline-block', marginRight: '8px', marginBottom: 0, border: 'none', padding: 0 }}>Your Official Verifications</h2>
718
-
<div className="verifier-tooltip-container">
719
-
<span className="verifier-tooltip-icon">(?)</span>
720
-
<span className="verifier-tooltip-text">
721
-
{trustedVerifiersTooltip}
722
-
</span>
723
-
</div>
724
-
</div>
725
-
<div>
717
+
<h2 style={{ display: 'inline-block', marginRight: '0px', marginBottom: '0', border: 'none', padding: '0' }}>Your Official Verifications</h2>
718
+
</div>
719
+
<p className="verifier-section-description">
720
+
Checking if any of Bluesky's Trusted Verifiers have created a verification record for your username.
721
+
</p>
722
+
<div>
726
723
{TRUSTED_VERIFIERS.map(verifierId => {
727
724
const status = officialVerifiersStatus[verifierId] || 'idle';
728
725
let message = '...'; let icon = '⏳'; let statusClass = 'verifier-idle-status';
···
775
772
</div>
776
773
777
774
<div className="verifier-section">
775
+
<div className="verifier-list-header">
776
+
<h2>Accounts You've Verified</h2>
777
+
<button onClick={fetchVerifications} disabled={isAnyOperationInProgress} className="verifier-action-button verifier-refresh-button">Refresh List</button>
778
+
</div>
778
779
779
780
{revokeStatusMessage && (
780
781
<div className={`verifier-status-box ${revokeStatusMessage.includes('failed') ? 'verifier-status-box-error' : 'verifier-status-box-success'}`}>