- 90%
+ 90.38%
Statements
- 45/50
+ 47/52
- 55.88%
+ 50%
Branches
- 19/34
+ 20/40
@@ -44,9 +44,9 @@
All files FacebookLoginButton.tsx
- 88.09%
+ 88.37%
Lines
- 37/42
+ 38/43
@@ -276,7 +276,34 @@
All files FacebookLoginButton.tsx
211
212
213
-
2141x
+214
+215
+216
+217
+218
+219
+220
+221
+222
+223
+224
+225
+226
+227
+228
+229
+230
+231
+232 | 1x
+
+
+
+
+
+
+
+
+
@@ -376,6 +403,7 @@ All files FacebookLoginButton.tsx
6x
6x
6x
+6x
6x
@@ -481,6 +509,13 @@ All files FacebookLoginButton.tsx
+
+
+
+
+
+
+
6x
@@ -489,7 +524,8 @@ All files FacebookLoginButton.tsx
-1x | import React, { useEffect, useState } from 'react';
+1x
+ | import React, { useEffect, useState } from "react";
interface Theme {
backgroundColor: string;
@@ -497,18 +533,18 @@ All files FacebookLoginButton.tsx
hoverBackgroundColor: string;
}
-export interface FacebookLoginButtonProps {
+interface FacebookLoginButtonProps {
/**
* The shape of the button. Can be 'rectangular' or 'circle'.
* @default 'rectangular'
*/
- shape?: 'rectangular' | 'circle';
+ shape?: "rectangular" | "circle";
/**
* The text direction. Can be 'ltr' or 'rtl'.
* @default 'ltr'
*/
- direction?: 'ltr' | 'rtl';
+ direction?: "ltr" | "rtl";
/**
* Custom text to display on the button.
@@ -526,7 +562,7 @@ All files FacebookLoginButton.tsx
* Theme of the button. Choose from predefined themes or 'custom' to provide custom colors.
* @default 'blue'
*/
- theme?: 'blue' | 'dark' | 'light' | 'custom';
+ theme?: "blue" | "dark" | "light" | "custom";
/**
* Custom theme colors. Used only when theme is set to 'custom'.
@@ -536,7 +572,7 @@ All files FacebookLoginButton.tsx
/**
* Function to call on successful login.
*/
- onSuccess?: (response: fb.StatusResponse) => void;
+ onSuccess?: (response: StatusResponse) => void;
/**
* Function to call on login failure.
@@ -547,48 +583,58 @@ All files FacebookLoginButton.tsx
* Facebook App ID.
*/
appId: string;
+
+ /**
+ * Permissions to request during login.
+ * @default 'public_profile,email'
+ */
+ scope?: string;
}
-declare global {
- namespace fb {
- interface AuthResponse {
- accessToken: string;
- expiresIn: number;
- data_access_expiration_time: number;
- signedRequest: string;
- userID: string;
- }
+export interface AuthResponse {
+ accessToken: string;
+ expiresIn: number;
+ data_access_expiration_time: number;
+ signedRequest: string;
+ userID: string;
+}
- interface StatusResponse {
- status: 'connected' | 'not_authorized' | 'unknown';
- authResponse?: AuthResponse;
- }
+export interface StatusResponse {
+ status: "connected" | "not_authorized" | "unknown";
+ authResponse?: AuthResponse;
+}
- type LoginStatusCallback = (response: StatusResponse) => void;
+export type LoginStatusCallback = (response: StatusResponse) => void;
- interface FB {
- init: (params: { appId: string; cookie?: boolean; xfbml?: boolean; version: string }) => void;
- login: (callback: LoginStatusCallback, options?: { scope: string }) => void;
- getLoginStatus: (callback: LoginStatusCallback) => void;
- }
- }
+export interface FB {
+ init: (params: {
+ appId: string;
+ cookie?: boolean;
+ xfbml?: boolean;
+ version: string;
+ }) => void;
+ login: (callback: LoginStatusCallback, options?: { scope: string }) => void;
+ getLoginStatus: (callback: LoginStatusCallback) => void;
+}
+declare global {
interface Window {
fbAsyncInit?: () => void;
- FB?: fb.FB;
+ FB?: FB;
}
}
const FacebookLoginButton: React.FC<FacebookLoginButtonProps> = ({
- shape = 'rectangular',
- direction = 'ltr',
- text = 'Login with Facebook',
+ shape = "rectangular",
+ direction = "ltr",
+ text = "Login with Facebook",
style = {},
- theme = 'blue',
+ theme = "blue",
customTheme = {},
onSuccess,
onFail,
appId,
+ scope = "public_profile,email",
}) => {
const [sdkLoaded, setSdkLoaded] = useState(false);
@@ -596,21 +642,21 @@ All files FacebookLoginButton.tsx
// Load the Facebook SDK if it's not already loaded
if (!window.FB) {
window.fbAsyncInit = () => {
- (window as any).FB.init({
+ window.FB?.init({
appId: appId,
cookie: true,
xfbml: false,
- version: 'v20.0',
+ version: "v20.0",
});
setSdkLoaded(true);
};
// Load the SDK script
- const script = document.createElement('script');
- script.src = 'https://connect.facebook.net/en_US/sdk.js';
+ const script = document.createElement("script");
+ script.src = "https://connect.facebook.net/en_US/sdk.js";
script.async = true;
script.defer = true;
- script.crossOrigin = 'anonymous';
+ script.crossOrigin = "anonymous";
document.body.appendChild(script);
} else {
setSdkLoaded(true);
@@ -620,14 +666,14 @@ All files FacebookLoginButton.tsx
const handleClick = () => {
Iif (!sdkLoaded || !window.FB) {
Iif (onFail) {
- onFail(new Error('Facebook SDK not loaded.'));
+ onFail(new Error("Facebook SDK not loaded."));
}
return;
}
- (window as any).FB.login(
- (response: fb.StatusResponse) => {
- if (response.status === 'connected') {
+ window.FB.login(
+ (response: StatusResponse) => {
+ if (response.status === "connected") {
if (onSuccess) {
onSuccess(response);
}
@@ -637,45 +683,45 @@ All files FacebookLoginButton.tsx
}
}
},
- { scope: 'public_profile,email' }
+ { scope },
);
};
const shapeClasses: Record<string, string> = {
- rectangular: 'rounded-md',
- circle: 'rounded-full !p-2',
+ rectangular: "rounded-md",
+ circle: "rounded-full !p-2",
};
const defaultThemes: Record<string, Theme> = {
blue: {
- backgroundColor: 'bg-blue-600',
- textColor: 'text-white',
- hoverBackgroundColor: 'hover:bg-blue-700',
+ backgroundColor: "bg-blue-600",
+ textColor: "text-white",
+ hoverBackgroundColor: "hover:bg-blue-700",
},
dark: {
- backgroundColor: 'bg-gray-800',
- textColor: 'text-white',
- hoverBackgroundColor: 'hover:bg-gray-900',
+ backgroundColor: "bg-gray-800",
+ textColor: "text-white",
+ hoverBackgroundColor: "hover:bg-gray-900",
},
light: {
- backgroundColor: 'bg-white',
- textColor: 'text-gray-800',
- hoverBackgroundColor: 'hover:bg-gray-100',
+ backgroundColor: "bg-white",
+ textColor: "text-gray-800",
+ hoverBackgroundColor: "hover:bg-gray-100",
},
};
const currentTheme: Theme =
- theme === 'custom'
+ theme === "custom"
? {
- backgroundColor: customTheme.backgroundColor || '',
- textColor: customTheme.textColor || '',
- hoverBackgroundColor: customTheme.hoverBackgroundColor || '',
+ backgroundColor: customTheme.backgroundColor || "",
+ textColor: customTheme.textColor || "",
+ hoverBackgroundColor: customTheme.hoverBackgroundColor || "",
}
: defaultThemes[theme];
const buttonClasses = `
flex items-center justify-center
- ${direction === 'rtl' ? 'flex-row-reverse' : ''}
+ ${direction === "rtl" ? "flex-row-reverse" : ""}
${shapeClasses[shape]}
${currentTheme.backgroundColor}
${currentTheme.textColor}
@@ -684,7 +730,14 @@ All files FacebookLoginButton.tsx
`;
const icon = (
- <svg width="36" height="36" viewBox="0 0 48 48" version="1.1" id="Shopicons" fill="currentColor" >
+ <svg
+ width="36"
+ height="36"
+ viewBox="0 0 48 48"
+ version="1.1"
+ id="Shopicons"
+ fill="currentColor"
+ >
<g id="SVGRepo_iconCarrier">
<g id="facebook">
<path d="M0 0h48v48H0V0z" fill="none" />
@@ -697,19 +750,20 @@ All files FacebookLoginButton.tsx
return (
<button onClick={handleClick} className={buttonClasses} style={style}>
{icon}
- {shape !== 'circle' && <span className="mx-2">{text}</span>}
+ {shape !== "circle" && <span className="mx-2">{text}</span>}
</button>
);
};
-export default FacebookLoginButton; |
+export default FacebookLoginButton;
+