@civic/auth 0.11.7 → 0.11.8-beta.0
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/CHANGELOG.md +7 -0
- package/dist/reactjs/components/SignOutButton.d.ts.map +1 -1
- package/dist/reactjs/components/SignOutButton.js +6 -1
- package/dist/reactjs/components/SignOutButton.js.map +1 -1
- package/dist/reactjs/components/UserButton.d.ts.map +1 -1
- package/dist/reactjs/components/UserButton.js +21 -6
- package/dist/reactjs/components/UserButton.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/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# 0.11.8 - Comprehensive loading states and UX improvements
|
|
2
|
+
- Added loading states to all auth buttons (SignInButton, SignOutButton, UserButton) with consistent visual feedback
|
|
3
|
+
- Fixed logout flickering by showing "Logging out..." state and preventing premature transition to "Log in"
|
|
4
|
+
- Fixed initial page load flicker by properly handling AUTHENTICATING and isLoading states
|
|
5
|
+
- Added visual indicators during loading: "Loading...", "Logging in...", "Logging out..." text with reduced opacity and wait cursor
|
|
6
|
+
- Disabled buttons during auth transitions to prevent multiple clicks
|
|
7
|
+
|
|
1
8
|
# 0.11.7 - Add loading states to SignInButton
|
|
2
9
|
- Added visual feedback and disabled state to SignInButton during auth initialization, showing "Loading..." text and reduced opacity to prevent clicks before the auth system is ready
|
|
3
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignOutButton.d.ts","sourceRoot":"","sources":["../../../src/reactjs/components/SignOutButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACnC;AAED,QAAA,MAAM,aAAa,oDAMhB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"SignOutButton.d.ts","sourceRoot":"","sources":["../../../src/reactjs/components/SignOutButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACnC;AAED,QAAA,MAAM,aAAa,oDAMhB,kBAAkB,qDAsEpB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -39,13 +39,18 @@ const SignOutButton = ({ className, style, onSignOut, config, theme = "auto", })
|
|
|
39
39
|
onSignOut?.({ error: error });
|
|
40
40
|
}
|
|
41
41
|
}, [signOut, onSignOut, config]);
|
|
42
|
+
const isSigningOut = authStatus === AuthStatus.SIGNING_OUT;
|
|
42
43
|
return (_jsx(CivicWrapper, { theme: theme, children: _jsx(Button, { css: {
|
|
43
44
|
justifyContent: "center",
|
|
45
|
+
cursor: isSigningOut ? "wait" : "pointer",
|
|
46
|
+
opacity: isSigningOut && userActionStarted ? 0.6 : 1,
|
|
44
47
|
}, className: className, style: style, onClick: () => {
|
|
48
|
+
if (isSigningOut)
|
|
49
|
+
return;
|
|
45
50
|
setUserActionStarted(true);
|
|
46
51
|
!shouldShowLoader(authStatus, effectiveDisplayMode) &&
|
|
47
52
|
handleSignOut();
|
|
48
|
-
}, children: _jsx(ButtonContentOrLoader, { authStatus: authStatus, displayMode: effectiveDisplayMode, userActionStarted: userActionStarted, children: "Log out" }) }) }));
|
|
53
|
+
}, children: _jsx(ButtonContentOrLoader, { authStatus: authStatus, displayMode: effectiveDisplayMode, userActionStarted: userActionStarted, children: isSigningOut ? "Logging out..." : "Log out" }) }) }));
|
|
49
54
|
};
|
|
50
55
|
export { SignOutButton };
|
|
51
56
|
//# sourceMappingURL=SignOutButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignOutButton.js","sourceRoot":"","sources":["../../../src/reactjs/components/SignOutButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAsB,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAqB,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjD,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,KAAK,EACL,SAAS,EACT,MAAM,EACN,KAAK,GAAG,MAAM,GACK,EAAE,EAAE;IACvB,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC;IACvD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,gCAAgC;IAChC,iBAAiB,CACf,WAAW,CAAC,GAAG,EAAE;QACf,8BAA8B;QAC9B,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAE5B,0BAA0B;QAC1B,MAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,EAAE,CAAC;QACpD,WAAW,EAAE,cAAc,EAAE,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,IACE,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC,QAAQ,CAC7D,UAAU,CACX,EACD,CAAC;YACD,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,2CAA2C;IAC3C,MAAM,oBAAoB,GAAG,WAAW,IAAI,QAAQ,CAAC;IAErD,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC3C,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC;YACH,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;YACtB,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,iCAAiC,EAAE,KAAK,CAAC,CAAC;YACxD,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,KAAc,EAAE,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEjC,OAAO,CACL,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,YACxB,KAAC,MAAM,IACL,GAAG,EAAE;gBACH,cAAc,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"SignOutButton.js","sourceRoot":"","sources":["../../../src/reactjs/components/SignOutButton.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useState, type CSSProperties } from \"react\";\nimport { useUser, type SignInConfig } from \"@/reactjs/hooks/useUser.js\";\nimport { ButtonContentOrLoader } from \"./ButtonContentOrLoader.js\";\nimport { AuthStatus } from \"@/types.js\";\nimport { shouldShowLoader } from \"./utils.js\";\nimport { useBfcacheHandler } from \"@/shared/hooks/useBfcacheHandler.js\";\nimport { GlobalAuthManager } from \"@/reactjs/core/GlobalAuthManager.js\";\nimport { Button } from \"./Button.js\";\nimport { CivicWrapper } from \"./CivicWrapper.js\";\nimport type { OnSignOutResponse } from \"@/vanillajs/index.js\";\n\ninterface SignOutButtonProps {\n className?: string;\n style?: CSSProperties;\n onSignOut?: (response: OnSignOutResponse) => void | Promise<void>;\n config?: SignInConfig;\n theme?: \"light\" | \"dark\" | \"auto\";\n}\n\nconst SignOutButton = ({\n className,\n style,\n onSignOut,\n config,\n theme = \"auto\",\n}: SignOutButtonProps) => {\n const { signOut, authStatus, displayMode } = useUser();\n const [userActionStarted, setUserActionStarted] = useState(false);\n\n // Handle bfcache restore events\n useBfcacheHandler(\n useCallback(() => {\n // Reset local component state\n setUserActionStarted(false);\n\n // Reset global auth state\n const authManager = GlobalAuthManager.getInstance();\n authManager?.resetOnBfcache();\n }, []),\n );\n\n // reset the userActionStarted state if the user logs out or aborts\n useEffect(() => {\n if (\n [AuthStatus.AUTHENTICATED, AuthStatus.UNAUTHENTICATED].includes(\n authStatus,\n )\n ) {\n setUserActionStarted(false);\n }\n }, [authStatus]);\n\n // Provide default displayMode if undefined\n const effectiveDisplayMode = displayMode || \"iframe\";\n\n const handleSignOut = useCallback(async () => {\n setUserActionStarted(true);\n try {\n await signOut(config);\n onSignOut?.({});\n } catch (error) {\n console.error(\"[SignOutButton] Sign out error:\", error);\n onSignOut?.({ error: error as Error });\n }\n }, [signOut, onSignOut, config]);\n\n const isSigningOut = authStatus === AuthStatus.SIGNING_OUT;\n\n return (\n <CivicWrapper theme={theme}>\n <Button\n css={{\n justifyContent: \"center\",\n cursor: isSigningOut ? \"wait\" : \"pointer\",\n opacity: isSigningOut && userActionStarted ? 0.6 : 1,\n }}\n className={className}\n style={style}\n onClick={() => {\n if (isSigningOut) return;\n setUserActionStarted(true);\n !shouldShowLoader(authStatus, effectiveDisplayMode) &&\n handleSignOut();\n }}\n >\n <ButtonContentOrLoader\n authStatus={authStatus}\n displayMode={effectiveDisplayMode}\n userActionStarted={userActionStarted}\n >\n {isSigningOut ? \"Logging out...\" : \"Log out\"}\n </ButtonContentOrLoader>\n </Button>\n </CivicWrapper>\n );\n};\n\nexport { SignOutButton };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserButton.d.ts","sourceRoot":"","sources":["../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAc,EAKZ,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA6ChF,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,mBAAmB,CAAC,EAAE,aAAa,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACnC;AAED,QAAA,MAAM,UAAU,4IAab,eAAe,
|
|
1
|
+
{"version":3,"file":"UserButton.d.ts","sourceRoot":"","sources":["../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAc,EAKZ,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA6ChF,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,mBAAmB,CAAC,EAAE,aAAa,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACnC;AAED,QAAA,MAAM,UAAU,4IAab,eAAe,qDAuPjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -21,7 +21,7 @@ const UserButton = ({ className, wrapperClassName, dropdownButtonClassName, styl
|
|
|
21
21
|
}, theme = "auto", }) => {
|
|
22
22
|
const [isOpen, setIsOpen] = useState(false);
|
|
23
23
|
const [buttonWidth, setButtonWidth] = useState(null);
|
|
24
|
-
const { user, signOut, authStatus, displayMode } = useUser();
|
|
24
|
+
const { user, signOut, authStatus, displayMode, isLoading } = useUser();
|
|
25
25
|
const buttonRef = useRef(null);
|
|
26
26
|
const dropdownRef = useRef(null);
|
|
27
27
|
const [userActionStarted, setUserActionStarted] = useState(false);
|
|
@@ -87,16 +87,26 @@ const UserButton = ({ className, wrapperClassName, dropdownButtonClassName, styl
|
|
|
87
87
|
window.removeEventListener("keydown", handleEscape);
|
|
88
88
|
};
|
|
89
89
|
}, [handleClickOutside, handleEscape, isOpen]);
|
|
90
|
-
if
|
|
90
|
+
// Show the user button if user is present OR if we're in a transitional auth state
|
|
91
|
+
// (to prevent flickering to "Log in" during logout or initial auth check)
|
|
92
|
+
if (user ||
|
|
93
|
+
authStatus === AuthStatus.SIGNING_OUT ||
|
|
94
|
+
authStatus === AuthStatus.AUTHENTICATING ||
|
|
95
|
+
isLoading) {
|
|
91
96
|
return (_jsxs(CivicWrapper, { css: { position: "relative", width: "auto" }, className: wrapperClassName, style: wrapperStyle, id: "civic-dropdown-container", theme: theme, children: [_jsx(Button, { ref: buttonRef, css: {
|
|
92
|
-
cursor: isAuthenticating
|
|
97
|
+
cursor: isAuthenticating ||
|
|
98
|
+
authStatus === AuthStatus.SIGNING_OUT ||
|
|
99
|
+
(isLoading && !user)
|
|
100
|
+
? "wait"
|
|
101
|
+
: "pointer",
|
|
93
102
|
minWidth: "10rem",
|
|
94
103
|
alignItems: "center",
|
|
95
104
|
paddingRight: "0.75rem",
|
|
96
105
|
}, className: className, style: style, onClick: () => {
|
|
106
|
+
if (authStatus === AuthStatus.SIGNING_OUT || (isLoading && !user))
|
|
107
|
+
return;
|
|
97
108
|
setUserActionStarted(true);
|
|
98
|
-
|
|
99
|
-
setIsOpen((isOpen) => !isOpen);
|
|
109
|
+
setIsOpen((isOpen) => !isOpen);
|
|
100
110
|
}, children: _jsxs(_Fragment, { children: [user?.picture ? (_jsx("span", { css: {
|
|
101
111
|
position: "relative",
|
|
102
112
|
display: "flex",
|
|
@@ -110,7 +120,12 @@ const UserButton = ({ className, wrapperClassName, dropdownButtonClassName, styl
|
|
|
110
120
|
height: "100%",
|
|
111
121
|
width: "100%",
|
|
112
122
|
objectFit: "cover",
|
|
113
|
-
}, src: user.picture, alt: user?.name || user?.email }) })) : (_jsx("span", { css: { display: "block" } })), _jsx(ButtonContentOrLoader, { authStatus: authStatus, displayMode: effectiveDisplayMode, userActionStarted: userActionStarted, children:
|
|
123
|
+
}, src: user.picture, alt: user?.name || user?.email }) })) : (_jsx("span", { css: { display: "block" } })), _jsx(ButtonContentOrLoader, { authStatus: authStatus, displayMode: effectiveDisplayMode, userActionStarted: userActionStarted, children: authStatus === AuthStatus.SIGNING_OUT
|
|
124
|
+
? "Logging out..."
|
|
125
|
+
: (authStatus === AuthStatus.AUTHENTICATING || isLoading) &&
|
|
126
|
+
!user
|
|
127
|
+
? "Loading..."
|
|
128
|
+
: user?.name || user?.email }), _jsx("span", { css: {
|
|
114
129
|
display: "block",
|
|
115
130
|
pointerEvents: "none",
|
|
116
131
|
visibility: shouldShowLoader(authStatus, effectiveDisplayMode)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserButton.js","sourceRoot":"","sources":["../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { useUser, type SignInConfig } from \"@/reactjs/hooks/useUser.js\";\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n} from \"react\";\nimport { ButtonContentOrLoader } from \"./ButtonContentOrLoader.js\";\nimport { AuthStatus } from \"@/types.js\";\nimport { shouldShowLoader } from \"./utils.js\";\nimport { useBfcacheHandler } from \"@/shared/hooks/useBfcacheHandler.js\";\nimport { GlobalAuthManager } from \"@/reactjs/core/GlobalAuthManager.js\";\nimport type { OnSignInResponse, OnSignOutResponse } from \"@/vanillajs/index.js\";\nimport { CivicWrapper } from \"./CivicWrapper.js\";\nimport { Button } from \"./Button.js\";\nimport { SignInButton } from \"./SignInButton.js\";\n\nconst ChevronDown = () => (\n <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 strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-down\"\n css={{\n stroke: \"var(--icon-secondary)\",\n }}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n);\n\nconst ChevronUp = () => (\n <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 strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-up\"\n css={{\n stroke: \"var(--icon-secondary)\",\n }}\n >\n <path d=\"m18 15-6-6-6 6\" />\n </svg>\n);\n\ninterface UserButtonProps {\n className?: string;\n wrapperClassName?: string;\n dropdownButtonClassName?: string;\n style?: CSSProperties;\n wrapperStyle?: CSSProperties;\n dropdownButtonStyle?: CSSProperties;\n onSignIn?: (response: OnSignInResponse) => void | Promise<void>;\n onSignOut?: (response: OnSignOutResponse) => void | Promise<void>;\n loginUrl?: string;\n config?: SignInConfig;\n theme?: \"light\" | \"dark\" | \"auto\";\n}\n\nconst UserButton = ({\n className,\n wrapperClassName,\n dropdownButtonClassName,\n style,\n wrapperStyle,\n dropdownButtonStyle,\n onSignIn,\n onSignOut,\n config = {\n displayMode: \"iframe\",\n },\n theme = \"auto\",\n}: UserButtonProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [buttonWidth, setButtonWidth] = useState<number | null>(null);\n const { user, signOut, authStatus, displayMode } = useUser();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const [userActionStarted, setUserActionStarted] = useState(false);\n const [isAuthenticating, setIsAuthenticating] = useState(false);\n\n // Provide default displayMode if undefined\n const effectiveDisplayMode = displayMode || \"iframe\";\n\n // Handle bfcache restore events\n useBfcacheHandler(\n useCallback(() => {\n // Reset local component state\n setUserActionStarted(false);\n setIsAuthenticating(false);\n setIsOpen(false);\n\n // Reset global auth state\n const authManager = GlobalAuthManager.getInstance();\n authManager?.resetOnBfcache();\n }, []),\n );\n\n useEffect(() => {\n if (\n [AuthStatus.AUTHENTICATED, AuthStatus.UNAUTHENTICATED].includes(\n authStatus,\n )\n ) {\n setUserActionStarted(false);\n }\n }, [authStatus]);\n\n useEffect(() => {\n if (buttonRef.current) {\n setButtonWidth(buttonRef.current.offsetWidth);\n }\n }, [isOpen]);\n\n const handleClickOutside = useCallback((event: MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (\n buttonRef.current &&\n dropdownRef.current &&\n !buttonRef.current.contains(target) &&\n !dropdownRef.current.contains(target)\n ) {\n setIsOpen(false);\n }\n }, []);\n\n const handleSignOut = useCallback(async () => {\n setIsOpen(false);\n try {\n await signOut(config);\n onSignOut?.({});\n } catch (error) {\n console.error(\"[UserButton] Sign out error:\", error);\n onSignOut?.({ error: error as Error });\n }\n }, [signOut, onSignOut, config]);\n\n const handleCloseDropdown = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleEscape = useCallback((event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n setIsAuthenticating(false);\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener(\"click\", handleClickOutside);\n\n window.addEventListener(\"keydown\", handleEscape);\n }\n\n return () => {\n window.removeEventListener(\"click\", handleClickOutside);\n\n window.removeEventListener(\"keydown\", handleEscape);\n };\n }, [handleClickOutside, handleEscape, isOpen]);\n\n if (user) {\n return (\n <CivicWrapper\n css={{ position: \"relative\", width: \"auto\" }}\n className={wrapperClassName}\n style={wrapperStyle}\n id=\"civic-dropdown-container\"\n theme={theme}\n >\n <Button\n ref={buttonRef}\n css={{\n cursor: isAuthenticating ? \"wait\" : \"pointer\",\n minWidth: \"10rem\",\n alignItems: \"center\",\n paddingRight: \"0.75rem\",\n }}\n className={className}\n style={style}\n onClick={() => {\n setUserActionStarted(true);\n authStatus !== AuthStatus.SIGNING_OUT &&\n setIsOpen((isOpen) => !isOpen);\n }}\n >\n <>\n {user?.picture ? (\n <span\n css={{\n position: \"relative\",\n display: \"flex\",\n height: \"30px\",\n width: \"30px\",\n flexShrink: 0,\n overflow: \"hidden\",\n borderRadius: \"9999px\",\n margin: \"1px\",\n }}\n >\n <img\n css={{\n height: \"100%\",\n width: \"100%\",\n objectFit: \"cover\",\n }}\n src={user.picture}\n alt={user?.name || user?.email}\n />\n </span>\n ) : (\n <span css={{ display: \"block\" }} />\n )}\n\n <ButtonContentOrLoader\n authStatus={authStatus}\n displayMode={effectiveDisplayMode}\n userActionStarted={userActionStarted}\n >\n {user?.name || user?.email}\n </ButtonContentOrLoader>\n <span\n css={{\n display: \"block\",\n pointerEvents: \"none\",\n visibility: shouldShowLoader(authStatus, effectiveDisplayMode)\n ? \"hidden\"\n : \"visible\",\n }}\n >\n {isOpen ? <ChevronUp /> : <ChevronDown />}\n </span>\n </>\n </Button>\n <div\n ref={dropdownRef}\n css={\n isOpen\n ? {\n position: \"absolute\",\n left: 0,\n background: \"transparent\",\n width: buttonWidth || \"auto\",\n marginTop: \"4px\",\n borderRadius: \"9999px\",\n boxShadow:\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n zIndex: 1000,\n }\n : { display: \"none\" }\n }\n >\n <ul css={{ listStyleType: \"none\", margin: 0, padding: 0 }}>\n <li>\n <Button\n css={{\n display: \"block\",\n width: \"100%\",\n height: \"34px\",\n color: \"var(--text-paragraph)\",\n backgroundColor: \"var(--background-tertiary)\",\n \"&:hover\": {\n backgroundColor: \"var(--background-neutral)\",\n },\n }}\n className={dropdownButtonClassName}\n style={dropdownButtonStyle}\n onClick={() => {\n setUserActionStarted(true);\n !shouldShowLoader(authStatus, effectiveDisplayMode) &&\n handleSignOut();\n }}\n >\n Log out\n </Button>\n </li>\n </ul>\n </div>\n </CivicWrapper>\n );\n }\n\n return (\n <SignInButton\n className={className}\n style={style}\n onSignIn={(response) => {\n handleCloseDropdown();\n onSignIn?.(response);\n }}\n config={config}\n theme={theme}\n displayMode={effectiveDisplayMode}\n userActionStarted={userActionStarted}\n setUserActionStarted={setUserActionStarted}\n isAuthenticating={isAuthenticating}\n setIsAuthenticating={setIsAuthenticating}\n />\n );\n};\n\nexport { UserButton };\n"]}
|
|
1
|
+
{"version":3,"file":"UserButton.js","sourceRoot":"","sources":["../../../src/reactjs/components/UserButton.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { useUser, type SignInConfig } from \"@/reactjs/hooks/useUser.js\";\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n} from \"react\";\nimport { ButtonContentOrLoader } from \"./ButtonContentOrLoader.js\";\nimport { AuthStatus } from \"@/types.js\";\nimport { shouldShowLoader } from \"./utils.js\";\nimport { useBfcacheHandler } from \"@/shared/hooks/useBfcacheHandler.js\";\nimport { GlobalAuthManager } from \"@/reactjs/core/GlobalAuthManager.js\";\nimport type { OnSignInResponse, OnSignOutResponse } from \"@/vanillajs/index.js\";\nimport { CivicWrapper } from \"./CivicWrapper.js\";\nimport { Button } from \"./Button.js\";\nimport { SignInButton } from \"./SignInButton.js\";\n\nconst ChevronDown = () => (\n <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 strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-down\"\n css={{\n stroke: \"var(--icon-secondary)\",\n }}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n);\n\nconst ChevronUp = () => (\n <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 strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"lucide lucide-chevron-up\"\n css={{\n stroke: \"var(--icon-secondary)\",\n }}\n >\n <path d=\"m18 15-6-6-6 6\" />\n </svg>\n);\n\ninterface UserButtonProps {\n className?: string;\n wrapperClassName?: string;\n dropdownButtonClassName?: string;\n style?: CSSProperties;\n wrapperStyle?: CSSProperties;\n dropdownButtonStyle?: CSSProperties;\n onSignIn?: (response: OnSignInResponse) => void | Promise<void>;\n onSignOut?: (response: OnSignOutResponse) => void | Promise<void>;\n loginUrl?: string;\n config?: SignInConfig;\n theme?: \"light\" | \"dark\" | \"auto\";\n}\n\nconst UserButton = ({\n className,\n wrapperClassName,\n dropdownButtonClassName,\n style,\n wrapperStyle,\n dropdownButtonStyle,\n onSignIn,\n onSignOut,\n config = {\n displayMode: \"iframe\",\n },\n theme = \"auto\",\n}: UserButtonProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [buttonWidth, setButtonWidth] = useState<number | null>(null);\n const { user, signOut, authStatus, displayMode, isLoading } = useUser();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const [userActionStarted, setUserActionStarted] = useState(false);\n const [isAuthenticating, setIsAuthenticating] = useState(false);\n\n // Provide default displayMode if undefined\n const effectiveDisplayMode = displayMode || \"iframe\";\n\n // Handle bfcache restore events\n useBfcacheHandler(\n useCallback(() => {\n // Reset local component state\n setUserActionStarted(false);\n setIsAuthenticating(false);\n setIsOpen(false);\n\n // Reset global auth state\n const authManager = GlobalAuthManager.getInstance();\n authManager?.resetOnBfcache();\n }, []),\n );\n\n useEffect(() => {\n if (\n [AuthStatus.AUTHENTICATED, AuthStatus.UNAUTHENTICATED].includes(\n authStatus,\n )\n ) {\n setUserActionStarted(false);\n }\n }, [authStatus]);\n\n useEffect(() => {\n if (buttonRef.current) {\n setButtonWidth(buttonRef.current.offsetWidth);\n }\n }, [isOpen]);\n\n const handleClickOutside = useCallback((event: MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (\n buttonRef.current &&\n dropdownRef.current &&\n !buttonRef.current.contains(target) &&\n !dropdownRef.current.contains(target)\n ) {\n setIsOpen(false);\n }\n }, []);\n\n const handleSignOut = useCallback(async () => {\n setIsOpen(false);\n try {\n await signOut(config);\n onSignOut?.({});\n } catch (error) {\n console.error(\"[UserButton] Sign out error:\", error);\n onSignOut?.({ error: error as Error });\n }\n }, [signOut, onSignOut, config]);\n\n const handleCloseDropdown = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleEscape = useCallback((event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsOpen(false);\n setIsAuthenticating(false);\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener(\"click\", handleClickOutside);\n\n window.addEventListener(\"keydown\", handleEscape);\n }\n\n return () => {\n window.removeEventListener(\"click\", handleClickOutside);\n\n window.removeEventListener(\"keydown\", handleEscape);\n };\n }, [handleClickOutside, handleEscape, isOpen]);\n\n // Show the user button if user is present OR if we're in a transitional auth state\n // (to prevent flickering to \"Log in\" during logout or initial auth check)\n if (\n user ||\n authStatus === AuthStatus.SIGNING_OUT ||\n authStatus === AuthStatus.AUTHENTICATING ||\n isLoading\n ) {\n return (\n <CivicWrapper\n css={{ position: \"relative\", width: \"auto\" }}\n className={wrapperClassName}\n style={wrapperStyle}\n id=\"civic-dropdown-container\"\n theme={theme}\n >\n <Button\n ref={buttonRef}\n css={{\n cursor:\n isAuthenticating ||\n authStatus === AuthStatus.SIGNING_OUT ||\n (isLoading && !user)\n ? \"wait\"\n : \"pointer\",\n minWidth: \"10rem\",\n alignItems: \"center\",\n paddingRight: \"0.75rem\",\n }}\n className={className}\n style={style}\n onClick={() => {\n if (authStatus === AuthStatus.SIGNING_OUT || (isLoading && !user))\n return;\n setUserActionStarted(true);\n setIsOpen((isOpen) => !isOpen);\n }}\n >\n <>\n {user?.picture ? (\n <span\n css={{\n position: \"relative\",\n display: \"flex\",\n height: \"30px\",\n width: \"30px\",\n flexShrink: 0,\n overflow: \"hidden\",\n borderRadius: \"9999px\",\n margin: \"1px\",\n }}\n >\n <img\n css={{\n height: \"100%\",\n width: \"100%\",\n objectFit: \"cover\",\n }}\n src={user.picture}\n alt={user?.name || user?.email}\n />\n </span>\n ) : (\n <span css={{ display: \"block\" }} />\n )}\n\n <ButtonContentOrLoader\n authStatus={authStatus}\n displayMode={effectiveDisplayMode}\n userActionStarted={userActionStarted}\n >\n {authStatus === AuthStatus.SIGNING_OUT\n ? \"Logging out...\"\n : (authStatus === AuthStatus.AUTHENTICATING || isLoading) &&\n !user\n ? \"Loading...\"\n : user?.name || user?.email}\n </ButtonContentOrLoader>\n <span\n css={{\n display: \"block\",\n pointerEvents: \"none\",\n visibility: shouldShowLoader(authStatus, effectiveDisplayMode)\n ? \"hidden\"\n : \"visible\",\n }}\n >\n {isOpen ? <ChevronUp /> : <ChevronDown />}\n </span>\n </>\n </Button>\n <div\n ref={dropdownRef}\n css={\n isOpen\n ? {\n position: \"absolute\",\n left: 0,\n background: \"transparent\",\n width: buttonWidth || \"auto\",\n marginTop: \"4px\",\n borderRadius: \"9999px\",\n boxShadow:\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n zIndex: 1000,\n }\n : { display: \"none\" }\n }\n >\n <ul css={{ listStyleType: \"none\", margin: 0, padding: 0 }}>\n <li>\n <Button\n css={{\n display: \"block\",\n width: \"100%\",\n height: \"34px\",\n color: \"var(--text-paragraph)\",\n backgroundColor: \"var(--background-tertiary)\",\n \"&:hover\": {\n backgroundColor: \"var(--background-neutral)\",\n },\n }}\n className={dropdownButtonClassName}\n style={dropdownButtonStyle}\n onClick={() => {\n setUserActionStarted(true);\n !shouldShowLoader(authStatus, effectiveDisplayMode) &&\n handleSignOut();\n }}\n >\n Log out\n </Button>\n </li>\n </ul>\n </div>\n </CivicWrapper>\n );\n }\n\n return (\n <SignInButton\n className={className}\n style={style}\n onSignIn={(response) => {\n handleCloseDropdown();\n onSignIn?.(response);\n }}\n config={config}\n theme={theme}\n displayMode={effectiveDisplayMode}\n userActionStarted={userActionStarted}\n setUserActionStarted={setUserActionStarted}\n isAuthenticating={isAuthenticating}\n setIsAuthenticating={setIsAuthenticating}\n />\n );\n};\n\nexport { UserButton };\n"]}
|
package/dist/shared/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const VERSION = "@civic/auth:0.11.
|
|
1
|
+
export declare const VERSION = "@civic/auth:0.11.8-beta.0";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/shared/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/shared/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,8BAA8B,CAAC"}
|
package/dist/shared/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/shared/version.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAE/C,MAAM,CAAC,MAAM,OAAO,GAAG,
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/shared/version.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAE/C,MAAM,CAAC,MAAM,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// This is an auto-generated file. Do not edit.\n\nexport const VERSION = \"@civic/auth:0.11.8-beta.0\";\n"]}
|