@civic/auth 0.6.0 → 0.6.1-beta.2
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/nextjs/config.d.ts.map +1 -1
- package/dist/nextjs/config.js +3 -1
- package/dist/nextjs/config.js.map +1 -1
- package/dist/nextjs/hooks/useUserCookie.d.ts.map +1 -1
- package/dist/nextjs/hooks/useUserCookie.js.map +1 -1
- package/dist/nextjs/providers/NextAuthProvider.d.ts.map +1 -1
- package/dist/nextjs/providers/NextAuthProvider.js +1 -0
- package/dist/nextjs/providers/NextAuthProvider.js.map +1 -1
- package/dist/shared/components/CivicAuthIframeContainer.js +1 -1
- package/dist/shared/components/CivicAuthIframeContainer.js.map +1 -1
- package/dist/shared/hooks/useSignIn.d.ts +9 -4
- package/dist/shared/hooks/useSignIn.d.ts.map +1 -1
- package/dist/shared/hooks/useSignIn.js +75 -42
- package/dist/shared/hooks/useSignIn.js.map +1 -1
- package/dist/shared/lib/BrowserAuthenticationRefresher.d.ts +7 -1
- package/dist/shared/lib/BrowserAuthenticationRefresher.d.ts.map +1 -1
- package/dist/shared/lib/BrowserAuthenticationRefresher.js +15 -2
- package/dist/shared/lib/BrowserAuthenticationRefresher.js.map +1 -1
- package/dist/shared/lib/util.d.ts +1 -1
- package/dist/shared/lib/util.d.ts.map +1 -1
- package/dist/shared/lib/util.js +6 -1
- package/dist/shared/lib/util.js.map +1 -1
- package/dist/shared/providers/AuthContext.d.ts +7 -2
- package/dist/shared/providers/AuthContext.d.ts.map +1 -1
- package/dist/shared/providers/AuthContext.js.map +1 -1
- package/dist/shared/providers/UserProvider.d.ts +5 -1
- package/dist/shared/providers/UserProvider.d.ts.map +1 -1
- package/dist/shared/providers/UserProvider.js.map +1 -1
- package/dist/shared/version.d.ts +1 -1
- package/dist/shared/version.d.ts.map +1 -1
- package/dist/shared/version.js +1 -1
- package/dist/shared/version.js.map +1 -1
- package/dist/vanillajs/auth/AuthenticationEvents.d.ts.map +1 -1
- package/dist/vanillajs/auth/AuthenticationEvents.js +2 -2
- package/dist/vanillajs/auth/AuthenticationEvents.js.map +1 -1
- package/dist/vanillajs/auth/CivicAuth.d.ts +111 -92
- package/dist/vanillajs/auth/CivicAuth.d.ts.map +1 -1
- package/dist/vanillajs/auth/CivicAuth.js +474 -321
- package/dist/vanillajs/auth/CivicAuth.js.map +1 -1
- package/dist/vanillajs/auth/SessionManager.d.ts +40 -9
- package/dist/vanillajs/auth/SessionManager.d.ts.map +1 -1
- package/dist/vanillajs/auth/SessionManager.js +96 -61
- package/dist/vanillajs/auth/SessionManager.js.map +1 -1
- package/dist/vanillajs/auth/TokenRefresher.d.ts +54 -0
- package/dist/vanillajs/auth/TokenRefresher.d.ts.map +1 -0
- package/dist/vanillajs/auth/TokenRefresher.js +166 -0
- package/dist/vanillajs/auth/TokenRefresher.js.map +1 -0
- package/dist/vanillajs/auth/config/ConfigProcessor.d.ts +6 -0
- package/dist/vanillajs/auth/config/ConfigProcessor.d.ts.map +1 -0
- package/dist/vanillajs/auth/config/ConfigProcessor.js +59 -0
- package/dist/vanillajs/auth/config/ConfigProcessor.js.map +1 -0
- package/dist/vanillajs/auth/handlers/IframeAuthHandler.d.ts +40 -0
- package/dist/vanillajs/auth/handlers/IframeAuthHandler.d.ts.map +1 -0
- package/dist/vanillajs/auth/handlers/IframeAuthHandler.js +388 -0
- package/dist/vanillajs/auth/handlers/IframeAuthHandler.js.map +1 -0
- package/dist/vanillajs/auth/handlers/MessageHandler.d.ts +170 -0
- package/dist/vanillajs/auth/handlers/MessageHandler.d.ts.map +1 -0
- package/dist/vanillajs/auth/handlers/MessageHandler.js +367 -0
- package/dist/vanillajs/auth/handlers/MessageHandler.js.map +1 -0
- package/dist/vanillajs/auth/handlers/OAuthCallbackHandler.d.ts +90 -0
- package/dist/vanillajs/auth/handlers/OAuthCallbackHandler.d.ts.map +1 -0
- package/dist/vanillajs/auth/handlers/OAuthCallbackHandler.js +301 -0
- package/dist/vanillajs/auth/handlers/OAuthCallbackHandler.js.map +1 -0
- package/dist/vanillajs/auth/handlers/PopupHandler.d.ts +108 -0
- package/dist/vanillajs/auth/handlers/PopupHandler.d.ts.map +1 -0
- package/dist/vanillajs/auth/handlers/PopupHandler.js +333 -0
- package/dist/vanillajs/auth/handlers/PopupHandler.js.map +1 -0
- package/dist/vanillajs/auth/types/AuthTypes.d.ts +128 -0
- package/dist/vanillajs/auth/types/AuthTypes.d.ts.map +1 -0
- package/dist/vanillajs/auth/types/AuthTypes.js +40 -0
- package/dist/vanillajs/auth/types/AuthTypes.js.map +1 -0
- package/dist/vanillajs/iframe/IframeManager.d.ts +115 -0
- package/dist/vanillajs/iframe/IframeManager.d.ts.map +1 -0
- package/dist/vanillajs/iframe/IframeManager.js +614 -0
- package/dist/vanillajs/iframe/IframeManager.js.map +1 -0
- package/dist/vanillajs/iframe/IframeResizer.d.ts +15 -0
- package/dist/vanillajs/iframe/IframeResizer.d.ts.map +1 -0
- package/dist/vanillajs/iframe/IframeResizer.js +127 -0
- package/dist/vanillajs/iframe/IframeResizer.js.map +1 -0
- package/dist/vanillajs/index.d.ts +8 -7
- package/dist/vanillajs/index.d.ts.map +1 -1
- package/dist/vanillajs/index.js +10 -7
- package/dist/vanillajs/index.js.map +1 -1
- package/dist/vanillajs/services/ApiService.d.ts.map +1 -1
- package/dist/vanillajs/services/ApiService.js +2 -2
- package/dist/vanillajs/services/ApiService.js.map +1 -1
- package/dist/vanillajs/types/index.d.ts +17 -12
- package/dist/vanillajs/types/index.d.ts.map +1 -1
- package/dist/vanillajs/types/index.js +15 -10
- package/dist/vanillajs/types/index.js.map +1 -1
- package/dist/vanillajs/ui/LoadingComponents.d.ts +51 -0
- package/dist/vanillajs/ui/LoadingComponents.d.ts.map +1 -0
- package/dist/vanillajs/ui/LoadingComponents.js +363 -0
- package/dist/vanillajs/ui/LoadingComponents.js.map +1 -0
- package/dist/vanillajs/utils/auth-utils.d.ts +2 -1
- package/dist/vanillajs/utils/auth-utils.d.ts.map +1 -1
- package/dist/vanillajs/utils/auth-utils.js +6 -3
- package/dist/vanillajs/utils/auth-utils.js.map +1 -1
- package/dist/vanillajs/utils/logger.d.ts +16 -15
- package/dist/vanillajs/utils/logger.d.ts.map +1 -1
- package/dist/vanillajs/utils/logger.js +35 -19
- package/dist/vanillajs/utils/logger.js.map +1 -1
- package/package.json +1 -1
- package/dist/vanillajs/iframe/domUtils.d.ts +0 -4
- package/dist/vanillajs/iframe/domUtils.d.ts.map +0 -1
- package/dist/vanillajs/iframe/domUtils.js +0 -25
- package/dist/vanillajs/iframe/domUtils.js.map +0 -1
- package/dist/vanillajs/storage/BrowserCookieStorageAdapter.d.ts +0 -19
- package/dist/vanillajs/storage/BrowserCookieStorageAdapter.d.ts.map +0 -1
- package/dist/vanillajs/storage/BrowserCookieStorageAdapter.js +0 -101
- package/dist/vanillajs/storage/BrowserCookieStorageAdapter.js.map +0 -1
- package/dist/vanillajs/storage/BrowserLocalStorageAdapter.d.ts +0 -9
- package/dist/vanillajs/storage/BrowserLocalStorageAdapter.d.ts.map +0 -1
- package/dist/vanillajs/storage/BrowserLocalStorageAdapter.js +0 -36
- package/dist/vanillajs/storage/BrowserLocalStorageAdapter.js.map +0 -1
- package/dist/vanillajs/storage/InMemoryStorageAdapter.d.ts +0 -9
- package/dist/vanillajs/storage/InMemoryStorageAdapter.d.ts.map +0 -1
- package/dist/vanillajs/storage/InMemoryStorageAdapter.js +0 -16
- package/dist/vanillajs/storage/InMemoryStorageAdapter.js.map +0 -1
- package/dist/vanillajs/storage/StorageAdapter.d.ts +0 -15
- package/dist/vanillajs/storage/StorageAdapter.d.ts.map +0 -1
- package/dist/vanillajs/storage/StorageAdapter.js +0 -16
- package/dist/vanillajs/storage/StorageAdapter.js.map +0 -1
- package/dist/vanillajs/utils/page-handlers.d.ts +0 -29
- package/dist/vanillajs/utils/page-handlers.d.ts.map +0 -1
- package/dist/vanillajs/utils/page-handlers.js +0 -165
- package/dist/vanillajs/utils/page-handlers.js.map +0 -1
|
@@ -0,0 +1,363 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* UI Components for Civic Auth Vanilla JS implementation
|
|
3
|
+
* Converted from React components to vanilla DOM elements
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Utility function to set multiple styles on an element using a key-value object
|
|
7
|
+
*/
|
|
8
|
+
function setStyles(element, styles) {
|
|
9
|
+
Object.entries(styles).forEach(([property, value]) => {
|
|
10
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- CSSStyleDeclaration has read-only properties that prevent proper typing
|
|
11
|
+
element.style[property] = value;
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Utility function to set multiple attributes on an element using a key-value object
|
|
16
|
+
*/
|
|
17
|
+
function setAttributes(element, attributes) {
|
|
18
|
+
Object.entries(attributes).forEach(([name, value]) => {
|
|
19
|
+
element.setAttribute(name, value);
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Creates a horizontal shimmer loader element (SVG-based)
|
|
24
|
+
* Equivalent to the SVGLoading component from React implementation
|
|
25
|
+
*/
|
|
26
|
+
export function createShimmerLoader(options = {}) {
|
|
27
|
+
const { backgroundColor = "#ffffff", width = "100%", height = "40px", borderRadius = "0.5rem", } = options;
|
|
28
|
+
// Create container div
|
|
29
|
+
const container = document.createElement("div");
|
|
30
|
+
setStyles(container, {
|
|
31
|
+
position: "absolute",
|
|
32
|
+
top: "-6px",
|
|
33
|
+
left: "0",
|
|
34
|
+
borderRadius,
|
|
35
|
+
backgroundColor,
|
|
36
|
+
width,
|
|
37
|
+
height,
|
|
38
|
+
opacity: "1",
|
|
39
|
+
});
|
|
40
|
+
setAttributes(container, {
|
|
41
|
+
class: "civic-auth-shimmer-loader",
|
|
42
|
+
});
|
|
43
|
+
// Add CSS animation keyframes
|
|
44
|
+
const style = document.createElement("style");
|
|
45
|
+
style.textContent = `
|
|
46
|
+
@keyframes civic-shimmer {
|
|
47
|
+
0% {
|
|
48
|
+
transform: translate(-328px, 0);
|
|
49
|
+
}
|
|
50
|
+
100% {
|
|
51
|
+
transform: translate(328px, 0);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
`;
|
|
55
|
+
// Only add the style if it doesn't already exist
|
|
56
|
+
if (!document.querySelector("style[data-civic-shimmer]")) {
|
|
57
|
+
style.setAttribute("data-civic-shimmer", "true");
|
|
58
|
+
document.head.appendChild(style);
|
|
59
|
+
}
|
|
60
|
+
// Create SVG element
|
|
61
|
+
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
62
|
+
setAttributes(svg, {
|
|
63
|
+
"shape-rendering": "geometricPrecision",
|
|
64
|
+
"text-rendering": "geometricPrecision",
|
|
65
|
+
viewBox: "0 0 324 28",
|
|
66
|
+
height: "40",
|
|
67
|
+
width: "100%",
|
|
68
|
+
class: "civic-auth-svg-loading",
|
|
69
|
+
});
|
|
70
|
+
setStyles(svg, {
|
|
71
|
+
position: "absolute",
|
|
72
|
+
top: "-6px",
|
|
73
|
+
left: "0",
|
|
74
|
+
borderRadius,
|
|
75
|
+
backgroundColor,
|
|
76
|
+
});
|
|
77
|
+
// Create gradient definition
|
|
78
|
+
const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
|
|
79
|
+
const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
|
|
80
|
+
setAttributes(gradient, {
|
|
81
|
+
id: `civic-shimmer-gradient-${Date.now()}`,
|
|
82
|
+
x2: "320",
|
|
83
|
+
y1: "15",
|
|
84
|
+
y2: "15",
|
|
85
|
+
gradientUnits: "userSpaceOnUse",
|
|
86
|
+
});
|
|
87
|
+
// Create gradient stops
|
|
88
|
+
const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
89
|
+
setAttributes(stop1, {
|
|
90
|
+
offset: "0",
|
|
91
|
+
"stop-color": backgroundColor,
|
|
92
|
+
});
|
|
93
|
+
const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
94
|
+
setAttributes(stop2, {
|
|
95
|
+
offset: ".511",
|
|
96
|
+
"stop-color": "#9A9DA6",
|
|
97
|
+
});
|
|
98
|
+
const stop3 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
99
|
+
setAttributes(stop3, {
|
|
100
|
+
offset: "1",
|
|
101
|
+
"stop-color": backgroundColor,
|
|
102
|
+
});
|
|
103
|
+
gradient.appendChild(stop1);
|
|
104
|
+
gradient.appendChild(stop2);
|
|
105
|
+
gradient.appendChild(stop3);
|
|
106
|
+
defs.appendChild(gradient);
|
|
107
|
+
// Create background rectangle
|
|
108
|
+
const rect = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
109
|
+
setAttributes(rect, {
|
|
110
|
+
id: "civic-shimmer-rect",
|
|
111
|
+
fill: backgroundColor,
|
|
112
|
+
d: "M0 0h328v28H0z",
|
|
113
|
+
});
|
|
114
|
+
// Create shimmer path
|
|
115
|
+
const shimmer = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
116
|
+
setAttributes(shimmer, {
|
|
117
|
+
id: "civic-shimmer-path",
|
|
118
|
+
fill: `url(#${gradient.getAttribute("id")})`,
|
|
119
|
+
d: "M0 -2h328v34H0z",
|
|
120
|
+
transform: "translate(-328)",
|
|
121
|
+
});
|
|
122
|
+
setStyles(shimmer, {
|
|
123
|
+
animation: "1s linear infinite both civic-shimmer",
|
|
124
|
+
});
|
|
125
|
+
// Assemble SVG
|
|
126
|
+
svg.appendChild(defs);
|
|
127
|
+
svg.appendChild(rect);
|
|
128
|
+
svg.appendChild(shimmer);
|
|
129
|
+
// Add SVG to container
|
|
130
|
+
container.appendChild(svg);
|
|
131
|
+
return container;
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Creates a shimmer loader for iframe loading states
|
|
135
|
+
* Positioned to center within an iframe container
|
|
136
|
+
*/
|
|
137
|
+
export function createIframeShimmerLoader(backgroundColor = "#ffffff", maxWidth) {
|
|
138
|
+
const wrapper = document.createElement("div");
|
|
139
|
+
const wrapperStyles = {
|
|
140
|
+
width: "100%",
|
|
141
|
+
height: "26px",
|
|
142
|
+
display: "flex",
|
|
143
|
+
alignItems: "center",
|
|
144
|
+
justifyContent: "center",
|
|
145
|
+
position: "absolute",
|
|
146
|
+
top: "50%",
|
|
147
|
+
left: "50%",
|
|
148
|
+
transform: "translate(-50%, -50%)",
|
|
149
|
+
borderRadius: "13px",
|
|
150
|
+
overflow: "hidden",
|
|
151
|
+
};
|
|
152
|
+
// Add max-width if specified
|
|
153
|
+
if (maxWidth) {
|
|
154
|
+
wrapperStyles.maxWidth = maxWidth;
|
|
155
|
+
}
|
|
156
|
+
setStyles(wrapper, wrapperStyles);
|
|
157
|
+
setAttributes(wrapper, {
|
|
158
|
+
"data-testid": "iframe-shimmer-loader",
|
|
159
|
+
class: "civic-auth-iframe-shimmer-wrapper",
|
|
160
|
+
});
|
|
161
|
+
const shimmerLoader = createShimmerLoader({
|
|
162
|
+
backgroundColor,
|
|
163
|
+
width: "100%",
|
|
164
|
+
height: "26px",
|
|
165
|
+
borderRadius: "13px",
|
|
166
|
+
});
|
|
167
|
+
wrapper.appendChild(shimmerLoader);
|
|
168
|
+
return wrapper;
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Creates a simple horizontal skeleton loader (CSS-based alternative)
|
|
172
|
+
* Lighter weight alternative to SVG shimmer
|
|
173
|
+
*/
|
|
174
|
+
export function createSkeletonLoader(options = {}) {
|
|
175
|
+
const { backgroundColor = "#f0f0f0", width = "100%", height = "20px", borderRadius = "4px", } = options;
|
|
176
|
+
const skeleton = document.createElement("div");
|
|
177
|
+
setStyles(skeleton, {
|
|
178
|
+
width,
|
|
179
|
+
height,
|
|
180
|
+
background: `linear-gradient(90deg, ${backgroundColor} 25%, #e0e0e0 50%, ${backgroundColor} 75%)`,
|
|
181
|
+
backgroundSize: "200% 100%",
|
|
182
|
+
animation: "civic-skeleton-shimmer 1.5s infinite",
|
|
183
|
+
borderRadius,
|
|
184
|
+
});
|
|
185
|
+
setAttributes(skeleton, {
|
|
186
|
+
class: "civic-auth-skeleton-loader",
|
|
187
|
+
});
|
|
188
|
+
// Add CSS animation keyframes for skeleton
|
|
189
|
+
const style = document.createElement("style");
|
|
190
|
+
style.textContent = `
|
|
191
|
+
@keyframes civic-skeleton-shimmer {
|
|
192
|
+
0% { background-position: -200% 0; }
|
|
193
|
+
100% { background-position: 200% 0; }
|
|
194
|
+
}
|
|
195
|
+
`;
|
|
196
|
+
// Only add the style if it doesn't already exist
|
|
197
|
+
if (!document.querySelector("style[data-civic-skeleton]")) {
|
|
198
|
+
style.setAttribute("data-civic-skeleton", "true");
|
|
199
|
+
document.head.appendChild(style);
|
|
200
|
+
}
|
|
201
|
+
return skeleton;
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* Creates a button content loader that hides content and shows a skeleton
|
|
205
|
+
* Equivalent to ButtonContentOrLoader from React implementation
|
|
206
|
+
*/
|
|
207
|
+
export function createButtonContentLoader(content) {
|
|
208
|
+
const container = document.createElement("div");
|
|
209
|
+
setStyles(container, {
|
|
210
|
+
position: "relative",
|
|
211
|
+
display: "flex",
|
|
212
|
+
alignItems: "center",
|
|
213
|
+
justifyContent: "center",
|
|
214
|
+
});
|
|
215
|
+
setAttributes(container, {
|
|
216
|
+
class: "civic-auth-button-content-loader",
|
|
217
|
+
});
|
|
218
|
+
// Content span
|
|
219
|
+
const contentSpan = document.createElement("span");
|
|
220
|
+
setStyles(contentSpan, {
|
|
221
|
+
visibility: "visible",
|
|
222
|
+
whiteSpace: "nowrap",
|
|
223
|
+
});
|
|
224
|
+
setAttributes(contentSpan, {
|
|
225
|
+
class: "civic-auth-button-content",
|
|
226
|
+
});
|
|
227
|
+
if (typeof content === "string") {
|
|
228
|
+
contentSpan.textContent = content;
|
|
229
|
+
}
|
|
230
|
+
else {
|
|
231
|
+
contentSpan.appendChild(content);
|
|
232
|
+
}
|
|
233
|
+
// Loader span (hidden by default)
|
|
234
|
+
const loaderSpan = document.createElement("span");
|
|
235
|
+
setStyles(loaderSpan, {
|
|
236
|
+
position: "absolute",
|
|
237
|
+
display: "none",
|
|
238
|
+
justifyContent: "center",
|
|
239
|
+
alignItems: "center",
|
|
240
|
+
top: "0",
|
|
241
|
+
left: "0",
|
|
242
|
+
right: "0",
|
|
243
|
+
bottom: "0",
|
|
244
|
+
});
|
|
245
|
+
setAttributes(loaderSpan, {
|
|
246
|
+
class: "civic-auth-button-loader",
|
|
247
|
+
});
|
|
248
|
+
// Create skeleton loader for button
|
|
249
|
+
const skeletonLoader = createSkeletonLoader({
|
|
250
|
+
width: "70%",
|
|
251
|
+
height: "14px",
|
|
252
|
+
borderRadius: "7px",
|
|
253
|
+
});
|
|
254
|
+
loaderSpan.appendChild(skeletonLoader);
|
|
255
|
+
container.appendChild(contentSpan);
|
|
256
|
+
container.appendChild(loaderSpan);
|
|
257
|
+
return {
|
|
258
|
+
container,
|
|
259
|
+
showLoader: () => {
|
|
260
|
+
contentSpan.style.visibility = "hidden";
|
|
261
|
+
loaderSpan.style.display = "flex";
|
|
262
|
+
},
|
|
263
|
+
hideLoader: () => {
|
|
264
|
+
contentSpan.style.visibility = "visible";
|
|
265
|
+
loaderSpan.style.display = "none";
|
|
266
|
+
},
|
|
267
|
+
setContent: (newContent) => {
|
|
268
|
+
contentSpan.innerHTML = "";
|
|
269
|
+
if (typeof newContent === "string") {
|
|
270
|
+
contentSpan.textContent = newContent;
|
|
271
|
+
}
|
|
272
|
+
else {
|
|
273
|
+
contentSpan.appendChild(newContent);
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
/**
|
|
279
|
+
* Creates a close icon (X) SVG element
|
|
280
|
+
* Equivalent to the CloseIcon component from React implementation
|
|
281
|
+
*/
|
|
282
|
+
export function createCloseIcon() {
|
|
283
|
+
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
284
|
+
setAttributes(svg, {
|
|
285
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
286
|
+
width: "24",
|
|
287
|
+
height: "24",
|
|
288
|
+
viewBox: "0 0 24 24",
|
|
289
|
+
fill: "none",
|
|
290
|
+
stroke: "currentColor",
|
|
291
|
+
"stroke-width": "2",
|
|
292
|
+
"stroke-linecap": "round",
|
|
293
|
+
"stroke-linejoin": "round",
|
|
294
|
+
class: "lucide lucide-x",
|
|
295
|
+
});
|
|
296
|
+
// Create the X paths
|
|
297
|
+
const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
298
|
+
setAttributes(path1, {
|
|
299
|
+
d: "M18 6 6 18",
|
|
300
|
+
});
|
|
301
|
+
const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
302
|
+
setAttributes(path2, {
|
|
303
|
+
d: "m6 6 12 12",
|
|
304
|
+
});
|
|
305
|
+
svg.appendChild(path1);
|
|
306
|
+
svg.appendChild(path2);
|
|
307
|
+
return svg;
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* Creates a close button for modal iframes
|
|
311
|
+
* Positioned absolutely in the top-right corner
|
|
312
|
+
*/
|
|
313
|
+
export function createCloseButton(onClose) {
|
|
314
|
+
const button = document.createElement("button");
|
|
315
|
+
setStyles(button, {
|
|
316
|
+
position: "absolute",
|
|
317
|
+
right: "0.6rem",
|
|
318
|
+
top: "0.6rem",
|
|
319
|
+
cursor: "pointer",
|
|
320
|
+
display: "flex",
|
|
321
|
+
alignItems: "center",
|
|
322
|
+
justifyContent: "center",
|
|
323
|
+
border: "none",
|
|
324
|
+
backgroundColor: "transparent",
|
|
325
|
+
padding: "0.25rem",
|
|
326
|
+
color: "#9ca3af",
|
|
327
|
+
zIndex: "100",
|
|
328
|
+
opacity: "0",
|
|
329
|
+
transition: "opacity 50ms ease",
|
|
330
|
+
});
|
|
331
|
+
setAttributes(button, {
|
|
332
|
+
type: "button",
|
|
333
|
+
"aria-label": "Close",
|
|
334
|
+
});
|
|
335
|
+
// Add hover effect
|
|
336
|
+
button.addEventListener("mouseenter", () => {
|
|
337
|
+
button.style.opacity = "0.8";
|
|
338
|
+
});
|
|
339
|
+
button.addEventListener("mouseleave", () => {
|
|
340
|
+
button.style.opacity = "1";
|
|
341
|
+
});
|
|
342
|
+
// Add the close icon
|
|
343
|
+
const closeIcon = createCloseIcon();
|
|
344
|
+
button.appendChild(closeIcon);
|
|
345
|
+
// Add click handler
|
|
346
|
+
button.addEventListener("click", onClose);
|
|
347
|
+
return button;
|
|
348
|
+
}
|
|
349
|
+
/**
|
|
350
|
+
* Utility function to remove all civic auth loading styles from the document
|
|
351
|
+
* Useful for cleanup
|
|
352
|
+
*/
|
|
353
|
+
export function cleanupLoadingStyles() {
|
|
354
|
+
const shimmerStyle = document.querySelector("style[data-civic-shimmer]");
|
|
355
|
+
const skeletonStyle = document.querySelector("style[data-civic-skeleton]");
|
|
356
|
+
if (shimmerStyle) {
|
|
357
|
+
shimmerStyle.remove();
|
|
358
|
+
}
|
|
359
|
+
if (skeletonStyle) {
|
|
360
|
+
skeletonStyle.remove();
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
//# sourceMappingURL=LoadingComponents.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingComponents.js","sourceRoot":"","sources":["../../../src/vanillajs/ui/LoadingComponents.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * UI Components for Civic Auth Vanilla JS implementation\n * Converted from React components to vanilla DOM elements\n */\n\n/**\n * Utility function to set multiple styles on an element using a key-value object\n */\nfunction setStyles(\n element: HTMLElement | SVGElement,\n styles: Record<string, string>,\n): void {\n Object.entries(styles).forEach(([property, value]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- CSSStyleDeclaration has read-only properties that prevent proper typing\n (element.style as any)[property] = value;\n });\n}\n\n/**\n * Utility function to set multiple attributes on an element using a key-value object\n */\nfunction setAttributes(\n element: Element,\n attributes: Record<string, string>,\n): void {\n Object.entries(attributes).forEach(([name, value]) => {\n element.setAttribute(name, value);\n });\n}\n\nexport interface ShimmerLoaderOptions {\n backgroundColor?: string;\n width?: string;\n height?: string;\n borderRadius?: string;\n}\n\n/**\n * Creates a horizontal shimmer loader element (SVG-based)\n * Equivalent to the SVGLoading component from React implementation\n */\nexport function createShimmerLoader(\n options: ShimmerLoaderOptions = {},\n): HTMLElement {\n const {\n backgroundColor = \"#ffffff\",\n width = \"100%\",\n height = \"40px\",\n borderRadius = \"0.5rem\",\n } = options;\n\n // Create container div\n const container = document.createElement(\"div\");\n setStyles(container, {\n position: \"absolute\",\n top: \"-6px\",\n left: \"0\",\n borderRadius,\n backgroundColor,\n width,\n height,\n opacity: \"1\",\n });\n setAttributes(container, {\n class: \"civic-auth-shimmer-loader\",\n });\n\n // Add CSS animation keyframes\n const style = document.createElement(\"style\");\n style.textContent = `\n @keyframes civic-shimmer {\n 0% {\n transform: translate(-328px, 0);\n }\n 100% {\n transform: translate(328px, 0);\n }\n }\n `;\n\n // Only add the style if it doesn't already exist\n if (!document.querySelector(\"style[data-civic-shimmer]\")) {\n style.setAttribute(\"data-civic-shimmer\", \"true\");\n document.head.appendChild(style);\n }\n\n // Create SVG element\n const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n setAttributes(svg, {\n \"shape-rendering\": \"geometricPrecision\",\n \"text-rendering\": \"geometricPrecision\",\n viewBox: \"0 0 324 28\",\n height: \"40\",\n width: \"100%\",\n class: \"civic-auth-svg-loading\",\n });\n setStyles(svg, {\n position: \"absolute\",\n top: \"-6px\",\n left: \"0\",\n borderRadius,\n backgroundColor,\n });\n\n // Create gradient definition\n const defs = document.createElementNS(\"http://www.w3.org/2000/svg\", \"defs\");\n const gradient = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"linearGradient\",\n );\n setAttributes(gradient, {\n id: `civic-shimmer-gradient-${Date.now()}`,\n x2: \"320\",\n y1: \"15\",\n y2: \"15\",\n gradientUnits: \"userSpaceOnUse\",\n });\n\n // Create gradient stops\n const stop1 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"stop\");\n setAttributes(stop1, {\n offset: \"0\",\n \"stop-color\": backgroundColor,\n });\n\n const stop2 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"stop\");\n setAttributes(stop2, {\n offset: \".511\",\n \"stop-color\": \"#9A9DA6\",\n });\n\n const stop3 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"stop\");\n setAttributes(stop3, {\n offset: \"1\",\n \"stop-color\": backgroundColor,\n });\n\n gradient.appendChild(stop1);\n gradient.appendChild(stop2);\n gradient.appendChild(stop3);\n defs.appendChild(gradient);\n\n // Create background rectangle\n const rect = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n setAttributes(rect, {\n id: \"civic-shimmer-rect\",\n fill: backgroundColor,\n d: \"M0 0h328v28H0z\",\n });\n\n // Create shimmer path\n const shimmer = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"path\",\n );\n setAttributes(shimmer, {\n id: \"civic-shimmer-path\",\n fill: `url(#${gradient.getAttribute(\"id\")})`,\n d: \"M0 -2h328v34H0z\",\n transform: \"translate(-328)\",\n });\n setStyles(shimmer, {\n animation: \"1s linear infinite both civic-shimmer\",\n });\n\n // Assemble SVG\n svg.appendChild(defs);\n svg.appendChild(rect);\n svg.appendChild(shimmer);\n\n // Add SVG to container\n container.appendChild(svg);\n\n return container;\n}\n\n/**\n * Creates a shimmer loader for iframe loading states\n * Positioned to center within an iframe container\n */\nexport function createIframeShimmerLoader(\n backgroundColor = \"#ffffff\",\n maxWidth?: string,\n): HTMLElement {\n const wrapper = document.createElement(\"div\");\n const wrapperStyles: Record<string, string> = {\n width: \"100%\",\n height: \"26px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n borderRadius: \"13px\",\n overflow: \"hidden\",\n };\n\n // Add max-width if specified\n if (maxWidth) {\n wrapperStyles.maxWidth = maxWidth;\n }\n\n setStyles(wrapper, wrapperStyles);\n setAttributes(wrapper, {\n \"data-testid\": \"iframe-shimmer-loader\",\n class: \"civic-auth-iframe-shimmer-wrapper\",\n });\n\n const shimmerLoader = createShimmerLoader({\n backgroundColor,\n width: \"100%\",\n height: \"26px\",\n borderRadius: \"13px\",\n });\n\n wrapper.appendChild(shimmerLoader);\n return wrapper;\n}\n\n/**\n * Creates a simple horizontal skeleton loader (CSS-based alternative)\n * Lighter weight alternative to SVG shimmer\n */\nexport function createSkeletonLoader(\n options: ShimmerLoaderOptions = {},\n): HTMLElement {\n const {\n backgroundColor = \"#f0f0f0\",\n width = \"100%\",\n height = \"20px\",\n borderRadius = \"4px\",\n } = options;\n\n const skeleton = document.createElement(\"div\");\n setStyles(skeleton, {\n width,\n height,\n background: `linear-gradient(90deg, ${backgroundColor} 25%, #e0e0e0 50%, ${backgroundColor} 75%)`,\n backgroundSize: \"200% 100%\",\n animation: \"civic-skeleton-shimmer 1.5s infinite\",\n borderRadius,\n });\n setAttributes(skeleton, {\n class: \"civic-auth-skeleton-loader\",\n });\n\n // Add CSS animation keyframes for skeleton\n const style = document.createElement(\"style\");\n style.textContent = `\n @keyframes civic-skeleton-shimmer {\n 0% { background-position: -200% 0; }\n 100% { background-position: 200% 0; }\n }\n `;\n\n // Only add the style if it doesn't already exist\n if (!document.querySelector(\"style[data-civic-skeleton]\")) {\n style.setAttribute(\"data-civic-skeleton\", \"true\");\n document.head.appendChild(style);\n }\n\n return skeleton;\n}\n\n/**\n * Creates a button content loader that hides content and shows a skeleton\n * Equivalent to ButtonContentOrLoader from React implementation\n */\nexport function createButtonContentLoader(content: string | HTMLElement): {\n container: HTMLElement;\n showLoader: () => void;\n hideLoader: () => void;\n setContent: (newContent: string | HTMLElement) => void;\n} {\n const container = document.createElement(\"div\");\n setStyles(container, {\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n });\n setAttributes(container, {\n class: \"civic-auth-button-content-loader\",\n });\n\n // Content span\n const contentSpan = document.createElement(\"span\");\n setStyles(contentSpan, {\n visibility: \"visible\",\n whiteSpace: \"nowrap\",\n });\n setAttributes(contentSpan, {\n class: \"civic-auth-button-content\",\n });\n\n if (typeof content === \"string\") {\n contentSpan.textContent = content;\n } else {\n contentSpan.appendChild(content);\n }\n\n // Loader span (hidden by default)\n const loaderSpan = document.createElement(\"span\");\n setStyles(loaderSpan, {\n position: \"absolute\",\n display: \"none\",\n justifyContent: \"center\",\n alignItems: \"center\",\n top: \"0\",\n left: \"0\",\n right: \"0\",\n bottom: \"0\",\n });\n setAttributes(loaderSpan, {\n class: \"civic-auth-button-loader\",\n });\n\n // Create skeleton loader for button\n const skeletonLoader = createSkeletonLoader({\n width: \"70%\",\n height: \"14px\",\n borderRadius: \"7px\",\n });\n loaderSpan.appendChild(skeletonLoader);\n\n container.appendChild(contentSpan);\n container.appendChild(loaderSpan);\n\n return {\n container,\n showLoader: () => {\n contentSpan.style.visibility = \"hidden\";\n loaderSpan.style.display = \"flex\";\n },\n hideLoader: () => {\n contentSpan.style.visibility = \"visible\";\n loaderSpan.style.display = \"none\";\n },\n setContent: (newContent: string | HTMLElement) => {\n contentSpan.innerHTML = \"\";\n if (typeof newContent === \"string\") {\n contentSpan.textContent = newContent;\n } else {\n contentSpan.appendChild(newContent);\n }\n },\n };\n}\n\n/**\n * Creates a close icon (X) SVG element\n * Equivalent to the CloseIcon component from React implementation\n */\nexport function createCloseIcon(): SVGElement {\n const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n setAttributes(svg, {\n xmlns: \"http://www.w3.org/2000/svg\",\n width: \"24\",\n height: \"24\",\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n \"stroke-width\": \"2\",\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n class: \"lucide lucide-x\",\n });\n\n // Create the X paths\n const path1 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n setAttributes(path1, {\n d: \"M18 6 6 18\",\n });\n\n const path2 = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n setAttributes(path2, {\n d: \"m6 6 12 12\",\n });\n\n svg.appendChild(path1);\n svg.appendChild(path2);\n\n return svg;\n}\n\n/**\n * Creates a close button for modal iframes\n * Positioned absolutely in the top-right corner\n */\nexport function createCloseButton(onClose: () => void): HTMLButtonElement {\n const button = document.createElement(\"button\");\n setStyles(button, {\n position: \"absolute\",\n right: \"0.6rem\",\n top: \"0.6rem\",\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n border: \"none\",\n backgroundColor: \"transparent\",\n padding: \"0.25rem\",\n color: \"#9ca3af\",\n zIndex: \"100\",\n opacity: \"0\",\n transition: \"opacity 50ms ease\",\n });\n setAttributes(button, {\n type: \"button\",\n \"aria-label\": \"Close\",\n });\n\n // Add hover effect\n button.addEventListener(\"mouseenter\", () => {\n button.style.opacity = \"0.8\";\n });\n\n button.addEventListener(\"mouseleave\", () => {\n button.style.opacity = \"1\";\n });\n\n // Add the close icon\n const closeIcon = createCloseIcon();\n button.appendChild(closeIcon);\n\n // Add click handler\n button.addEventListener(\"click\", onClose);\n\n return button;\n}\n\n/**\n * Utility function to remove all civic auth loading styles from the document\n * Useful for cleanup\n */\nexport function cleanupLoadingStyles(): void {\n const shimmerStyle = document.querySelector(\"style[data-civic-shimmer]\");\n const skeletonStyle = document.querySelector(\"style[data-civic-skeleton]\");\n\n if (shimmerStyle) {\n shimmerStyle.remove();\n }\n\n if (skeletonStyle) {\n skeletonStyle.remove();\n }\n}\n"]}
|
|
@@ -7,7 +7,8 @@ interface BuildAuthUrlParams {
|
|
|
7
7
|
codeChallenge: string;
|
|
8
8
|
state: string;
|
|
9
9
|
prompt?: string;
|
|
10
|
+
nonce?: string;
|
|
10
11
|
}
|
|
11
|
-
export declare function buildAuthUrl({ endpoints, clientId, redirectUrl, scopes, codeChallenge, state, prompt, }: BuildAuthUrlParams): string;
|
|
12
|
+
export declare function buildAuthUrl({ endpoints, clientId, redirectUrl, scopes, codeChallenge, state, prompt, nonce, }: BuildAuthUrlParams): string;
|
|
12
13
|
export {};
|
|
13
14
|
//# sourceMappingURL=auth-utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auth-utils.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/utils/auth-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"auth-utils.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/utils/auth-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,UAAU,kBAAkB;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,MAAM,EACN,aAAa,EACb,KAAK,EACL,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,GAAG,MAAM,CAmB7B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function buildAuthUrl({ endpoints, clientId, redirectUrl, scopes, codeChallenge, state, prompt, }) {
|
|
1
|
+
export function buildAuthUrl({ endpoints, clientId, redirectUrl, scopes, codeChallenge, state, prompt, nonce, }) {
|
|
2
2
|
const authUrl = new URL(endpoints.auth);
|
|
3
3
|
authUrl.searchParams.append("client_id", clientId);
|
|
4
4
|
authUrl.searchParams.append("redirect_uri", redirectUrl);
|
|
@@ -7,8 +7,11 @@ export function buildAuthUrl({ endpoints, clientId, redirectUrl, scopes, codeCha
|
|
|
7
7
|
authUrl.searchParams.append("state", state);
|
|
8
8
|
authUrl.searchParams.append("code_challenge", codeChallenge);
|
|
9
9
|
authUrl.searchParams.append("code_challenge_method", "S256");
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
// Required by the auth server for offline_access scope
|
|
11
|
+
authUrl.searchParams.append("prompt", prompt || "consent");
|
|
12
|
+
if (nonce) {
|
|
13
|
+
// nonce isn't supported by oslo, so we add it manually
|
|
14
|
+
authUrl.searchParams.append("nonce", nonce);
|
|
12
15
|
}
|
|
13
16
|
return authUrl.toString();
|
|
14
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auth-utils.js","sourceRoot":"","sources":["../../../src/vanillajs/utils/auth-utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"auth-utils.js","sourceRoot":"","sources":["../../../src/vanillajs/utils/auth-utils.ts"],"names":[],"mappings":"AAaA,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,MAAM,EACN,aAAa,EACb,KAAK,EACL,MAAM,EACN,KAAK,GACc;IACnB,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IACrD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACvD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC5C,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;IAC7D,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;IAE7D,uDAAuD;IACvD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC;IAE3D,IAAI,KAAK,EAAE,CAAC;QACV,uDAAuD;QACvD,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC9C,CAAC;IAED,OAAO,OAAO,CAAC,QAAQ,EAAE,CAAC;AAC5B,CAAC","sourcesContent":["import type { Endpoints } from \"../../types.js\";\n\ninterface BuildAuthUrlParams {\n endpoints: Endpoints;\n clientId: string;\n redirectUrl: string;\n scopes: string[];\n codeChallenge: string;\n state: string;\n prompt?: string;\n nonce?: string;\n}\n\nexport function buildAuthUrl({\n endpoints,\n clientId,\n redirectUrl,\n scopes,\n codeChallenge,\n state,\n prompt,\n nonce,\n}: BuildAuthUrlParams): string {\n const authUrl = new URL(endpoints.auth);\n authUrl.searchParams.append(\"client_id\", clientId);\n authUrl.searchParams.append(\"redirect_uri\", redirectUrl);\n authUrl.searchParams.append(\"response_type\", \"code\");\n authUrl.searchParams.append(\"scope\", scopes.join(\" \"));\n authUrl.searchParams.append(\"state\", state);\n authUrl.searchParams.append(\"code_challenge\", codeChallenge);\n authUrl.searchParams.append(\"code_challenge_method\", \"S256\");\n\n // Required by the auth server for offline_access scope\n authUrl.searchParams.append(\"prompt\", prompt || \"consent\");\n\n if (nonce) {\n // nonce isn't supported by oslo, so we add it manually\n authUrl.searchParams.append(\"nonce\", nonce);\n }\n\n return authUrl.toString();\n}\n"]}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
interface ConfigureLoggingFunction {
|
|
2
|
+
(config: {
|
|
3
|
+
enabled: boolean;
|
|
4
|
+
namespace?: string;
|
|
5
|
+
level?: "debug" | "info" | "warn" | "error";
|
|
6
|
+
}): void;
|
|
7
|
+
originalLog: ((...args: unknown[]) => void) | null;
|
|
8
|
+
}
|
|
9
|
+
export declare const createLogger: (subNamespace: string) => {
|
|
10
|
+
debug: (message: string, ...args: unknown[]) => void;
|
|
11
|
+
info: (message: string, ...args: unknown[]) => void;
|
|
12
|
+
warn: (message: string, ...args: unknown[]) => void;
|
|
13
|
+
error: (message: string, ...args: unknown[]) => void;
|
|
10
14
|
};
|
|
11
|
-
export declare const
|
|
15
|
+
export declare const createMainLogger: (namespace?: string) => {
|
|
12
16
|
debug: (message: string, ...args: unknown[]) => void;
|
|
13
17
|
info: (message: string, ...args: unknown[]) => void;
|
|
14
18
|
warn: (message: string, ...args: unknown[]) => void;
|
|
15
19
|
error: (message: string, ...args: unknown[]) => void;
|
|
16
20
|
};
|
|
17
|
-
export declare const configureLogging:
|
|
18
|
-
enabled: boolean;
|
|
19
|
-
namespace?: string;
|
|
20
|
-
level?: "debug" | "info" | "warn" | "error";
|
|
21
|
-
}) => void;
|
|
21
|
+
export declare const configureLogging: ConfigureLoggingFunction;
|
|
22
22
|
export declare const setCurrentLogger: (logger: ReturnType<typeof createLogger>) => void;
|
|
23
23
|
export declare const getCurrentLogger: () => {
|
|
24
24
|
debug: (message: string, ...args: unknown[]) => void;
|
|
@@ -26,4 +26,5 @@ export declare const getCurrentLogger: () => {
|
|
|
26
26
|
warn: (message: string, ...args: unknown[]) => void;
|
|
27
27
|
error: (message: string, ...args: unknown[]) => void;
|
|
28
28
|
};
|
|
29
|
+
export {};
|
|
29
30
|
//# sourceMappingURL=logger.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/utils/logger.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/utils/logger.ts"],"names":[],"mappings":"AAGA,UAAU,wBAAwB;IAChC,CAAC,MAAM,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;KAC7C,GAAG,IAAI,CAAC;IACT,WAAW,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACpD;AAMD,eAAO,MAAM,YAAY,iBAAkB,MAAM;qBAK5B,MAAM,WAAW,OAAO,EAAE;oBAC3B,MAAM,WAAW,OAAO,EAAE;oBAC1B,MAAM,WAAW,OAAO,EAAE;qBACzB,MAAM,WAAW,OAAO,EAAE;CAE9C,CAAC;AAGF,eAAO,MAAM,gBAAgB,eAAe,MAAM;qBAI7B,MAAM,WAAW,OAAO,EAAE;oBAC3B,MAAM,WAAW,OAAO,EAAE;oBAC1B,MAAM,WAAW,OAAO,EAAE;qBACzB,MAAM,WAAW,OAAO,EAAE;CAE9C,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,wBA0C9B,CAAC;AASF,eAAO,MAAM,gBAAgB,WAAY,UAAU,CAAC,OAAO,YAAY,CAAC,SAEvE,CAAC;AAGF,eAAO,MAAM,gBAAgB;qBA5ER,MAAM,WAAW,OAAO,EAAE;oBAC3B,MAAM,WAAW,OAAO,EAAE;oBAC1B,MAAM,WAAW,OAAO,EAAE;qBACzB,MAAM,WAAW,OAAO,EAAE;CA+E9C,CAAC"}
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
import debug from "debug";
|
|
2
|
-
//
|
|
3
|
-
|
|
4
|
-
auth: debug("civic:auth"),
|
|
5
|
-
api: debug("civic:auth:api"),
|
|
6
|
-
storage: debug("civic:auth:storage"),
|
|
7
|
-
session: debug("civic:auth:session"),
|
|
8
|
-
events: debug("civic:auth:events"),
|
|
9
|
-
utils: debug("civic:auth:utils"),
|
|
10
|
-
iframe: debug("civic:auth:iframe"),
|
|
11
|
-
};
|
|
2
|
+
// Global variable to store the current namespace base
|
|
3
|
+
let currentNamespaceBase = "vanillajs";
|
|
12
4
|
// Helper function to create a logger with a specific namespace
|
|
13
|
-
export const createLogger = (
|
|
5
|
+
export const createLogger = (subNamespace) => {
|
|
6
|
+
// Create hierarchical namespace: civic:auth:{main}:{sub}
|
|
7
|
+
const fullNamespace = `civic:auth:${currentNamespaceBase}:${subNamespace}`;
|
|
8
|
+
const logger = debug(fullNamespace);
|
|
9
|
+
return {
|
|
10
|
+
debug: (message, ...args) => logger(message, ...args),
|
|
11
|
+
info: (message, ...args) => logger(message, ...args),
|
|
12
|
+
warn: (message, ...args) => logger(message, ...args),
|
|
13
|
+
error: (message, ...args) => logger(message, ...args),
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
// Helper function to create the main logger (for CivicAuth class)
|
|
17
|
+
export const createMainLogger = (namespace = "vanillajs") => {
|
|
18
|
+
currentNamespaceBase = namespace;
|
|
14
19
|
const logger = debug(`civic:auth:${namespace}`);
|
|
15
20
|
return {
|
|
16
21
|
debug: (message, ...args) => logger(message, ...args),
|
|
@@ -23,28 +28,39 @@ export const createLogger = (namespace) => {
|
|
|
23
28
|
export const configureLogging = (config) => {
|
|
24
29
|
if (typeof window === "undefined")
|
|
25
30
|
return;
|
|
31
|
+
// Store the original debug.log function if not already stored
|
|
32
|
+
if (!configureLogging.originalLog) {
|
|
33
|
+
configureLogging.originalLog = debug.log;
|
|
34
|
+
}
|
|
26
35
|
if (config.enabled) {
|
|
27
|
-
//
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
// DO NOT update currentNamespaceBase - it should always stay "vanillajs"
|
|
37
|
+
// The namespace property is ONLY for filtering, not for setting the base namespace
|
|
38
|
+
// Enable namespace pattern - if namespace provided, enable that namespace and all its sub-namespaces
|
|
39
|
+
const namespacePattern = config.namespace && config.namespace !== "*"
|
|
40
|
+
? `civic:auth:vanillajs:${config.namespace}*` // Filter to specific sub-namespace
|
|
41
|
+
: "civic:auth:vanillajs*"; // Enable all vanillajs namespaces
|
|
42
|
+
debug.enable(namespacePattern);
|
|
32
43
|
// Override debug's default log function to ensure it works in the browser
|
|
33
|
-
const originalLog = debug.log;
|
|
34
44
|
debug.log = (...args) => {
|
|
35
45
|
if (typeof console !== "undefined") {
|
|
36
46
|
console.log(...args);
|
|
37
47
|
}
|
|
38
|
-
if (originalLog) {
|
|
39
|
-
originalLog.apply(debug, args);
|
|
48
|
+
if (configureLogging.originalLog) {
|
|
49
|
+
configureLogging.originalLog.apply(debug, args);
|
|
40
50
|
}
|
|
41
51
|
};
|
|
42
52
|
}
|
|
43
53
|
else {
|
|
44
54
|
// Disable all debug logs
|
|
45
55
|
debug.disable();
|
|
56
|
+
// Restore the original debug.log function to prevent any logs from showing
|
|
57
|
+
if (configureLogging.originalLog) {
|
|
58
|
+
debug.log = configureLogging.originalLog;
|
|
59
|
+
}
|
|
46
60
|
}
|
|
47
61
|
};
|
|
62
|
+
// Store the original debug.log function as a property of configureLogging
|
|
63
|
+
configureLogging.originalLog = null;
|
|
48
64
|
// Global variable to store the current logger instance
|
|
49
65
|
let currentLogger = null;
|
|
50
66
|
// Function to set the current logger instance
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../../src/vanillajs/utils/logger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../../src/vanillajs/utils/logger.ts"],"names":[],"mappings":"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","sourcesContent":["import debug from \"debug\";\n\n// Type for the extended configureLogging function\ninterface ConfigureLoggingFunction {\n (config: {\n enabled: boolean;\n namespace?: string;\n level?: \"debug\" | \"info\" | \"warn\" | \"error\";\n }): void;\n originalLog: ((...args: unknown[]) => void) | null;\n}\n\n// Global variable to store the current namespace base\nlet currentNamespaceBase: string = \"vanillajs\";\n\n// Helper function to create a logger with a specific namespace\nexport const createLogger = (subNamespace: string) => {\n // Create hierarchical namespace: civic:auth:{main}:{sub}\n const fullNamespace = `civic:auth:${currentNamespaceBase}:${subNamespace}`;\n const logger = debug(fullNamespace);\n return {\n debug: (message: string, ...args: unknown[]) => logger(message, ...args),\n info: (message: string, ...args: unknown[]) => logger(message, ...args),\n warn: (message: string, ...args: unknown[]) => logger(message, ...args),\n error: (message: string, ...args: unknown[]) => logger(message, ...args),\n };\n};\n\n// Helper function to create the main logger (for CivicAuth class)\nexport const createMainLogger = (namespace: string = \"vanillajs\") => {\n currentNamespaceBase = namespace;\n const logger = debug(`civic:auth:${namespace}`);\n return {\n debug: (message: string, ...args: unknown[]) => logger(message, ...args),\n info: (message: string, ...args: unknown[]) => logger(message, ...args),\n warn: (message: string, ...args: unknown[]) => logger(message, ...args),\n error: (message: string, ...args: unknown[]) => logger(message, ...args),\n };\n};\n\n// Function to configure logging based on config\nexport const configureLogging: ConfigureLoggingFunction = (config: {\n enabled: boolean;\n namespace?: string;\n level?: \"debug\" | \"info\" | \"warn\" | \"error\";\n}) => {\n if (typeof window === \"undefined\") return;\n\n // Store the original debug.log function if not already stored\n if (!configureLogging.originalLog) {\n configureLogging.originalLog = debug.log;\n }\n\n if (config.enabled) {\n // DO NOT update currentNamespaceBase - it should always stay \"vanillajs\"\n // The namespace property is ONLY for filtering, not for setting the base namespace\n\n // Enable namespace pattern - if namespace provided, enable that namespace and all its sub-namespaces\n const namespacePattern =\n config.namespace && config.namespace !== \"*\"\n ? `civic:auth:vanillajs:${config.namespace}*` // Filter to specific sub-namespace\n : \"civic:auth:vanillajs*\"; // Enable all vanillajs namespaces\n\n debug.enable(namespacePattern);\n\n // Override debug's default log function to ensure it works in the browser\n debug.log = (...args: unknown[]) => {\n if (typeof console !== \"undefined\") {\n console.log(...args);\n }\n if (configureLogging.originalLog) {\n configureLogging.originalLog.apply(debug, args);\n }\n };\n } else {\n // Disable all debug logs\n debug.disable();\n\n // Restore the original debug.log function to prevent any logs from showing\n if (configureLogging.originalLog) {\n debug.log = configureLogging.originalLog;\n }\n }\n};\n\n// Store the original debug.log function as a property of configureLogging\nconfigureLogging.originalLog = null;\n\n// Global variable to store the current logger instance\nlet currentLogger: ReturnType<typeof createLogger> | null = null;\n\n// Function to set the current logger instance\nexport const setCurrentLogger = (logger: ReturnType<typeof createLogger>) => {\n currentLogger = logger;\n};\n\n// Function to get the current logger instance\nexport const getCurrentLogger = () => {\n if (!currentLogger) {\n // Create a default logger if none is set\n currentLogger = createLogger(\"default\");\n }\n return currentLogger;\n};\n"]}
|
package/package.json
CHANGED